js高级

最新推荐文章于 2023-07-18 09:41:55 发布

在路上呀

最新推荐文章于 2023-07-18 09:41:55 发布

阅读量190

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/sinat_41823773/article/details/107949610

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js高级

面向对象

面向对象的思维特点:

抽取（抽象）对象共用的属性和行为组织(封装)成一个类(模板)
对类进行实例化, 获取类的对象

面向对象编程我们考虑的是有哪些对象，按照面向对象的思维特点,不断的创建对象,使用对象,指挥对象做事情.

对象

定义：在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的：
- 属性：事物的特征，在对象中用属性来表示（常用名词）
- 方法：事物的行为，在对象中用方法来表示（常用动词）

类 class

定义：

类抽象了对象的公共部分，它泛指某一大类（class）
对象特指某一个，通过类实例化一个具体的对象

创建类

class name {            //创建
  // class body
}      

var xx = new name();     //实例化

<!-- 注意： 类必须使用 new 实例化对象 -->

类 constructor 构造函数

constructor() 方法是类的构造函数(默认方法)，用于传递参数,返回实例对象，通过 new 命令生成对象实例时，自动调用该方法。如果没有显示定义, 类内部会自动给我们创建一个constructor()

<script>
    // 1. 创建类 class  创建一个 明星类
    class Star {
        constructor(uname, age) {   //this指向当前实例
            this.uname = uname;
            this.age = age;
        }
    }

    // 2. 利用类创建对象 new
    var ldh = new Star('刘德华', 18);
    var zxy = new Star('张学友', 20);
    console.log(ldh);
    console.log(zxy);
    //(1) 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写
    //(2) 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象
    //(3) constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数
    //(4) 生成实例 new 不能省略
    //(5) 最后注意语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function
</script>

类添加方法

注意：方法之间不能加逗号分隔，同时方法不需要添加 function 关键字。

<script>
    // 1. 创建类 class  创建一个 明星类
    class Star {
        // 类的共有属性放到 constructor 里面
        constructor(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        sing(song) {
            // console.log('我唱歌');
            console.log(this.uname + song);

        }
    }

    // 2. 利用类创建对象 new
    var ldh = new Star('刘德华', 18);
    var zxy = new Star('张学友', 20);
    console.log(ldh);
    console.log(zxy);
    // (1) 我们类里面所有的函数不需要写function 
    //(2) 多个函数方法之间不需要添加逗号分隔
    ldh.sing('冰雨');
    zxy.sing('李香兰');
</script>

类的继承

子类可以继承父类的一些属性和方法。

class Father {
    constructor() {

    }
    money() {
        console.log(100);

    }
}
class Son extends Father {

}
var son = new Son();
son.money();     //==>100

super

super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数

super 关键字调用父类的构造函数

<!-- 子类继承父类中计算的方法 -->
class Father {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    sum() {
        console.log(this.x + this.y);

    }
}

class Son extends Father {
    constructor(x, y) {
        super(x, y); //super 关键字调用了父类中的构造函数
    }
}
var son = new Son(1, 2);
var son1 = new Son(11, 22);
son.sum();  //==> 3
son1.sum(); //==> 33

总结：
类中的方法使用的是 constructor 里面的数据，所以子类要使用父类的方法，需要把值传给父类，否则this的指向不一致，会报错

super 关键字调用父类的普通函数

<script>
    // super 关键字调用父类普通函数
    class Father {
        say() {
            return '我是爸爸';
        }
    }
    class Son extends Father {
        say() {
            // console.log('我是儿子');
            console.log(super.say() + '的儿子');
            // super.say() 就是调用父类中的普通函数 say()
        }
    }
    var son = new Son();
    son.say();
    // 继承中的属性或者方法查找原则: 就近原则
    // 1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
    // 2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)
</script>

注意: 子类在构造函数中使用super, 必须放到 this 前面 (必须先调用父类的构造方法,在使用子类构造方法)

<script>
    // 父类有加法方法
    class Father {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }
        sum() {
            console.log(this.x + this.y);
        }
    }
    // 子类继承父类加法方法 同时 扩展减法方法
    class Son extends Father {
        constructor(x, y) {
            // 利用super 调用父类的构造函数
            // super 必须在子类this之前调用
            super(x, y);
            this.x = x;
            this.y = y;

        }
        subtract() {
            console.log(this.x - this.y);

        }
    }
    var son = new Son(5, 3);
    son.subtract();
    son.sum();
</script>

三个注意点:

在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象.
类里面的共有属性和方法一定要加this使用.
类里面的this指向问题.
constructor 里面的this指向实例对象, 方法里面的this 指向这个方法的调用者

    <button>点击</button>
    <script>
        var that;
        var _that;
        class Star {
            constructor(uname, age) {
                // constructor 里面的this 指向的是 创建的实例对象
                that = this;
                console.log(this);

                this.uname = uname;
                this.age = age;
                // this.sing();
                //点击后调用sing方法
                this.btn = document.querySelector('button');
                this.btn.onclick = this.sing; //不要加括号，加了会立马调用
            }
            sing() {
                // 这个sing方法里面的this 指向的是 btn 这个按钮,因为这个按钮调用了这个函数
                console.log(this); //==> <button>点击</button>

                console.log(that.uname); // that里面存储的是constructor里面的this
            }
            dance() {
                // 这个dance里面的this 指向的是实例对象 ldh 因为ldh 调用了这个函数
                _that = this;
                console.log(this);

            }
        }

        var ldh = new Star('刘德华');
        console.log(that === ldh); //==>true
        ldh.dance();
        console.log(_that === ldh);

    </script>

构造函数

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

<script>
    // 1. 利用 new Object() 创建对象

    var obj1 = new Object();

    // 2. 利用 对象字面量创建对象

    var obj2 = {};

    // 3. 利用构造函数创建对象
    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
        this.sing = function() {
            console.log('我会唱歌');

        }
    }

    var ldh = new Star('刘德华', 18);
    var zxy = new Star('张学友', 19);
    console.log(ldh);
    ldh.sing();
    zxy.sing();
</script>

