ES6 new syntax 2

6. Array expansion

6.1 Spread operator (...)

{
    // 复制数组
    let list1 = [1,2,3];
    let list2 = [...list1];
    list2.push(4)
    console.log(list1);
    console.log(list2);
}
{
    // 分割数组
    let list1 = [1,2,3,'a','b','c'];
    let [,,,...list2] = list1; // 通过,进行占位
    console.log(list1);
    console.log(list2);
}
{
    // 展开数组，给方法传参
    function func(x,y){
        return x+y;
    }
    let list = [1,2];
    console.log(func(...list));
}

6.2 Extension functions

{
    // fill 填充数组，常用于初始化
    let list1 = [1,2,3,4];
    let list2 = [...list1].fill('a'); // 数据全部填充成a
    let list3 = [...list1].fill('a',1,3); // 数据从下标1，到下标3之前，填充
    console.log(list2); 
    console.log(list3); 
}
{
    let personList = [
        {id:'1',name:'张三',sex:1},
        {id:'2',name:'李四',sex:0},
        {id:'3',name:'张三',sex:1},
    ];
    // find 查找，查找数组中第一个满足条件的元素
    let person = personList.find(function(item){
        return item.name=='张三'
    })
    // findIndex 查找，查找数组中第一个满足条件的元素的下标
    let personIndex = personList.findIndex(function(item){
        return item.name=='张三'
    })
    // some 判断是否存在符合条件的元素
    let isFind = personList.some(function(item){
        return item.name=='张三';
    });
    console.log(person);
    console.log(isFind);
    console.log(personIndex);
}
{
    // includes判断数组中是否包涵指定的值，一般对简单数据类型进行判断
    let list1 = [1,2,3,4];
    console.log(list1.includes(6));
}
{
    // flat 展开数组，如果数组中还有数组，可以通过flat张开数组，合并成一层数组
    let list1 = [1,2,3,[11,22,33,[111,222,333]]];
    let list2 = list1.flat(2); // 参数2是展开的层级，默认是1
    console.log(list2)
}
{
    // filter 过滤。过滤出数组中所有符合要求的元素
    let personList = [
        {id:'1',name:'张三',sex:1},
        {id:'2',name:'李四',sex:0},
        {id:'3',name:'张三',sex:0},
    ];
    let personList2 = personList.filter(function(item){
        return item.name == '张三'
    })
    console.log(personList2);
}

6.2 filter

{
    // filter 过滤。过滤出数组中所有符合要求的元素
    let personList = [
        {id:'1',name:'张三',sex:1},
        {id:'2',name:'李四',sex:0},
        {id:'3',name:'张三',sex:0},
    ];
    let personList2 = personList.filter(function(item){
        return item.name == '张三'
    })
    console.log(personList2);
}

// filter() 去掉空字符串、undefined、null
let arr = ['','1','2',undefined,'3.jpg',undefined]
let newArr = arr.filter(item => item)
console.log(newArr)

// filter() 数组去重
let arr = [1, 2, 2, 3, 4, 5, 5, 6];
let newArr = arr.filter((x, index,self)=>self.indexOf(x)===index) 
console.log(newArr)

// 去重复还是推荐set去重
let arr = [1, 2, 2, 3, 4, 5, 5, 6];
let newArr =Array.from(new Set(arr)) 
console.log(newArr)

6.3 map

map returns a new changed array. Need to return.

{
    // map 常用于数据的映射
    let personList = [
        {id:'1',name:'张三',sex:1},
        {id:'2',name:'李四',sex:0},
        {id:'3',name:'张三',sex:1},
    ];
    let newPersonList1 = personList.map(function(item){
        return {
            id:item.id,
            name:item.name,
            sex:item.sex ? '男' : '女'
        }
    })
    // 如果只想改变数组中的特定属性
    let newPersonList2 = personList.map(function(item){
        let obj={};
        Object.assign(obj,item);
        obj.sex = item.sex ? '男' : '女';
        return obj;
    })
    console.log(personList)
    console.log(newPersonList1)
    console.log(newPersonList2)
}

6.4 reduce

{
    /**
     * reduce 是对数组中的每个元素进行回调，升序执行后，将回调的值进行汇总
     */
    let str = 'abcdasegsa';
    let result = str.split('').reduce(function(acc,cur){
        // acc 是一个初始化的值，cur是循环中的元素
        acc[cur] ? acc[cur]++ : acc[cur]=1;
        return acc;
    },{});
    console.log(result);
}

7. Arrow function

