了解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访问浏览器特性功能。