JS高级学习笔记

箭头函数

使用方式

• 定义一个箭头函数，没有形参，没有返回值

  const func2 = () => {
      console.log('执行业务1');
      console.log('执行业务2');
  }
  

• 没有形参，没有返回值，业务只有一行代码，大括号可以省略

  const fun3 = () => console.log('执行业务1');
  

• 只有一个形参，没有返回值，业务只有一行代码

  const fun4 = num => console.log(num + 1);
  const fun4 = (num) => console.log(num + 1);
  

• 两个或多个参数，没有返回值，业务只有一行代码

  const fun5 = (a,b) => {
      console.log(a + b)
  }
  

• 没有形参，有返回值，业务两行代码

  const fun6 = () => {
      let a = 100;
      return a + 100;
  }
  

• 没有形参，有返回值，业务一行代码

  const func7 = () => 100 + 200;
  

数组常用方法

foreach()

• 数组的每一个元素都执行一次回调函数

  let arr = [1,2,3,4];
  arr.foreach(item => console.log(item))
  

map()

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

  let arr = ["刘德华","郭德纲","林志颖"];
  let newArr = arr.map(value => `<div>${value}</div>`);
  console.log(newArr);//['<div>刘德华</div>','<div>郭德纲</div>','<div>林志颖</div>']
  

every()

• 检测数值元素的每个元素是否都符合条件

  let arr = [true,true,false,true,true];
        let flag = arr.every(item => {
          return item == true;
        });
  console.log(flag);//false
  
  //注意：当调用every的数组为空数组时，会返回true,使用every前要判断下数组是否为空
  

some()

• 检测数组中是否有元素符合指定条件

  let arr = [true,true,false,true,true];
        let flag = arr.some(item => {
          return item == true;
        });
  console.log(flag);//true
  

filter()

• 检测数值元素，并返回符合条件所有元素的数组

  let arr = [1,2,3,4,5];
  //返回奇数的数组
  const newArr = arr.filter(item => item%2 !== 0);
  

原型对象

概念

• 是任何构造函数存在的一个对象 prototype

作用

• 创建构造函数与对象
• 没有性能上的问题，也没有污染全局变量的问题

使用方式

function CreatePerson(name) {
    this.name = name;
}

CreatePerson.prototype.say = function () {
    console.log('你好');
}

const obj1 = new CreatePerson('悟空')
const obj2 = new CreatePerson('八戒')
console.log(obj1.say === obj2.say)//true

call方法

作用

1. 可以继承构造函数和借用其他对象的方法

使用方式

• 继承构造函数

  function Person(name,age,height) {
      this.username = name;
      this.age = age;
      this.height = height;
  }
  
  //这里的call相当于继承了Person
  function Student(name,age,height,color) {
      Person.call(this,name,age,height);
      this.color = color;
  }
  

• 借用其他对象的方法

  const obj = {
      name: 'mike',
      say(){
          console.log(`i am ${this.name}`);
      }
  }
  
  const obj2 = {
      name: 'jack'
  }
  obj.say.call(obj2);//i am jack
  

继承(ES6)

class Element {
        constructor(tagName){
            const dom = document.createElement(tagName);
            this.dom = dom;
        }
        append(querySelector){
            document.querySelector(querySelector).appendChild(this.dom);
        }
      }

      class ElementDouble extends Element {
        constructor(tagName,content){
            super(tagName);
            this.dom.innerText = content;
            this.dom.style.width = '200px';
            this.dom.style.height = '200px';
            this.dom.style.backgroundColor = 'skyblue';
        }
      }

      let div = new ElementDouble('div','这是一个div');
      div.append('body');

ES6

对象简写

• 如果变量的名字和属性的名字一致的话，对象可以简写

  const username = 123;
  const color = 'red';
  function say() {}
  const obj = {
      username,
      color,
      say
  }
  

对象中方法的简写

• const person = {
      show:function(){},//常规写法
      say(){}//es6
  }
  

函数默认的参数

• 声明的函数中可以定义参数的默认值

  function say(msg = 'hi') {
      console.log(msg);
  }
  
  say();//hi
  say('hallo')//hallo
  

数组解构

• const [a,b,c,d] = ['mike','jack','kity','bruce']
  console.log(a,b,c,d);//mike jack kity bruce
  

对象解构

• const {username,height} = obj
  console(username,height)
  

解构+默认值

• const arr = [1];
  const [a,b=2] = arr;
  console.log(a,b)// 1 2
  

扩展运算符----- …

• 获取剩下的数组

  const [a,b,...c] = [1,2,3,4,5,6,7]
  console.log(c)//[3,4,5,6,7]
  

• 获取剩下的对象

  const {a,...c} = {a:1,b:2,c:3}
  console.log(c);// {b:2,c:3}
  

• 获取函数的形参

  function calc(...args){
      let sum = 0;
      args.forEach(value=>sum+=value);
      console.log(sum);
  }
  calc(1,2)// args=[1,2]
  calc(1,2,3)// agrs=[1,2,3]
  

• 展开用法–对象

  const obj = {
      username: 'mike',
      height: 200
  }
  const newObj = {...obj,color:'red'}
  

• 展开用法–数组

  const arr = ['a','b','c']
  const newArr = [...arr,'d']
  

Set对象

1. 主要功能：去重处理

2. 使用set转成数组的时候，需要考虑(set对象转数组)

   数组转对象 new Set(beforeArr)

   set对象转数组const arr = […set]

bind call apply

1. bind call apply 都可以实现修改this指向

2. 代码写法上有区别

   1. obj.skill.call(person)

   2. obj.skill.apply(person)

   3. const func = obj.skill.bind(person)

      func()

3. 传递参数

   1. obj.skill.call(person,参数1,参数2)

   2. obj.skill.apply(person,[参数1,参数2])

   3. const func = obj.skill.bind(person)

      func(参数1,参数2)