了解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声明常量索引，可以修改对象的属性值

PS：关键字let的作用域指当前代码块。（如：function xx(){  //当前代码块  }）

3.使用html模板  

var front = 'Hello'
var behind = 'World'
//ES5
console.log(front + ' ' + behind + ',Sroot')

//ES6
console.log(`${front} ${behind},Sroot`)

//ES5
var html = ''
html += '<div>'
html += '<span>' + front + ' ' + behind + '</span>'
html += '</div>'

//ES6
let html = ''
html = `<div>
          <span>${front} ${behind}</span>
        </div>`

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()与findIndex()进行数组查找。

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}
 var personIndex = arr.findIndex(element => element.name === 'Sam')
 console.log(personIndex) // 0

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;

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"}

 

ES8

1.使用async/await关键字来取代Promise

function listApi(){
    //ajax ...
}

async function getInfo() {
  try {
    var result = await listApi();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

PS: async函数包裹await函数，不能互换位置，否则会进入循环。

       切记要用try...catch包裹await函数，async函数可能会有异常。

 

ES10

1.使用trimStart(),trimLeft()，trimEnd()，trimRight()清除空格。（与java越来越像了）

const str = '   Sroot  '
console.log(str) // '   Sroot  '
console.log(str.trimStart()) // 'Sroot  '
console.log(str.trimLeft()) // 'Sroot  '
console.log(str.trimEnd()) // '   Sroot'
console.log(str.trimRight()) // '   Sroot'

 

浏览器特性

1.使用web worker进行js“多线程”操作。

优点：不阻塞UI渲染，并行处理任务。

缺点：平台兼容性差。

PS：javascript是单线程。web worker不属于js语言的一部份，web worker是通过js访问浏览器特性功能。