ES6部分新增知识点（二）

1、模板字符串

let str = '明天天气会更好!';
let className = 'test';
let html = `<html>
                   <head></head>
                   <body>
                        <p>今天的天气很好!</p>
                        <div class="${className}">${str}</div>
                   </body>
                </html>`;

2、数组的扩展

Array.from(obj)将伪数组转化为真数组

<ul>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
</ul>
<script>
　　let allLis = document.querySelectorAll('li');
　　console.log(allLis);  //NodeList(6) [li, li, li, li, li, li]
　　console.log(Array.isArray(allLis));  //false
　　console.log(Array.from(allLis));    //(6) [li, li, li, li, li, li]
　　console.log(Array.isArray(Array.from(allLis)));  //true
　　let obj = {'name': '张三'};  
　　console.log(Array.from(obj));   //空数组[]
</script>

Array.of()：将传进来的多个参数组成一个数组返回

console.log(Array.of(1, 2, 3, 4));  //(4) [1, 2, 3, 4]
console.log(Array.of('张三', '李四', '王五'));  //(3) ["张三", "李四", "王五"]

3、对象的扩展

当key 和 value是一样的时候,写一个就够了

let name = '张三';
let age  = 18;
let person = {
    name,
    age
};
/*
等效于
let person = {
    'name': name,
    'age': age
}
*/

Object.assign()：多个对象合并，返回合并后的对象

let obj1 = {name: '张三'};
let obj2 = {age: 18};
let obj3 = {sex: '男'};
let obj4 = {sex: '女'};
let obj = {};
Object.assign(obj, obj1, obj2, obj3, obj4);
console.log(obj);  //{name: "张三", age: 18, sex: "女"}
Object.assign(obj, {name: "李四", age: 20, sex: "男"});
//后面的同名属性值覆盖前面的
console.log(obj);//{name: "李四", age: 20, sex: "男"}

4、延展操作符

let str = '今天的天气很好!';
let strArr = [...str];
console.log(strArr); //(8) ["今", "天", "的", "天", "气", "很", "好", "!"]

let student = {
    name: '张三',
    age: 18,
    sex: '男'
}

person = {...student}
console.log(person); //{name: "张三", age: 18, sex: "男"}
function sum(...arr){
    let sum = 0;
    for(let i = 0; i < arr.length; i++){
        sum += arr[i];
    }
    return sum;
}
console.log(sum(1,2,3));  //6

小应用：数组去重

let arr = [1, 2, 10, 20, 2, 1];
console.log(new Set(arr));   //Set(4) {1, 2, 10, 20}
console.log([...new Set(arr)]);  //(4) [1, 2, 10, 20]

5、函数扩展

5.1、形参可设置默认值

5.2、参数形式：最后一个形参可以使用延展操作符

5.3、箭头函数() => {}，是一种匿名函数

ES6部分新增知识点（二）

1、 模板字符串

2、数组的扩展

3、对象的扩展

4、延展操作符

5、函数扩展

1、模板字符串