ES6（3）：变量的解构赋值、模板字符串、简化对象写法、函数参数默认值、rest参数、扩展运算符

一、变量的解构赋值

1. 数组的解构

const F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xiao, liu, zhao, song] = F4;
console.log(xiao);
console.log(liu);
console.log(zhao);
console.log(song);

2. 对象的解构

const zhao = {
   name: '赵本山',
   age: '不详',
   xiaopin: function(){
       console.log("我可以演小品");
   }
};

let {name, age, xiaopin} = zhao;
console.log(name);
console.log(age);
console.log(xiaopin);
xiaopin();

二、模板字符串

1. 声明

let str = `我也是一个字符串哦!`;
console.log(str, typeof str);

2. 内容中可以直接出现换行符

let str = `<ul>
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
            </ul>`;

3. 变量拼接

let lovest = '张三';
let out = `${lovest}是他`;
console.log(out);

三、简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

let name = '学校名称';
let change = function(){
    console.log('我们可以改变你!!');
}

const school = {
    name,
    change,
    improve(){
        console.log("学校可以提高你的技能");
    }
}

console.log(school);

四、函数参数默认值

1. 形参初始值。具有默认值的参数，一般位置要靠后(潜规则)

function add(a,b,c=10) {
  return a + b + c;
}
let result = add(1,2);
console.log(result);

function add(a,c=10,b) {
	return a + b + c;
}
let result = add(1,2);
console.log(result);

2. 与解构赋值结合

function connect({host="127.0.0.1", username,password, port}){
   console.log(host)
    console.log(username)
    console.log(password)
    console.log(port)
}
connect({
    host: 'atguigu.com',
    username: 'root',
    password: 'root',
    port: 3306
})

五、rest参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments。
ES5 获取实参的方式：

function date(){
	console.log(arguments);
}
date('a','b','c');

rest 参数：

function date(...args){
	console.log(args);
}
date('a','b','c');

rest 参数必须要放到参数最后：

function fn(a,b,...args){
	console.log(a);
	console.log(b);
	console.log(args);
}
fn(1,2,3,4,5,6);

六、扩展运算符

『…』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』：

//声明一个数组 ...
const tfboys = ['易烊千玺','王源','王俊凯'];
// => '易烊千玺','王源','王俊凯'

// 声明一个函数
function chunwan(){
    console.log(arguments);
}

chunwan(...tfboys);// chunwan('易烊千玺','王源','王俊凯')

如果不用扩展运算符：

//声明一个数组 ...
const tfboys = ['易烊千玺','王源','王俊凯'];

function chunwan(){
    console.log(arguments);
}

chunwan(tfboys);

扩展运算符应用：
1. 数组的合并

const kuaizi = ['王太利','肖央'];
const fenghuang = ['曾毅','玲花'];
// const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
console.log(zuixuanxiaopingguo);

2. 数组的克隆：

const abc= ['A','B','C'];
const cba= [...abc];//  ['A','B','C']
console.log(cba);

3. 将伪数组转为真正的数组：

<div></div>
<div></div>
<div></div>

const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr);