数组的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
let [a, b, c] = [1, 2, 3]
上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。
注意,let数组里的值,可以是数字、变量、对象、函数等、但无法拿到空格占位。
let [a,b,c,d,,] = [1,"aaa",{name:'sayname'},function(){}];
console.log(a,b,c,d);
Rest参数
- rest参数只包括那些没有给出名称的参数,arguments包含所有参数;
- arguments对象不是真正的array,而rest参数是Array的实例,可以直接应用sort, map, forEach, pop等方法;
- arguments对象拥有一些自己额外的功能。
Rest参数接收函数的多余参数,组成一个数组,放在形参的最后,形式如下:
function func(a, b, ...theArgs) {
// ...
}
例:剩余参数数组里值的和
var sum = (a,...rest) => {
let rests = 0
for(let i=0;i<rest.length;i++){
if( isNaN(Number(rest[i])) ){continue}
rests += Number(rest[i]) ;
}
//continue(继续)
return rests
}
console.log(`输出:${rests}`)
数组的扩展用 ... 展开
例子:连接两个数组
let arr1 = [1,2,3,4]
let arr2 = [5,6,7,8]
//ES5写法:var arr = arr1.concat(arr2,[9])
var arr = [...arr1,...arr2,9]
console.log(arr)
注意,ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,如果一个数组成员不严格等于undefined,默认值是不会生效的。
对象的解构赋值
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。如果变量名与属性名不一致,必须写成下面这样。
var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
例子:利用对象解构赋值变量取属性同名的值
//父组件
<Modal title='标题' cancelText='取消' okText='确定' show={this.state.show} onShow={this.handleClick} >
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
子组件想拿到父组件里的同名属性
let {title,children,cancelText,okText} = this.props
//等同于声明一个变量等于this.props下的同名属性
//let title = this.props.title等等
//下面使用时不用再写this.props.title可以代替直接用title代替
let hello = ({name,age}) => (
console.log(`my name:${name},age:${age}`)
)
hello({name:'Liu',age:'24'})
对象的解构赋值是下面形式的简写
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
//简写形式:let{foo,bar}={foo: "aaa", bar: "bbb"}
将obj中的对象foo赋值给一个变量。
let obj = {bar:'bbb',foo:'aaa',name:'sayname'};
let {foo} = obj;
console.log(foo);
var foo = obj.foo;
字符串的解构赋值
按字符串下标赋值。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
len // 5
对象的结构赋值:
let name = 'liuenqing';
let age = 22;
let say = function(){
console.log(1)
}
let obj = {
name,
age,
say,
run(){
console.log('run')
}
}
console.log(obj)
对象的扩展(合并)
let obj1 = {name:'Liu'}
let obj2 = {age:'24',Gender:'man'}
Object.Assign({},obj1,obj2)
//必须都为对象
//obj.name会对name的值进行字符串解构
更为强大的 ...
let obj1 = {name:'Liu'}
let obj2 = {age:'24',Gender:'man'}
var obj = {...obj1,...obj2,say(){}}
console.log(obj)