ES6的扩展运算符/Rest运算符/解构赋值
昨天在看一篇文章,生成数组的,当我看到
[...[1,1,1].keys()]
这样的代码,还是稍微有些懵逼的。
虽然之前也大概了解过…/Rest运算符/解构赋值/Iterator,想好好学习一下,结果MDN上相关联的条目有六七条,还有更多没有列在下边的,从See Also可以找到的……
首先是MDN上的解释:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/keys
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator
其次有几篇中文博客:
http://blog.csdn.net/qq_30100043/article/details/53391308
https://segmentfault.com/a/1190000007022442
http://www.cnblogs.com/chrischjh/p/4848934.html
最后看阮老师的博客:
http://es6.ruanyifeng.com/#docs/iterator
http://es6.ruanyifeng.com/#docs/destructuring
自己的总结:
Rest参数...
只用在函数声明时的参数(或者解构赋值)中,而且只能用在参数的最后一个,当函数调用的时候,会自动把多个参数(逗号分隔的)合并成一个数组
基本可以和arguments说拜拜了。
而且Rest参数是Array的实例,不像arguments其实是个Object,像sort/pop/forEach等方法都能直接用。
新版Rest也支持Object。
例子:
function fun1(...theArgs) {
console.log(theArgs.length);
}
fun1(); // 0
fun1(5); // 1
fun1(5, 6, 7); // 3
扩展运算符...
用在函数调用或者数组字面量(或者可迭代对象iterable object,比如Array.prototype.keys()的返回值)中,可以把数组转换为逗号分割的值。
如:
//before
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);
//now
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);
//now
var a = [1,2,3];
var b = [4,5,6];
var c = [...a,...b]; // [1,2,3,4,5,6]
解构赋值:
var [a,b,...c] = [1,2,3,4,5];
// a = 1 , b = 2 , c = [3,4,5]
//default value:
var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
//swap values
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
//for object
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true
//for assign new variable names
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true
//default values
var {a=10, b=5} = {a: 3};
console.log(a); // 3
console.log(b); // 5
还可用于函数默认值,解析JSON等,见解构赋值的更多例子