{
    const func1 = (x)=>{
        console.log('箭头函数');
    }
    func1('1');

    const func2 = x => x*2;
    console.log(func2(1))
}

Features: Simple to use. Do not bind this.

{
    let person = {
        name:'张三',
        age:18,
        showName1:function(){
            setTimeout(function(){
                // 这里的this是window
                console.log(this.name,this);
            },1000);
        },
        showName2:function(){
            setTimeout(()=>{
                // 这里的this是person
                console.log(this.name,this);
            },1000);
        }
    }
    person.showName1();
    person.showName2();
}

8. Classes in ES6

8.1 Statement

Essentially the use of classes in ES5 and ES6 is the same. Class in ES6 can be understood as syntactic sugar for constructors

    {
        // ES5中声明类的常用方式
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        Person.prototype.sayHello = function(){
            console.log(`你好，我是${this.name}`)
        }
        let p1 = new Person('张三',18);
        p1.sayHello();
        console.log(p1);
    }
    {
        // ES6中声明类 本质上整个Person就是构造函数
        class Person{
            constructor(name,age){
                this.name = name;
                this.age = age;
            }
            sayHello(){
                console.log(`你好，我是${this.name}`)
            }
        }
        
        
        let p1 = new Person('张三',18);
        p1.sayHello();
        console.log(p1)
    }

