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') // 实例化Animal
animal.toString()
console.log(animal.hasOwnProperty('name')) // true
console.log(animal.hasOwnProperty('toString')) // false
console.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) // true
console.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) // two
console.log(three) // three
var [first, , , last] = foo // 忽略某些值
console.log(first) // one
console.log(last) // four
var a, b
[a, b] = [1, 2] // 先声明变量
console.log(a) // 1
console.log(b) // 2
var a, b
[a=5, b=7] = [1] // 如果没有从数组中获取到值,可以为变量设置一个默认值
console.log(a) // 1
console.log(b) // 7
# 交换两个变量的值
var a = 1
var b = 3
;[a, b] = [b, a]
console.log(a) // 3
console.log(b) // 1
# 获取对象中的值
const student = {
name: 'ming',
age: '18',
city: 'shanghai'
}
const {name, age, city} = student
console.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,){}