new 在执行时会做四件事情：
- 在内存中创建一个新的空对象。
- 让 this 指向这个新的对象。
- 执行构造函数里面的代码，给这个新对象添加属性和方法。
- 返回这个新对象（所以构造函数里面不需要 return ）。

实例成员和静态成员

<script>
    // 构造函数中的属性和方法我们称为成员, 成员可以添加
    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
        this.sing = function() {
            console.log('我会唱歌');

        }
    }
    var ldh = new Star('刘德华', 18);
    // 1.实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员
    // 实例成员只能通过实例化的对象来访问
    console.log(ldh.uname);
    ldh.sing();
    // console.log(Star.uname); // 不可以通过构造函数来访问实例成员
    // 2. 静态成员 在构造函数本身上添加的成员  sex 就是静态成员
    Star.sex = '男';
    // 静态成员只能通过构造函数来访问
    console.log(Star.sex);
    console.log(ldh.sex); // 不能通过对象来访问
</script>

构造函数原型 prototype

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。注意这个 prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。

我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。

<script>
    // 1. 构造函数的问题. 
    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
        // this.sing = function() {
        //     console.log('我会唱歌');

        // }
    }
    Star.prototype.sing = function() {
        console.log('我会唱歌');
    }
    var ldh = new Star('刘德华', 18);
    var zxy = new Star('张学友', 19);
    console.log(ldh.sing === zxy.sing); //==>true,表示地址相同
    // console.dir(Star);
    ldh.sing();
    zxy.sing();
    // 2. 一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上
</script>

对象原型 proto

对象都会有一个属性 proto 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 proto 原型的存在。
- __proto__对象原型和原型对象 prototype 是等价的
- __proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype

<script>
    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    Star.prototype.sing = function() {
        console.log('我会唱歌');
    }
    var ldh = new Star('刘德华', 18);
    var zxy = new Star('张学友', 19);
    ldh.sing();
    console.log(ldh); // 对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototype
    console.log(ldh.__proto__ === Star.prototype); //==>true
    // 方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing
    // 如果么有sing 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法
</script>

constructor 构造函数

对象原型（ proto）和构造函数（prototype）原型对象里面都有一个属性 constructor 属性，constructor 我们称为构造函数，因为它指回构造函数本身。
constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。

    <script>
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        // 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
        // Star.prototype.sing = function() {
        //     console.log('我会唱歌');
        // };
        // Star.prototype.movie = function() {
        //     console.log('我会演电影');
        // }
        Star.prototype = {
            // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象，导致原型被覆盖，没有了 constructor ,则必须手动的利用constructor指回原来的构造函数
            constructor: Star,
            sing: function() {
                console.log('我会唱歌');
            },
            movie: function() {
                console.log('我会演电影');
            }
        }
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 19);
        console.log(Star.prototype);
        console.log(ldh.__proto__);
        console.log(Star.prototype.constructor);
        console.log(ldh.__proto__.constructor);
    </script>

构造函数、实例、原型对象三者之间的关系

在这里插入图片描述

对象实例能指回构造函数是通过原型对象的 constructor 指回去的

原型链

在这里插入图片描述

<script>
    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    Star.prototype.sing = function() {
        console.log('我会唱歌');
    }
    var ldh = new Star('刘德华', 18);
    // 1. 只要是对象就有__proto__ 原型, 指向原型对象
    console.log(Star.prototype);
    console.log(Star.prototype.__proto__ === Object.prototype);
    // 2.我们Star原型对象里面的__proto__原型指向的是 Object.prototype
    console.log(Object.prototype.__proto__);
    // 3. 我们Object.prototype原型对象里面的__proto__原型  指向为 null
</script>

JavaScript 的成员查找机制(规则)

当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）。
如果还没有就查找原型对象的原型（Object的原型对象）。
依此类推一直找到 Object 为止（null）。
__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

<script>
    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    Star.prototype.sing = function() {
        console.log('我会唱歌');

    }
    Star.prototype.sex = '女';
    // Object.prototype.sex = '男';
    var ldh = new Star('刘德华', 18);
    ldh.sex = '男';
    console.log(ldh.sex);
    console.log(Object.prototype);
    console.log(ldh);
    console.log(Star.prototype);
    console.log(ldh.toString());
</script>

原型对象this指向

构造函数中的this 指向我们实例对象.
原型对象里面放的是方法, 这个方法里面的this 指向的是这个方法的调用者, 也就是这个实例对象.

<script>
    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
    }
    var that;
    Star.prototype.sing = function() {
        console.log('我会唱歌');
        that = this;
    }
    var ldh = new Star('刘德华', 18);
    // 1. 在构造函数中,里面this指向的是对象实例 ldh
    ldh.sing();
    console.log(that === ldh);  //==>true

    // 2.原型对象函数里面的this 指向的是 实例对象 ldh
</script>

扩展内置对象

可以通过原型对象，对原来的内置对象进行扩展自定义的方法。比如给数组增加自定义求偶数和的功能。

<script>
    // 原型对象的应用 扩展内置对象方法

    Array.prototype.sum = function() {
        var sum = 0;
        for (var i = 0; i < this.length; i++) {
            sum += this[i];
        }
        return sum;
    };
    // Array.prototype = {
    //     sum: function() {
    //         var sum = 0;
    //         for (var i = 0; i < this.length; i++) {
    //             sum += this[i];
    //         }
    //         return sum;
    //     }

    // }
    var arr = [1, 2, 3];
    console.log(arr.sum());
    console.log(Array.prototype);
    var arr1 = new Array(11, 22, 33);
    console.log(arr1.sum());
</script>

注：数组和字符串内置对象不能给原型对象覆盖操作 Array.prototype = {} ，只能是 Array.prototype.xxx = function(){} 的方式

call() 方法

调用这个函数, 并且修改函数运行时的 this 指向

使用： fun.call(thisArg, arg1, arg2, ...)

thisArg ：当前调用函数 this 的指向对象
arg1，arg2：传递的其他参数

