ES6 解构赋值

定义：在ES6中，允许通过一定的模式，将数组/对象中的值提取出来，保存到变量中，这个过程，又称为解构赋值。（模式匹配）
注意事项：
1）解构过程中有一个=
2）=两边的模式一致
3）=右边是要被解构内容，左边是接收值的变量

1.数组的解构
数组特点：有索引，有序，集合
保证=两边都是数组(模式匹配)
A.完全解构（变量的个数与值的个数相等）
B.不完全解构（变量的个数少于值的个数）
C.解构失败（变量的个数多于值的个数）
解构中的默认值：
let[a=10]=arr;
若变量解构到数据，则使用该数据；若解构不到数据，则使用默认值
默认值生效的条件：解构出来的值全等(===)于undefined

//解构成功的条件是：解构到的变量的值不是undefined(全等的判断)
// let [x, y = ‘b’] = [‘a’, undefined]; // x=‘a’, y=‘b’
let [x, y = ‘b’] = [‘a’, null]; // x=‘a’, y=null

    console.log(x,y);

2.对象解构
对象的特点：对象时无序的，hash结构，是按照key进行存储的。对象的解构也是按照key进行解构的。

let obj = {
title: “电脑”,
price: ‘5000’,
count: ‘2991’
};
//es5
// console.log(obj.title,obj.price,obj.count);
//es6 按照key解构
let {title:a,price:b,count:c}=obj;//解构过程中，title、price、count都不是变量，变量：a,b,c
console.log(a,b,c);

解构示例： //1.完全解构
let obj = { sName: “lucy”, age: 20 };

    // let {sName:name,age:age}=obj;//注意：key:变量名
    // console.log(name,age);

    //2.不完全解构
    // let {sName:na}=obj;
    // console.log(na);

    //3.解构失败
    // let { sName: name, age: age1, address: addr } = obj;
    // console.log(addr);

    //4.解构默认值
    // let { sName: name, age: age1, address: addr = ''} = obj;
    // console.log(addr);

    //5.若key的名称与变量的名称相同，则可以 省略
    // let { sName: sName, age: age } = obj;
    //可以省略为，如下：
    let { sName, age } = obj;//sName和age既是属性名，又是变量名
    console.log(sName, age);

3.字符串解构
在JavaScript中，万物皆对象
4.函数参数的解构
传统hash的参数传递，需要按照顺序来进行传递，无法跳过某些内容。现实中有很多案例，需要让客户有选择传递参数。就可以使用参数的解构思想来完成
5.应用
1)数组值的交换
let arr=[10,20];
let [a,b]=arr;
Arr=[b,a];
2)复杂数据结构
3)函数参数解构

五、ES扩展
1.字符串扩展
Es5中字符串的问题：
1）不支持换行
2）不支持变量
ES6新增了定义字符串的方法 ``
let myStr = <li class="l1"> <a href="#"> <img src="${obj.src}" alt="${obj.title}"> </a> </li>;

2.数组扩展
数组中新增了两个方法：
Array.from()
能够将具有iterator(可遍历)接口的对象转换为数组
includes() 功能与indexOf比较相似
判定数组中是否包含某值，包含—>true 不包含---->false
3.对象扩展
若属性名和属性值的变量名一致，则可以省略一个

var sName=‘赵四爷’;
var age=58; let obj={
sName, //sName既是属性名，又是属性名对应的值(变量)
age
};

在ES6中，对象的方法可以省略function关键字，直接使用：函数名()即可

let obj = {
sName, //属性
age,
success() { //方法
console.log(‘我是成功了》。。。。’)
},
error() { },
complate() { }
};

扩展：属性表达式
let obj={};
for(let i=0;i<26;i++){
var c=String.fromCharCode(65+i)
// console.log©;
obj[c]=[];
}
console.log(obj);

4.函数扩展
1）函数的参数默认值
在ES6中允许函数的参数添加默认值
回顾：可以使用解构，为函数添加默认值

注意事项：
A.参数按照顺序执行(传递)
B.默认值参数在参数列表的后面
解构+参数默认值：

//1.参数位置利用了对象的解构赋值，2.参数有默认值 {}
function myAjax({ url = “http://localhost:3000”, type = “GET”, data = “”, timeout = 10 }={}) {
//业务逻辑 ajax
console.log(url,type,data,timeout);
}

    myAjax({
        url:"http://localhost:5000"
    });
    myAjax();