标签:console 嵌套 赋值 evel efi 接收 prot var es2015
目录
myFunction(...iterableObj);
在调用一个函数时提供数组或者对象时,将其展开
// 数组迭代开作为函数的参数
//es5
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);
// es6
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);
下面这段代码是将数组快速变为一个新数组成员的方法,和参数列表的展开类似, ... 在构造字面量数组时, 可以在任意位置多次使用.注意和剩余参数的作为最后一项不同,它可以在任意位置
var parts = [‘shoulders‘,‘knees‘];
var lyrics = [‘head‘,... parts,‘and‘,‘toes‘];
// ["head", "shoulders", "knees", "and", "toes"]
数组的浅拷贝,只迭代拷贝出最外层
var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4);
// arr2 此时变成 [1, 2, 3, 4]
// arr 不受影响
在 unshift()
方法中修改了原数组,而展开语法创建了一个新的数组来接收拼接后数组
// 接在后面
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// 将 arr2 中所有元素附加到 arr1 后面并返回
var arr3 = arr1.concat(arr2);
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];
// 插在前面
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// 将 arr2 中的元素插入到 arr1 的开头
Array.prototype.unshift.apply(arr1, arr2) // arr1 现在是 [3, 4, 5, 0, 1, 2]
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1]; // arr1 现在为 [3, 4, 5, 0, 1, 2]
将已有对象的所有可枚举属性拷贝到新构造的对象中
var obj1 = { foo: ‘bar‘, x: 42 };
var obj2 = { foo: ‘baz‘, y: 13 };
var clonedObj = { ...obj1 };
// 克隆后的对象: { foo: "bar", x: 42 }
var mergedObj = { ...obj1, ...obj2 };
// 合并后的对象: { foo: "baz", x: 42, y: 13 }
var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2
[ ]
里,里面的变量可以获取到右边的数组里的对应位置的值var foo = ["one", "two", "three"];
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"
var a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
function f() {
return [1, 2];
}
var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2
//忽略某些返回值
var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
var url = "https://developer.mozilla.org/en-US/Web/JavaScript";
var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
var [, protocol, fullhost, fullpath] = parsedURL;
console.log(protocol); // "https"
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true
//无声明赋值
//通过解构可以无需声明来赋值一个变量
var a, b;
({a, b} = {a: 1, b: 2}); // 此处使用小括号包裹让其对象字面量
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true
var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5
// 新变量的默认值
var {a:aa = 10, b:bb = 5} = {a: 3};
console.log(aa); // 3
console.log(bb); // 5
MDN上这个例子非常好的诠释了结构赋值的用法和精髓
// ES5
function drawES5Chart(options) {
options = options === undefined ? {} : options;
var size = options.size === undefined ? ‘big‘ : options.size;
var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
var radius = options.radius === undefined ? 25 : options.radius;
console.log(size, cords, radius);
// now finally do some chart drawing
}
drawES5Chart({
cords: { x: 18, y: 30 },
radius: 30
});
在es5时,函数参数在为其设置默认值时,参数存放在对象里并检测每个值是否存在并且为其设置默认值,而在es6中使用解构赋值非常方便的,接收到对象参数后可以轻松将其赋给对应的形参以便使用
// ES6
function drawES2015Chart({size = ‘big‘, cords = { x: 0, y: 0 }, radius = 25} = {})
{
console.log(size, cords, radius);
// do some chart drawing
}
drawES2015Chart({
cords: { x: 18, y: 30 },
radius: 30
});
在参数里为其设置一个空对象时因为这样的话可以在不提供参数的情况下直接使用函数,如果不提供让你提供至少一个参数
var metadata = {
title: "Scratchpad",
translations: [
{
locale: "de",
localization_tags: [ ],
last_edit: "2014-04-14T08:43:37",
url: "/de/docs/Tools/Scratchpad",
title: "JavaScript-Umgebung"
}
],
url: "/en-US/docs/Tools/Scratchpad"
};
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
这里首先是不同于属性的变量名赋值,然后嵌套的 translations
里查找为 title
的属性赋值给新变量 localeTitle
var obj ={
name: "lee",
family: {
son: "kangkang",
girl: "jane"
}
}
var {name, family: {girl:daughter}} = obj
var people = [
{
name: "Mike Smith",
family: {
mother: "Jane Smith",
father: "Harry Smith",
sister: "Samantha Smith"
},
age: 35
},
{
name: "Tom Jones",
family: {
mother: "Norah Jones",
father: "Richard Jones",
brother: "Howard Jones"
},
age: 25
}
];
for (var {name: n, family: { father: f } } of people) {
console.log("Name: " + n + ", Father: " + f);
}
// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"
与展开语法相反的是剩余参数是将不定数量的参数(形式参数)表示为一个数组,接收的参数多余已经给定的形式参数时多余的将放入其中,它是一个数组,具有数组所具有的功能
function(a, b, ...theArgs) {
// ...
}
示例
function sum(...theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}
console.log(sum(1, 2, 3));
// expected output: 6
console.log(sum(1, 2, 3, 4));
// expected output: 10
剩余参数和 arguments对象之间的区别主要有三个:
全文摘自MDN,具体详细正确请参考MDN
标签:console 嵌套 赋值 evel efi 接收 prot var es2015
原文地址:https://www.cnblogs.com/daixixi/p/9314653.html