React-Native:语法篇

//1
var a = 10;
var b = 20;
var c = 30;

//2
var a = 10,b = 20,c = 30;

//3
var arr = [1,2,3,4,5];
var a = arr[0];
var b = arr[1];
var c = arr[3];

//4
var obj = {
  name: 'gary',
  age: 20
}
var a = obj.name;
var b = obj.age;

没有用var关键字，使用直接赋值方式声明的是全局变量，例如：

a = 10;

全局对象是最顶层的对象，在浏览器环境指的是window对象，在Node.js指的是global对象。
ES5之中，全局对象的属性与全局变量是等价的。

window.a = 1;
a // 1
a = 2;
window.a // 2

2.2 function命令

var 方式定义的函数，不能先调用函数，后声明，只能先声明函数，然后调用。
function方式定义函数可以先调用，后声明。

aaa();//这样调用就会出错   
var aaa = function(){   
      alert("aaa");   
}   
aaa();//这样就不会出错   
    
//先调用后声明   
bbb();   
function bbb(){   
      alert("bbb");   
}

2.3 let命令

块级有效
ES5只有全局作用域和函数作用域，没有块级作用域
ES6中，let实际上为JavaScript新增了块级作用域。
用来声明变量，用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

//基本举例

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

//for循环的计数器，就很合适使用let命令。
例如：

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[5](); //10
a[6](); // 10

// i 改为 let 声明

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[5](); //5
a[6](); // 6

//暂时性死区
只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

var tmp='dev';
if (true) { 
  console.log(tmp);

  let tmp; 
  console.log(tmp);

  tmp = 123;
  console.log(tmp);
}
在let命令声明变量tmp之前，都属于变量tmp的“死区”。

不允许重复声明
let不允许在相同作用域内，重复声明同一个变量。

// 报错
function test() {
  let a = 10;
  var a = 1;
}
// 报错
function test() {
  let a = 10;
  let a = 1;
}

// 不能在函数内部重新声明参数。

function func(arg) {
  let arg; // 报错
}
function func(arg) {
  {
    let arg; // 不报错
  }
}

2.4 const命令

const声明一个只读的常量。
一旦声明，就必须立即初始化，不能留到以后赋值。也不能改变。

const PI = 3.1415;
console.log(PI); // 3.1415
PI = 3;    // TypeError: Assignment to constant variable.

const的作用域与let命令相同：只在声明所在的块级作用域内有效，声明的常量，也与let一样不可重复声明。

const命令只是保证变量名指向的地址不变，并不保证该地址的数据不变，所以将一个对象声明为常量必须非常小心。

const foo = {};
foo.prop = 123;
console.log(foo.prop);// 123
foo = {}; // TypeError: "foo" is read-only

var命令和function命令声明的全局变量，依旧是全局对象的属性；
let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。
也就是说，从ES6开始，全局变量将逐步与全局对象的属性脱钩。

var a = 1;
// 如果在Node的REPL环境，可以写成global.a
// 或者采用通用方法，写成this.a

window.a // 1
let b = 1;
window.b // undefined

2.5 import命令

模块的功能主要由 export 和 import 组成.

每一个模块都有自己单独的作用域，模块之间的相互调用关系是：
    通过 export 来规定模块对外暴露的接口，
    通过import来引用其它模块提供的接口。

同时还为模块创造了命名空间，防止函数的命名冲突。

ES6将一个文件视为一个模块，通过export 向外输出了一个变量。
一个模块也可以同时往外面输出多个变量。

//test.js
var name = 'Rainbow';
var age = '24';
export {name, age};

定义好模块的输出以后就可以在另外一个模块通过import引用。

import {name, age} from './test.js'

整体输入，module指令

//test.js
export function getName() {
  return name;
}
export function getAge(){
  return age;
}

通过 import * as 就完成了模块整体的导入。

import * as test form './test.js';

通过指令 module 也可以达到整体的输入。

 module test from 'test.js';
 test.getName();

// export default
不管关系模块输出了什么，通过 export default 指令就能加载到默认模块，
不需要通过花括号来指定输出的模块,
一个模块只能使用 export default 一次

// default 导出

export default function getAge() {}

// 或者写成

function getAge() {}
export default getAge;

// 导入的时候不需要花括号

import test from './test.js';

一条import 语句可以同时导入默认方法和其它变量.

import defaultMethod, { otherMethod } from 'xxx.js';

2.6 class命令

如果你用过纯面向对象语言，那么你会对class的语法非常熟悉。

class People {
    constructor(name) { //构造函数
          this.name = name;
    }
    sayName() {
          console.log(this.name);
    }
}

var p = new People("Tom");
p.sayName();

上面定义了一个People类，他有一个属性 name 和一个方法 sayName()，还有一个构造函数;
就像函数有函数声明和函数表达式两种定义方式，类也可以通过类表达式来定义：