<script>
    // call 方法
    function fn(x, y) {
        console.log('我想喝手磨咖啡');
        console.log(this);
        console.log(x + y);


    }
    var o = {
        name: 'andy'
    };
    // fn();
    // 1. call() 可以调用函数
    // fn.call();
    // 2. call() 可以改变这个函数的this指向 此时这个函数的this 就指向了o这个对象(本身是指向window的)
    fn.call(o, 1, 2);
</script>

ES6之前并没有给我们提供 extends 继承。我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承。

借用构造函数继承父类型属性

核心原理：通过 call() 把父类型的 this 指向子类型的 this ，这样就可以实现子类型继承父类型的属性。

<script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) {
        // this 指向父构造函数的对象实例
        this.uname = uname;
        this.age = age;
    }
    // 2 .子构造函数 
    function Son(uname, age, score) {
        // this 指向子构造函数的对象实例
        Father.call(this, uname, age);
        this.score = score;
    }
    var son = new Son('刘德华', 18, 100);
    console.log(son);
</script>

借用原型对象继承父类型方法

一般情况下，对象的方法都在构造函数的原型对象中设置，通过构造函数无法继承父类方法。

核心原理：
- 将子类所共享的方法提取出来，让子类的 prototype 原型对象 = new 父类()
- 本质：子类原型对象等于是实例化父类，因为父类实例化之后另外开辟空间，就不会影响原来父类原型对象
- 将子类的 constructor 从新指向子类的构造函数

<script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) {
        // this 指向父构造函数的对象实例
        this.uname = uname;
        this.age = age;
    }
    Father.prototype.money = function() {
        console.log(100000);

    };
    // 2 .子构造函数 
    function Son(uname, age, score) {
        // this 指向子构造函数的对象实例
        Father.call(this, uname, age);
        this.score = score;
    }
    // Son.prototype = Father.prototype;  这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
    Son.prototype = new Father();
    // 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
    Son.prototype.constructor = Son;
    // 这个是子构造函数专门的方法
    Son.prototype.exam = function() {
        console.log('孩子要考试');

    }
    var son = new Son('刘德华', 18, 100);
    console.log(son);
    console.log(Father.prototype);
    console.log(Son.prototype.constructor);
</script>

类的本质

1. class本质还是function.
2. 类的所有方法都定义在类的prototype属性上
3. 类创建的实例,里面也有__proto__ 指向类的prototype原型对象
4. 所以ES6的类它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
5. 所以ES6的类其实就是语法糖.
6. 语法糖:语法糖就是一种便捷写法.   简单理解, 有两种方法可以实现同样的功能, 但是一种写法更加清晰、方便,那么这个方法就是语法糖

<script>
    // ES6 之前通过 构造函数+ 原型实现面向对象 编程
    // (1) 构造函数有原型对象prototype 
    // (2) 构造函数原型对象prototype 里面有constructor 指向构造函数本身
    // (3) 构造函数可以通过原型对象添加方法
    // (4) 构造函数创建的实例对象有__proto__ 原型指向 构造函数的原型对象
    // ES6 通过 类 实现面向对象编程 
    class Star {

    }
    console.log(typeof Star);
    // 1. 类的本质其实还是一个函数 我们也可以简单的认为 类就是 构造函数的另外一种写法
    // (1) 类有原型对象prototype 
    console.log(Star.prototype);
    // (2) 类原型对象prototype 里面有constructor 指向类本身
    console.log(Star.prototype.constructor);
    // (3)类可以通过原型对象添加方法
    Star.prototype.sing = function() {
        console.log('冰雨');

    }
    var ldh = new Star();
    console.dir(ldh);
    // (4) 类创建的实例对象有__proto__ 原型指向 类的原型对象
    console.log(ldh.__proto__ === Star.prototype);
    i = i + 1;
    i++
</script>

数组方法

迭代(遍历)方法：forEach()、map()、filter()、some()、every()；

forEach()

使用： array.forEach(function(currentValue, index, arr))

currentValue：数组当前项的值
index：数组当前项的索引
arr：数组对象本身

// forEach 迭代(遍历) 数组
var arr = [1, 2, 3];
var sum = 0;
arr.forEach(function(value, index, array) {
    console.log('每个数组元素' + value);
    console.log('每个数组元素的索引号' + index);
    console.log('数组本身' + array);
    sum += value;
})
console.log(sum);

filter()

使用： array.filter(function(currentValue, index, arr))

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组
注意它直接返回一个新数组
currentValue: 数组当前项的值
index：数组当前项的索引
arr：数组对象本身

// filter 筛选数组
var arr = [12, 66, 4, 88, 3, 7];
var newArr = arr.filter(function(value, index) {
    // return value >= 20;
    return value % 2 === 0;
});
console.log(newArr);

some()–查找唯一的元素用它，因为它找到这个元素,就不在进行循环,效率更高

使用： array.some(function(currentValue, index, arr))

some() 方法用于检测数组中的元素是否满足指定条件. 通俗点查找数组中是否有满足条件的元素
注意它返回值是布尔值, 如果查找到这个元素, 就返回true , 如果查找不到就返回false.
如果找到第一个满足条件的元素,则终止循环. 不在继续查找.
currentValue: 数组当前项的值
index：数组当前项的索引
arr：数组对象本身

<script>
    // some 查找数组中是否有满足条件的元素 
    // var arr = [10, 30, 4];
    // var flag = arr.some(function(value) {
    //     // return value >= 20;
    //     return value < 3;
    // });
    // console.log(flag);
    var arr1 = ['red', 'pink', 'blue'];
    var flag1 = arr1.some(function(value) {
        return value == 'pink';
    });
    console.log(flag1);
    // 1. filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来
    // 2. some 也是查找满足条件的元素是否存在  返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环
</script>

forEach() 和 some() 的区别

<script>
    var arr = ['red', 'green', 'blue', 'pink'];
    // 1. forEach迭代 遍历
    // arr.forEach(function(value) {
    //     if (value == 'green') {
    //         console.log('找到了该元素');
    //         return true; // 在forEach 里面 return 不会终止迭代
    //     }
    //     console.log(11);

    // })
    // 如果查询数组中唯一的元素, 用some方法更合适,
    arr.some(function(value) {
        if (value == 'green') {
            console.log('找到了该元素');
            return true; //  在some 里面 遇到 return true 就是终止遍历 迭代效率更高
        }
        console.log(11);

    });
    // arr.filter(function(value) {
    //     if (value == 'green') {
    //         console.log('找到了该元素');
    //         return true; //  // filter 里面 return 不会终止迭代
    //     }
    //     console.log(11);

    // });
