我们一起学ReactNative(三)：JavaScript语法基础

要编写一个React Native要涉及到的语言基础还是挺多的。不像之前学习Android开发，只要会Java就可以了。发现前端的项目，都是各种语言混合在一起使用的，React Native估计也类似，还是乖乖把基础语法大概过一下吧。
第一个语言基础，就是JavaScript以及新特性ES6的基础学习。

JavaScript语法

网上搜索一下，参考各路大神的推荐，可惜动不动就推荐入门者看犀牛书，红宝书这些，看页数先暂时放下吧！毕竟才刚刚入门，而且我们目标是先写一个React Native应用。
比较之后，选择《JavaScript DOM编程艺术》，很薄的一本书籍，熟悉语法的同时，也熟悉一下DOM编程的思路，不过只是看了前几章。
然后，直接在W3c或者廖雪峰的JavaScript教程熟悉一下语法。

JavaScript经典书籍及资料

1. JavaScript权威指南（犀牛书）
2. JavaScript高级程序设计（红宝书）
3. JavaScript语言精粹（蝴蝶书）
4. JavaScript DOM编程艺术（第二版）
5. W3school JavaScript
6. 廖雪峰 JavaScript教程
7. ECMAScript 6 入门

DOM

什么是DOM

DOM的定义：一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式。

简单来说，通过DOM，你就可以用HTML标记一个页面元素，然后，通过CSS为这个页面元素定义位置样式，然后，可以用JavaScript改变它的位置。但是，CSS或者JavaScript怎样去找到HTML写的这个元素呢？就是通过DOM。

感觉有点类似Android开发中，UI的控件添加一个id属性，然后，在Java中，就可以通过findViewById()获取到该控件，然后对该控件进行修改。

基本语法

加载JavaScript语法

<script>
    // 在这个定义内写Js代码
</script>
// 在Js的代码写在一个单独文件，直接引用
<script src="js文件相对路径"></script>

打印日志

console.log("log")
// 不同的日志类型，不同颜色输出
console.debug("debug");
console.info("info");
console.warn("warn");
console.error("error");

定义变量

// 没有声明或者声明后没有赋值的变量值为undefined
var name = "yuan",age = 1;
// 动态语言，可以赋值不同类型的数据
age = "21岁"

// 在ES6中，引入关键件let定义变量，具体差别可以参考网络文章。暂时，只要使用到var，就换成let定义就好了
let school = "GDUT "

// 在ES6中，引入关键字const定义常量，声明好必须赋值。更改常量在个别浏览器不会异常报错，也无效果，还是保持声明时初始化的值。
const PI = 3.14;

注释

// 我是一行注释
/**
我是多行注释
这里也是注释
*/

数组

// 定义数组，数组内可以包含任意数据类型
let arr = new Array(1,2,3,"yuan");
// 或者直接赋值
let arr = [1,2,3,"yuan"];

容器

Map，一个key只是对应一个value，相同key后添加的会覆盖前面的

let mMap = new Map();
// 添加新的key-value
mMap.set("yuan",1);
mMap.set("yang",2);
// 也可以直接创建的时候初始化
let mMap = new Map([['yuan',1],['yang',2]]);

Set，一组key的集合，key不能重复，输入相同key会被自动过滤

let mSet = new Set();
mSet.add(1);
// 也可以直接创建的时候初始化
let mSet = new Set([1,2,3]);

扩展运算符...

let a = [1,2,3,"yuan"];
console.log(...a);  // 1 2 3 "yuan"

解构

let[a,b,c] = [1,2,3,"yuan"];
console.log(a,b,c,d);  // 1 2 3 "yuan"

函数

// 传入的参数比定义的多和少都没有问题，如果没有传进去，默认参数为undefined。所以，在使用之前，要对参数进行检查，避免收到undefined而进行处理。
function 函数名(变量a,变量b){
    // 如果没有写return，默认return undefined
    return;
}
// 匿名函数，没有函数名
function (变量a,变量b){
    return;
}

arguments，默认指向所有传入的参数，类似Java中的main方法中的args，只是不需要自己定义。一般可以用来判断传入的参数长度。

function fun(x){
    console.log(x);  //1
    for(var i = 0;i < arguments.length;i++){
        console.log(arguments[i]); // 1,2,3
    }
}
fun(1,2,3);

函数return，总结下来就是有指定返回，就返回指定值，没有就返回undefined，return后面会自动添加；作为语句的结束标志。

// 没有写return，默认return undefined
function fun(){
    
}
console.log(fun());  // undefined

// return没有写内容，默认undefined
function fun(){
    return ;
}
console.log(fun());  // undefined

// return默认会添加;，因此按默认值undefined返回
function fun(){
  return 
  1;
console.log(fun());  // undefined

function fun(){
  return 1;
}
console.log(fun());  // 1

箭头函数

ES6中，允许使用“箭头” => 定义函数，有点类似于lambda表达式，更接近于函数的数学符号表达。

# class外部
let 函数名 = (参数) => {内部逻辑}
# class内部
class 类名 extends Component{
  函数名 = (参数) => {
    // 内部逻辑，返回值
  };
}

使用例子

// 没有参数或多个参数
var f = () => 5;
// 等同于
var f = function () {return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
    return num1 + num2;
};

对象

// 创建对象，对象是一组由键，值组成的无序集合
var person = {
  name:"yuan",
  age:21,
  city:"guangzhou",
  // 如果键中包含特殊字符，就需要用''括起来
  'the university':"GDUT"
}
// 引用对象的属性：对象变量.属性名或者对象变量[属性名]
console.log(person.age);  // 21
console.log(person[name]) // yuan
// 被''括起来的键，不属于变量，不能用.引用，需要用[]
console.log(person["the university"]);  // GDUT
// 可以直接引用未定义的属性名，如果没有赋值，返回undefined
console.log(person.sex);  // undefined
person.sex = "man";
console.log(person.sex);  // man

模块的导入和导出

一个独立的js文件可以说是一个模块，该文件内部的所有变量，外部无法获取，不像Java中是有私有、共有变量这些概念的。如果你希望外部能够读取该模块，那么就用export输出该模块的对外接口，用import导入该模块提供的接口。

// 导入模块
import AAA from '???'
// 引用同目录下的a.js文件,后缀.js可写或者可不下
import AAA from './a'
//引用父目录中的a目录中的b.js文件;如果b为目录,则查找引用b目录中的index.js文件
import AAA from '../a/b'

如果a文件导出为default，有且仅能一个default，那么b.js的import可以不加{}，名字可以为AAA或者BBB都无所谓，都是指向a.js的AAA

// a.js文件
export default AAA;
// b.js文件
import AAA from './a'

如果a文件导出，没有default，则b.js的import，必须加{}，而且名字必须和a.js中导出的名字一样，如果想进行修改，则使用关键字as

// a.js文件
export moduleA;
export moduleB;
// b.js文件
import {moduleA as AAA,moduleB} from './a'

注意

• JavaScript是区分大小写的
• JavaScript不要求语句后面必须加;，但是建议开发的时候加上

参考资料

• 《JavaScript DOM编程艺术》
• 《ECMAScript 6 入门》
• 深入浅出ES6（十四）：let和const
• ES6，import时如何正确使用花括号’{ }’
• ECMAScript 6 入门 Module 的语法