ES6的基礎知識(二)

GitChat 發布于2019-08-26 18:18 / 324人閱讀

摘要：地址函數默認參數省略參數箭頭函數單個參數可省略小括號直接返回可省略函數大括號箭頭函數沒有內部的就是上層代碼塊的指向上層代碼塊指向將類數組轉成數組填充數組找到數組中第一個滿足條件的元素找到數組中第一個滿足條件的元素索引數組中是否存在滿足條件的

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

GPU云服務器云服務器最小二乘法的簡潔算法二位數的域名有多少個最小二乘的遞歸算法 ES6

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110175.html

帶你入門 JavaScript ES6 (二)

摘要：上一篇學習下一代語法一，我們學習了關于塊作用域變量或常量聲明和語法新的字符串拼接語法模版字面量數組元素或對象元素的解構賦值和對象字面量簡寫的相關知識。這便是擴展運算符的用途之一。本文同步帶你入門 JavaScript ES6 (二)，轉載請注明出處。上一篇學習下一代 JavaScript 語法: ES6 (一)，我們學習了關于塊作用域變量或常量聲明 let 和 const 語法、...

chanthuang 2019-08-21 18:26 評論0 收藏0
[ ES6 ] 快速掌握常用 ES6 （二）

摘要：本系列文章適合快速掌握入門語法，想深入學習的小伙伴可以看看阮一峰老師的入門本篇文章是對之前文章的一個補充，可以使代碼更簡潔函數參數默認值在傳統語法中如果想設置函數默認值一般我們采用判斷的形式在新的語法中我們可以在參數聲明的同時賦予默認值參數本系列文章適合快速掌握 ES6 入門語法，想深入學習 ES6 的小伙伴可以看看阮一峰老師的《ECMAScript 6 入門》本篇文章是對之前文章...

hidogs 2019-08-23 14:07 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
深入理解ES6筆記（二）字符串和正則表達

摘要：主要知識點新增的字符串處理方法模板字面量以及正則表達式上的改動深入理解筆記目錄字符串字符串是大原始數據類型。如果在字符串的結束部分檢測到指定文本，返回，否則返回。字符串內插入反撇號的方式。主要知識點：新增的字符串處理方法、模板字面量以及正則表達式上的改動showImg(https://segmentfault.com/img/bVbfWak?w=861&h=622); 《深入理解E...

TANKING 2019-08-26 12:11 評論0 收藏0
es6常用知識（二）

摘要：這個類繼承自，很多功能就可以直接用了有兩種傳參方式，一種是字符串，另外一種是表達式，當傳字符串之外的類型的時候，用表達式組件嵌套簡寫這個類繼承自，很多功能就可以直接用了先用參數擴展，在把參數展開到里面去。七.2 面相對象的應用（react） react：1，組件化 -class2，jsxjsx==babel==browser.js Document ...

StonePanda 2019-08-26 11:52 評論0 收藏0