8.2 Inheritance

    {
        // ES5中声明类的常用方式
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        Person.prototype.sayHello = function(){
            console.log(`你好，我是${this.name}`)
        }
        let p1 = new Person('张三',18);
        p1.sayHello();
        console.log(p1);
    }
    {
        // ES6中声明类 本质上整个Person就是构造函数
        class Person{
            constructor(name,age){
                this.name = name;
                this.age = age;
            }
            sayHello(){
                console.log(`你好，我是${this.name}`)
            }
        }
        let p1 = new Person('张三',18);
        p1.sayHello();
        console.log(p1)
    }
    {
        // es5继承
        function Person(name){
            this.name = name;
        }
        Person.prototype.sayHello = function(){
            console.log("person",this.name)
        }
        function Man(name,age){
            this.age = age;
            Person.call(this,name);
        }
        Man.prototype = new Person();
        Man.prototype.showAge = function(){
            console.log("man",this.age,this.name)
        }

        var man = new Man("张三",17);
        man.showAge();
        console.log(man);
    }
    {
        // ES6中的实现
        class Person{
            constructor(name){
                this.name = name;
            }
            sayHello(){
                console.log("person",this.name)
            }
        }
        class Man extends Person{
            constructor(name,age){
                // 必须调用super 才能使用this
                super(name);
                this.name = name;
                this.age =age
            }
            showAge(){
                console.log("man",this.age,this.name)
            }
        }
        var man = new Man("张三",17);
        man.showAge();
        console.log(man);
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Js Class extends</title>
    <style>
        * {
            margin-top: 20px;
        }

        h5 {
            color: red;
        }

        span {
            color: blue;
        }
    </style>
</head>

<body>
    <h5>Js 类继承 extends</h5>
    <div>继承类声明 使用关键字 extends</div>
    <div>如果子类中存在构造函数 constructor()，则需要在使用“this”之前调用 super() 代替父类构造函数</div>
    <div>
        <span>js 输出: </span>
        <span id="idconsole"></span>
        <!-- 显示时间 -->
        <div></div>
    </div>

</body>
<script>
    // 父类
    class Animal {
        constructor(name) {
            this.name = name;// 类属性声明不须要var声明 , var parrent = '';是声明普通变量
        }
        // 成员方法
        speak() {
            console.log(this.name + ' makes a noise.'); //仿问类属性要使用 this.
        }
    }
    // 子类 继承自 Animal
    class Dog extends Animal {
        master = ''; // Dog 比父类Animal 多了新属性master
        constructor(name, master) {
            super(name); // 调用 super() 代替父类构造函数,初始化与父类共同的属性name
            this.master = master; // 初始化子类新属性master
        }
        // 重载父类成员方法 speak
        speak() {
            let logstr = this.name + ' is a Dog, ' + 'has master from ' + this.master + ' .';
            let logelement = document.getElementById('idconsole');
            logelement.innerHTML = logstr;
            logelement.nextElementSibling.innerHTML = 'time: ' + new Date().toLocaleString();
        }
    }
    var d = new Dog('Wangwang', 'People'); // 构造新实例 Dog
    d.speak(); // 调用Dog成员方法
</script>

</html>

9. export and import

module1.js

// export 分别导出 变量、方法和类。
// 声明和导出在一起
export let a = 18;
export function func(){
    console.log('hello')
}
export class Person{
    sayHello(){
        console.log('person');
    }
}

module2.js

// 先声明
let a = 12;
function func(){
    console.log('hello')
}
class Person{
    sayHello(){
        console.log('person');
    }
}
// 后导出（推荐）
export default{
    a,
    func,
    Person
}

import

<script type="module">
    // 第一种导入 按需导入的名称要和exprot 中对应
    import {a,func, Person} from './js/module1.js';
    console.log(a);
    console.log(func);
    console.log(Person);
    // 第二种导入 一次性导入所有的export。
    import * as module1 from './js/module1.js';
    console.log(module1.a);
    console.log(module1.func);
    console.log(module1.Person);

    //第三中导入 （推荐）配合export default
    import module2 from './js/module2.js';
    console.log(module2.a);
    console.log(module2.func);
    console.log(module2.Person);
</script>

10. Asynchronous programming

   1. What is synchronization

                  When a "call" is issued, before the result is obtained, the "call" will block the execution of the subsequent code, and will not return until the result is obtained. In other words, the "caller" must actively wait for the execution result of the code. The program will not continue to run until the result is returned.

    2. What is asynchronous

                 When the "call" is issued, it is returned directly, and the corresponding result will be notified to the "caller" through status and notification, or the call will be processed through a callback function. After an asynchronous call is issued, subsequent code will not be blocked.

    3. Why is the concept of asynchronous introduced in JavaScript?

                 JavaScript is single-threaded

                 Synchronous code blocks subsequent code

                 Asynchronous will not block the running of the program

    4. Implementation of asynchronous in JavaScript

           Callback

// ⼀层的回调函数
$.get('http://api.xxx.com/xxx', callback)
 
/** 
*   请求后台类型列列表，根据类型名称获取要请求的列列表id，再根据id获取列表详细内容
*   难以维护，这就是回调地狱了
**/
$.ajax({
    url: "type",
    data:1,
    success: function (a) {
        $.ajax({
            url: "list",
            data:a,
            success: function (b) {
                $.ajax({
                    url: "content",
                    data:b,
                    success: function (c) {
                        console.log(c)
                    }
                })
            }
        })
    }
})

setInterval and setTimeout

Promise

Generator

async

10.1 promise

    {
        function func1(resolve,reject){
            var timeOut = Math.random() * 2;
            setTimeout(()=>{
                console.log('任务1',timeOut);
                if(timeOut<1){
                    resolve("执行结果"); // 调用promise的then中的方法
                }else{
                    reject("执行报错"); // // 调用promise的catch中的方法
                }
            },1000);
        }

        let p1 = new Promise(func1);
        let p2 = p1.then(function(response){
            console.log("执行完了"+response)
        });
        let p3 = p2.catch(function(error){
            console.log("执行出错了"+error);
        })
    }
    {
        // ajax1 ajax2 ajax3 都是Promise对象
        function ajax1(num){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    console.log("任务1",num+1);
                    resolve(num+1);
                },1000)
            });
        }
        function ajax2(num){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    console.log("任务2",num+2);
                    resolve(num+2);
                },1000)
            });
        }
        function ajax3(num){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    console.log("任务3",num+3);
                    resolve(num+3);
                },1000)
            });
        }
        ajax1(1).then(ajax2).then(ajax3);
    }

Promise.all() method

   {
        // 定义Promise方法，传入要相加的数字
        function getNum(num){
            return new Promise((resolve,reject)=>{
                resolve(num);
            });
        }
        function sum(nums){
            let result = 0;
            nums.forEach(num=>{
                result = result + num;
            });
            console.log(result);
        }
        // 使用Promise.all 方法，此方法传入多个Promise方法，保证这些方法都全部完成，才执行then
        // Promise.all()返回的也是一个Promise实例。then方法传入的参数是前面多个方法中resolve的参数数组
        Promise.all([getNum(1),getNum(2),getNum(9)]).then(sum);
    }

Promise.race() method

{
        // 定义Promise方法，传入要相加的数字
        function getNum(num){
            return new Promise((resolve,reject)=>{
                resolve(num);
            });
        }
        function showNum(num){
            console.log(num);
        }
        // Promise.race方法 用于希望多个方法，率先返回的结果就是整个Promise的结果
        Promise.race([getNum(11),getNum(2),getNum(9)]).then(showNum);
    }