ES6学习笔记

ES6

let const

之前版本的js都是用var声明变量的，且作用于为全局。


let 声明局部变量.作用于声明的代码块，且严格遵循先声明后使用。

暂时性死区

var ttt = "";
function a(){
    ttt = "ccc";//出现错误
    let ttt;
}
因为let声明的变量在声明的区域内作用，且遵循先声明后使用的原则，
所以在a()函数中给ttt赋值是不合法的。
在a(){之后到let ttt;之前就是ttt的暂时性死区

不允许重复声明

const 声明常量，且同let一样为块级作用域变量。

声明时必须立刻初始化。同样也存在暂时性死区。

const修饰简单类型时就代表不能改变值，const修饰复合类型，由于复合类型代表的是类型的地址，所以表示变量存的地址不能改变，但是地址所存的值是可以改变的。比如修饰数组，那么变量只能指向数组的地址不能改变，但是指向的数组中所存的值是可以修改的，类似C语言中的指针常量。

解构赋值

跟python中的语法相似。

let [a, b, c] = [1, 2, 3];//位置对应
let [foo, [[bar], baz]] = [1, [[2], 3]];//位置对应

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

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

解构不成功赋值为undefined
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

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

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

解构不成功（undefined）可以设置默认值
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。
function* fibs() {
  let a = 0;
  let b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

let [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5


对象的解构赋值就是按键解构，不像数组按位置解构。
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

如果解构前后的键名不一致，可以使用模式解构
let { foo:baz } = { foo: "aaa", bar: "bbb" };
baz // aaa

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

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

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

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


函数参数是一个类似数组的迭代器，所以可以采用数组的解构方式解构。
function add([x, y]){
  return x + y;
}
add([1, 2]); // 3

函数

默认参数

ES6后，新增函数默认值。跟其他语言一样函数可以在声明是指定参数的默认值。

function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
}
const p = new Point();
p // { x: 0, y: 0 }

在解构赋值中，解构的值可以设置默认值，所以可以利用解构赋值设置参数的默认值

function foo({x, y = 5}) {
  console.log(x, y);
}

可变参数

使用 …values的形式接收函数多余的参数，并且以数组的形式组织这些参数。可以用for循环遍历，就和 可变参数作用一致。
箭头函数

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};
var fun = (a, b) =>{
    //.....code
    return ......;
}

箭头函数简化了函数的语法，引入了类似lamda表达式功能，但是在某些特定情况不能使用箭头函数。

箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

数组扩展

… 代表扩展运算符，将数组展开成逗号分开的序列。
可以用于数组的复制，合并数组，扩展实现了Iterator 接口的类似数组的对象等。

//复制数组，相当于深拷贝
let a1 = [1,2]
let a2 = [...a1]
//合并数组
let a1 = [1,2,3]
let a2 = [4,5,6,...a1]

Generator

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}
形式上，Generator 函数是一个普通函数，但是有两个特征。
一是，function关键字与函数名之间有一个星号；
二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。
var hw = helloWorldGenerator();
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }

通过generator生成iterator接口对象，就可以用于解构，扩展等操作

var myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

[...myIterable] // [1, 2, 3]
[a,b] = myIterable; //1 2