Mmear's 😘.

ES6 学习笔记（一）

JavaScript
字数统计: 1.3k阅读时长: 5 min
2018/07/30 Share

ES6笔记

这篇blog用来收集学习ES6过程中遇到的大坑小坑、容易忽略的知识点等~ 可能会有二吧

参考资料

let和const命令

不存在变量提升

var声明的变量存在变量提升个性，即先引用后声明，变量值为undefined，let声明的变量不允许变量提升，和一般的编译型语言相同，需要先声明后引用，否则将会抛出ReferenceError错误

块级作用域

let声明的变量只在所在的块级作用域中生效，ES6规定的块级作用域由{}构成，可用于取代传统的立即执行函数表达式(IIFE)

1
2
3
4
5
6
7
8
9
10
//IIFE
(function (){
	var a = 5;
	console.log(a);
})();
//ES6块级作用域
{
	let a = 5;
	console.log(a);
}

其他

与var不同，在外部用let声明的变量并**到顶层对象window/global上

1
2
let x = 6;
console.log(window.x); //undefined

const命令的本质

const命令保证的是该变量指向的内存地址中储存的值不发生变动，对于简单类型值，内存所保存的值就是自己，所以看起来就像常量无法改动；然而对于复合类型——数组、对象来说，内存所保存的值是一个指针，该指针指向的才是真正的数据结构

因此，将对象、数组声明为常量时，并不能保证内部数据不可变，只能保证该对象/数组还是原来的对象/数组

1
2
3
4
5
const t = {name: 'Mike'};
//可以执行
t.age = 17;
//报错 // TypeError: "t" is read-only
t = {};

变量的解构赋值

数组的解构赋值

  • 解构不成功的情况下，变量值等于undefined

    1
    2
    let [a, b, c] = ['a']
    // a='a', b = undefined, c = undefined

  • 解构赋值的右边必须为可遍历的结构（如Array, Set, Generator函数或其他含有Iterator接口的对象）

    1
    let [a, b, c] = new Set(['a', 'b', 'c']);

  • 解构赋值的默认值只有在右边数组成员存在undefined情况下才能生效

    1
    2
    3
    4
    let [a, b='b'] = [1, undefined];
    b //b
    let [a, b='b'] = [1, null];
    b //null

  • 解构赋值的默认值还可以是其他（已声明）的变量或者函数执行结果

    1
    2
    let [a=f()] = [...];
    let [b=a] = [...]

对象的结构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

  • 若变量不与属性同名，需写成：

    1
    let {foo: var_1, bar: var_2} = {foo: 'foo', bar: 'bar'};

  • 与数组解构赋值一样，支持嵌套的解构赋值

    1
    2
    3
    4
    5
    6
    let obj = {
    	p: ['Hello', {y: 'World' }]
    };
    let { p: [x, { y }] } = obj;
    x // "Hello"
    y // "World"

    此处p为匹配的属性，后接匹配模式

  • 将一个已声明的变量用于解构赋值时，需要注意：

    1
    2
    3
    let x;
    {x} = {x: 'zed'};
    // SyntaxError: syntax error

    因为JS引擎会将{x}解释为一个块级作用域，导致赋值不合法，正确的写法为：

    1
    2
    3
    let x;
    ({x} = {x: 'zed'});
    x //zed

  • 对象解构赋值一个应用之处在于将某个对象的方法一次性赋值给变量：

    1
    let {sin, cos, log} = Math;

字符串、布尔值、数值的解构赋值

对于字符串，可看作是字符数组；对于布尔值与数值，会先转换为对象，再通过对象的toString方法解构：

1
2
3
4
5
6
let {toString: s} = 123;
let {toString: k} = true;

console.log(s === Number.prototype.toString) //true
console.log(k === Boolean.prototype.toString) //true
console.log(s.apply(1234)); //1234

函数参数的解构赋值

1
2
3
4
5
6
7
8
9
10
11
function func([x, y]) {
	return x + y;      
}
func([1, 3]);

function func2({x, y}) {
	return x + y;      
}
func([1, 3]);
func2({x: 1, y: 3});
//虽然传进去的是数组，但在函数内部可直接取到x和y
  • 可以使用默认值

用途

  • 交换变量的值

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

  • 从函数返回多个值

    1
    2
    3
    4
    function func() {
    	return [1, 2, 3];
    }
    let [r1, r2, r2] = func();

  • 便于函数传参(自动对应)

  • 提取JSON数据
  • 输入模块的指定方法
  • 指定函数参数的默认值
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    jquery.ajax = function(url, {
    	async = true,
    	beforeSend = function () {},
    	cache = true,
    	complete = function () {},
    	crossDomain = false,
    	global = true,
     // ... more config
    } = {}) {
    	...
    }
    //其中第二个参数若未指定，则默认值为一个空对象

字符串扩展

箭头函数

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

  • 没有自身的this对象，也不能绑定this对象

    1
    2
    3
    4
    5
    6
    7
    function outer() {
    	let x = 5;
    	return () => {
    		console.log(this.x);
    	}
    }
    console.log(outer()());

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

  • 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替
  • 不可以使用yield命令，因此箭头函数不能用作Generator函数
CATALOG
  1. 1. ES6笔记
    1. 1.1. 参考资料
  2. 2. let和const命令
    1. 2.1. 不存在变量提升
    2. 2.2. 块级作用域
    3. 2.3. 其他
    4. 2.4. const命令的本质
  3. 3. 变量的解构赋值
    1. 3.1. 数组的解构赋值
    2. 3.2. 对象的结构赋值
    3. 3.3. 字符串、布尔值、数值的解构赋值
    4. 3.4. 函数参数的解构赋值
    5. 3.5. 用途
  4. 4. 字符串扩展
  5. 5. 箭头函数
Total : 21
2019
2018
JavaScript JavasScript Git CSS HTML 计算机网络 Webpack Vue Hexo HTTP