1. Let和Const
let和const定义的变量都是块级作用域，var定义的变量是函数级作用域
{ var a = 10}console.log(a) // 10{ let a = 10}console.log(a) // ReferenceError: a is not defined复制代码 3. 模板字符串
#不使用模板字符串var name = 'Your name is' + first + '' + last + '.'#使用模板字符串var name = `Your name is ${first} ${last}.`复制代码 4. 类
#构造函数class Animal { // 构造函数，实例化的时候将会被调用，如果不指定，那么会有一个不带参数的默认构造函数 constructor(name, color) { this.name = name this.color = color } // toString 是原型对象上的属性 toString() { console.log('name:' + this.name + ',color' + this.color) }}var animal = new Animal('dog', 'white') // 实例化Animalanimal.toString()console.log(animal.hasOwnProperty('name')) // trueconsole.log(animal.hasOwnProperty('toString')) // falseconsole.log(animal.__proto__.hasOwnProperty('toString')) // true#继承class Cat extends Animal { constructor(action) { // 子类必须要在constructor 中指定super 函数，否则在新建实例的时候会报错 // 如果没有置顶constructor，默认带super函数的constructor将会被添加 super('cat','white') this.action = action } toString() { // 调用Animal 的toString() 方法 super.toString() }}var cat = new Cat('catch')cat.toString()// 实例cat 是Cat 和Animal 的实例console.log(cat instanceof Cat) // trueconsole.log(cat instanceof Animal) // true复制代码 5. 模块化
#导出export var name = 'robot' // 导出一个变量export const sqrt = Math.sqrt // 导出常量var name = 'robot'var age = '24'export {name, age} // 导出多个变量export function myModule(someArg) { return someArg} // 导出函数#导入import {myModule} from 'myModule.js'import {name, age} from 'test.js'复制代码 6. 函数参数默认值
function foo (height = 50, color = 'red') { ...}复制代码 7. 解构赋值
# 获取数组中的值var foo = ['one', 'two', 'three', 'four']var [one, two, three] = foo // 从数组获取值并赋值到变量中，变量的顺序与数组中对象顺序对应console.log(two) // twoconsole.log(three) // threevar [first, , , last] = foo // 忽略某些值console.log(first) // oneconsole.log(last) // fourvar a, b[a, b] = [1, 2] // 先声明变量console.log(a) // 1console.log(b) // 2var a, b[a=5, b=7] = [1] // 如果没有从数组中获取到值，可以为变量设置一个默认值console.log(a) // 1console.log(b) // 7# 交换两个变量的值var a = 1var b = 3;[a, b] = [b, a]console.log(a) // 3console.log(b) // 1# 获取对象中的值const student = { name: 'ming', age: '18', city: 'shanghai'}const {name, age, city} = studentconsole.log(name)console.log(age)console.log(city)复制代码 8. 延展操作符...
# 在函数调用时使用延展操作符function sum(x,y,z) { return x+y+z}var numbers = [1,2,3]console.log(sum.apply(null,numbers)) //6 // 不使用延展操作符console.log(sum(...numbers)) //6 // 使用延展操作符# 构造数组const stuendts = ['Jine','Tom']const persons = ['Tony',... stuendts,'Aaron','Anna'] // 构造新数组conslog.log(persions)// ["Tony", "Jine", "Tom", "Aaron", "Anna"]var arr = [1, 2, 3];var arr2 = [...arr]; // 等同于 arr.slice() // 数组拷贝arr2.push(4); console.log(arr2)//[1, 2, 3, 4]var arr1 = [0, 1, 2];var arr2 = [3, 4, 5];var arr3 = [...arr1, ...arr2];// 将 arr2 中所有元素附加到 arr1 后面并返回 // 连接多个数组//等同于var arr4 = arr1.concat(arr2);# 构造对象时，进行克隆或者属性拷贝和合并（es8）var animal = { name: 'dog', color: 'white'}let dog = {...animal,age:'18'} // 克隆console.log(dog) // {name: "dog", color: "white"}var obj = {...animal, ...dog} // 合并复制代码 9. 对象属性简写
const name='Ming',age='18',city='Shanghai';const student = { // 不是es6 name:name, age:age, city:city}const student = { name, age, city}console.log(student);//{name: "Ming", age: "18", city: "Shanghai"}复制代码 10. Promise
11. 迭代对象
可迭代对象有：
Array、string、Map、Set、arguments、NodeList
如何判断一个数据具有可迭代能力？
-
只有当数据具有Symbol.iterator 属性的时候才可以使用for...of 进行迭代
-
typeof 判断数据类型，如果不可迭代的返回undefined
Array.prototype.hasOwnProperty(Symbol.iterator) // true Set.prototype.hasOwnProperty(Symbol.iterator) // true
typeof [][Symbol.iterator] // function typeof {}[Symbol.iterator] // undefined typeof new Set()[Symbol.iterator] // function typeof ''[Symbol.iterator] // function
认识迭代对象
Array.prototype[Symbol.iterator] // values() { [native code] } 函数Array.prototype[Symbol.iterator]() // Array Iterator {} 迭代器Array.prototype[Symbol.iterator]().next() // {value: undefined, done: true} 对象复制代码 手动模拟迭代器
const createIterator = items => { const keys = Object.keys(items); const len = keys.length; let pointer = 0; // 当前的指针位置 return { next() { const done = pointer >= len; const value = !done ? items[keys[pointer++]] : undefined; // 如果当前指针位置小于总长度 return { value, done } } }}const iterator = creatIterator([1,2,3,5])iterator.next() // {value: 1, done: false}iterator.next() // {value: 2, done: false}iterator.next() // {value: 3, done: false}复制代码 将不可迭代的数据转换可迭代数据
var obj = {name: '哈哈', gender: '男'}for(item on obj){} // Uncaught TypeError: obj1 is not iterable# 直接修改对象原型Object.prototype[Symbol.iterator] = function() { const self = this const keys = Object.keys(self) const len = keys.length let pointer = 0 return { next() { const done = pointer >= len const value = !done ? self[keys[pointer++]] : undefined return { value, done } } }}for (let item of obj) { console.log(item) //哈哈 // 男}obj[Symbol.iterator]().next() // {done: false, value: "哈哈"}复制代码 12. generator（生成器）
12.1. 定义
# 创建function* fib(max) { var t, a = 0, b = 1, n = 0; while (n < max) { yield a; [a, b] = [b, a + b]; n++ } return }# 第一种调用，遇到yield a 返回一个对象{value: a, done: true/false}，然后暂停，done 表示这个generator 是否已经执行结束了，如果done 为true，则value 就是return 的返回值var f = fib(5)f.next() // {value: 0, done: false}f.next() // {value: 1, done: false}f.next() // {value: 1, done: false}f.next() // {value: 2, done: false}f.next() // {value: 3, done: false}f.next() // {value: undefined, done: true}# 第二种调用for (let item of fib(5)) { console.log(item) // 0 1 1 2 3}复制代码 ES7
- includes()
Array.prototype.includes()
let arr = ['react', 'angular', 'vue']if (arr.includes('vue')) { return true}复制代码 -
指数操作符**
console.log(23) // 8 console.log(24) // 16
ES8
- async/await
- async/await 是基于Promise 实现的，它不能用于普通的回调函数
- async/await 与Promise 一样，是非阻塞的
- async/await 使得异步代码看起来像同步代码
-
Object.values()
const obj = {a:1 , b:2, c:3}
console.log(Object.values(obj)) // [1, 2, 3]
#不用Object.values() console.log(Object.keys(obj).map(key=>obj[key]))
-
Object.entries()
#不用Object.entries() const obj = {a: 1, b: 2, c: 3} Object.keys(obj).forEach(key=>{ console.log('key:'+key+'value:'+obj[key]) //key:a value:1 //key:b value:2 //key:c value:3 })
const obj = {a: 1, b: 2, c: 3} for (var [key,value] of Object.entries(obj)) { console.log(
key:${key}--value:${value}) // key:a--value:1 // key:b--value:2 // key:c--value:3 } -
String padding
-
函数参数列表结尾允许逗号
var f = function(a,c,){}