</script>

字符串方法

trim() 方法会从一个字符串的两端删除空白字符。

使用： str.trim()
trim() 方法并不影响原字符串本身，它返回的是一个新的字符串

<body>
    <input type="text"> <button>点击</button>
    <div></div>
    <script>
        // trim 方法去除字符串两侧空格
        var str = '   an  dy   ';
        console.log(str);
        var str1 = str.trim();
        console.log(str1);
        var input = document.querySelector('input');
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
            var str = input.value.trim();
            if (str === '') {
                alert('请输入内容');
            } else {
                console.log(str);
                console.log(str.length);
                div.innerHTML = str;
            }
        }
    </script>
</body>

对象方法

Object.keys() 用于获取对象自身所有的属性

使用： Object.keys(obj)

返回一个由属性名组成的数组

Object.defineProperty() 定义新属性或修改原有的属性

使用： Object.defineProperty(obj, prop, descriptor)

obj：必需。目标对象
prop：必需。需定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特性
Object.defineProperty() 第三个参数 descriptor 说明：以对象形式 { } 书写
- value: 设置属性的值默认为undefined
- writable: 值是否可以重写。true | false 默认为false
- enumerable: 目标属性是否可以被枚举。true | false 默认为 false
- configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false 默认为false

函数的定义方式

函数声明方式 function 关键字 (命名函数)
函数表达式 (匿名函数)
new Function()
使用： var fn = new Function('参数1','参数2'..., '函数体')

Function 里面参数都必须是字符串格式
第三种方式执行效率低，也不方便书写，因此较少使用
所有函数都是 Function 的实例(对象)
函数也属于对象

函数调用

普通函数
对象的方法
构造函数
绑定事件函数
定时器函数
立即执行函数

<script>
    // 函数的调用方式

    // 1. 普通函数
    function fn() {
        console.log('人生的巅峰');

    }
    // fn();   fn.call()
    // 2. 对象的方法
    var o = {
        sayHi: function() {
            console.log('人生的巅峰');

        }
    }
    o.sayHi();
    // 3. 构造函数
    function Star() {};
    new Star();
    // 4. 绑定事件函数
    // btn.onclick = function() {};   // 点击了按钮就可以调用这个函数
    // 5. 定时器函数
    // setInterval(function() {}, 1000);  这个函数是定时器自动1秒钟调用一次
    // 6. 立即执行函数
    (function() {
        console.log('人生的巅峰');
    })();
    // 立即执行函数是自动调用
</script>

函数内 this 的指向

这些 this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同. 一般指向我们的调用者.

在这里插入图片描述

<body>
    <button>点击</button>
    <script>
        // 函数的不同调用方式决定了this 的指向不同
        // 1. 普通函数 this 指向window
        function fn() {
            console.log('普通函数的this' + this);
        }
        window.fn();
        // 2. 对象的方法 this指向的是对象 o
        var o = {
            sayHi: function() {
                console.log('对象方法的this:' + this);
            }
        }
        o.sayHi();
        // 3. 构造函数 this 指向 ldh 这个实例对象 原型对象里面的this 指向的也是 ldh这个实例对象
        function Star() {};
        Star.prototype.sing = function() {

        }
        var ldh = new Star();
        // 4. 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象
        var btn = document.querySelector('button');
        btn.onclick = function() {
            console.log('绑定时间函数的this:' + this);
        };
        // 5. 定时器函数 this 指向的也是window
        window.setTimeout(function() {
            console.log('定时器的this:' + this);

        }, 1000);
        // 6. 立即执行函数 this还是指向window
        (function() {
            console.log('立即执行函数的this' + this);
        })();
    </script>
</body>

改变函数内部 this 指向

JavaScript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this 的指向问题，常用的有 bind()、call()、apply() 三种方法。

call 方法

call() 方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。

fun.call(thisArg, arg1, arg2, ...)

thisArg：在 fun 函数运行时指定的 this 值
arg1，arg2：传递的其他参数
返回值就是函数的返回值，因为它就是调用函数
因此当我们想改变 this 指向，同时想调用这个函数的时候，可以使用 call，比如继承

<script>
    // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

    // 1. call()
    var o = {
        name: 'andy'
    }

    function fn(a, b) {
        console.log(this);
        console.log(a + b);

    };
    fn.call(o, 1, 2);
    // call 第一个可以调用函数 第二个可以改变函数内的this 指向
    // call 的主要作用可以实现继承
    function Father(uname, age, sex) {
        this.uname = uname;
        this.age = age;
        this.sex = sex;
    }

    function Son(uname, age, sex) {
        Father.call(this, uname, age, sex);
    }
    var son = new Son('刘德华', 18, '男');
    console.log(son);
</script>

apply 方法

apply() 方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。

使用： fun.apply(thisArg, [argsArray])

thisArg：在fun函数运行时指定的 this 值
argsArray：传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数
因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值

<script>
    // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

    // 2. apply()  应用 运用的意思
    var o = {
        name: 'andy'
    };

    function fn(arr) {
        console.log(this);
        console.log(arr); // 'pink'接收进行转换，传的是数值，转换成数值，传的是字符串，转成字符串

    };
    fn.apply(o, ['pink']);
    // 1. 也是调用函数 第二个可以改变函数内部的this指向
    // 2. 但是他的参数必须是数组(伪数组)
    // 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值 
    // Math.max();
    var arr = [1, 66, 3, 99, 4];
    var arr1 = ['red', 'pink'];
    // var max = Math.max.apply(null, arr); // null在严格模式下可能会出错
    var max = Math.max.apply(Math, arr);
    var min = Math.min.apply(Math, arr);
    console.log(max, min);
</script>

bind 方法

bind() 方法不会调用函数。但是能改变函数内部this 指向

