ES6+常用新特性

已于 2023-10-27 10:48:05 修改
阅读量105 收藏
点赞数
分类专栏： 个人笔记 文章标签： es6 javascript 前端
于 2023-10-27 10:13:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alan_walker688/article/details/134070282
版权

目录

ES6+常用新特性

1 let 与 const

let 和 const 是 ES6（ES2015）新增的两个关键字，用于声明变量和常量。它们的作用域都是块级的。（块级作用域由最近的一对大括号 {} 界定）

使用 var 声明变量时，变量会自动地被添加到最接近的上下文。在函数中，最接近的上下文就是函数的局部上下文。如果变量未经声明就被初始化了，那么它就会自动地被添加到全局上下文。

1.1 var VS let VS const

varletconst
作用声明一个函数内的局部变量或全局变量声明一个块级作用域的局部变量声明一个只读的块级作用域的局部常量
作用域函数内 / 全局代码块内代码块内
初始化可选可选必须
重复声明可以不可以不可以
修改值可以可以不可以
变量提升存在不存在不存在

变量提升（Hoisting）：在编译阶段，函数及变量的声明都将先被放入内存中（函数比变量会先被提升）。这会导致在变量声明之前就可以使用变量。【更多内容可参考附录6.1】

console.log(name); // undefined
var name = 'Jake';

console.log(age); // Uncaught ReferenceError: a is not defined
let age = 19;

【注意】：

  1. 由于 let 和 const 不存在变量提升，所以必须先声明后使用。

    // 正确用法
let num;
num = 1;

let age = 20;

// 错误用法
num = 1;
let num;

  2. const 声明的常量的值是无法改变的。对于基本类型（Number、Boolean、String等）的常量而言，其存储的值是原始值，这个值是常量存储的数据，不可被改变；

    在这里插入图片描述

    对于复杂类型（Object、Array、Function等）的常量而言，其存储的是引用值，这个值是对象所在内存空间的地址，不可被改变，但是对象本身的属性的值可以被修改。

    在这里插入图片描述

    JavaScript 中变量值的存储方式类似于 C++ 和 Java，对于复杂类型的变量值理解可参考 C++ 指针或 Java 引用。【更多内容可参考附录6.2】

  3. 声明变量时建议不再使用 var，const 优先，let 次之。

2 解构赋值

解构赋值是一种 JavaScript 表达式，是对赋值运算符的扩展，可以将数组的值或对象的属性取出来，赋值给其他变量。

2.1 基本用法

let [a, b, c] = [1, 2, 3]
// a = 1, b = 2, c = 3
let { foo, bar } = { foo: '111', bar: 222 }
// foo = '111', bar = 222

【注意】：null 和 undefined 不能被解构，否则会抛出错误。

let { x } = null; // TypeError
let { x } = undefined; // TypeError

2.2 可嵌套

let obj = { a: ['111'], b: 222, c: [333, 444] }
let { a: [x], b, c: [y, z] } = obj
// x = '111', b = 222, y = 333, z = 444
// a 和 c 不是变量，是对象属性名

2.3 可忽略

let arr = [111, '222', { x: 333, y: '444' }]
let [a, , { y: b }] = arr
// a = 111, y = b = 333

2.4 解构默认值

let [a = 1, b, c = 333, d] = [111, '222']
// a = 111, b = '222', c = 333, d = undefined

2.5 剩余运算符

剩余操作符可以在解构对象时将所有剩下未指定的可枚举属性收集到一个对象中

let [a, ...b] = [1, 2, 3]
// a = 1
// b = [2, 3]

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
// a = 10
// b = 20
// rest = {c: 30, d: 40}

每个对象字面量中最多可以使用一次剩余操作符，而且必须放在最后。

const person = { name: 'Matt', age: 27, job: { title: 'Engineer', level: 10 } }; 
const { name, job: { title, ...otherJobData }, ...otherPersonData } = person;

剩余操作符在对象间执行浅复制，因此会复制对象的引用而不会克隆整个对象。

const person = { name: 'Matt', age: 27, job: { title: 'Engineer', level: 10 } };

const { ...personData } = person; 

console.log(person === personData); // false 
console.log(person.job === personData.job); // true

3 函数的扩展

3.1 参数默认值

在 ES5 以前，函数实现默认参数的一种常用方式是检测某个参数是否等于 undefined，如下所示：

