JS 高级

基本写法

 <script>
      /* 
      1 箭头函数 也是一种函数 写法上 简洁 灵活-飘逸   常用 
       */

      //  普通函数
      function func1() {
        console.log('func1');
      }

      // 普通函数
      const func2 = function () {
        console.log('func2');
      };

      // 箭头函数
      const func3 = () => {
        console.log('func3');
      };

      func1(); // 函数的调用
      func2(); // 函数的调用
      func3(); // 函数的调用
    </script>

传递参数

 <script>
      // 箭头函数  传参
      // 如果 只传递一个参数的话  小括号 可以省略
             const func2 = a => {}
             
      // 如果 不传递参数 或者 传递参数 大于 1个的话 小括号不能省略
            const func2 = () => {}
            const func2 = (a, b) => {}

    </script>

返回值

 <script>
      // 通俗返回值的写法
      const func1 = () => {
        return 123;
      };
      // const num = func1();
      // console.log(num);// 123


      // 简洁的返回值的写法  如果你的函数只有一行代码 那么大括号可以省略 同时 这一行的代码运行结果 也会被直接返回
      // 如果你想要省略 大括号了  !! 代码不要换行
      const func2 = (a) => a + 1 
      console.log(func2(2)); //3

    </script>

返回对象

 <script>
      const func1 = () => 123;
      const func2 = () => 'abc';
      const func3 = () => true;
      const func4 = () => [1, 2, 34];

      // 如果你的箭头函数 省略大括号的 情境下 想要返回 一个对象  固定语法 添加一个小括号()
      const func5 = () =>( { username: '悟空' });

    </script>

默认值

<script>
      // (msg="大家好")  "大家好" 就是msg 默认值
      const func1 = (msg = '大家好') => {
      console.log(msg);
      };
     func1("你好"); // 如果 调用函数的时候 你没有传递 就使用默认值


      // 定义一个函数  接收一个数组 告诉我们 这个数组的长度
      const getLength = (arr = []) => console.log(arr.length);

      const list=['a'];
      getLength(list);  // 长度为1 

	 getLength()  // 长度为0，因为没有传参，使用了默认值

    </script>

解构

数组的解构

const arr = ['a', 'b', 'c'];
      以前的获取方法 
      const str1 = arr[0];
      const str2 = arr[1];
      console.log(str1,str2);

      数组解构 关注 顺序
      const [str1, str2] = arr;
      console.log(str1,str2);

交换变量 解构

let a = 100;
   以前的写法
    let b = 200;
    let c = a;
    a = b;
    b = c;
    console.log(a,b);

    交换变量 解构
      let a = 100;
      let b = 200;

      [b, a] = [a, b];
      console.log(a, b);

对象解构

 const obj = { username: '悟空', skill: '72' };

  以前写法
  const username=obj.username;
  const skill=obj.skill;
	
	对象解构写法
    const { username, skill } = obj;   // 取值是对应对象的名字，不是乱写的
    console.log(username);
    console.log(skill);

对象的简写

<script>
    const userame = '悟空'
    const skill = '72'
    const age = 500

    // 以前写法
    const obj = {
        username: username,
        skill: skill,
      };

    // 对象 属性的简写
    const obj1 = {
      userame,
      skill,
      age,
    }
    console.log(obj);


    // 对象 函数的简写
    const obj2 = {
      userame,
      say() {     //以前是say:function() {} 可以把:function 省略
        console.log('这是一个方法');
      }
    }
    obj.say()

  </script>

剩余运算符

 <script>
    //  剩余运算符 数组用法
    const arr = ['a', 'b', 'c', 'd']

    // 除了被拿走的元素，其他的都放在...数组里面(名字可以随便起)
    const [let1, ...list] = arr
    console.log(list);  //['b', 'c', 'd']


    //  剩余运算符 对象用法
    const obj = { a: 1, b: 2, c: 3, d: 4 };

    // 除了被拿走的元素，其他的都放在...对象里面(名字可以随便起)
    const { a, b, ...objs } = obj;
    console.log(objs,); //{c: 3, d: 4 }

 
     calc(1);      // [1]
      calc(1,2);   // [1,2]
      calc(1,2,3); // [1,2,3]
      calc();      // []
      
      function calc(...params) {
        // params 可以获取到所有 传递给 calc 的参数 封装到一个数组中
        console.log(params);
        // 对数组做什么业务 都可以   计算总和  计算 最大值 最小值
      }
  </script>

