ES6内容理解

简介: ES6内容理解

1. var、const、let 的区别


  • 不存在变量提升


  • var存在变量提升,而let, const不存在


  • 块级作用域


  • 暂时性死区


  • 在声明let之前不能给let声明的变量赋值,否则造成暂时性死区


  • 不可重复声明


  • let变量不能重复声明


  • 不会挂载window对象上


  • let和const声明的变量不能挂载到window对象上


  • const声明后需要立即赋值,否则报错


  • const声明的简单类型不可修改,复杂类型内部数据可以更改


2. 箭头函数和普通函数的区别


  • 箭头函数的this指向父级作用域的this


  • call、apply、bind无法改变箭头函数中this的指向


  • 不可以作为构造函数


  • 不可以使用arguments对象


  • 箭头函数不支持new.target


3. forEach、for in、for of 的区别


  • forEach是数组的方法


// 没有返回值
// 不能使用break终端循环, 不能使用return返回到外层函数
const array = [1,2,5,7]
let newArray = []
array.forEach(item => {
  newArray.push(item += 1)
})
console.log(array)
console.log(newArray)


  • for in遍历数组或对象


let obj = { name: "AaronCon", age: 28 }
for(let i in obj) {
  console.log(obj[i])
}


  • for of 遍历数组,Set和Map结构,类数组对象


// 数组
const arr = ['aaa', 'bbb', 'ccc']
for(let i of arr) {
  console.log(i)
}
// Set
var names = new Set(['Aaron', 'Con'])
for(var j of names) {
  console.log(j)
}
// 类数组对象
function fn() {
  for(let k of arguments) {
    console.log(k)
  }
}


4. 数组去重


  • Array.from() + new Set()


const array = [1,2,3,4,3,2,5,6,4]
const res = Array.from(new Set(array))


5. ES6中对象新增的方法


  • Object.is()


// 判断两个值是否相等(包括数据类型)
// 返回true或false
const obj1 = {}
const obj2 = {}
const a = 1
const b = 1
Object.is(obj1, obj2)
Object.is(a, b)
// 这样看其实和===的作用类似
// 不过===不能判断NaN这种特殊值, 而Object.is()可以
Object.is(NaN, NaN)


  • Object.assign()


// 用于合并对象,返回一个对象
const obj1 = { name: 'Aaron' }
const obj2 = { age: 18 }
const res = Object.assign(obj1, obj2)


  • Object.keys()


// 返回对象可遍历属性的键名组成的数组
const obj = { name: 'Aaron', age: 18 }
const res = Object.keys(obj) // ["name", "age"]


  • Object.values()


// 返回对象可遍历属性的键值组成的数组
const obj = { name: 'Aaron', age: 18 }
const res = Object.values(obj) // ["Aaron", 18]


  • Object.entries()


// 返回对象可遍历属性的键名键值数组
const obj = { name: 'Aaron', age: 18 }
const res = Object.entries(obj) // [["name", "Aaron"], ["age", 18]]


6. class和function的区别


  • 相同点: 都可以用作构造函数


// function构造函数
function Person() {
  this.name = "AaronCon"
}
// class构造函数
class Person {
  constructor() {
    this.name = "AaronCon"
  }
}


  • 不同点: class不可以用call,apply,bind方式改变它的执行上下文


class Person {
  constructor() {
    this.name = "AaronCon"
  }
}
const obj = {
  name: "Aaron"
}
// 报错
Person.call(obj)


7. 对Promise的了解


  • 定义: 异步编程的一种解决方案


  • 基本使用


// 三个状态: pending(正在进行)  fulfilled(成功) rejected(失败)
new Promise(function(resolve, reject) {
      let name = "Aaron"
      if(name === 'Aaron') {
        resolve(1)
      } else {
        reject(2)
      }
    }).then(function(value) {
      console.log(`resolve-value`,value)
    }, function(value) {
      console.log(`reject-value`,value)
    })


  • Promise.prototype.then()


// 1 可以支持链式调用
// 2 then 接受两个参数且都是函数
// 3 返回值也是Promise
    new Promise(function(resolve, reject) {
      let name = "Aaron"
      if(name === 'Aaron') {
        resolve(1)
      } else {
        reject(2)
      }
    }).then((value) => {
      console.log(`fulfilled value`, value)
      return Promise.reject(2)
    }).then((funlfilledValue) => {
      console.log(`fulfilled value`, funlfilledValue)
    },(rejectedValue) => {
      console.log(`rejectedValue`, rejectedValue)
    })
    // fulfilled value 1
    // rejectedValue 2


  • Promise.prototype.catch()


// 捕获Promise错误
new Promise(function(resolve, reject) {
      let name = "Aaron"
      if(name === 'Con') {
        resolve(1)
      } else {
        reject('Promise error')
      }
    }).then((value) => {
      console.log(`value`, value)
    }).catch((error) => {
      console.log(`error`, error)
    })


  • Promise.prototype.finally()


// 不管对象最后状态如何, 都会执行的操作
    new Promise(function(resolve, reject) {
      let name = "Aaron"
      if(name === 'Con') {
        resolve(1)
      } else {
        reject('Promise error')
      }
    }).then((value) => {
      console.log(`fulfilled value`, value)
    }).catch((error) => {
      console.log(`error`, error)
    }).finally(() => {
      console.log(`loading end...`)
    })


  • Promise.all()


// 用于将多个Promise实例包装成一个新的Promise实例
// 所有成功才执行
// 并发
    const promiseArray = [1,2,3,4,5].map((item) => {
      return new Promise((resolve) => {
        resolve(item);
      })
    })
    Promsie.all(promiseArray).then(res => {
      console.log(`res`, res)
    })


  • Promise.race()


// 用于将多个Promise实例包装成一个新的Promise实例
// 只要有一个成功就执行
// 继发
    const promiseArray = [1,2,3,4,5].map((item) => {
      return new Promise((resolve) => {
        resolve(item);
      })
    })
    Promsie.rece(promiseArray).then(res => {
      console.log(`res`, res)
    })


  • Promise.resolve()


// 将现有对象转化为Promise对象
Promise.resolve(1).then(res => {
  console.log(`res`, res)
})


  • Promise.reject()


Prmise.reject('promise error').then(null, rejected => {
  console.log(`rejected`, rejected)
})


8. 扩展运算符的实现


const array = [1,2,3,4]
const res = [...array]


var array = [1,2,3,4]
var res = [].concat(array)
相关文章
|
6月前
|
JavaScript
es5和es6的区别
es5和es6的区别
55 0
|
3月前
|
JavaScript 前端开发 Java
​ES7、ES8、ES9、ES10、ES11、ES12都增加了哪些新特性?
​ES7、ES8、ES9、ES10、ES11、ES12都增加了哪些新特性?
|
6月前
|
前端开发 JavaScript
前端最常见的es6,es7,es8方法
【4月更文挑战第3天】 前端最常见的es6,es7,es8方法
66 5
|
6月前
|
前端开发 JavaScript API
ES6和ES5的区别
ES6和ES5的区别
47 0
|
6月前
|
JSON 前端开发 JavaScript
ES6(2015)-ES13(2022)新增特性大总结
ES6(2015)-ES13(2022)新增特性大总结
96 0
|
6月前
|
API 开发工具 网络架构
springtboot 操作es
springtboot 操作es
ES6系列笔记-参数
ES6系列笔记-参数
41 1
|
前端开发
每天3分钟,重学ES6-ES12(七)ES10 新增内容
每天3分钟,重学ES6-ES12(七)ES10 新增内容
87 0