function getAvatar(avatar) {
  avatar = (typeof avatar !== undefined) ? avatar : 'defaultURL'
  return `avatar url: ${avatar}`
}

而在 ES6 中支持了显式地给函数参数定义默认值了，就可以写作如下的代码：

function getAvatar(avatar = 'defaultURL') {
  return `avatar url: ${avatar}`
}

【注意】：

  1. 只有在未传递参数，或者参数为 undefined 时，才会使用默认参数，null 值被认为是有效的参数值；

    function f(name, age = 18) {
  console.log(name, age)
}

f('Jake') // Jake, 18
f('Jake', null) // Jake, null

  2. 通常情况下，把定义了默认值的参数放到函数参数的尾部，这样比较方便地看出哪些参数可以省略。

    如果给非尾部的函数参数设置默认值，则会遇到不可省略的情况，如下所示：

    function fn(x, y = 5, z) {
  console.log([x, y, z])
}

fn(1) // [1, 5, undefined]
fn(1, ,2) // 报错
fn(1, undefined, 2) // [1, 5, 2]

3.2 剩余参数

ES6 引入 rest 参数（形式为 ...变量名），用于获取函数的剩余参数，这样就不需要使用 arguments 对象了。

rest 参数搭配的变量是一个数组，该变量将剩余的参数放入数组中。

function getSum(...args) {
  let sum = 0;
  for(let arg of args) {
    sum += arg
  }
  console.log(sum)
}

getSum(1, 2, 3) // 6
getSum(1, 2, 3, 4, 5) // 15

【注意】：rest 参数必须放在函数参数的尾部， 否则会报错。

3.3 箭头函数

ES6 新增了使用 => 语法定义函数表达式的能力。

let f1 = function(a, b) {
  return a + b
}
// 等价于
let f2 = (a, b) => {
  return a + b
}

console.log(f1(6, 9), f2(6, 9)) // 15, 15

当箭头函数不需要参数或者需要两个及以上的参数时，则使用一个圆括号 () 代表参数部分。

当箭头函数只需要一个参数时，圆括号 () 可以省略。

let f1 = () => {
	return 'f1'
}

let f2 = a => {
	return a * a
}

当箭头函数的代码块部分多于一条语句时，就要使用大括号 {} 将它们括起来，并且使用 return 语句返回。

当箭头函数的代码块部分只有一条语句时，大括号 {} 和 return 语句可以省略。

let f1 = () => 'f1'

let f2 = a => {
  let pow_a = a * a
  console.log(pow_a)
  return pow_a
}

由于大括号 {} 被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。

let fn = (pid, pname) => ({id: pid, name: pname})

箭头函数的一个用处是简化回调函数。

// 普通函数写法
[1,2,3].map(function (x) {
  return x * x
});

// 箭头函数写法
[1,2,3].map(x => x * x)

【注意】：箭头函数体内的 this 对象，是定义时所在的对象，而不是使用时所在的对象。

// 普通函数
const person1 = {
  name: 'Jake',
  greeting: function() {
    setTimeout(function() {
      console.log('Hello, My name is ' + this.name)
    })
  }
}

person1.greeting() // Hello, My name is undefined

// 箭头函数
const person2 = {
  name: 'Jake',
  greeting: function() {
    setTimeout(() => {
      console.log('Hello, My name is ' + this.name)
    })
  }
}

person2.greeting() // Hello, My name is Jake

4 Promise 对象

4.1 基础概念

Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、更强大。

ES6 将其写入语言标准，形成一种新的引用类型 Promise，可以通过 new 操作符来实例化。

Promise 对象表示异步操作最终的完成（或失败）以及其结果值。

一个 Promise 必然处于以下3种状态之一：

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

一个待定的 Promise 最终状态可以是已兑现并返回一个值，或者是已拒绝并返回一个原因（错误）。

【缺点】：

  1. Promise 对象一旦被创建后就会立即执行，不能被取消；
  2. 当处于待定状态时，无法得知目前进展到了哪个阶段（刚刚开始 or 即将兑现 or 即将拒绝）。

4.2 基本用法

实例化 Promise 对象时需要传入两个执行器函数作为参数，它们通常都命名为 resolve() 和 reject()。

resolve()函数的作用是将 Promise对象 的状态从 “待定” 切换为 “兑现”（即从 pending 变为 fulfilled），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject() 函数的作用是将 Promise 对象的状态从 “待定” 切换为 “拒绝”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作的错误，作为参数传递出去。