复制引用类型，剩余运算符

 <script>
 // 复制一份 对象 ， 修改新的数据之后 旧的数据 不要收到影响
    const obj = { username: '悟空', age: 500 };

    // const newObj = obj;     // 如果这样写就会修改
    const newObj1 = {...obj};
    newObj1.username = '八戒';
    console.log(obj);     // { username: '悟空', age: 500 };     
    console.log(newObj1); // { username: '八戒', age: 500 };


    // 复制一份 数组 ， 修改新的数据之后 旧的数据 不要收到影响
    const list = ['a', 'b']
    
    // const newList = list    // 如果这样写就会修改
    const newList = [...list]
    newList.push('c')
    console.log(list);      // ['a', 'b']
    console.log(newList);  //  ['a', 'b'，'c']

    </script>

数组方法

下列数组方法总结

map()     处理数组的'每个元素'，并返回处理后的数组  
every()   检测数值元素的'每个元素'是否都符合条件  // 只要有一个是false,就返回false，而且不再运行下面的代码 
some()    检测数组'是否有符合指定条件'          // 只要有一个是true ,就返回true，而且不再运行下面的代码 
filter()  检测数值元素，并返回'符合条件'所有元素的数组  // 如果没有符合条件的，就返回空数组
find()    用来找数组中满足条件的'一个元素'     // 找到了之后返回true   不会再继续往下遍历 
findIndex()  符合条件的元素的'下标'          // 如果在函数中找到了  返回true   找不到就返回 -1
indexOf() 搜索数组中的元素，并返回它所在的位置 // 找到了 就返回元素的下标  没有找到了 返回 -1

map()

通过指定函数处理数组的每个元素，并返回处理后的数组。

const arr = ['a', 'b', 'c']   // 索引和内容拼接
    const newArr = arr.map(function (value,index) {
      return `<li>${index}-${value}</li>`
    })
    console.log(newArr); // "<li>0-a</li>""<li>1-b</li>""<li>2-c</li>"


const arr = ['a', 'b', 'c']   // 加箭头函数一起使用
    const newArr = arr.map((value) => `<li>${value}</li>`)
    console.log(newArr);

every()

检测数值元素的'每个元素'是否都符合条件。
// 只要有一个不是true ,返回的就是false，而且不再运行下面的代码 
<script>
    const names = ['黄圣飞', '梁子聪', '王锦双', '韦嘉敏', '雅琴']

    const result = names.every((value) => value.length > 2)
    console.log(result);
  </script>

some()

检测数组元素中是否有元素符合指定条件
// 只要有一个是true ,返回的就是true，而且不再运行下面的代码 
 const arr = ['阴性','阴性','阴性','阴性','阳性','阴性','阴性','阴性']

    const result = arr.some((value) => value === '阳性')

    if(result) {
      console.log('要完蛋了');
    }else {
      console.log('你好帅');
    }
   
    console.log(result);

filter()

检测数值元素，并返回'符合条件'所有元素的数组。
const arr = [1, 2, 5, 7, 8, 9]
	基本写法
    // const newArr = arr.filter(function (value) {
    //   if (value > 3) {
    //     return true
    //   } else {
    //     return false
    //   }
    // })
    箭头函数写法
    const newArr = arr.filter((value) => value > 3)
    
    console.log(newArr); // [5,7,8,9]

find

<script>

  find 用来找数组中满足条件的一个元素 
  找到了之后 不会再继续往下遍历 
  代码中 找到了 就需要返回true 

  // forEach 也可以做遍历 但是 不能被中断 打断 （for循环不一样！！ ）

      // forEach 做遍历的时候 是不能被打断 中断  break！！！！
      // for 和 foreach有什么区别  1 都是循环  2 for循环可以被中断 但是 foreach不可以！！

      // find 返回符合 条件的数组元素。
      const arr = [
        { username: '悟空', height: 70 },
        { username: '八戒', height: 60 },
        { username: '龙马', height: 30 },
        { username: '龙马', height: 30 },
      ];
           // const obj = arr.find((value) => {
      //   console.log(value);
      //   if (value.height === 60) {
      //     return true;
      //   } else {
      //     return false;
      //   }
      // });

      const obj = arr.find((value) => value.height === 60);

      console.log(obj);
    </script>

findIndex

<script>
      // findIndex  符合条件的元素的下标！！
      // 用法可以find很类似  在函数中 如果找到了 返回true   找不到就返回 -1 
      const arr = [
        { username: '悟空', height: 70 },
        { username: '八戒', height: 60 },
        { username: '龙马', height: 30 },
      ];

      // 帮我找到 身高为60的那一个元素 
      const index = arr.findIndex((value) => value.height === 660);// 找不到就返回 -1 
      
      console.log(index);

      // 帮我删除它！！
      // arr.splice(index,1);

      // console.log(arr);
    </script>

