瞭解JavaScript核心精髓（四）

ES6

1.import與require區別

import 是同步導入js模塊。

require 是異步導入js模塊。

2.使用let與const

let con1 = 3 //與var做用類似，let聲明變量，有做用域（當前代碼塊）
console.log(con1)
con1 = 2
console.log(con1)

const con1 = 3
console.log(con1)
con1 = 2
console.log(con1) //報錯，const變量標識符不能從新分配，只讀狀態。

const obj = { foo: 'bar' }
obj.foo = 'baz'
console.log(obj)  //{foo: "baz"} const聲明常量索引，能夠修改對象的屬性值

3.使用html模板  

var front = 'Hello'
var behind = 'World'
//ES6
console.log(`${front} ${behind},Sroot`)

//ES5
console.log(front + ' ' + behind + ',Sroot')

PS:使用的是反單引號， ES6省去雙引號拼接字符的寫法，使js代碼更好書寫。

4.使用箭頭函數取代function。

//ES5
var func = function(){alert('hello world')}
//ES6 
let func = ()=> alert('hello world')

PS：箭頭函數的this指向宿主，不指向當前函數。

5.使用class取代prototype，使用static聲明靜態方法

//ES5
function Person(name, age) {
     this.name = name
     this.age = age
}
Person.hello = function() {
       console.log('你好')
}
Person.prototype.walk = function() {
       console.log('行走')
}

// 實例方法
var ps = new Person('Sroot', 1)
ps.walk()

//對象方法
Person.hello()

// ES6
class Person {
     constructor(name, age) {
          this.name = name
          this.age = age
      }
      walk() {
          console.log('行走')
      }
      static hello() {
          console.log('你好')
      }
 }
// 實例方法
let ps = new Person('Sroot', 1)
ps.walk()

// 靜態方法
Person.hello()

6.解構參數、函數

//ES5
var a=1,b=2; 

var obj = {name:"sroot",sex:"man"}

test (obj)
function test (obj) {
    alert(obj.name)
}

  
//ES6
let [x,y]=[1,2];

const obj = {name:"sroot",sex:"man"}

test (obj)
function test ({name}) {
     alert(name)
}

7.使用Object.assign合併多個對象

const target = {a : 1}  //目標對象
const sources = {b : 2}  //源對象  
console.log(Object.assign(target,source))  //{a:1,b:2}

PS：Object.assign(目標對象,源對象) ，只有兩個參數。源對象能夠是多個，如：Object.assign(目標對象,源對象1,源對象2,源對象3.....)。

8.使用find()進行對象數組查找。

let arr = [
  {
    name: 'Sam',
    age: 20
  },
  {
    name: 'Bill',
    age: 22
  }
]
//ES6
var person = arr.find(element => element.name === 'Sam')
console.log(person) // {name: 'Sam',age: 20}

PS：匹配不到會返回undefined。 

9.使用filter()進行對象數組篩選。

var names = ['John', 'Sam', 'Lucy'];
//ES6
const result = names.filter(name => name!='Bill');
console.log(result);

PS：匹配不到會返回空數組。 

9.require簡寫

const app = require("express")()
//等同於
var express = require('express'); 
var app = express();

10.使用Map對象存儲數據。

var myMap = new Map();
myMap.set("myName", "cww");
console.log(myMap.get("myName")) //cww

11.使用Set對象存儲數據。

var mySet = new Set()
mySet.add(1);
mySet.add(5);
console.log(mySet.size) //2

補充：Set與Map對象屬於可迭代對象，集合類型。（若是須要處理集合裏面的數據，就必須把集合轉化成數組去處理，而後把數組轉化成集合）

var mySet= new Set([1, 2, 3]);
mySet= new Set([...mySet].map(x => x + 1 ));
console.log(mySet) //Set { 2, 3, 4 }

 

           Map 存儲數據特色：（key-value）鍵值對形式，每一個鍵必須是惟一，能夠任意類型數據。

           Map 應用場景：複雜類型的數據結構，純粹遍歷數據。

           Set 存儲數據特色：（key）鍵形式，每一個鍵必須是惟一，能夠任意類型數據。

           Set  應用場景：相似於Array的數據結構，無需修改某個元素，純粹遍歷數據。

     

 

ES7

1.使用includes判斷數組元素是否存在

let arr = ['1', '2', '3'];

if (arr.includes('3')) {
      console.log('存在字符：3')
};

2.使用**求冪

//3的3次方。
let num = 3**3;

3.使用async/await關鍵字來取代Promise

PS:async函數包裹await函數，不能互換位置，不然會進入循環。切記要用try catch包裹await函數，async函數可能會有異常。

4.新數據類型Symbol()

Symbol()意思是符號，是一個方法，也是數據類型。表示對象屬性惟一。

Symbol()解決js對象合併有相同屬性名的問題。

const obj1 = {
    name: 'name',
    [Symbol('skin')]: 'default'
}

const obj2 = {
     [Symbol('skin')]: 'heroic'
}

console.log(Object.assign(obj1, obj2)) //{name: "name", Symbol(skin): "default", Symbol(skin): "heroic"}

 

 

瀏覽器特性

1.使用web worker進行js「多線程」操做。

優勢：不阻塞UI渲染，並行處理任務。

缺點：平臺兼容性差。

PS：js是單線程，web worker不屬於js語言的一部份，web worker是經過js訪問瀏覽器特性功能。