JS高级

YQi
108 阅读5分钟

箭头函数

  • 箭头函数是匿名函数，一般做为参数传递。

    <script>
    const func = (num) => num + 100;
    //定义一个箭头函数 没有形参 没有返回值
    const func1 = () => {
        console.log('执行业务1');
        console.log('执行业务2');
    }

    //没有形参 没有返回值 业务只有一行代码 大括号可以省略
    const func2 = () => console.log('执行业务1');

    //只有一个形参 没有返回值 业务只有一行代码
    const func3 = (num1) => console.log(num1 + 1);
    const func4 = num1 => console.log(num1 + 1);

    //两个或者多个参数括号不能省略 没有返回值 业务只有一行代码
    const func5 = (a , b) => console.log(a + b);

    //没有形参 有返回值 业务两行代码
    const func6 = () => {
        let a = 100;
        return a + 100;
    } 

    //没有形参 有返回值 业务一行代码
    const func7 = () => {
        return 100 + 200;
    }
    console.log(func7);

    //没有形参 有返回值 业务一行代码
    const func8 = () => 100 + 200;
    console.log(func8);
</script>

常用数组方法

  1. forEach() 遍历数组，数组每个元素都执行一次回调函数。
  2. map() 通过指定函数处理数组的每个元素，并返回处理后的数组。
  3. some() 检测数组元素中是否最少有一个元素符合指定条件。
  4. filter() 过滤(筛选)数组，检测数值元素并返回符合条件所有元素的数组。
  5. every() 检测数值元素的每个元素是否都符合条件。

伪数组转成真正数组

  • const arr = [...dom数组]

创建对象方法

字面量

  • 不适合创建多个同样类型的对象的场景。

    <script>
    const obj1 = { username: '悟空1', tel: 123321 };
     // 不想要name属性，修改 username
    const name = 123; //修改无效

    const obj2 = { name: '悟空5', tel: 123325 };

    console.log(obj1);
    console.log(obj2);
    console.log(obj3);
</script>

工厂函数

  • 创建多个同样类型的对象的场景，后期无法实现继承

    <script>
    function createPerson(name, age, height) {
        return {
            //优点 容易维护  name => username
            username: name,
            age: age,
            height: height,
        };
    }
    //创建对象
    const obj1 = createPerson('悟空', 18, 200);
    const obj2 = createPerson('八戒', 20, 160);
    console.log(obj1);
    console.log(obj2);
</script>

构造函数

  • 可以方便的创建对象。构造函数的首字母大写。

  • 构造函数要和 new 一起使用才有意义

  • CreatePerson 就是构造函数。

  • this 指向：

    • 在构造函数中，this指向的是对象实例。
    • 原型对象函数里面的this指向的是实例对象。
    • 类里面的共用属性和方法一定要加this使用。

  • 构造函数的工作原理：

    • 开辟空间。

    • 将新的创建的对象指向构造函数中的this。

    • 为对象赋值。

    • 将创建好的对象的地址返回。

原型链继承

  • 原型-继承：子类继承父类

    <script>
    //父类
    function Person (name,age,height) {
        this.username = name;
        this.age = age;
        this.height = height;
    }
    //子类
    function Student(name,age,height,color) {
        //继承
        Person.call(this,name,age,height);
        this.color = color;
    }
    const p1 = new Person('奥特之父', 5000, 200);
    const s1 = new Student('迪迦', 2000, 100,"red");
</script>

  • 属性继承 call()

    • 添加属性、传入参数：

      add.call(谁要借用，被借用的方法的形参1，被借用的方法形参2)

  • 方法继承：

    • prototype 是个对象 每一个构造函数都会内置有的. 我们称之为原型。原型上一般是挂载函数。
    • 作用：共享方法。
    • 使用：行为方法写在原型上 prototype
    • 儿子的原型.say = 父亲的原型.say

  • super.父类方法()

    • super.say() 就是调用父类中的普通函数 say()
    • 子类有构造方法且使用this前，必须使用super()

  • constructor属性：

    • constructor称为构造函数，指回构造函数本身。
    • 主要用于记录该对象引用于哪个构造函数，可以让原型对象重新指向原来的构造函数。
    • constructor里面的this指向实例对象。

