ES6新增知识点小结（自用）

已于 2022-08-08 11:24:14 修改
阅读量565 收藏 2
点赞数
文章标签： javascript 前端 开发语言
于 2022-03-01 19:56:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45038124/article/details/123200767
版权
本文总结了ES6的多项新特性，包括let和const关键字、解构赋值、模板字符串、简化对象写法、箭头函数、rest参数、spread运算符、Symbol、迭代器、生成器、Promise、Set和WeakSet、Map和WeakMap、Class类、数值与对象扩展以及模块化。深入探讨了这些特性的应用场景和具体用法。
摘要由CSDN通过智能技术生成

目录

一、let关键字

二、const关键字

三、解构赋值

四、模板字符串（``)

五、简化对象写法

六、箭头函数

七、rest参数

八、spread扩展运算符

九、Symbol

十、迭代器

十一、生成器

十二、Promise

十三、Set和WeakSet

十四、Map和WeakMap

十五、Class类

十六、数值扩展

十七、对象扩展

十八、模块化

一、let关键字

  1. 不允许重复声明
  2. 块级作用域
  3. 不存在变量提升（不允许在变量声明之前使用变量）
  4. 不影响作用域链

二、const关键字

  1. 声明必须赋初始值
  2. 标识符一般为大写
  3. 不允许重复声明
  4. 值不允许修改
  5. 块级作用域

应用场景：声明对象类型使用const，声明非对象类型选择let。

三、解构赋值

解构模型分为两部分：

  • 解构的源，解构赋值表达式的右边部分。
  • 解构的目标，解构赋值表达式的左边部分。
const arr = ['111','222','333']
let [a,b,c] = arr
console.log(a) // '111'
console.log(b) // '222'
console.log(c) // '333'

解构赋值，如果所解构的原对象是一维数组或对象，其本质就是对基本数据类型进行等号赋值，那它就是深拷贝；如果是多维数组或对象，其本质就是对引用类型数据进项等号赋值，那它就是浅拷贝。

四、模板字符串（``)

  1. 字符串中可以出现换行符
  2. 可以使用${xxx}形式输出变量
let p = '猪猪'
let res = `${p}胖嘟嘟`
console.log(res) // 猪猪胖嘟嘟

五、简化对象写法

允许在大括号内直接写入已经定义好了的变量和函数

let name = 'Naive'
let obj = {
    name,
    change(){
        console.log('abc')
    }
}

六、箭头函数

（参数1，参数2，...）=> {         }

  1. 如果形参只有一个，则小括号可以省略
  2. 函数体如果只有一条语句，则花括号可以省略，函数返回值为该条语句的执行结果
  3. 箭头函数this指向声明时所在作用域下this的值（this的指向不能改变）
  4. 箭头函数不能作为构造函数实例化
  5. 不能使用arguments

箭头函数适合与this无关的回调（定时器，数组的方法回调），不适合与this有关的回调（事件回调，对象的方法）

七、rest参数

引入rest参数用于获取函数的实参，用来代替arguments

function add(...args){
    console.log(args)
}
add(1,2,3,4,5) // [1,2,3,4,5]

八、spread扩展运算符

扩展运算符也是三个点（...），好比rest参数的逆运算

let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr = [...arr1,...arr2]
console.log(arr) // [1,2,3,4,5,6]

九、Symbol

  1. Symbol的值时唯一的，用来解决命名冲突的问题
  2. Symbol的值不能与其他数据进行运算
  3. Symbol定义的对象属性不能使用for...in循环遍历
  4. Symbol.for()方法创建的的 symbol 会被放入一个全局 symbol 注册表中。Symbol.for()并不是和每次都会创建一个新的Symbol，它会首先检查给定的 key 是否已经在注册表中了。假如是，则会直接返回上次存储的那个。否则，它会再新建一个。
let s1 = Symbol('aaa');
let s1_1 = Symbol('aaa');
console.log(s1===s1_1);//false
let s2 = Symbol.for('bbb');
let s2_2 = Symbol.for('bbb');
console.log(s2===s2_2);//true