使用：fun.bind(thisArg, arg1, arg2, ...)

thisArg：在 fun 函数运行时指定的 this 值
arg1，arg2：传递的其他参数
返回由指定的 this 值和初始化参数改造的原函数拷贝
因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind

<body>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
        // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

        // 3. bind()  绑定 捆绑的意思
        var o = {
            name: 'andy'
        };

        function fn(a, b) {
            console.log(this);
            console.log(a + b);


        };
        var f = fn.bind(o, 1, 2);
        f();
        // 1. 不会调用原来的函数   可以改变原来函数内部的this 指向
        // 2. 返回的是原函数改变this之后产生的新函数
        // 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
        // 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
        // var btn1 = document.querySelector('button');
        // btn1.onclick = function() {
        //     this.disabled = true; // 这个this 指向的是 btn 这个按钮
        //     // var that = this;
        //     setTimeout(function() {
        //         // that.disabled = false; // 定时器函数里面的this 指向的是window
        //         this.disabled = false; // 此时定时器函数里面的this 指向的是btn
        //     }.bind(this), 3000); // 这个this 指向的是btn 这个对象
        // }
        var btns = document.querySelectorAll('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                this.disabled = true;
                setTimeout(function() {
                    this.disabled = false;
                }.bind(this), 2000);
            }
        }
    </script>
</body>

call apply bind 总结

相同点: 都可以改变函数内部的this指向.
区别点:
- call 和 apply 会调用函数, 并且改变函数内部this指向.
- call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2…形式 apply 必须数组形式[arg]
- bind 不会调用函数, 可以改变函数内部this指向.
主要应用场景:
- call 经常做继承.
- apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
- bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.

严格模式

严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。

严格模式对正常的 JavaScript 语义做了一些更改：
- 消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。
- 消除代码运行的一些不安全之处，保证代码运行的安全。
- 提高编译器效率，增加运行速度。
- 禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 Javascript 做好铺垫。比如一些保留字如：class, enum, export, extends, import, super 不能做变量名

开启严格模式

为脚本开启严格模式

<!-- 为整个脚本(script标签)开启严格模式 -->
<script>
    'use strict';
    //   下面的js 代码就会按照严格模式执行代码
</script>
<script>
<!-- 这样独立创建一个作用域而不影响其他 script 脚本文件。 -->
    (function() {
        'use strict';
    })();
</script>

为函数开启严格模式

<!-- 为某个函数开启严格模式 -->
<script>
    // 此时只是给fn函数开启严格模式
    function fn() {
        'use strict';
        // 下面的代码按照严格模式执行
    }

    function fun() {
        // 里面的还是按照普通模式执行
    }
</script>

严格模式中的变化

变量规定
- 在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，变量都必须先用var 命令声明，然后再使用。
- 严禁删除已经声明变量。例如，delete x; 语法是错误的。
严格模式下 this 指向问题
- 以前在全局作用域函数中的 this 指向 window 对象。
- 严格模式下全局作用域中函数中的 this 是 undefined。
- 以前构造函数时不加 new也可以调用,当普通函数，this 指向全局对象
- 严格模式下,如果构造函数不加new调用, this 指向的是undefined 如果给他赋值则会报错
- new 实例化的构造函数指向创建的对象实例。
- 定时器 this 还是指向 window 。
- 事件、对象还是指向调用者。
函数变化
- 函数不能有重名的参数。
- 函数必须声明在顶层.新版本的 JavaScript 会引入“块级作用域”（ ES6 中已引入）。为了与新版本接轨，不允许在非函数的代码块内声明函数。

    <script>
        'use strict';
        // 1. 我们的变量名必须先声明再使用
        // num = 10;
        // console.log(num);
        var num = 10;
        console.log(num);
        // 2.我们不能随意删除已经声明好的变量
        // delete num;
        // 3. 严格模式下全局作用域中函数中的 this 是 undefined。
        // function fn() {
        //     console.log(this); // undefined。

        // }
        // fn();
        // 4. 严格模式下,如果 构造函数不加new调用, this 指向的是undefined 如果给他赋值则 会报错.
        // function Star() {
        //     this.sex = '男';
        // }
        // // Star();
        // var ldh = new Star();
        // console.log(ldh.sex);
        // 5. 定时器 this 还是指向 window 
        // setTimeout(function() {
        //     console.log(this);

        // }, 2000);
        // a = 1;
        // a = 2;
        // 6. 严格模式下函数里面的参数不允许有重名
        // function fn(a, a) {
        //     console.log(a + a);

        // };
        // fn(1, 2);
        function fn() {}
    </script>

高阶函数

高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。

<script>
function fn(callback){
  callback&&callback();
}
fn(function(){alert('hi')}
</script>

<script>
function fn(){
    return function() {}
}
 fn();
</script>

此时fn 就是一个高阶函数
函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用。最典型的就是作为回调函数。
同理,函数也可以作为返回值传递回来

闭包—延伸变量的作用范围。

合理的使用闭包

<script>
    // 闭包（closure）指有权访问另一个函数作用域中变量的函数。
    // 闭包: 我们fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num
    function fn() {
        var num = 10;

        function fun() {
            console.log(num);

        }
        fun();
    }
    fn();
</script>

    <script>
        // 闭包（closure）指有权访问另一个函数作用域中变量的函数。
        // 一个作用域可以访问另外一个函数的局部变量 
        // 我们fn 外面的作用域可以访问fn 内部的局部变量
        // 闭包的主要作用: 延伸了变量的作用范围
        function fn() {
            var num = 10;

            // function fun() {
            //     console.log(num);

            // }
            // return fun;
            return function() { //return可以作为闭包的主要实现原理
                console.log(num);
            }
        }
        var f = fn();
        f();
        // 类似于
        // var f = function() {
        //         console.log(num);
        //     }
        // var f =  function fun() {
        //         console.log(num);

        //     }
    </script>

闭包应用-点击li输出当前li的索引号

<body>
    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <script>
        // 闭包应用-点击li输出当前li的索引号
        // 1. 我们可以利用动态添加属性的方式
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onclick = function() {
                // console.log(i);
                console.log(this.index);

            }
        }
        // 2. 利用闭包的方式得到当前小li 的索引号
        for (var i = 0; i < lis.length; i++) {
            // 利用for循环创建了4个立即执行函数
            // 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
            (function(i) {
                // console.log(i);
                lis[i].onclick = function() {
                    console.log(i);

                }
            })(i);
        }
    </script>