const promise = new Promise((resolve, reject) => {
  // ... 异步操作代码

  if (/* 异步操作成功 */){
    resolve(value)
  } else {
    reject(error)
  }
})

4.3 then() 方法

Promise.prototype.then() 是用来处理 Promise 对象执行异步操作产生的结果的主要方法。该方法支持链式调用。

这个 then() 方法可以接收两个回调函数作为参数，这两个参数都是可选的，如果提供的话， 则会在 Promise 对象分别进入 “兑现” 和 “拒绝” 状态时执行。

then() 方法的返回值是一个 resolved 或 rejected 状态的 Promise 对象。

const promise = new Promise((resolve, reject) => {
    resolve(111)
})
promise.then((res) => {
  console.log(res) // 111
  return res * 2   // then() 方法会自动封装成一个处于 resolved 状态的 Promise 对象
}).then((res) => {
  console.log(res) // 222
  return Promise.resolve(res)
}).then((res) => {
  console.log(res) // 222
}).then((res) => {
  console.log(res) // undefined
  return Promise.reject('promise rejected')
}).then((res) => {
  console.log(res) // 该语句不会执行
}, (err) => {
  console.log(err) // promise rejected
})

【注意】：由于Promise 的状态只会从 “待定” 切换为 “兑现”，或者从 “待定” 切换为 “拒绝”，并且只会转换一次。

const promise1 = new Promise((resolve, reject) => {
	resolve('fulfilled')
  reject('rejected')
})
promise1.then(res => {
  console.log(res) // fulfilled
})
// 链式调用
const promise2 = new Promise((resolve, reject) => {
	resolve('fulfilled1')
  resolve('fulfilled2')
}).then(res => {
  console.log(res) // fulfilled1
})

4.4 catch() 方法

Promise.prototype.catch() 方法是 .then(null, onRejected) 的别名，用于指定 Promise 对象执行异步操作发生错误时的回调函数。

const promise = new Promise((resolve, reject) => {
  // ... 异步操作代码

  if (/* 异步操作成功 */){
    resolve(value)
  } else {
    reject(error)
  }
})
// 常用写法
promise.then((res) => { 
  console.log(res)
}).catch((err) => {
  console.log(err)
})

// 等同于
promise.then((res) => { 
  console.log(res)
}, (err) => {
  console.log(err)
})

4.5 race() 和 all() 方法

Promise.race() 和 Promise.all() 方法都用于将多个 Promise 实例，包装成一个新的 Promise 实例。二者的最大不同之处是对新的 Promise 实例状态改变的影响方式。

// p1, p2, p3 均为 Promise 实例，这里省略初始化

const promise_race = Promise.race([p1, p2, p3])
// 对于 promise_race 实例而言，只要 p1, p2, p3 之中有一个实力率先改变状态，promise_race 的状态就随之改变，且那个率先改变的 promise 实例的返回值，会传递给 promise_race 的回调函数

const promise_all = Promise.all([p1, p2, p3])
// 对于 promise_race 实例而言，只有 p1、p2、p3 的状态都变成 fulfilled，promise_race 的状态才会变成 fulfilled，此时 p1、p2、p3 的返回值组成一个数组，传递给 promise_race 的回调函数；只要 p1、p2、p3 之中有一个被 rejected，promise_race 的状态就变成 rejected，此时第一个被 reject 的实例的返回值，会传递给 promise_race 的回调函数。

5 async 与 await

async / await 是 ES2017 新增的两个关键字，可以让以同步方式写的代码能够异步执行。

5.1 async

async 关键字用于声明异步函数。它可以用在函数声明、函数表达式、箭头函数和方法上：

aysnc function foo() {}

let f1 = async function() {}

let f2 = async () => {}

class Demo {
  async fn() {}
}

使用 async 关键字可以让函数具有异步特征，但总体上代码仍然是同步求值的。而在参数或闭包方面，异步函数仍然具有普通 JavaScript 函数的正常行为。

async function fn() {
  console.log(1)
}

fn()
console.log(2)

// 1
// 2

如果异步函数使用了 return 关键字返回了值（如果没有 return 则会返回 undefined），这个返回值会被 Promise.resolve() 包装为一个 Promise 对象。

异步函数始终返回 Promise 对象。

async function fn() {
  console.log(1)
  return 3	// 等价于 return Promise.resolve(3)
}