十、迭代器

        Iterator接口主要供for...of消费，所有的迭代器对象都有一个next()方法，每次调用都返回一个结果对象。结果对象有两个属性：一个是value，表示下一个将要返回的值；另一个是done，它是一个布尔类型的值，当没有更多可返回数据时返回true。迭代器还会保存一个内部指针，用来指向当前集合中值的位置，每调用一次next()方法，都会返回下一个可用的值。

　　如果在最后一个值返回后再调用next()方法，那么返回的对象中属性done的值为true，属性value则包含迭代器最终返回的值，这个返回值不是数据集的一部分，它与函数的返回值类似，是函数调用过程中最后一次给调用者传递信息的方法，如果没有相关数据则返回undefined。

工作原理如下：

  1. 创建一个指针对象，指向当前数据结构的起始位置
  2. 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
  3. 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
  4. 每调用next方法返回一个包含value和done属性的对象
function createIterator(items){
    var i = 0
    return {
        next : function(){
            var done = (i >= items.length)
            var value = !done ? items[i++] : undefined
            return {
                done : done,
                value : value
            }
        }
    }
}

var iterator = createIterator([1,2,3])
console.log(iterator.next()) // {value:1,done:false}
console.log(iterator.next()) // {value:2,done:false}
console.log(iterator.next()) // {value:3,done:false}
console.log(iterator.next()) // {value:undefined,done:true}
//之后的所有调用
console.log(iterator.next()) // {value:undefined,done:true}

十一、生成器

　　生成器是一种返回迭代器的函数，通过function关键字后的星号(*)来表示，函数中会用到新的关键字yield。星号可以紧挨着function关键字，也可以在中间添加一个空格。

  1. * 的位置没有限制
  2. 生成器函数返回的结果十迭代器对象，调用迭代器对象的next方法可以得到yield语句后的值
  3. yield相当于函数的暂停标记，也可以认为十函数的分隔符，每调用一次next方法，执行一段代码
  4. next方法可以传递实参，作为yield语句的返回值
  5. 可以解决回调地狱的问题
