ES6
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) }
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();
var myMap = new Map(); myMap.set("myName", "cww"); console.log(myMap.get("myName")) //cww
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"}
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函数可能会有异常。
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访问浏览器特性功能。