let People = class {
    constructor(name) { //构造函数
          this.name = name;
    }
    sayName() {
          console.log(this.name);
    }
  }

你可能以为类声明和类表达式的区别在于变量提升的不同。

但是事实是无论是类声明还是类表达式的方式来定义，都不会有变量提升。

通过关键字 extends 来继承一个类，并且可以通过 super 关键字来引用父类。

class Student extends People {
    constructor(name, grade) { //构造函数
        super(name);    //通过 super 调用父类的构造函数的。
          this.grade = grade;
    }
    sayGrade() {
          console.log(this.grade);
    }
}

上面的例子中我们定义了一个 Student ，他是 People 的子类。

下面我们给 name 属性定义 getter 和 setter

class People {
    constructor(name) { //构造函数
        console.log('constructor');    //TOM
        this.name = name;
    }
    get name() {
        console.log('get');    //TOM
        return this._name.toUpperCase();
    }
    set name(name) {
        console.log('set');    //TOM
        this._name = name;
    }
    sayName() {
        console.log('sayName');    //TOM
        console.log(this.name);
    }
}
var p = new People("tom");
console.log(p.name);    //TOM
console.log(p._name);   //tom
p.sayName();            //TOM

仔细看上面的例子，搞清楚最后三行分别会输出什么，就明白getter 和 setter该怎么用了。

输出日志：

可以发现，this.name = name 复制会调用set方法，this.name读取会调用get方法

主要是要区分 this._name 和 this.name 的区别。因为我们定义了 name 的读写器，而没有定义 _name 的读写器，所以访问这两个属性的结果是不同的。

但是要注意一点，不要这样写：

set name(name) {
    this.name = name;
}

因为给 this.name =name 赋值的时候会调用 set name ，这样会导致无限递归直到栈溢出。

通过 static 关键字定义静态方法：

class People {
    constructor(name) { //构造函数
          this.name = name;
    }
    sayName() {
          console.log(this.name);
    }
    static formatName(name) {
        return name[0].toUpperCase() + name.sustr(1).toLowerCase();
    }
}
console.log(People.formatName("tom"));

3.解构赋值

解构：ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。如果解构不成功，变量的值就等于undefined。

“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

3.1下面是一些使用嵌套数组进行解构的例子。

