ES6常用新特性

矫情吗；* 2023-10-15 17:49 115阅读 0赞

ES6改动很大，可以简单分为四类
1、解决原有语法的缺陷和不足
例如：let，const
2、对原有语法进行增强
解构、扩展、模板字符串
3、新增对象、全新的方法，全新的功能
Object.assign()、Proxy对象代理、Reflect 等等
4、全新的数据类型和数据结构
set、map、class、迭代器、生成器 等等

一、解决原有语法的缺陷和不足

1、let：块级作用域，没有变量提升

用途：for循环的计数器（for循环内部let声明的变量同样拥有块级作用域）；循环事件绑定不必采用闭包形式

for (let i=0; i<3; i++) {
let i = ‘foo’
console.log(i)
}
2、const: 恒量/常量；声明后不能修改内存地址，可修改属性成员

最佳实践：不用var，主用const，配合let

二、对原有语法的增强

1、数组的解构：根据数组对应的位置提取对应的值赋给对应的变量

let arr = [1,2,3]
let [x, y, z] = arr
如果未取到对应的值，赋值“undefined”
可以用…运算符

var [x, …other] = arr
可以设置默认值

var [x=‘0’, y, z] = arr
用途：字符串截取

const str = ‘http://www.baidu.com?titile=article’
var [, strParam] = str.split(‘?’)
2、对象的解构：根据属性名提取

const obj = {name: ‘zdd’, age: 18}
const { name, age } = obj
如果想换一个变量名&添加默认值

const {name: objName=‘www’, age} = obj
应用场景：代码简化

const { log } = console
log(‘hh’)
3、模板字符串：字符串增强

1、可换行
2、可使用插值表达式添加变量，变量也可以替换为可执行的js语句：

let str = 生成一个随机数：${ Math.random() }
标签模板字符串，标签相当于一个自定义函数，自定义函数的第一个参数是被差值表达式截取的数组

  1. // 标签模板字符串
  2. const name = 'www';
  3. const isMan = true
  4. const tagFn = function (strings, name, isMan) {
  5.   let sex = isMan ? 'man' : 'woman';
  6.   return strings[0] + name + strings[1] + sex + strings[2]
  7. }
  8. const result = tagFn`hey, ${name} is a ${isMan}.`

4、字符串的扩展方法

1、includes
2、startWith
3、endsWith

5、函数参数增强：参数默认值

只有当参数为不传或传入undefined时使用默认值

  1. const fn = function (x=1, y) {
  2.   console.log(x)
  3.   console.log(y)
  4. }
  5. fn()

6、…操作符：收起剩余数据、展开数组

收取剩余参数：取代arguments，arguments是一个类数组，…操作符是一个数组类型，可以使用数组方法
6.1、仅使用一次
6.2、放在参数最后

  1. const fn = function (x, ...y) {
  2.   console.log(y.slice(0))
  3. }
  4. fn(1,2,3,4,5)

展开数组

  1. const spredArr = [1,2,3,4]
  2. console.log(...spredArr)
  3. console.log.apply(this, spredArr) //es5代替方案

7、箭头函数：简化写法

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

  1. const name = 'tony'
  2. const person = {
  3.   name: 'tom',
  4.   say: () => console.log(this.name),
  5.   sayHello: function () {
  6.     console.log(this.name)
  7.   },
  8.   sayHi: function () {
  9.     setTimeout(function () {
  10.       console.log(this.name)
  11.     }, 500)
  12.   },
  13.   asyncSay: function () {
  14.     setTimeout(()=>console.log(this.name), 500)
  15.   }
  16. }
  17. person.say()  //tony
  18. person.sayHello() //tom
  19. person.sayHi() //tony
  20. person.asyncSay()  //tom

8、对象字面量的增强

8.1、如果key与value变量名相同，省略:value
8.2、省略函数：function
8.3、计算属性：[Math.random()]

const bar = ‘bar’
const obj = {
bar,
fn () {
console.log(‘1111’)
},
[Math.random()]: ‘123’
}
console.log(obj)