</body>

立即执行函数中的i在立即执行函数执行完之后应该要销毁的，但是内部的点击事件需要使用i，所以要等到点击事件结束后才能销毁，如果一直不点击，i一直没销毁，会存在内存泄漏的问题

闭包应用-3秒钟之后,打印所有li元素的内容

<body>
    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <script>
        // 闭包应用-3秒钟之后,打印所有li元素的内容
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            (function(i) {
                setTimeout(function() {
                    console.log(lis[i].innerHTML);
                }, 3000)
            })(i);
        }
    </script>
</body>

闭包应用-计算打车价格

    <script>
        // 闭包应用-计算打车价格 
        // 打车起步价13(3公里内),  之后每多一公里增加 5块钱.  用户输入公里数就可以计算打车价格
        // 如果有拥堵情况,总价格多收取10块钱拥堵费
        // function fn() {};
        // fn();
        var car = (function() {
            var start = 13; // 起步价  局部变量
            var total = 0; // 总价  局部变量
            return {
                // 正常的总价
                price: function(n) {
                    if (n <= 3) {
                        total = start;
                    } else {
                        total = start + (n - 3) * 5
                    }
                    return total;
                },
                // 拥堵之后的费用
                yd: function(flag) {
                    return flag ? total + 10 : total;
                }
            }
        })();
        console.log(car.price(5)); // 23
        console.log(car.yd(true)); // 33

        console.log(car.price(1)); // 13
        console.log(car.yd(false)); // 13
    </script>

闭包总结

闭包是什么？
- 闭包是一个函数（一个作用域可以访问另外一个函数的局部变量）
闭包的作用是什么？
- 延伸变量的作用范围

递归

什么是递归？

如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。
简单理解:函数内部自己调用自己(重复、多次执行某段代码，跟循环类似), 这个函数就是递归函数
递归函数的作用和循环效果一样
由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件 return。

<script>
    // 递归函数 : 函数内部自己调用自己, 这个函数就是递归函数
    var num = 1;

    function fn() {
        console.log('我要打印6句话');

        if (num == 6) {
            return; // 递归里面必须加退出条件，否则会不断地开辟作用域，不断的创建内存，造成栈溢出
        }
        num++;
        fn();
    }
    fn();
</script>

利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * …n

    <script>
        function fn(n) {
            if (n == 1) {
                return 1;
            }
            return n * fn(n - 1);
        }
        console.log(fn(3));
        console.log(fn(4));
        // 详细思路 假如用户输入的是3
        //return  3 * fn(2)
        //return  3 * (2 * fn(1))
        //return  3 * (2 * 1)
        //return  3 * (2)
        //return  6
    </script>

输入id号,就可以返回相应的数据对象

    <script>
        var data = [{
            id: 1,
            name: '家电',
            goods: [{
                id: 11,
                gname: '冰箱',
                goods: [{
                    id: 111,
                    gname: '海尔'
                }, {
                    id: 112,
                    gname: '美的'
                }, ]
            }, {
                id: 12,
                gname: '洗衣机'
            }]
        }, {
            id: 2,
            name: '服饰'
        }];
        // 我们想要做输入id号,就可以返回的数据对象
        // 1. 利用 forEach 去遍历里面的每一个对象
        function getID(json, id) {
            var o = {};
            json.forEach(function(item) {
                // console.log(item); // 2个数组元素
                if (item.id == id) {
                    // console.log(item);
                    o = item;
                    // 2. 我们想要得里层的数据 11 12 可以利用递归函数
                    // 里面应该有goods这个数组并且数组的长度不为 0 
                } else if (item.goods && item.goods.length > 0) {
                    o = getID(item.goods, id);
                }

            });
            return o;
        }
        console.log(getID(data, 1));
        console.log(getID(data, 2));
        console.log(getID(data, 11));
        console.log(getID(data, 12));
        console.log(getID(data, 111));
    </script>

浅拷贝

浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用（即地址）.

在这里插入图片描述

Object.assign(target, …sources) es6 新增方法可以实现浅拷贝

<script>
    // 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.
    // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
    var obj = {
        id: 1,
        name: 'andy',
        msg: {
            age: 18
        }
    };
    //for in 实现浅拷贝
    var o = {};
    // for (var k in obj) {
    //     // k 是属性名   obj[k] 属性值
    //     o[k] = obj[k];
    // }
    // console.log(o);
    // o.msg.age = 20;
    // console.log(obj);

    console.log('--------------');
    //新方法--Obj拷贝给o
    Object.assign(o, obj);
    console.log(o);
    o.msg.age = 20;
    console.log(obj);
</script>

浅拷贝中复杂类型数据被修改后，原数据中也会被修改（因为地址相同）

深拷贝

深拷贝拷贝多层, 每一级别的数据都会拷贝.
在这里插入图片描述

<script>
    // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
    var obj = {
        id: 1,
        name: 'andy',
        msg: {
            age: 18
        },
        color: ['pink', 'red']
    };
    var o = {};
    // 封装函数 (递归实现)
    function deepCopy(newobj, oldobj) {
        for (var k in oldobj) {
            // 判断我们的属性值属于那种数据类型
            // 1. 获取属性值  oldobj[k]
            var item = oldobj[k];
            // 2. 判断这个值是否是数组
            if (item instanceof Array) {
                newobj[k] = [];
                deepCopy(newobj[k], item)
            } else if (item instanceof Object) {
                // 3. 判断这个值是否是对象
                newobj[k] = {};
                deepCopy(newobj[k], item)
            } else {
                // 4. 属于简单数据类型
                newobj[k] = item;
            }

        }
    }
    deepCopy(o, obj);
    console.log(o);

    var arr = [];
    console.log(arr instanceof Object);
    o.msg.age = 20;
    console.log(obj);
