es6学习笔记（一）

1、 es6是什么？

es6全称ECMAScript 6。ECMAScript 和 JavaScript 之间的关系，前者是后者的规格，后者是前者的一种实现。 ES6一般是指 ES2015 标准。

 

2、 let和const声明变量

之前使用var关键字声明变量，无论声明在何处，都会被视为声明在{}大括号内的代码的最顶部(不在大括号内{}即在全局作用域的最顶部)。这就是函数变量提升。

function fun () {

    if (bool) {

        var test = 'hello man';

    } else {

        console.log(test)

    }

}

 

上面的代码实际上是：

function fun() {

    var test;

    if (bool) {

        test = 'hello man';

    } else {

        //此处访问test，值为undefined

        console.log(test);

    }

    //此处访问test，值为undefined

}

 

无论bool的值是true还是false，test变量都会被声明。

 

1） let声明变量

let命令实际上为JavaScript新增了块级作用域。let命令声明的变量只在它所在的代码块内有效。

先看下面这一段代码：很显然只能输出十次10。

var funcs = [];

for (var i = 0; i < 10; i++) {

    funcs.push(function () {

        console.log(i)

    });

}

 

     那么如何依次输出0-9呢？

     ·闭包

for (var i = 0; i < 10; i++) {

    func.push((function (value) {

        return function () {

            console.log(value)

        }

    }(i)));

}

 

·let声明变量

for (let i = 0; i < 10; i++) {

    func.push(function () {

        console.log(i)

    })

}

 

变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，因此能够依次输出0-9。

使用let声明变量的话，不存在变量提升的情况，必须在声明以后才使用，否则会报错，这在语法上称为“暂时性死区”。并且let不允许在相同作用域内重复声明变量。

 

2） const声明变量

const声明的变量是一个只读变量，一旦声明就必须马上初始化并且不能改变值，因此如果用const只声明而不赋值也会报错。

const的作用域与let相同，只在当前的块级作用域内有效。同样的，也不能变量提升，存在暂时性死区，不能重复声明。

本质：

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

 

3、 变量的解构赋值

1） 数组的解构赋值

[基本用法]

let [a, b, c] = [1, 2, 3];

上面代码表示。可以从数组中提取值，按照对应位置，给变量赋值。

本质上，这种写法属于“模式匹配”，只要等号两边模式相同，左边的变量就会被赋予对应的值。

 

如果解构不成功，变量的值就等于undefined。

let [foo] = [];
foo //undefined

let [bar, foo] = [1];
foo //undefined

 

另一种情况是不完全解构，即等号左边的模式只匹配一部分等号右边的数组，这种情况下，解构依然成功

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

x // 1
y // 2

 

[默认值]

解构赋值允许制定默认值。

let [foo = true] = [];
foo // true

 

es6内部使用严格相等运算符（===），判断一个位置是否有值。只有数组成员严格等于undefined，默认值才会生效。

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

null不严格等于undefined，因此默认值不生效

 

2） 对象的解构赋值

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

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

foo // "aaa"

bar // "bbb"

 等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。

 

let { baz } = { foo: "aaa", bar: "bbb" };

baz // undefined

变量没有对应的同名属性，导致取不到值，最后等于undefined。

 

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

let { foo: baz } = { foo: "aaa", bar: "bbb" };

baz // "aaa"

foo // error: foo is not defined

foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

 

3）字符串的解构赋值

const [a, b, c, d, e] = 'hello';

a // "h"

b // "e"

c // "l"

d // "l"

e // "o"

 

还可以对字符串的length属性解构赋值

let { length: len } = 'hello';

len // 5

 

4） 数值和布尔值的解构赋值

解构赋值是，登等号右边是数值或布尔值，则会先转为对象。

let { toString: s } = 123;

s === Number.prototype.toString // true


let { toString: s } = true;

s === Boolean.prototype.toString // true

 

5） 函数参数的解构赋值

函数的参数也可使用解构赋值。

function add([x, y]) {

    return x + y;

}

add([1, 2]); // 3

 

6） 用途

变量的解构赋值的用途：

·交换变量的值

let x = 1;

let y = 2;

[x, y] = [y, x];

 

·从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能把他们放在数组或对象里返回。有了解构赋值，取出这些值非常方便。

 

// 返回一个数组

function example() {

    return [1, 2, 3];

}

let [a, b, c] = example();

 

// 返回一个对象

function example() {

    return {

        foo: 1,

        bar: 2

    };

}

let { foo, bar } = example();

 

·函数参数的定义

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

 

// 参数是一组有次序的值

function f([x, y, z]) { ... }

f([1, 2, 3]);

 

// 参数是一组无次序的值

function f({ x, y, z }) { ... }

f({ z: 3, y: 2, x: 1 });

 

·提取数据

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

let jsonData = {

    id: 42,

    status: "OK",

    data: [867, 5309]

};



let { id, status, data: number } = jsonData;

console.log(id, status, number);

// 42, "OK", [867, 5309]

 

·函数参数的默认值

指定参数的默认值，就避免了在函数内部再写var foo = config.foo || ‘default foo’。

jQuery.ajax = function (url, {

    async = true,

    beforeSend = function () {},

    cache = true,

    complete = function () {},

    crossDomain = false,

    global = true,

    // ... more config

}) {

    // ... do stuff

};

 

·遍历Map解构

任何部署iterator接口对象，都可以for.. ig循环遍历。Map结构原生Iterstor接口配合变量法人结构和赋值，获取键名和键值就非常方便。

const 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

 

·输入模块的指定方法

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