三、新增对象、全新的方法、全新的功能

1、Object.assign()：合并多个对象，第一个参数就是最终的返回值，如果对象的属性名相同，后面的覆盖前面的

用途：复制对象，给options属性赋默认值

  1. let objA = {
  2.   a: 'aa',
  3.   b: 'bb'
  4. }
  5. let objB = {
  6.   b: 'dd',
  7.   c: 'ee'
  8. }
  9. let result = Object.assign({}, objA, objB)
  10. result.a = 'cc'
  11. console.log(objA, result) //{a: "aa", b: "bb"} {a: "cc", b: "dd", c: "ee"}

2、Object.is()：判断两个值是否相等，返回布尔值

用途：es5中，对于0的判断不区分正负值，-0 == +0返回true，NaN == NaN返回 返回false；
Object.is()规避了这些问题

  1. Object.is(+0, -0)//false
  2. Object.is(NaN, NaN) //true

3、Proxy：代理对象

基本用法

  1. const person = {
  2.   name: 'www',
  3.   age: '20'
  4. }
  5. const personProxy = new Proxy(person, {
  6.   get(target, key) {
  7.     return target[key] ? target[key] : 'default'
  8.   },
  9.   set(target, key, value) {
  10.     target[key] = value % 2 ? value : 99
  11.   }
  12. })
  13. console.log(person.xxx) // undefined
  14. console.log(personProxy.xxx) // default
  15. console.log(personProxy.age) //20
  16. personProxy.age = 100
  17. console.log(personProxy) //{name: "www", age: 99}

这里注意的一点是，这里被拦截的是”personProxy“，而不是”person“
与Object.definedProperty()的比较：
1、相比与Object.definedProperty只能监听get,set行为，proxy监听的行为更多一些，has、deleteProperty … 等很多
2、对于数组的push,pop等操作，proxy是监听的整个对象的行为，所以通过set方法能够监听到；而definedProperty需要指定该对象的属性名，对于数组来说，就是指定数组的下标，是监听不到数组的push,pop等操作的

  1. let arr = []
  2. let arrProperty = new Proxy(arr, {
  3.   set (target, key, value) {
  4.     console.log(target, key, value) //[1] "length" 1
  5.     target[key] = value
  6.     return true
  7.   }
  8. })
  9. arrProperty.push(1)
  10. console.log(arrProperty) //[1]

3、proxy以非侵入的方式，监听了对象的读写；definedProperty需要指定具体需要监听对象的属性名，与上面的数组类似，如果想要监听一个含有多个属性的对象的读写行为，definedProperty需要遍历这个对象的所有属性

4、Reflect： 封装操作对象的统一API

在之前的es5中，操作对象有很多种方式

  1. const obj = {
  2.   name: '111',
  3.   age: '22'
  4. }
  5. // 判断对象某个属性是否存在
  6. console.log('name' in obj)
  7. // 删除某个属性
  8. console.log(delete obj['name'])
  9. // 获取对象key
  10. console.log(Object.keys(obj))

对于不同的操作行为，使用的方式却不同，Reflect的目的是使用同一套方式去操作对象

  1. const obj = {
  2.   name: '111',
  3.   age: '22'
  4. }
  5. // 判断对象某个属性是否存在
  6. console.log(Reflect.has(obj,'name'))
  7. // 删除某个属性
  8. console.log(Reflect.deleteProperty(obj, 'name'))
  9. // 获取对象key
  10. console.log(Reflect.ownKeys(obj))

5、用于处理异步，解决回调函数的地狱式嵌套问题

四、全新的数据结构和数据类型

1、class 类

es5写法

  1. function People (name) {
  2.   // 设置实例属性
  3.   this.name = name;
  4. }
  5. // 设置实例的共享方法
  6. People.prototype.sayHi = function () {
  7.   console.log(this.name)
  8. }
  9. let p = new People('tom')
  10. p.sayHi()