function one(){
    setTimeout(()=>{
        console.log(111)
        iterator.next()
    },1000)
function two(){
    setTimeout(()=>{
        console.log(222)
        iterator.next()
    },1000)
function three(){
    setTimeout(()=>{
        console.log(333)
        iterator.next()
    },1000)
function *gen(){
    yield one()
    yield two()
    yield three()
}
let iterator = gen()
iterator.next() // 111 222 333

十二、Promise

1、Promise对象有三种状态：

  • pending（待定）：初始状态，既没有被兑现，也没有被拒绝。
  • fulfilled（已兑现）：意味着操作成功完成。
  • rejected（已拒绝）：意味着操作失败。

2、resolve、reject和then方法

        resolve是对Promise成功时候的回调，它把Promise的状态修改为fulfilled；reject是对Promise失败时候的回调，它把Promise的状态修改为rejected。

        Promise对象中的then方法，可以接收构造函数中处理的状态变化，并分别对应执行。then方法有2个参数，第一个参数接收resolved状态的执行，第二个参数接收rejected状态的执行。

function promiseClick(){
    let p = new Promise(function(resolve,reject){
        setTimeout(function(){
            var num = Math.ceil(Math.random()*20) //生成1-10随机数
            console.log('随机数生成值：',num)
            if(num<=10){
                resolve(num)
            }else{
                reject('数字大于10了即将执行失败回调')
            }
        },1000)
    })
    return p
}
promiseClick().then(
    function(data){
        console.log('resolved成功回调')
	    console.log('成功回调接受的值：',data)
    },function(reason){
        console.log('rejected失败回调')
		console.log('失败执行回调抛出失败原因：',reason)
    }
}

3、catch方法

        与Promise对象方法then方法并行的一个方法就是catch，与try...catch类似，catch就是用来捕获异常的，也就是和then方法中接受的第二参数rejected的回调时一样的。

    function promiseClick() {
      let p = new Promise(function (resolve, reject) {
        setTimeout(function () {
          var num = Math.ceil(Math.random() * 20) //生成1-10的随机数
          console.log("随机数生成的值：", num)
          if (num <= 10) {
            resolve(num)
          } else {
            reject("数字大于10了即将执行失败回调")
          }
        }, 2000)
      })
      return p
    }

    promiseClick()
      .then(function (data) {
        console.log("resolved成功回调")
        console.log("成功回调接受的值：", data)
      })
      .catch(function (reason, data) {
        console.log("catch到rejected失败回调")
        console.log("catch失败执行回调抛出失败原因：", reason)
      })

 

 4、all方法

        与then同级的另一个方法，all方法，该方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后并且执行结果都是成功的时候才执行回调。

    function promiseClick1() {
      let p = new Promise(function (resolve, reject) {
        setTimeout(function () {
          var num = Math.ceil(Math.random() * 20) //生成1-10的随机数
          console.log("随机数生成的值：", num)
          if (num <= 10) {
            resolve(num)
          } else {
            reject("数字大于10了即将执行失败回调")
          }
        }, 2000)
      })
      return p
    }
    function promiseClick2() {
      let p = new Promise(function (resolve, reject) {
        setTimeout(function () {
          var num = Math.ceil(Math.random() * 20) //生成1-10的随机数
          console.log("随机数生成的值：", num)
          if (num <= 10) {
            resolve(num)
          } else {
            reject("数字大于10了即将执行失败回调")
          }
        }, 2000)
      })
      return p
    }
    function promiseClick3() {
      let p = new Promise(function (resolve, reject) {
        setTimeout(function () {
          var num = Math.ceil(Math.random() * 20) //生成1-10的随机数
          console.log("随机数生成的值：", num)
          if (num <= 10) {
            resolve(num)
          } else {
            reject("数字大于10了即将执行失败回调")
          }
        }, 2000)
      })
      return p
    }
    Promise.all([promiseClick3(), promiseClick2(), promiseClick1()]).then(
      function (results) {
        console.log(results)
      }
    )

 5、race方法

        all是等所有的异步操作都执行完了再执行then方法，那么race方法就是相反的，谁先执行完成就先执行回调。先执行完的不管是进行了race的成功回调还是失败回调，其余的将不会再进入race的任何回调。

    Promise.race([promiseClick3(), promiseClick2(), promiseClick1()]).then(
      function (results) {
        console.log("成功", results)
      },
      function (reason) {
        console.log("失败", reason)
      }
    )

6、Promise可以解决回调地狱的问题（回调地狱是指层层嵌套的异步函数的操作）

十三、Set和WeakSet

1、Set

成员的值都是唯一的，没有重复的值。Set结构的属性如下：

  1. size()：返回成员总数
  2. add()：添加某个值，返回Set结构本身
  3. delete()：删除某个值，返回一个布尔值，表示是否删除成功
  4. has()：返回一个布尔值，表示该值是否为Set的成员
  5. clear()：清除所有成员，没有返回值

2、WeakSet

WeakSet结构与Set类似，也是不重复的值的集合。但是，它与Set有两个区别：

  1. Weak Set的成员只能时对象，而不能是其他类型的值
  2. WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。

十四、Map和WeakMap

1、Map

Map是键值对的集合，包含的属性有：

  1. size()：返回成员总数
  2. set(key,value)：设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。
  3. get(key)：读取对应的键值，如果找不到key，返回undefined
  4. has(key)：返回一个布尔值，表示某个键是否在当前Map对象之中
  5. delete(key)：删除某个键，返回true。如果删除失败，返回false。
  6. clear()：清除所有成员，没有返回值

2、WeakMap

WeakMap和Map的区别：

  1. WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。
  2. WeakMap的键名所指向的对象，不计入垃圾回收机制。它的键名所引用的对象都是弱引用，即垃圾回收机制不将该引用考虑在内。因此，只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。也就是说，一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。

十五、Class类

  1. constructor定义构造函数初始化
  2. extends继承父类
  3. super调用父级构造方法
  4. static定义静态方法和属性
  5. 父类方法可以重写

十六、数值扩展

  1. 二进制0b 八进制0o
  2. Number.isFinite() 用来检查一个数值是否为有限的；Number.isNaN() 用来检查一个值是否为NaN
  3. Number.parseInt()与Number.parseFloat()
  4. Math.trunc 用于去除一个数的小数部分，返回整数部分
  5. Number.isInteger() 用来判断一个数值是否为整数

十七、对象扩展

  1. Object.is比较两个值是否严格相等，与===行为基本一致
  2. Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象
  3. __proto__、setPrototypeOf，setPrototypeOf可以直接设置对象的原型

十八、模块化

模块功能主要由两个命令构成：export和import

  1. 1、export命令用于规定模块的对外接口
  2. 2、import命令用于输入其他模块提供的功能
快来吃饭啦
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
超详细ES6新特性汇总（欢迎点赞收藏，持续更新中）
sunygoal的博客
10-15 635
超详细ES6解析
ES6新增的数组知识实例小结
10-15
以下是一些重要的ES6新增的数组知识点： 1. **JSON数组格式转换**： 在某些场景下，我们需要将JSON对象转换为数组。在ES6中，我们可以利用`Array.from()`方法实现这一转换。例如，对于一个具有`length`属性的特殊...
javascript里ES6新增知识点
v_life_v的博客
07-10 201
1.数组的扩展 Array.from() 对象类数组转为数组 Array.of（）将括号内的参数转为数组形式 fill（值,参数1，参数2） 用第一个参数填充数组，参数1和参数2代表索引范围，含头不含尾，填充的内容不限制 个人总结： 1.Array.from() 对象要使用的话，自定义属性的属性名就要有序且对象加length属性值为原有的属性个数；类数组直接使用就行 // let obj = { // name: ‘zhangsan’, // age: 100, // sex: ‘男
ES6的一些新增知识点
嘿，小明的博客
06-27 172
es6新增的一些知识点
JS-ES6新增加的知识点
weixin_40507158的博客
07-06 235
ES6知识点1.变量let2.常量const3.var、let和const的区别4.数组解构5.对象解构6.箭头函数（）=>{}7.剩余参数（允许将不定量的值作为一个参数）8.Array的拓展方法1.扩展运算符2.构造函数方法Array.from()3.实例方法：find（）4.实例方法 ：findindex（）5.实例方法：includes（）9.string的扩展方法1.模板字符串``2.实例方法StartsWidth（）和endsWidth（)3.实例方法：repeat（）10.Set数据结构1
ES6新增史上最全知识点(一)
weixin_56511814的博客
02-21 497
变量声明 let 1.局部作用域 2.不能重复声明 3.不会变量提升 const 1.局部作用域 2.不能重复声明 3.不会变量提升 4.声明必须赋值 5.声明后不能修改* 6.建议变量名大写 解构 把对象或者数组解析为单独的变量 数组 用，分割可以跳过 ...剩余值 给默认值 ...
ES6常用知识点学习总结
12-10
压缩包包含了ES6中比较常用的知识点代码总结，这是博主自学过程中存下来的，包括，le&const，变量的解构，模块化，函数参数默认值，箭头函数，字符与对象的拓展，class类，try/catchz异常处理，promise等等，请放心...
ES6 新增的创建数组的方法(小结)
10-16
以下是ES6新增的两种创建数组的方法的详细解释。 1. **Array.of()** `Array.of()` 方法是为了解决 `new Array()` 的一个特殊行为而引入的。在旧版本的JavaScript中，`new Array(n)` 如果传入一个单一的数字参数 `...
ES6新增的一些知识
qq_61876792的博客
02-22 180
1:var ,let ,const const与let是局部作用域，不能重复声明，不能变量提升，const用于声明常量，且声明后不能重复赋值 2：ES6 中有 class 语法。值得注意是，这里的 class 不是新的对象继承模型，它只是原型链的语法糖表现形式。 函数中使用 static 关键词定义构造函数的的方法和属性： class Animal { c onstructor(color,age){ t his.color = color; t ...
es6新知识
weixin_34293246的博客
02-13 138
数组方法forEach map filter every 和 some reduce 变量和常量定义方法：let和const 模板字符串 箭头函数 增强对象字面量 函数参数默认值 展开运算符 解构（数组和对象） 面向对象（class） generator生成器 新的数据解构（map） 新的数据解构（set） Promise(三种状态) fetch Apis 封装fetch库（增删改查） asyn...
ES6新增总结
weixin_46317446的博客
06-05 151
1.ES6新数据类型 基本类型：string、number、boolean 复合类型：array、object 特殊类型：null、undefined 新增：symbol 2.set数据结构 概念：类似数据，成员唯一 语法：s.add/delete/has（成员），s.clear() 应用：数组去重 ES6中…的作用: 将对象字面量展开为多个元素 const arr=[‘a’,’b’,’c’]; console.log(…arr); //a b b 数组结合(作用类似于con..
ES6中的新知识
weixin_43850992的博客
02-22 113
ES6 带来的新知识 什么是 ES6 ES6， 全称 ECMAScript 6.0 ，是 JaveScript 的下一个版本标准，2015.06 发版 ECMAScript 的背景 JavaScript 是大家所了解的语言名称，但是这个语言名称是商标（ Oracle 公司注册的商标） JavaScript 的正式名称是 ECMAScript 1996年11月，JaveScript 的创造者网...
ES6知识点总结
sxs7970的博客
05-05 690
文章目录一、变量1.var2.let3.const二、箭头函数三、函数-参数1.参数扩展(收集参数)2.数组展开四、数组方法1.map --- 映射 --- 一个对应一个2.reduce --- 汇总 --- 一堆出来一个3.filter --- 过滤器 --- 过滤一部分，留一部分4.forEach --- 循环(迭代)五、字符串1.startsWith 和 endsWith2.字符串模板六、解...
ES6新增知识小总结
weixin_51536723的博客
11-26 110
ES6 let／const ES6中新增的声明变量的方式： let关键字用来声明变量，类似于var，但是使用let声明的变量有以下几点特性： 1.不存在变量提升 2.暂时性死区 TDZ 3.不允许重复声明，同一作用域内只能声明一次 4.新增的块级作用域 for(作用域A){作用域B} 循环的应用； const关键字用来声明常量，其使用规则除了声明之后不能修改之外，其他特性和let一样 本质上来说，const声明的变量并不是变量的值不能改动，而是变量指向的内存地址不得改动，简单的数据类型（数字，字符串，布尔
JavaScript ES6新增语法相关个人总结（三）
Scorpio_sky的博客
01-23 131
目录Promise基础- 基本语法- then方法- 链式调用- catch方法Set（集合）- Set相关应用Map数据结构 Promise基础 - 基本语法 代码例： // 实例化Promise对象 const p = new Promise(function(resolve, reject){ setTimeout(function(){ let data = '请求成功的数据' // 请求成功，调用resolve resolve(data) // let err = '请求失败'
ES6新增语法(四)——面向对象(1)，2024年最新知识点总结+面试题解析
最新发布
m0_56169789的博客
04-14 600
mvvm和mvc区别？var w = new Worker(‘倩倩’,18,‘打杂’);console.log(‘今年’,this.age,‘岁’)console.log(‘今年’,this.age,“岁”)console.log(‘今年’,this.age,‘岁’)console.log(‘今年’,this.age,“岁”)console.log(‘工作是’,this.job);console.log(‘我叫’,this.name)console.log(‘我叫’,this.name)
JS的ES6新增基础知识点
weixin_47342624的博客
09-17 331
let关键字：直观角度，let和var没有太大区别，都是用于声明一个变量；const关键字：声明常量，表示保存的数据一旦被赋值，就不能再修改，如果赋值的是引用类型，那么可以通过引用找到对应的对象，修改对应的内容；注意：let、const不允许重复声明变量；
es6总结
张庆超的博客
01-31 340
数组的拓展方法: arr.keys()方法: 获取数组的所有索引值   chrome没有实现 arr.values()方法: 获取数组的所有成员值    chrome没有实现 arr.entries()方法:   作用:   获取数组所有索引值以及成员值 返回:  数组迭代器对象 使用for fo方法遍历此对象可获得数组 第一个成员表示索引
你需要了解的ES6的新特性（前沿技术）
weixin_34221073的博客
07-26 143
ES6新特性 最近在项目中遇到了很多ES6的语法，遇到了不少坑坑洼洼，因此，在这里就简单介绍一下ES6中的一些新特性 如果想真正的了解ES6和ES5有什么不同，这里推荐看一下阮一峰的一本《ECMAScript 6 入门》 在我下面，主要介绍一下ES6标准下的let, const, "=>", "..."的介绍和用法 ES6背景...
ES6知识点概览与let、const区别详解
在这个文档中，主要介绍了JavaScript的第六个版本（ES6）的重要知识点，特别是针对其与早期版本的区别和新引入的语法特性。首先，我们明确了ES6（ECMAScript 6）的含义，它是JavaScript语言的一个进化版本，旨在提高...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值