ES6的基礎知識(二)

demo地址

函數

• 默認參數

  function Person(name = "xiaohong", age = 18) {
    this.name = name;
    this.age = age;
  }
  let person1 = new Person();
  
  console.log(person1.name); // xiaohong

• 省略參數

  function test(...arg) {
    let res = arg.reduce(function(sum, item) {
      return sum + item;
    });
    console.log(res); // 6
  }
  
  test(1, 2, 3);

• 箭頭函數

  let sum = (a, b) => {
    return a + b;
  };
  console.log(sum(1, 2)); // 3
  
  // 單個參數可省略小括號,直接返回可省略函數大括號
  let double = num => num * 2;
  console.log(double(2)); // 4
  
  // 箭頭函數沒有this,內部的this就是上層代碼塊的this
  let obj = {
    name: "xiaohong",
    say: function() {
      // 指向上層代碼塊obj
      setTimeout(() => {
        console.log(this.name); // xiaohong
      });
  
      // 指向window
      setTimeout(function(){
        console.log(this.name); // undefined
      });
    }
  };
  obj.say();
  
  let fn = () => {
    console.log(this); // window
  };
  fn();

• Array.from()將類數組轉成數組

  function sum() {
    return Array.from(arguments).reduce((val, item) => {
      return val + item;
    });
  }
  console.log(sum(1, 2, 4)); // 7

• fill填充數組

  let arr = [, ,];
  console.log(arr.fill(1)); // [1, 1]

• find找到數組中第一個知足條件的元素

  let arr = [1, 2, 3];
  let item = arr.find(item => {
    return item > 1;
  });
  console.log(item); // 2

• findIndex找到數組中第一個知足條件的元素索引

  let arr = [1, 2, 3];
  let index = arr.findIndex(item => {
    return item > 1;
  });
  console.log(index); // 1

• some數組中是否存在知足條件的元素

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

• every數組中是否全部元素都知足條件

  let arr = [1, 2, 3];
  let flag = arr.every(item => {
    return item >= 3;
  });
  console.log(flag); // false

對象

• 對象的屬性和方法可簡寫

  let name = 'xiaohong';
  let obj = {
    // 當key值和變量一致時可省略
    name, 
    // 方法可簡寫成這樣
    sayName(){}
  }

• 對象的繼承

  let obj = {
       name:'xiaohong',
       sayName(){
         console.log(this.name)
       }
     };
     let newObj = {
       name:'xiaoli'
     };
     
     Object.setPrototypeOf(newObj, obj);
     newObj.sayName(); // xiaoli

• class類

  // 聲明類,只能經過new生成對象,不能直接使用
     class Parent {
       // 構造函數
       constructor(name) {
         // 實例私有屬性
         this.name = name;
       }
  
       // 靜態屬性 不須要經過實例調用,類直接用
       static hello() {
         return "hello";
       }
  
       // 實例公共方法
       sayName() {
         return this.name;
       }
     }
  
     // extends繼承
     class Child extends Parent {
       constructor(name) {
         // super 父級的構造函數
         super(name);
       }
     }
  
     let p = new Child("xiaoli");
     console.log(p.name); // xiaoli
     console.log(p.sayName()); // xiaoli