使用class更易理解，结构清晰

  1. class Peopel {
  2.     constructor (name) {
  3.       this.name = name
  4.     }
  5.     say () {
  6.       console.log(this.name)
  7.     }
  8.   }
  9.   const p = new Peopel('tony')
  10.   p.say()

类的继承

  1. class Peopel {
  2.     constructor (name) {
  3.       this.name = name
  4.     }
  5.     say () {
  6.       console.log(this.name)   //tom，在子类的sayAge中调用
  7.     }
  8.   }
  9.   class Worker extends Peopel {
  10.     constructor (name,age) {
  11.       super(name)
  12.       this.age = age
  13.     }
  14.     sayAge () {
  15.       super.say()
  16.       console.log(this)  // Worker {name: "tom", age: 18}
  17.       console.log(this.age) // 18
  18.     }
  19.   }
  20.   const p = new Worker('tom', 18)
  21.   p.sayAge()

类的继承还是通过原型链的方式实现，具体可以看下babel转换后的代码
super可以作为函数调用，也可以作为对象调用
作为函数调用时，只能在子类的constructor中调用，此时执行父类的构造函数constructor，执行父类构造函数时，this指向的是子类Worker，所以实例p会有name属性（对于super理解的还是不够，后面要单独学习下）

2、set数据结构：可以理解为集合，不重复

  1. const s = new Set()
  2.   s.add(1).add(2).add(3)
  3.   console.log(s) //{1, 2, 3}
  4.   console.log(s.size) // 3
  5.   const arr = [1,2,3,2,4]
  6.   console.log([... new Set(arr)]) //[1,2,3,4]

3、map数据结构

es5中的对象key只能是字符串，map的key可以是任意数据类型, 可以通过get,set,has等操作map

  1. const m = new Map()
  2.   const tom = {name: '99'}
  3.   m.set(tom, 90)
  4.   console.log(m.get(tom))
  5.   m.forEach((value, key) => {
  6.     console.log(value, key)
  7.   })

4、Symbol新的数据结构，唯一值

用途：防止全局对象中，某个属性名重名，产生冲突；定义私有属性，外部访问不到，且遍历不到

  1. const s = Symbol('描述')
  2.   console.log(s)  
  3.   const obj = {
  4.     [Symbol('私有属性')]: '11'
  5.   }
  6.   console.log(obj)   //obj对象Symbol('私有属性')这个属性外部访问不到
  7.   console.log(Object.keys(obj)) //[]
  8.   console.log(Object.getOwnPropertySymbols(obj)) //[Symbol(私有属性)]
  10.   const s1 = Symbol.for('111')
  11.   const s2 = Symbol.for('111')
  12.   console.log(s1 === s2) //true

5、for … of 遍历

es5中，使用for … in 遍历键值对结构数据，使用forEach遍历数组
es6中新增了set,map数据结构，for…of是用来统一遍历拥有某一种特性的数据结构（可迭代）

  1. const arr = [1,2,3] 
  2.   for (const item of arr) {
  3.     // 遍历数组
  4.     console.log(item)
  5.   }
  6.   const s = new Set()
  7.   s.add(1).add(2).add(3)
  8.   for (const item of s) {
  9.     // 遍历set结构
  10.     console.log(item)
  11.   }
  12.   const m = new Map([
  13.     ['name','昵称'],
  14.     ['title', '标题']
  15.   ])
  16.   for (const [key, value] of m) {
  17.     // 遍历map结构
  18.     console.log(key)
  19.     console.log(value)
  20.     console.log(m.get(key))
  21.   }
  23.   const newSet = new Set([
  24.     ['name','昵称'],
  25.     ['title', '标题']
  26.   ])
  27.   const newMap = new Map(newSet)
  28.   for (const [key, val] of newMap) {
  29.     // 遍历set初始化后的map结构
  30.     console.log(key)
  31.     console.log(val)
  32.   }
  34.   const obj = {
  35.     name: 'ttt',
  36.     age: '19'
  37.   }
  38.   for (const [key, val] of obj) {
  39.     // 遍历对象报错 Uncaught TypeError: obj is not iterable
  40.     console.log(key, val)
  41.   }

