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声明常量索引,可以修改对象的属性值
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) }
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();
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;
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访问浏览器特性功能。