js高级

1.箭头函数

函数的简写

// 箭头函数是匿名函数，一般做为参数传递
// let test = function (a,b){
//     let sum = a + b 
//     return sum
// }
// let test = (参数) => {函数体}
// 几个小细节
// 1.如果函数体只有一句，那么可以省略{},同时默认会返回函数体的结果，不能写return
// 2.如果只有一个参数，那么可以省略()
// 3.如果没有参数，()也不能省略
// let test = (a,b) =>  a + b    // 不能有大括号
let test = a =>  a + 10 

let res = test(100)
console.log(res)

2.常用数组方法

1.every( )------->检测数值元素的每个元素是否都符合条件。

2.filter( )------->检测数值元素，并返回符合条件所有元素的数组。

3.find( )------->返回符合传入测试（函数）条件的数组元素。

4.findlndex( )------->返回符合传入测试（函数）条件的数组元素索引。

5.forEach( )------->数组每个元素都执行一次回调函数。

6.includes( )------->判断一个数组是否包含一个指定的值。

7.indexOf( )------->搜索数组中的元素，并返回它所在的位置。

8.isArray( )------->判断对象是否为数组。

9.join( )------->把数组的所有元素放入一个字符串。

10.map( )------->通过指定函数处理数组的每个元素，并返回处理后的数组。

11.reduce( )------->将数组元素计算为一个值（从左到右）。

12.reverse( )------->反转数组的元素顺序。

13.some( )------->检测数组元素中是否有元素符合指定条件。

14.sort( )------->对数组的元素进行排序。

3.面向对象

1.作用:

一种编程行业通用的写项目级的代码的思维，引导我们如何编写高质量的代码，万物皆对象 - 看待事物的角度，（属性：数据，行为：动作（方法））。代码特点是封装和继承

2.对象在内存中的示意图

1650700584196

4.创建对象的几种方式

1.字面量

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

const obj ={ name:"悟空",height:100,age:5000};2.

2.工厂函数

容易理解
失去血缘关系,无法简单分辨对象的特征
后期无法实现继承

1650700831381

    function createPerson(name, age, height) {
      return {
        name: name,
        age: age,
        height: height
      }
    }

    function createStudent(name, age, height, grade) {
      return {
        name1: name,
        age1: age,
        height1: height,
        grade: grade
      }
    }

    // 这个不是工厂模式
    function createStudent2(name, age, height, grade) {
      this.name = name;
      this.age = age;
      this.height = height;
      this.grade = grade;
    }


    const obj1 = createPerson("八戒", 18, 500);
    const obj2 = createStudent("悟能", 83, 231, 3);
    const obj3 = new createStudent2("悟能", 83, 231, 3);

    console.log(obj1);
    console.log(obj2);
    console.log(obj3);

3.构造函数

可以方便的创建对象

2.拥有血缘关系

3.还有后续更多的优势

    // 1 声明函数 
    function createStudent(name, age) {
      // 2 通过 this 赋值
      this.name = name;
      this.age = age;
    }

    // 3 通过 new 来创建对象
    const obj = new createStudent("悟能", 83);

    console.log(obj);

4.小结: 笔试题比较常见

构造函数的工作原理：

1.开辟空间

2.将新的创建的对象对象结构函数中的this

3.为对象赋值

4.将创建好的对象的地址返回

5.构造函数的弊端

1.同一个 say 方法占据了两份内存

    function createStudent(name, age) {
      this.name = name;
      this.age = age;
      this.say = function () {
        console.log(this.name);
      }
    }

    const obj = new createStudent("悟能", 83);
    const obj1 = new createStudent("悟能1", 84);

    console.log(obj.say === obj1.say); // false  不是同一say方法 浪费了内存

2.图示

1650701253634

6.提取同一个 `say` 方法

1.解决了浪费内存的弊端

2.但是造成了污染全局变量的问题

    // 提前将say 声明好
    function say() {  // 污染全局变量
      console.log(this.name);
    }
    function createStudent(name, age) {
      this.name = name;
      this.age = age;
      this.say = say
    }

    const obj = new createStudent("悟能", 83);
    const obj1 = new createStudent("悟能1", 84);

    console.log(obj.say === obj1.say); // true

3.图示

1650701369372

7.原型模式

在构造函数的原型上存放函数

解决了同一个 say 浪费内存的问题

解决了污染全局变量的问题

    function createStudent(name, age) {
      this.name = name;
      this.age = age;
    }
    // 将刚才的全局函数say 直接挂载到 构造函数的原型上 即可
    // prototype 是个对象 每一个构造函数都会内置有的. 我们称之为原型
    createStudent.prototype.say = function () {
      console.log(this.name);
    }

    const obj = new createStudent("悟能", 83);
    const obj1 = new createStudent("悟能1", 84);

    console.log(obj.say === obj1.say); // true

3.解释

原型的单词是 prototype, 原型的这个名字是行业内共同认可的名字。
原型本质是一个对象，理解为 JavaScript 自动帮我们添加的
原型是 JavaScript 自动帮我们在定义构造函数的时候添加的
所有构造函数的实例，共享一个原型
原型上一般是挂载函数

4.如图

1650701608879

5.解构

提供更加方便获取数组中元素或者对象中属性的写法

1.获取数组中的元素

      const [a, b, c, d] = [1, 2, 3, 4];
      console.log(a, b, c, d);// 1,2,3,4

2.元素交互顺序

    let a = 1111;
    let b = 2222;
    [b, a] = [a, b];
    console.log(a, b);// 2222 1111

3.获取对象中的属性（重点）

      const obj = {
        name: "悟空",
        skill: "72变",
        say() { }
      }
      const { name, skill,say } = obj;
      console.log(name, skill,say);// 悟空 72变 function(){}

6.拓展运算符 || 剩余运算符

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

1.函数内获取

    function show(a, ...all) {		// 只能放最后
      console.log(a);
      console.log(all);
    }


    show(1);// 1 []
    show(1, 2, 3);// 1 [2,3]

2.数组内获取

    const [a, ...rest] = [1, 2, 3, 4, 5];
    console.log(a); // 1
    console.log(rest);// [2, 3, 4, 5]

3.对象内获取

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

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

js高级第一天