includes()

<script>
      // includes()	判断一个数组是否包含一个指定的值。
     // 有就是返回true , 没有就返回 false
      const arr = ['a', 'b', 'c', 'd'];

      // 判断数组中是否包含 'b'
      const result = arr.includes('e');
      console.log(result);
    </script>

indexOf

<script>
      // 类似 findIndex 
      // indexOf 搜索数组中的元素，并返回它所在的位置
      // 找到了 就返回元素的下标
      // 没有找到了 返回 -1

      const arr = ['a', 'b', 'c', 'd'];
      // 有没有包含 字母 b
      const index = arr.indexOf('h');

      console.log(index); // -1
    </script>

join

<script>
      // join方法 负责把数组 转成 字符串
      // join 含义 加入
      const arr = ['a', 'b', 'c'].map((value) => `<li>${value}</li>`);
      // const arr = ['<li>a</li>', '<li>b</li>', '<li>c</li>'];
      const result = arr.join('');
      console.log(result); //  ['<li>a</li>''<li>b</li>''<li>c</li>']
    </script>

Set 对象转数组

/永远不会有重复元素的对象
//可以理解为不重复的数组
//set 对象存在一个添加方法: add

const set = new Set([1, 5, 3, 4]); // 将数组转成对象
    set.add(5);   // 里面本来就有了，不管你添加多少次，都添加不进去 ，所以叫永远不会有重复元素
    set.add(5);
    console.log(set); // {1, 5, 3, 4}

    const arr = [...set];// 将对象转数组
    console.log(arr);  // [1, 5, 3, 4]

改变this的指向

以下方法总结

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


'全局函数 this 指向 window'
'箭头函数没有 this'

call

// call 第一个可以调用函数  第二个可以改变函数内的this 指向
// call 的主要作用可以实现继承

  // 父元素
    function Person(name, color, height, weigth) {
      this.name = name
      this.color = color
      this.height = height
      this.weigth = weigth
    }
    // 子元素
    function Son(name, color, height, weigth) {
      // call 改变了this的指向，然后继承了父元素的属性
      Person.call(this, name, color, height, weigth)
    }
    // 进行传参
    const son = new Son('悟空', '黄色', 120, 240)

apply

    // 1 也是调用函数 第二个可以改变函数内部的this指向
    // 2 但是他的参数必须是数组(伪数组)
    // 3 apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求最大值

    let arr = [1, 35, 57, 78, 99];
    // apply()的第一个参数设置为null，但是在严格模式下，会有问题，所以把它指向Math本身会更好
    let max = Math.max.apply(Math, arr) 
    let min = Math.min.apply(Math, arr)
    console.log(max,min);  // 99,1

bind

 <script>
    // 1 bind()方法不会调用函数，但是能改变函数内部this指向
    // 2 返回的是原来函数改变this之后产生的新函数

    const obj = {
      name: '三毛'
    }
    // 接收参数
    function fn(a, b) {
      console.log(this)
      console.log(a + b)
    }

    const f = fn.bind(obj, 1, 2)  // 返回新函数，所以要接收 ,可以传递参数
    f(2，3)  // 因为bind 不会调用函数，要自己调用  也可以传递参数
  </script>

class

 <script>
    /* 
      对于子类来说 
     1 如果你写了  extends 而且 还写 constructor 
       那么在我们的 constructor 必须要调用super 固定语法！！ 
      */
    // 继承 extends
    // 构造函数 constructor
    ' constructor()接收参数的，如果儿子也用了constructor 就一定要用super()把继承过来的属性装里面'

    // 父元素
    class Preson {
      constructor(name, color) {  // 接收参数
        this.name = name
        this.color = color
      }
    }
    // 子元素
    class YellowPerson extends Preson {
      constructor(name, color, height, weight) { // 接收参数
        super(name, color) // 继承父元素的属性
        this.height = height
        this.weight = weight
      }
    }
    const yp = new YellowPerson('三毛', '黄毛', 123, 234) // 传参
    console.log(yp);
  </script>

检测数据类型

  <script>
      //  基本的数据类型 typeof
      //  引用数据类 intanceof
      //  检测 这个实例是不是被某个构造函数 new 出来 
      //  返回的结果 是 true 与 false


      // console.log(typeof '');
      // console.log(typeof 1);

      class Person {}
      class SuperPerson{}
      const p1 = new Person();
      const s1 = new SuperPerson();

      console.log(p1 instanceof Person);//  true
      console.log(p1 instanceof SuperPerson); // false 

    </script>