本文主要是介绍ES6之spread运算符、rest操作符及解构赋值操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
es6推广的原因在于它更加轻盈方便，spread运算符、rest操作符以及解构赋值知识都是es6的新语法，接下来看看它们都分别是什么。
- spread运算符
spread运算符常常用于数组的解析与构造：
var arr1 = ['a','b','c'];
var arr2 = ['aa','bb','cc'];//构造数组
var arradd = [...arr1, ...arr2];
console.log(arrs); // ['a','b','c','aa','bb','cc']//解析数组
var son1,son2;
[son1, ...son2] = arr1
console.log(son1); // 'a'
console.log(son2); //['b','c']
在一些特定函数调用中，参数只能接受数列不接受数组。这是spread运算符也派上用场：
const arr = [2,3,1,5];
const maxNum = Math.max(...arr); // 返回5。max函数不接受数组只接受数列
- rest操作符
rest操作符让函数的所有参数可由一个变量统一接收 ，帮助我们创建更加灵活的函数：
function count(...arr){return arr.length;
}
//调用函数
count('a','b','c'); //返回3，arr长度为3
count(5,2,4,1); //返回4，arr长度为4
- 解构赋值之对象分配变量
解构赋值是es6推出的、在开发中实用的新语法。先看看它在简单对象中的赋值作用：
var obj = {x: 1, y: 2, z: 3};
const {x, y, z} = obj; // x = 1, y = 2, z = 3
也可以将值赋予异名变量a，b，c：
const {x: a, y: b, z: c} = obj; // a = 1, b = 2, c = 3
可理解成对obj进行相应解构，并分别将值赋予对应的变量。再来看看在嵌套式对象中的解构赋值操作：
const obj = {a: {x: 1, y: 2},b: {x: 3, y: 4}
};
const {a : {x: x1, y: y1}} = obj;
console.log(x1, y1); // 1, 2
- 解构赋值之数组分配变量
解构赋值也可以用于数组中，用法大同小异：
const arr = [1, 2, 3, 4, 5, 6]
const [a, b] = arr;
console.log(a, b); // 1, 2
它会按顺序自动获取对应位置的值。再看看如何获取指定位置的值：
const [a, b,,, c] = arr;
console.log(a, b, c); // 1, 2, 5
- 解构赋值之函数对象参数
可以直接解构对象参数，获取需要的值，作为新参数传入函数，在函数内直接对变量进行操作：
const student = {name: 'Job',num: 001,age: 18,sex: 'boy'
};
const check = function half({num,sex}) {return (num , sex);};
console.log(student); // 一个object
console.log(check(student)); // (001, 'boy')
- 数组的深度copy
深度拷贝与浅度拷贝的区别在于新变量是否受源变量的影响而变化。es5出现的情况：
var arr1 = [1, 2];
var arr2 = arr1;
arr1.push(3);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]
而es6的spread运算符促使数组解析构造，形成深度copy，arr2复制而来的值不受源arr1的变化而影响：
var arr1 = [1, 2];
var arr2 = [...arr1];
arr1.push(3);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2]
- 字符串转数组
es6之后字符串转数组也变得极为简单：
var str = 'China';
var arr = [...str];
console.log(arr); // ["C", "h", "i", "n", "a"]
- 变量值交换
以往交换变量值需要一个中间商，而es6之后语法糖来了：
var x = 1, y = 2;
[x, y] = [y, x];
console.log(x); // 2
console.log(y); // 1
这篇关于ES6之spread运算符、rest操作符及解构赋值操作的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