对象简写

  • 在定义对象的时候,如果属性名和变量名一直,那么可以实现简写。

    <script>
    const username = '大白';
    const color = 'white';
    const say = function() {};
    function show () {};
    const obj = {
        username,
        color,
        say,
        show,
        height: 100,
    }
    console.log(obj);
    //简写
    const person={
        show:function(){
            console.log("show");
        },// 常规写法
        say(){
            console.log("say");
        } // es6 关于 方法简写
    }
    person.show();
    person.say();
</script>

解构

数组解构

<script>
   const [a, b, c, d] = ['悟空', '八戒', '龙马', '三藏',"沙僧"];
   console.log(a, b, c, d);
</script>

解构 + 默认值

<script>
    const arr = [1,100];
    const [aa,bb ] = arr; //输出 aa = 1 bb = undefined
    const [aa, bb = 2] = arr;
    console.log(aa, bb); // 输出 aa =1  bb = 100
</script>

对象解构

<script>
    const obj = {
        username: '悟空',
        height: 100,
    };
    const { username, height = 200 } = obj;
    console.log(username, height); //输出 悟空 100
</script>

拓展运算符与剩余运算符

​ 通过 ...符号来获取剩下的参数。

  • 函数内获取

    <script>
function show(a, ...all) {		// 只能放最后
      console.log(a);
      console.log(all);
    }
show(1); //输出 1 []
show(1, 2, 3); //输出 1 [2,3]
</script>

  • 数组内获取

    <script>
    const [a,b, ...c] = [1,2,3,4,5,6,7];
    const [a,b, ...c] = [1,2,3];
    const [a,b, ...c] = [1, 2];
    console.log(a,b); //输出 1,2
    console.log(c);//输出 [3,4,5,6,7]
    console.log(c); //输出 [3]
    console.log(c); //输出 []
</script>

  • 对象内获取

    <script>
    const obj={
      name:"悟空",
      skill:"72变",
      say(){}
    }

    const {name,...others}=obj;
    console.log(name); //输出 悟空
    console.log(others);//输出 {skill: "72变", say: ƒ}
</script>

Set

Set对象转为数组

  • set是一个对象，不是一个数组。
  • 主要功能：去重处理。 set.add(1);
  • 使用set转成数组的时候，需要考虑 （set对象转-数组 数组 - 转成对象）
    • 数组 转成 对象 new Set(beforeArr)
    • set对象 转 数组 const arr=[...set]

函数的定义方式

  1. 函数声明方式 function 关键字 (命名函数)

  2. 函数表达式（匿名函数）

  3. new Function()

    • 语法: var fn = new Function('参数1','参数2'..., '函数体')

    • Function 里面参数都必须是字符串格式。

    • 所有函数都是 Function 的实例(对象)

    • 函数也属于对象。

函数的四种调用模式

函数调用模式

  • 如果一个函数不是一个对象的属性时，就是被当做一个函数来进行调用的。
  • 普通函数调用：this 指向 window

对象方法调用模式

  • 当一个函数被保存为对象的一个属性时，我们称之为一个方法。
  • 当一个方法被调用时，this 指向调用当前方法的对象。

构造函数调用模式

  • 如果函数是通过new关键字进行调用的，此时 this 被绑定到创建出来的新对象上。

方法借用模式（重点）

​ 也叫上下文模式,分为 apply 与 call

​ bind 、call 、apply 都可以修改this的指向。

  • call
    • 可以调用一个函数，并且可以改变函数的this指向。
    • call()方法接受的是若干个参数的列表。
    • 传递参数写法：obj.skill.call(person,参数1,参数2)
  • apply
    • 可以改变函数的this指向。
    • apply()方法接受的是一个包含多个参数的数组。
    • 传递参数写法：obj.skill.apply(person,[参数1，参数2])
  • bind
    • 创建一个新的函数，可以绑定新的函数的this指向。
    • bind 不会直接调用skill函数 而是 返回一个新的函数。
    • 需要我们主动的调用新的函数- 调用skill()
    • 传递参数写法：const func = obj.skill.bind(person); func(参数1，参数2)

call apply bind 总结

  1. 区别点：
    • call 和 apply 会调用函数, 并且改变函数内部this指向。
    • call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2..形式 apply 必须数组形式[arg]
    • bind 不会调用函数, 可以改变函数内部this指向。
  2. 主要应用场景：
    • call经常做继承。
    • apply经常跟数组有关系，比如借助数学对象实现最大最小值
    • bind不调用函数但是还想改变this指向，比如改变定时器内部
avatar
文章
阅读
粉丝