数组的解构赋值

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)

results matching ""

    No results matching ""