Fork me on GitHub

ES6学习笔记（一）——扩展运算符和解构赋值

发表于 | 评论：

前言

随着前端工程化的快速推进，在项目中使用ES6甚至更高的ES7等最近特性早已不是什么新鲜事。之前还觉得既然浏览器支持有限，那了解一下能看懂就好，然而仅仅了解还是不够的，现在放眼望去，那些成熟框架的代码示例都已经开始使用ES6编写了，昨天瞥了一眼vue的源码，已经全部使用ES6编写了。随着开发的进行，发现仅仅了解一下已经不能应付一些日常开发了，因为一些新的特性看起来有点吃力了，所以决定重新学习一下日常开发中见得比较多的ES6特性，争取与实际用例相结合，不仅要认识还要会用，以后多多用起来！当然本文中的ES6就是泛指哈，借用阮一峰老师的定义:

ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

扩展运算符

rest参数

在讲扩展运算符之前得讲一下rest参数，rest参数在我理解来看就是用’…变量名’的形式替代了函数参数中的arguments对象，大概用法如下：

1
2
3
4
5
function testFn (fist, ...rest) {
	console.log(fist);  //1
	console.log(rest);  //[2,3,4,5]
}
testFn(1,2,3,4,5);

当然如果在参数中只传入rest参数的话它代表的就是将arguments对象转为数组之后的一个数组，也就是一个包含了所有参数的数组：

1
2
3
4
function test2 (...rest) {
	console.log(rest);
}
test2(1,2,3);  // [1,2,3]

这个对于处理一些不知道参数数量的情况是很方便的，因为一般来说我们也要将argum对象转为数组才方便处理的，下面就是两种不同的写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// arguments写法
function add1(){
	var sum = 0;
	Array.prototype.slice.apply(arguments).forEach( function(item){
		sum += item;
	})
	console.log(sum)
}
add1(1,2,3); //6

// rest参数写法
function add2(...valus) {
	let sum = 0;
	valus.forEach( value => {
		sum += value
	})
	console.log(sum)
}
add2(1,2,3);  //6

扩展运算符

讲完了rest参数，再讲扩展运算符就可以把它理解为rest参数的逆运算，将一个数组转为用逗号分隔的参数序列：

1
2
console.log(...[1,2]);  //1,2
console.log(8, ...[1,2], 9);  //8,1,2,9

再将rest参数和扩展运算符结合起来就是这样的：

1
2
3
4
5
function test3 (...rest) {
	console.log(rest)
}
var nums = [1,2,7];
test3(...nums);  // [1,2,7]

应用：

  • 替代组中的apply方法

    1
    2
    3
    4
    5
    6
    7
    8
    var arr4 = [1,2,3];
    function test4 (a, b, c) {
    	console.log(a)
    }
    // ES5写法
    test4.apply(null, arr4);
    // ES6写法
    test4(...arr4);

  • 合并数组

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var arr1_ = [1];
    var arr2_ = [2,3];
    var arr3_ = [4,5];
    // ES5
    var arr4_ = arr1_.concat(arr2_, arr3_);
    console.log(arr4_);  //[1, 2, 3, 4, 5]
    // ES6
    var arr5_ = [...arr1_, ...arr2_, ...arr3_]
    console.log(arr5_);  //[1, 2, 3, 4, 5]

rest运算符和spread运算符的区别

对于三个点号，三点放在形参或者等号左边为rest运算符; 放在实参或者等号右边为spread运算符，或者说，放在被赋值一方为rest运算符，放在赋值一方为扩展运算符。

解构赋值

解构的作用是可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者obj[key]等传统方式进行赋值

  • 数组的解构赋值

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

  • 对象的解构赋值

    1
    2
    let { foo, bar } = { foo: "aaa", bar: "bbb" };
    console.log(foo);  //"aaa"

  • 字符串的解构赋值

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

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

  • 函数参数的机构赋值

    本文同步发表在我的博客园：[https://www.cnblogs.com/wancheng7/p/9697072.html)

参考文章