一个对象也可以扩展的,它会把每个键值对写入新的对象中。( 对象扩展已经在提议的第四阶段,而且将会在es2018中正式出现 。但这种特性目前只被chrome60及以后的版本,Firefox55及以后,node 6.4.0及以后的版本所支持)【译者注:在2ality博客中的es2018一文中得知,在刚刚结束的TC39会议中,ECMA2018的特性被敲定了。
let car = { type: 'vehicle ', wheels: 4}; let fordGt = { make: 'Ford', ...car, model: 'GT'}; console.log(fordGt); // {make: 'Ford', model: 'GT', type: 'vehicle', wheels: 4}
扩展运算符的另一个特点是,他可以生成一个新的数组或者对象. 下面的这个例子,就是b就是新建的数组,但c只是引用同一个数组。
let a = [1, 2, 3]; let b = [ ...a ]; let c = a; b.push(4); console.log(a); // [1, 2, 3] console.log(b); // [1, 2, 3, 4] 不同的数组 c.push(5); console.log(a); // [1, 2, 3, 5] console.log(c); // [1, 2, 3, 5] 同一个数组
第二个用法是把变量聚集到一个数组里面。当你不知道一个函数到底有多少的传参的时候会这个方法会变得非常的有用。
function foo(...args) { console.log(args); } foo( 'car', 54, 'tree'); // [ 'car', 54, 'tree' ]
Default Parameter 参数默认值
函数现在可以使用默认的参数值来定义了。不传参或者未定义值都被初始化为默认值。但是需要注意的是,null和false都会被强转为0.
function foo( a = 5, b = 10) { console.log( a + b); } foo(); // 15 foo( 7, 12 ); // 19 foo( undefined, 8 ); // 13 foo( 8 ); // 18 foo( null ); // 10 as null is coerced to 0
默认值的类型可以不仅仅是值类型---还可以是表达式或者函数。
function foo( a ) { return a * 4; } function bar( x = 2, y = x + 4, z = foo(x)) { console.log([ x, y, z ]); } bar(); // [ 2, 6, 8 ] bar( 1, 2, 3 ); //[ 1, 2, 3 ] bar( 10, undefined, 3 ); // [ 10, 14, 3 ]
Destructuring解构
解构是拆开等号左边的数组或者对象的过程。这个数组或者对象可以来自一个变量,一个函数,或者一个等式
let [ a, b, c ] = [ 6, 2, 9]; console.log(`a=${a}, b=${b}, c=${c}`); //a=6, b=2, c=9 function foo() { return ['car', 'dog', 6 ]; } let [ x, y, z ] = foo(); console.log(`x=${x}, y=${y}, z=${z}`); // x=car, y=dog, z=6
对象类型的结构,可以在花括号内列出对象的键来提取键值对。
function bar() { return {a: 1, b: 2, c: 3}; } let { a, c } = bar(); console.log(a); // 1 console.log(c); // 3 console.log(b); // undefined
有时,你可能想提取出值然后费赔给新的变量,这个可以通过在等号左侧使用一个“key:variable”(键:变量名)来完成。
function baz() { return { x: 'car', y: 'London', z: { name: 'John', age: 21} }; } let { x: vehicle, y: city, z: { name: driver } } = baz(); console.log( `I'm going to ${city} with ${driver} in their ${vehicle}.` ); // I'm going to London with John in their car.
此外,对象的结构允许给多个变量赋值。
let { x: first, x: second } = { x: 4 }; console.log( first, second ); // 4, 4
对象字面量和属性的简洁表达法
当你从许多参数创建对象字面量的时候,ES6允许你在键与变量名字相同的情况下省略该键。
let a = 4, b = 7; let c = { a: a, b: b }; let concise = { a, b }; console.log(c, concise) // {a: 4, b: 7}, {a: 4, b: 7}
这个还可以与解构一起用来使你的代码更干净整洁。
function foo() { return { name: 'Anna', age: 56, job: { company: 'Tesco', title: 'Manager' } }; } // pre ES6 let a = foo(), name = a.name, age = a.age, company = a.job.company; // ES6 destructuring and concise parameters let { name, age, job: {company}} = foo();
简洁表示法还可以用于解构对象并把它传入函数。方法1和2是你在es6之前要怎么做, 方法三是使用解构和简洁表达法。
let person = { name: 'Anna', age: 56, job: { company: 'Tesco', title: 'Manager' } }; // method 1 function old1( person) { var yearOfBirth = 2018 - person.age; console.log( `${ person.name } works at ${ person.job.company } and was born in ${ yearOfBirth }.`); } // method 2 function old1( person) { var age = person.age, yearOfBirth = 2018 - age, name = person.name, company = person.job.company; console.log( `${ name } works at ${ company } and was born in ${ yearOfBirth }.`); } // method 3 function es6({ age, name, job: {company}}) { var yearOfBirth = 2018 - age; console.log( `${ name } works at ${ company } and was born in ${ yearOfBirth }.`); }
通过使用ES6,我们能提取出age,name,和 company,而不需要任何其他的变量声明。
动态属性名称
ES6添加了使用动态分配的键创建或添加属性的功能。