fn().then(res => console.log(res))
console.log(2)

// 1
// 2
// 3

5.2 await

await 关键字可以暂停通过 async 声明的异步函数中代码的执行，等待 Promise 对象处理完成。

function getApiData() {
  return new Promise((resolve, reject) => {
     // 模拟延迟(获取服务的数据) 
     setTimeout(() => {
         // 执行成功
         resolve({ name: 'Jake', age: 18 })
      }, 2000)
  })
}

async function getUser() {
 // 执行 
 const res = await getApiData()
 // await 后的代码在此处会阻塞,直到 getApiData 执行完成后才能继续往下执行  
 let user = res
 console.log('获取数据完成: ', user)
}

getUser()  // 异步执行的方法
console.log('开始获取数据:')  // 此处无阻塞(同步代码)

// 开始获取数据: // 直接输出
// 获取数据完成: { name: 'Jake', age: 18 } // 2s后输出此行结果

【注意】：await 只能用于通过 async 声明的异步函数中，用在普通函数中会报错。

// 注意: getUser() 函数并未使用 async 声明
function getUser() {
  let user = await getApiData()
  console.log(user)
}
// Uncaught SyntaxError: await can not be used when evaluating code while paused

6 附录

6.1 JavaScript 变量提升

浅谈 JavaScript 变量提升 - 掘金 (juejin.cn)

6.2 JavaScript 中变量在内存中的具体存储形式

JavaScript中的变量在内存中的具体存储形式_- CSDN博客