</script>

ES6

let 用于声明变量的关键字。

<script type="text/javascript">
    /*
        let关键字就是用来声明变量的

        使用let关键字声明的变量具有块级作用域

        在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的

        防止循环变量变成全局变量

        使用let关键字声明的变量没有变量提升

        使用let关键字声明的变量具有暂时性死区特性

    */

    /* --------let关键字就是用来声明变量的-------- */
    // let a = 10;
    // console.log(a);

    /* --------使用let关键字声明的变量具有块级作用域-------- */
    // if (true) {
    // 	let b = 20;
    // 	console.log(b)
    // 	if (true) {
    // 		let c = 30;
    // 	}
    // 	console.log(c);
    // }
    // console.log(b)

    /* -------在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的--------- */

    // if (true) {
    // 	let num = 100;
    // 	var abc = 200;
    // }
    // console.log(abc);
    // console.log(num)


    /* -------防止循环变量变成全局变量--------- */
    // var定义的变量i 在循环结束后能被访问
    // for (let i = 0; i < 2; i++) {}
    // console.log(i);


    /*-----使用let关键字声明的变量没有变量提升------*/
    // console.log(a);
    // let a = 100;


    /* -------使用let关键字声明的变量具有暂时性死区特性------- */
    var num = 10
    var y = 10
    if (true) {
        console.log(y)  //==>10
        console.log(num); // 报错，num不能被使用
        let num = 20;
    }
    //let 声明的num和当前的块级作用域做了绑定，在当前区域使用 num 和外部的 num没有关系 

</script>

在这里插入图片描述

	<script type="text/javascript">
		let arr = [];

		for (let i = 0; i < 2; i++) {
			arr[i] = function () {
				console.log(i);
			}
		}

		arr[0]();
		arr[1]();
	</script>

const 声明常量，常量就是值（内存地址）不能变化的量。

具有块级作用域
声明常量时必须赋值
常量赋值后，值不能修改。

	<script type="text/javascript">
		// 使用const关键字声明的常量具有块级作用域
		// if (true) {
		// 	const a = 10;
		// 	if (true) {
		// 		const a = 20;
		// 		console.log(a);
		// 	}
		// 	console.log(a);
		// }
		// console.log(a);
		
		// 使用const关键字声明的常量必须赋初始值
		// const PI = 3.14;
		
		// 常量声明后，基本数据类型的值不可更改，复杂数据类型的 数据结构内部的值可以更改，数据值本身不可更改
		const PI = 3.14;
		// PI = 100; //报错
		const ary = [100, 200];
		ary[0] = 123;
		ary = [1, 2] //报错，不能重新赋值，证明常量值对应的内存地址不可更改
		console.log(ary);
	</script>

let、const、var 的区别

在这里插入图片描述

什么时候使用？

存储的数据不需要变化，尽量使用 const 关键字，例如：函数定义，π值，或是数学公式中恒定不变的值—const 关键字定义的常量js解析时不会实时监控它，所以const 比 let 效率高

解构赋值（分解数据结构，为变量赋值）

按照一定模式，从数组中或对象中提取值，将提取出来的值赋值给另外的变量。

数组解构

<script type="text/javascript">
    // 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
    let ary = [1, 2, 3];
    //左边的 [变量名1，变量名2...] 表示解构，从数组中提取值
    let [a, b, c, d, e] = ary;
    console.log(a) //==>1
    console.log(b) //==>2
    console.log(c) //==>3
    console.log(d) //==>数组中没有对应的值，解构不成功，undefined
    console.log(e) //==>undefined
</script>

对象解构

<script type="text/javascript">
    // 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量

    let person = { name: 'lisi', age: 30, sex: '男' };
    let { name, age, sex, a } = person;
    console.log(name)
    console.log(age)
    console.log(sex)
    console.log(a) //==>匹配不到该属性，undefined


    //另一种写法
    // 冒号左边的 name 去匹配，右边是变量名
    let { name: myName, age: myAge } = person;
    console.log(myName)
    console.log(myAge)

</script>

箭头函数

<script type="text/javascript">
    // 箭头函数是用来简化函数定义语法的
    // () 放置形参，{}放置函数体
    /* const fn = () => {
        console.log(123)
    }
    fn(); //调用 */

    // 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略
    /* const sum = (n1, n2) => n1 + n2;	 
    const result = sum(10, 20);
    console.log(result) */

    // 在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的
    // const fn = v => alert(v);
    // fn(20)


    // 箭头函数不绑定this 箭头函数没有自己的this关键字 如果在箭头函数中使用this this关键字将指向箭头函数定义位置中的this
    function fn() {
        console.log(this);
        return () => {
            console.log(this)
        }
    }

    const obj = { name: 'zhangsan' };

    const resFn = fn.call(obj);  //调用fn，打印了第一个console.log(this);

    resFn(); //调用箭头函数，打印了第二个console.log(this);
</script>

面试题

<script type="text/javascript">

    var age = 100;

    var obj = {
        age: 20,
        say: () => {
            alert(this.age)
        }
    }
    //对象不能产生作用域，obj.say()是 window 作用域下的，所以会弹出100，若window中没有 age 属性，则会弹出undefined
    obj.say();
</script>.

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

 function sum (first, ...args) {
     console.log(first); // 10
     console.log(args); // [20, 30] 
 }
 sum(10, 20, 30)

剩余参数和解构配合使用

 let students = ['wangwu', 'zhangsan', 'lisi'];
 let [s1, ...s2] = students; 
 console.log(s1);  // 'wangwu' 
 console.log(s2);  // ['zhangsan', 'lisi']

<script type="text/javascript">
    // const sum = (...args) => {
    // 	let total = 0;
    // 	args.forEach(item => total += item);
    // 	return total;
    // };

    // console.log(sum(10, 20));
    // console.log(sum(10, 20, 30));
    

    let ary1 = ['张三' , '李四', '王五'];
    let [s1, ...s2] = ary1;
    console.log(s1)
    console.log(s2)

</script>

Array 的扩展方法

扩展运算符（展开语法）