上面代码中，for…of可以遍历数组，set, map，但是却不能遍历对象，是因为对象没有可迭代接口

6、可迭代接口

在浏览器中打印一个数组，在数组的原型对象上有一个Symbol内置属性Symbol.iterator方法，该方法会返回一个iterator对象，该对象包含一个next()方法，调用iterator.next()会返回一个迭代器结果对象iterationResult，iterationResult对象包含两个值，value为遍历的item，done为当前数据是否遍历完成

  1. const iterator = arr[Symbol.iterator]()
  2.   console.log(iterator) // Array Iterator {}
  3.   const ite = iterator.next()
  4.   console.log(ite) //{value: 1, done: false} value为迭代器的值，done标识是否遍历完

由于上面代码中obj对象不没有Symbol.iterator的内置方法，所以它不是一个可迭代对象，当使用for…of遍历时就报错了，下面手动实现obj可迭代

  1. let iteratorObj = {
  2.     //iteratorObj是可迭代对象 iterable
  3.     name: 'ttww',
  4.     age: '18',
  5.     [Symbol.iterator] () {
  6.       let index = 0;
  7.       let arr = []
  8.       for (const key in iteratorObj) {
  9.         arr.push([key, iteratorObj[key]])
  10.       }
  11.       return {
  12.       //返回的对象叫iterator
  13.         next () {
  14.           return {
  15.             //结果对象iterationResult
  16.             value: arr[index],
  17.             done: index++ >= arr.length
  18.           }
  19.         },
  20.       }
  21.     }
  22.   }
  23.   for (const [key, val] of iteratorObj) {
  24.     console.log(key, val)
  25.   }

上面代码中，iteratorObj有了可迭代接口，认为是可迭代对象iterable；Symbol.iterator方法返回的对象是迭代器对象iterator；迭代器对象next方法返回的对象是迭代器结果对象iterationResult

6、生成器 generator

用途：处理异步调用回调嵌套的问题

  1. function *geFn () {
  2.     console.log('111')
  3.     yield 100
  4.     console.log('222')
  5.     yield 200
  6.     console.log('333')
  7.     yield 300
  8.   }
  9.   let generator = geFn()
  11.   console.log(generator.next())  //111 {value: 100, done: false}
  12.   console.log(generator.next())  //222 {value: 200, done: false}
  13.   console.log(generator.next())  //333 {value: 300, done: false}

在函数名前面加一个”*“，函数就变为生成器函数，执行该函数时，里面的函数不会立即执行，而是会返回一个生成器对象，调用生成器对象的.next方法函数开始执行，当遇到”yield“关键字，函数会停止执行，并把yield的值当做next方法返回对象的value; 当下次调用next方法时，函数从当前位置开始继续执行
生成器函数执行后返回的生成器对象generator，内部也是实现了迭代器接口，所以可以使用for…of来遍历

  1. function *geFn () {
  2.     console.log('111')
  3.     yield 100
  4.     console.log('222')
  5.     yield 200
  6.     console.log('333')
  7.     yield 300
  8.   }
  9.   let generator = geFn()
  11.   for (const item of generator) {
  12.     console.log(item)
  13.   }

可以使用生成器函数改写上面对象的迭代器方法

  1. let iteratorObj = {
  2.     name: 'ttww',
  3.     age: '18',
  4.     [Symbol.iterator]:function *() {
  5.       let index = 0;
  6.       let arr = []
  7.       for (const key in iteratorObj) {
  8.         arr.push([key, iteratorObj[key]])
  9.       }
  10.       // for (let i =0; i<arr.length; i++) {
  11.       //   console.log(arr[i])
  12.       //   yield arr[i]
  13.       // }
  15.       for (const item of arr) {
  16.         yield item
  17.       }
  18.       // arr = ['b',3,4,5]
  19.       // return {
  20.       //   next () {
  21.       //     return {
  22.       //       value: arr[index],
  23.       //       done: index++ >= arr.length
  24.       //     }
  25.       //   },
  26.       // }
  27.     }
  28.   }
  29.   for (const [key, val] of iteratorObj) {
  30.     console.log(key, val)
  31.   }