Vesuvius688
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript ES6常用基础知识总结
12-07
ES6 let与const及其相关 块级作用域 ES6新增了块级作用域，总结一句话大致就是：大括号{}包起来的代码块基本山都可以当做块级作用域。 常见的有 直接使用{}包起来： { var a = 4 } 函数体大括号，if-else大括号，for循环大括号，switch大括号，try-catch大括号等。 需要注意的是，for循环，每一次循环时的{}都是一个独立的块级作用域。 for(let i=0; a < 5; i++){ let j = i } 上面代码循环了五次，实际上有五个独立的j。 日常开发中，我们就可以利用这个特性，来创建块级作用域了。 块级作用域变量
ES6中非常实用的新特性介绍
01-21
ECMAScript 6离我们越来越近了，作为它最重要的方言，Javascript也即将迎来语法上的重大变革，InfoQ特开设“深入浅出ES6”专栏，来看一下ES6将给我们带来哪些新内容。 写在前面 ES6 已经提交给 Ecma 大会审查了，也就是说，我们将迎来一大波 javascript 的最新标准，还有一些语法糖。ES6 中有很多值得我们关注的东西，下面是我发现的一些我们最常用的一些新特性，进行记录一下。 1. for-of循环 这个东西用来循环数组很爽，原因呢，是因为它弥补了目前 es5 中循环数组的一切缺陷。 比如 for-in，它会遍历数组对象的附加属性，而不仅仅是遍历数组值。还有一
ES6+新语法
qq_50582468的博客
03-16 643
当代码在执行之前，会把所有在当前作用域下var声明的变量提升到当前作用于的最前面，只提升声明，不提升赋值，然后依次执行代码。可以把数组进行展开，可以利用其求数组的最大值以及合并数组的操作，剩余参数在函数内部进行使用。剩余参数允许我们将一个不定数量的参数表示为一个数组，其为真数组，例如其用...参数数组名。动态参数是伪数组，箭头函数里没有arguments，剩余参数为真数组，开发中剩余参数常用。：另外如果还有其他参数，则会先把用户输入的数给其他参数，剩余的参数给定义的数组参数。2、以数组进行开头的时候。
一文快速掌握 es6+新特性及核心语法
趣谈前端
10-07 6309
首先先祝各位节日快乐，好好去体验生活的快乐，在假期最后一天里，祝大家收获满满，同时抓住假期的尾巴，收割实用技能。接下来我会总结一些工作中常用也比较核心的es6+的语法知识...
三：以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 内置对象
味十三
03-21 166
ES 6+ 内置对象
ES6、ES7、ES8、ES9、ES10新特性一览
weixin_34199405的博客
04-02 1316
ES全称ECMAScript，ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMA-417。关于ECMA的最新资讯可以浏览 ECMA news查看。 ECMA规范最终由TC39敲定。TC39由包括浏览器厂商在内的各方组成，他们开会推动JavaScript提案沿着一条严格的发展道路前进。 从提案到入选ECMA规范主要有以下几个阶段：...
ES6/6+语法新特性
qq_50904696的博客
12-22 6783
ECMAScript 是由 Ecma 国际通过ECMA-262 标准化的脚本程序设计语言。平时经常编写的JavaScript，是ECMAScript 的一种实现，所以ES新特性其实指的就是JavaScript的新特性。ES6 加入许多新的语法特性，使编程的实现更简单、高效1、一定要赋初始值。2、一般常量名使用大写。3、常量的值不能修改。4、const也遵循块级作用域。5、对于数组和对象的修改，不算做对常量的修改，不会报错。
11. ES6+特性
一些学习笔记的记录
06-26 255
/ 生成值 yield value;// 可以在这里执行其他操作 }
ES6+的语法
weixin_56604618的博客
03-12 384
Es6+的新语法使用
ES6+新增的常用知识点
qq_37464878的博客
12-01 5648
注：由于ES6之后的标准变化不大，因此在此将ES6及之后标准发生的变化在此一起总结 1.变量声明——let和const (作用域) let和const是块级作用域，var是函数作用域 (变量提升) var声明变量存在变量提升 (暂时性死区) let和const声明变量存在暂时性死区 (重复声明) var声明的变量允许重复声明，后声明的变量覆盖先声明的变量，let和const不允许 (全局变量) var在浏览器全局环境下声明的变量会自动加入全局对象的属性，不可被delete。 (初始值) var和let不需
ES6学习教程之Map的常用方法总结
01-21
ES6包含了许多新的语言特性，这会让JS变的更加强大且富有表现力。本文将给大家详细介绍关于ES6中Map的常用方法，话不多说，来一起看看详细的介绍： 1.Map 结构转为数组结构 比较快速的方法是结合使用扩展运算符（…...
前端ES6+基础总结
立场简单的博客
03-31 1625
highlight: a11y-dark theme: juejin 1.什么是ES6 ES6即ECMA Script, 是由ECMA国际标准化组织,制定的一项脚本语言的标准化规定。 ES6很多时候是一个泛指，指在ESMA Script 2015之后的版本。 2. let声明变量 ES6中新增的用于声明变量的关键字。 1.let 声明变量只在所处的块级有效 if (true) { // let声明有块级作用域的概念 而var没有这方面的概念 let a = 0 var b.
九：以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 异步机制
味十三
03-22 166
ES 6+ 异步机制
日常开发中的ES6+语法
donglize521521的博客
09-07 816
日常开发中的ES6+语法1. 面试官：const、let、var区别2. 面试官：你了解箭头函数吗？箭头函数和普通函数的有什么区别？3.面试官：可以聊聊解构的日常使用场景吗？4.面试官：剩余参数 / 展开语法5.面试官：对象字面量简写语法6.面试官：谈一谈Promise7.面试官：async await对比promise的优缺点 推荐阅读： 90% 的前端都会使用 ES6 来简化代码，你都用过哪些？ 近一万字的ES6语法知识点补充 1. 面试官：const、let、var区别 主要从以下几个方面区分：
ES6+知识点总结
zhanghuaiwei
11-08 1104
ES6+的语法介绍和应用
ES6+新特性
powerfour的博客
10-10 218
2022.10.10 ES6新特性（部分）
ES6+
Raccon_的博客
07-13 175
笔记
JavaScript：数据类型 / 基本数据类型 / 引用数据类型 / 特殊类型 / ES6 提供的类型
最新发布
snowball的博客
05-17 499
掌握JavaScript数据类型非常重要，因为JavaScript是一种动态类型的编程语言，数据类型的正确使用对于开发人员来说至关重要。用于表示数值，可以是整数或浮点数。例如：10, 3.14。用于表示文本。由一系列字符组成，可以使用单引号（'）、双引号（"）或模板字符串（`）来定义。例如："Hello, world!用于表示真值（true）或假值（false）。主要用于条件判断和逻辑运算。例如：true, false。表示一个没有值的特殊类型。它是一个关键字，表示变量不引用任何对象。
es6 es7新特性
08-25
ES6和ES7是JavaScript的两个版本，它们引入了许多新的语言特性和功能。下面是一些ES6和ES7中的新特性： ...这只是ES6和ES7中一些较为常用的新特性，还有其他一些特性可以探索和学习。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Vesuvius688

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值