let [ foo, [[bar], baz] ] = [ 1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [x, , y] = [1, 2, 3];//不完全解构
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

3.2解构赋值允许指定默认值。

var [foo = true] = [];
foo // true

[x, y = 'b'] = ['a']; 
// x='a'
// y='b'

[x, y = 'b'] = ['a', undefined]; 
// x='a'
// y='b'

注意，ES6内部使用严格相等运算符（===），判断一个位置是否有值。

所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError

3.3解构赋值不仅适用于var命令，也适用于let和const命令。

var [v1, v2, ..., vN ] = array;
let [v1, v2, ..., vN ] = array;
const [v1, v2, ..., vN ] = array;

3.4对于Set结构，也可以使用数组的解构赋值。

let [x, y, z] = new Set(["a", "b", "c"]);
x // "a"

3.5对象的解构赋值

解构不仅可以用于数组，还可以用于对象。

var { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

对象的解构与数组有一个重要的不同。

数组的元素是按次序排列的，变量的取值由它的位置决定；

对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

var { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

var { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

如果变量名与属性名不一致，必须写成下面这样。

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

这实际上说明，对象的解构赋值是下面形式的简写。

var { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

3.6变量的声明和赋值是一体的。

对于let和const来说，变量不能重新声明，所以一旦赋值的变量以前声明过，就会报错。

let foo;
let {foo} = {foo: 1}; // SyntaxError: Duplicate declaration "foo"
let baz;
let {bar: baz} = {bar: 1}; // SyntaxError: Duplicate declaration "baz"

上面代码中，解构赋值的变量都会重新声明，所以报错了。

不过，因为var命令允许重新声明，所以这个错误只会在使用let和const命令时出现。

如果没有第二个let命令，上面的代码就不会报错。

let foo;
({foo} = {foo: 1}); // 成功
let baz;
({bar: baz} = {bar: 1}); // 成功

上面代码中，let命令下面一行的圆括号是必须的，否则会报错。

因为解析器会将起首的大括号，理解成一个代码块，而不是赋值语句。

3.7和数组一样，解构也可以用于嵌套结构的对象。

var obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};
var { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

注意，这时p是模式，不是变量，因此不会被赋值。

var node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};
var { loc: { start: { line }} } = node;
line // 1
loc  // error: loc is undefined
start // error: start is undefined

默认值生效的条件是，对象的属性值严格等于undefined。

3.8如果要将一个已经声明的变量用于解构赋值，必须非常小心。

// 错误的写法
var x;
{x} = {x: 1};
// SyntaxError: syntax error

上面代码的写法会报错，因为JavaScript引擎会将{x}理解成一个代码块，从而发生语法错误。

只有不将大括号写在行首，避免JavaScript将其解释为代码块，才能解决这个问题。

// 正确的写法
({x} = {x: 1});

3.9由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

var arr = [1, 2, 3];
var {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

3.10 字符串的解构赋值

字符串也可以解构赋值。

这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

3.11 类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : len} = 'hello';
len // 5

3.12 数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true

上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。

3.13 解构赋值的规则是，只要等号右边的值不是对象，就先将其转为对象。

由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

3.14 函数参数的解构也可以使用默认值。

函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。

function move({x = 0, y = 0} = {}) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。

function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

3.15 解构赋值用途：

（1）交换变量的值：[x, y] = [y, x];

数组的元素是按次序排列的，变量的取值由它的位置决定；

对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。
（2）从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
// 返回一个数组

function example() {
  return [1, 2, 3];
}
var [a, b, c] = example();
// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}

var { foo, bar } = example();

（3）函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

（4）提取JSON数据

解构赋值对提取JSON对象中的数据，尤其有用。

var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]

上面代码可以快速提取JSON数据的值。

（5）函数参数的默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};

指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。

（6）遍历Map结构
任何部署了Iterator接口的对象，都可以用for...of循环遍历。

Map结构原生支持Iterator接口，配合变量的解构赋值，获取键名和键值就非常方便。

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

如果只想获取键名，或者只想获取键值，可以写成下面这样。

// 获取键名
for (let [key] of map) {
  // ...
}

// 获取键值
for (let [,value] of map) {
  // ...
}

（7）输入模块的指定方法
加载模块时，往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");

4.编程风格

4.1 采用严格模式：'use strict';

变量必须声明后再使用

函数的参数不能有同名属性，否则报错
不能使用with语句
不能对只读属性赋值，否则报错
不能使用前缀0表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字（比如protected、static和interface）

4.2 let取代var

在块级作用域下，let完全可以取代var，因为两者语义相同，而且let没有副作用。

4.3 全局常量和线程安全

在let和const之间，建议优先使用const，

尤其是在全局环境，不应该设置变量，只应设置常量。

所有的函数都应该设置为常量。这符合函数式编程思想，有利于将来的分布式运算。

const声明常量还有两个好处，一是阅读代码的人立刻会意识到不应该修改这个值，二是防止了无意间修改变量值所导致的错误。

长远来看，JavaScript可能会有多线程的实现（比如Intel的River Trail那一类的项目），这时let表示的变量，只应出现在单线程运行的代码中，不能是多线程共享的，这样有利于保证线程安全。

4.4 字符串

静态字符串一律使用单引号或反引号，不使用双引号。

动态字符串使用反引号。

4.5 解构赋值

使用数组成员对变量赋值时，优先使用解构赋值。

函数的参数如果是对象的成员，优先使用解构赋值。

函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。便于以后添加返回值，及更改返回值的顺序

4.6 对象

单行定义的对象，最后一个成员不以逗号结尾。多行定义的对象，最后一个成员以逗号结尾。

对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用Object.assign方法。

如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。

对象的属性和方法，尽量采用简洁表达法，这样易于描述和书写。

4.7 数组

使用扩展运算符（...）拷贝数组。

使用Array.from方法，将类似数组的对象转为数组。

4.8 函数

立即执行函数可以写成箭头函数的形式。(...)=> { ...}

那些需要使用函数表达式的场合，尽量用箭头函数代替。这样更简洁，而且绑定了this。

简单的、单行的、不会复用的函数，建议采用箭头函数。

函数体较为复杂，行数较多，还是应该采用传统的函数写法。

所有配置项都应该集中在一个对象，放在最后一个参数，布尔值不可以直接作为参数。

不要在函数体内使用arguments变量，使用rest运算符（...）代替。因为rest运算符显式表明你想要获取参数，而且arguments是一个类似数组的对象，而rest运算符可以提供一个真正的数组。

4.9 Map结构

注意区分Object和Map，只有模拟现实世界的实体对象时，才使用Object。如果只是需要key: value的数据结构，使用Map结构。因为Map有内建的遍历机制。

4.10 Class

总是用Class，取代需要prototype的操作。因为Class的写法更简洁，更易于理解。

使用extends实现继承，因为这样更简单，不会有破坏instanceof运算的危险。

4.11 模块

首先，Module语法是JavaScript模块的标准写法，坚持使用这种写法。

使用import取代require。

如果模块只有一个输出值，就使用export default，如果模块有多个输出值，就不使用export default，不要export default与普通的export同时使用。

不要在模块输入中使用通配符。因为这样可以确保你的模块之中，有一个默认输出（export default）。

如果模块默认输出一个对象，对象名的首字母应该大写。

1.简介

2.变量声明

2.1 var命令