这里有一个注意的点就是在循环arr数组时，不能是有forEach遍历，是因为forEach里需要传一个回调函数，这个函数不是生成器函数，在非生成器函数里使用yield关键字会报错

ES2016

1、数组新增方法：includes

  1. const arr = [1,2,3]
  2.   console.log(arr.includes(2))  //true

2、指数运算符

console.log(2 ** 10) //1024
ES2017

1、Object.values()，以数组的形式，返回对象所有的值

  1. let obj = {
  2.     title: 'wwwww',
  3.     age: 199
  4.   }
  5.   console.log(Object.values(obj)) //["wwwww", 199]

2、Object.entries()，以数组的形式，返回对象的所有键值对

let obj = {
title: ‘wwwww’,
age: 199
}
console.log(Object.entries(obj)) //[[“title”, “wwwww”],[“age”, 199]]
可以将对象转为map数据结构

  1. let obj = {
  2.     title: 'wwwww',
  3.     age: 199
  4.   }
  6.   let m = new Map(Object.entries(obj))
  7.   console.log(m) //{"title" => "wwwww", "age" => 199}

3、Object.getOwnPropertyDescriptor()
获取一个对象的完整描述信息，可用于将一个对象的get，set属性赋值给另一个对象

  1. let obj = {
  2.     firstName: 'abc',
  3.     lastName: '123',
  4.     get fullName () {
  5.       return this.firstName + this.lastName
  6.     }
  7.   }
  8.   console.log(obj.fullName) //abc123
  9.   const p2 = Object.assign({}, obj)
  10.   // 此时赋值给p2的仅仅是fullName属性的值，并没有fullName属性的getter
  11.   p2.firstName = '456'
  12.   console.log(p2.fullName)  //abc123
  14.   const description = Object.getOwnPropertyDescriptors(obj)
  15.   console.log(description)
  16.   const p3 = Object.defineProperties({}, description);
  17.   p3.firstName = '789'
  18.   console.log(p3.fullName)  //789123

4、字符串的padEnd()、padStart()方法
5、async/await

发表评论

表情：
评论列表 （有 0 条评论，115人围观）

还没有评论，来说两句吧...

相关阅读

    相关 ES6常用新特性

    ES6改动很大，可以简单分为四类 1、解决原有语法的缺陷和不足 例如：let，const 2、对原有语法进行增强 解构、扩展、模板字符串 3、新增对象、全新

    矫情吗；*矫情吗；*/ 0 赞/ 116 阅读

    相关 ES6常用新特性讲解

    ！干货长文预警！ 目前没有找到比较全的 ES 6 新特性汇总（中文），于是就自己花了一下午收集了一下，不说 100% 全面，也至少收录了 90% 的新特性。 一共讲解了

    绝地灬酷狼绝地灬酷狼/ 0 赞/ 214 阅读

    相关 es6新特性

    1.let && const •都是块级作用域 •不能重复定义 •避免了变量提升 ① let命令也用于声明对象，但是作用域为局部。 ![在这里插入图片描述][

    红太狼红太狼/ 0 赞/ 457 阅读

    相关 es6新特性

    es6语法 > es6语法用起来是十分方便的，但是有些浏览器还是不支持，但是做大型项目中基本上要用到转码器（babel转码器），可以把es6语法转为es5直接使用。 T

    落日映苍穹つ落日映苍穹つ/ 0 赞/ 460 阅读

    相关 ES6新特性

    1.变量声明let和const 在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:

    我会带着你远行我会带着你远行/ 0 赞/ 621 阅读

    相关 ES6新特性

    1.声明变量的关键字：const 和 let JavaScript ES6中引入了另外两个声明变量的关键字：const和let。在ES6中，我们将很少能看到var了。 co

    电玩女神电玩女神/ 0 赞/ 612 阅读