<body>
	<div>1</div>
	<div>4</div>
	<div>3</div>
	<div>6</div>
	<div>2</div>
	<div>5</div>
	<script type="text/javascript">
		// 扩展运算符可以将数组拆分成以逗号分隔的参数序列
		/* let ary = ["a", "b", "c"];
		//...ary; // "a", "b", "c"
		console.log(...ary)
		console.log("a", "b", "c")//参数序列中的逗号被当成console.log的参数分隔符
		//以上两句等价 */

		// ----------------------------------------

		// 扩展运算符应用于数组合并
		/* let ary1 = [1, 2, 3];
		let ary2 = [4, 5, 6];
		// ...ary1 // 1, 2, 3
		// ...ary1 // 4, 5, 6
		let ary3 = [...ary1, ...ary2];
		console.log(ary3) */

		// 合并数组的第二种方法
		/* let ary1 = [1, 2, 3];
		let ary2 = [4, 5, 6];

		ary1.push(...ary2);
		ary1.push(99, 98);//push可以接收多个参数
		console.log(ary1) */
		// ------------------------------------------

		// 利用扩展运算符将伪数组转换为真正的数组
		var oDivs = document.getElementsByTagName('div');
		console.log(oDivs)
		var ary = [...oDivs];
		ary.push('a');
		console.log(ary);
	</script>
</body>

构造函数方法：Array.from()

将伪数组或可遍历对象转换为真正的数组

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}; 
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

let arrayLike = { 
     "0": 1,
     "1": 2,
     "length": 2
 }
 let newAry = Array.from(aryLike, item => item *2)// [2, 4]

实例方法：find()

用于找出第一个符合条件的数组成员，如果没有找到返回undefined

 let ary = [{
     id: 1,
     name: '张三‘
 }, { 
     id: 2,
     name: '李四‘
 }]; 
 let target = ary.find((item, index) => item.id == 2);

实例方法：findIndex()

用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9); 
console.log(index); // 2

实例方法：includes()

表示某个数组是否包含给定的值，返回布尔值。

[1, 2, 3].includes(2) // true 
[1, 2, 3].includes(4) // false

String 的扩展方法

模板字符串

ES6新增的创建字符串的方式，使用反引号定义。

let name = zhangsan;

模板字符串中可以解析变量—${变量名}。

let name = '张三'; 
let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan

模板字符串中可以换行

 let result = { 
     name: 'zhangsan', 
     age: 20, 
     sex: '男' 
 } 
 let html = ` <div>
     <span>${result.name}</span>
     <span>${result.age}</span>
     <span>${result.sex}</span>
 </div> `;

在模板字符串中可以调用函数，调用位置显示函数执行后的返回值。

const fn = () => {
    return '我是fn函数'
}

let html = `我是模板字符串 ${fn()}`;
console.log(html)

实例方法：startsWith() 和 endsWith()

startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

<script type="text/javascript">
    let str = 'Hello ECMAScript 2015';
    let r1 = str.startsWith('Hell');
    console.log(r1);
    let r2 = str.endsWith('2016');
    console.log(r2)
</script>

实例方法：repeat()

repeat方法表示将原字符串重复n次，返回一个新字符串。

'x'.repeat(3)      // "xxx" 
'hello'.repeat(2)  // "hellohello"

Set 数据结构

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成 Set 数据结构。
const s = new Set();

Set函数可以接受一个数组作为参数，用来初始化。
const set = new Set([1, 2, 3, 4, 4]);

add(value)：添加某个值，返回 Set 结构本身
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
has(value)：返回一个布尔值，表示该值是否为 Set 的成员
clear()：清除所有成员，没有返回值

遍历：

Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

const s5 = new Set(['a', 'b', 'c']);
s5.forEach(value => {
    console.log(value)
})

ary = [{
id: 1,
name: '张三‘
}, {
id: 2,
name: '李四‘
}];
let target = ary.find((item, index) => item.id == 2);


### 实例方法：findIndex()

用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9);
console.log(index); // 2


### 实例方法：includes()
 
表示某个数组是否包含给定的值，返回布尔值。

[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false

## String 的扩展方法

### 模板字符串

ES6新增的创建字符串的方式，使用反引号定义。

let name = `zhangsan`;

模板字符串中可以解析变量---${变量名}。

let name = ‘张三’;
let sayHello = hello,my name is ${name}; // hello, my name is zhangsan


模板字符串中可以换行

let result = {
name: ‘zhangsan’,
age: 20,
sex: ‘男’
}
let html = `

{result.name}</span> <span>

{result.age}
${result.sex}


在模板字符串中可以调用函数，调用位置显示函数执行后的返回值。

const fn = () => {
return ‘我是fn函数’
}

let html = 我是模板字符串 ${fn()};
console.log(html)


### 实例方法：startsWith() 和 endsWith()

+ startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
+ endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值


### 实例方法：repeat()

repeat方法表示将原字符串重复n次，返回一个新字符串。

‘x’.repeat(3) // “xxx”
‘hello’.repeat(2) // “hellohello”

## Set 数据结构

ES6 提供了新的数据结构  Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成  Set  数据结构。
`const s = new Set();`

Set函数可以接受一个数组作为参数，用来初始化。
`const set = new Set([1, 2, 3, 4, 4]);`

+ add(value)：添加某个值，返回 Set 结构本身
+ delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
+ has(value)：返回一个布尔值，表示该值是否为 Set 的成员
+ clear()：清除所有成员，没有返回值

遍历：

Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

const s5 = new Set([‘a’, ‘b’, ‘c’]);
s5.forEach(value => {
console.log(value)
})

在路上呀

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js高级

js高级面向对象面向对象的思维特点:抽取（抽象）对象共用的属性和行为组织(封装)成一个类(模板)对类进行实例化, 获取类的对象面向对象编程我们考虑的是有哪些对象，按照面向对象的思维特点,不断的创建对象,使用对象,指挥对象做事情.对象定义：在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。对象是由属性和方法组成的：属性：事物的特征，在对象中用属性来表示（常用名词）方法：事物的行为，在对象中用方法来表示（常用动词
复制链接

扫一扫