ES6常见语法

解构赋值：
一.对象的解构赋值：
常遇到的场景

export default class List extends PureComponent{
    constructor(){
        super();
        this.state = {
            userInfo:"李四",
            arr:[]
        }
        this.handleAdd = this.handleAdd.bind(this);
        this.handleModify = this.handleModify.bind(this);
    }
    render(){
        let {userInfo,arr} = this.state;//对象的解构赋值
        return (
            <div>
                <h3>{userInfo}</h3>
                <ul>
                    {
                        arr.map((item,index)=>(
                            <li>{item}</li>
                        ))
                    }
                </ul>
                <button onClick={this.handleAdd}>添加</button>
                <button onClick={this.handleModify}>修改</button>
            </div>
        )
    }
    handleAdd(){
        //render函数不会执行 因为newArr还是引用这arr的地址 地址没有发生改变
        let newArr = this.state.arr;
        newArr.push("姓名");
        this.setState({
            arr:newArr
        })
    }
    handleModify(){
        //会执行  因为会做浅比较
        this.setState({
            userInfo:"张三"
        })
    }
}

解构赋值对提取JSON对象中的数据，尤其有用

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
 
let { id, status, data: number } = jsonData;
 
console.log(id, status, number);
// 42, "OK", [867, 5309]

输入模块的指定方法

加载模块时，往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");
// 导入react组件
import {ReactComponent} from './xxxComponent.jsx';

二.数组的解构赋值
正常解构：

let [a, b, c] = [1, 2, 3];
console.log(a, b, c) //  1 2 3

let [ , , third] = ["foo", "bar", "baz"];
console.log(third) // baz

let [head, ...tail] = [1, 2, 3, 4];
console.log(head, tail) // 1 [2,3,4]

let [foo1] = [1,2,3,4,5,6];
console.log(foo1) // 1