JavaScript ES6及后续版本:新增的常用特性与亮点解析

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: JavaScript ES6及后续版本:新增的常用特性与亮点解析

JavaScript经历了不同标本的迭代,在不断完善中会添加不同的新特性来解决前一个阶段的瑕疵,让我们开发更加便捷与写法更加简洁!

1、箭头函数:

箭头函数相比传统的函数语法,具有更简洁的语法、没有自己的this值、不会绑定arguments关键字,并且在没有new关键字时不会生成this上下文。

  • 传统的函数定义
function add(x, y) {  
  return x + y;  
}
  • 箭头函数的定义
const add = (x, y) => x + y;
2、解构赋值

允许把数组或者对象的属性,直接赋值给其他变量。

  • 数组的解构赋值
let [a, b, c] = [1, 2, 3];
  • 对象的解构赋值
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
3、默认、剩余、展开:
  • 默认参数
function f(x = 10) { ... }
  • 剩余参数
function f(...args) { ... }
  • 展开运算符
let arr = [...args]
4、模板字符串

使用反引号(``)创建的字符串可以跨越多行,并可以嵌入表达式。

const name = 'Jack';
const message = `My name is ${name}.`;
5、import模块

引入了 import 和 export 关键字,用来定义模块的导入和导出。模块可以帮助我们更好地组织代码,避免命名冲突和代码重复。

如果想要导入模块的默认导出,可以使用import defaultExportedValue from 'module’语法。如果想要同时导入多个变量或函数,可以使用import { variable1, variable2 } from 'module’语法。

//make.js
//定义函数方法
function makeStyleGuide() {}
//导出
export default makeStyleGuide;
//index.js
import makeStyleGuide from 'make.js';

如果想要导入模块的默认导出,可以使用语法。

import defaultExportedValue from 'module'

如果想要同时导入多个变量或函数,可以使用语法。

import { variable1, variable2 } from 'module'
6、Array.prototype.includes()

用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回true,否则返回false。

let arr = ['react', 'angular', 'vue'];
console.log(arr.includes('react')); // true

使用 includes()查找字符串是区分大小写的。

使用 includes()只能判断简单类型的数据,对象类型的数组,二维数组,这些是无法判断的。

使用 includes()能识别NaN


如果只想知道某个值是否在数组中存在,而并不关心它的索引位置,建议使用includes(),如果想获取一个值在数组中的位置,那么使用indexOf方法。

7、Object.values()

方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。

const obj = {
      name: "Lucy",
      age: 18
    }
console.log(Object.values(obj)); // ['Lucy', 18,]

8、String.prototype.padStart和String.prototype.padEnd

padStart:用另一个字符串填充当前字符串,在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串


padEnd:用另一个字符串填充当前字符串,在原字符串结尾填充指定的填充字符串直到目标长度所形成的新字符串

语法

str.padStart(targetLength , padString)

  • targetLength
    当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身。
  • padString 可选
    填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断。此参数的默认值为 " "
const str = "ABC";
console.log(str.padStart(10,'a')) //aaaaaaaABC
console.log(str.padEnd(10, '123')) //ABC1231231
应用场景
  • 日期格式化:yyyy-mm-dd的格式
const now = new Date();
const year = now.getFullYear();
const mounth = (now.getMonth() + 1).toString().padStart(2, '0')
const day = (now.getDate()).toString().padStart(2, '0'
console.log(`${year}-${mounth}-${day}`); //2023-11-02
  • 信息脱敏:(手机号,银行卡号等)
const tel = '13245678901';
tel.slice(-4).padStart(tel.length, '*') // *******8901

9、可选链操作符

(?.)允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用都是否有效。?. 操作符的功能类似于.链式操作符,不同之处在于,在引用为 null 或 undefined 时不会报错,该链路表达式返回值为 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined。

当尝试访问可能不存在的对象属性时,可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时,如果不能确定哪些属性必定存在,可选链操作符也是很有帮助的。

  • 传统的写法
const user = res && res.data && res.data.user;
  • 可选链写法
const user = res?.data?.user;
  • 可选链有以下三种形式:
a?.[x]
// 等同于
a == null ? undefined : a[x]

a?.b()
// 等同于
a == null ? undefined : a.b()

a?.()
// 等同于
a == null ? undefined : a()
10、空值合并运算符 ‘??’

空值合并运算符(??)是一个逻辑运算符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。与逻辑或运算符(||)不同,逻辑或运算符会在左侧操作数为假值时返回右侧操作数。也就是说,如果使用 || 来为某些变量设置默认值,可能会遇到意料之外的行为。比如为假值(例如,‘’ 或 0)时。

语法

a ?? b 的结果是:

  • 如果 a 是已定义的,则结果为 a,
  • 如果 a 不是已定义的,则结果为 b。


如果第一个参数不是 null/undefined,则 ?? 返回第一个参数。否则,返回第二个参数。

注意点:不可以和逻辑与&& 或逻辑或 || 一起使用

  • 以前的写法
if(value !== null && value !== undefined && value !== ''){
    
}
  • 现在的写法
if((value??'') !== ''){
    
}
优先级

?? 运算符的优先级与 || 相同,它们的的优先级都为 4

这意味着,就像 || 一样,空值合并运算符在 = 和 ? 运算前计算,但在大多数其他运算(例如 + 和 *)之后计算。

  • 正确的写法
let height = null;
let width = null;

// 重要:使用括号
let area = (height ?? 100) * (width ?? 50);

console.log(area); // 5000
  • 错误的写法
let height = null;
let width = null;

// 没有括号
let area = height ?? 100 * width ?? 50;

// 将这样计算
let area = height ?? (100 * width) ?? 50;

与 || 比较

|| 无法区分 false、0、空字符串 “” 和 null/undefined。它们都一样 —— 假值(falsy values)。如果其中任何一个是 || 的第一个参数,那么我们将得到第二个参数作为结果。

let height = 0;

console.log(height || 100); // 100
console.log(height ?? 100); // 0
  • height || 100 首先会检查 height 是否为一个假值,它是 0,确实是假值。所以,|| 运算的结果为第二个参数,100。


  • height ?? 100 首先会检查 height 是否为 null/undefined,发现它不是。所以,结果为 height 的原始值,0。

实际上,高度 0 通常是一个有效值,它不应该被替换为默认值。所以 ?? 运算得到的是正确的结果。


11、String.prototype.replaceAll()

返回一个新字符串,字符串中所有满足 pattern 的部分都会被 replacement 替换掉。原字符串保持不变。

语法

String.prototype.replaceAll(pattern,replacement)

  • pattern
    可以是一个字符串或 RegExp;使用正则表达式搜索值时,必须是全局的。
  • replacement
    可以是一个字符串或一个在每次被匹配被调用的函数。
const str = "student is a real student";
const newStr = str.replaceAll('student', "hahaha");
console.log(newStr); //hahaha is a real hahaha
const str = "student is a real student";
const newStr = str.replaceAll(/student/g, "hahaha");
console.log(newStr); //hahaha is a real hahaha
目录
相关文章
|
1月前
|
编译器 C# 开发者
C# 9.0 新特性解析
C# 9.0 是微软在2020年11月随.NET 5.0发布的重大更新,带来了一系列新特性和改进,如记录类型、初始化器增强、顶级语句、模式匹配增强、目标类型的新表达式、属性模式和空值处理操作符等,旨在提升开发效率和代码可读性。本文将详细介绍这些新特性,并提供代码示例和常见问题解答。
40 7
C# 9.0 新特性解析
|
13天前
|
编译器 PHP 开发者
PHP 8新特性解析与实战应用####
随着PHP 8的发布,这一经典编程语言迎来了诸多令人瞩目的新特性和性能优化。本文将深入探讨PHP 8中的几个关键新功能,包括命名参数、JIT编译器、新的字符串处理函数以及错误处理改进等。通过实际代码示例,展示如何在现有项目中有效利用这些新特性来提升代码的可读性、维护性和执行效率。无论你是PHP新手还是经验丰富的开发者,本文都将为你提供实用的技术洞察和最佳实践指导。 ####
25 1
|
14天前
|
数据安全/隐私保护 iOS开发 开发者
iOS 14隐私保护新特性深度解析####
随着数字时代的到来,隐私保护已成为全球用户最为关注的问题之一。苹果在最新的iOS 14系统中引入了一系列创新功能,旨在增强用户的隐私和数据安全。本文将深入探讨iOS 14中的几大隐私保护新特性,包括App跟踪透明度、剪贴板访问通知和智能防追踪功能,分析这些功能如何提升用户隐私保护,并评估它们对开发者和用户体验的影响。 ####
|
17天前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
38 4
|
22天前
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
23 5
|
23天前
|
PHP 开发者
PHP 7新特性深度解析
【10月更文挑战第40天】随着PHP 7的发布,这个广泛使用的语言带来了许多令人兴奋的新特性和性能改进。本文将深入探讨PHP 7的主要变化,包括类型声明、错误处理机制、性能优化等方面,帮助开发者更好地理解和应用这些新特性。
29 4
|
22天前
|
自然语言处理 JavaScript 前端开发
ECMAScript 6 的出现为 JavaScript 带来了许多新的特性和改进
这些只是ES6的一些主要特性,它们极大地增强了JavaScript的功能和表现力,使得JavaScript在大型应用开发、前端框架等领域能够更加高效地编写复杂的应用程序。
|
29天前
|
C# 开发者
C# 10.0 新特性解析
C# 10.0 在性能、可读性和开发效率方面进行了多项增强。本文介绍了文件范围的命名空间、记录结构体、只读结构体、局部函数的递归优化、改进的模式匹配和 lambda 表达式等新特性,并通过代码示例帮助理解这些特性。
33 2
|
1月前
|
PHP 开发者
PHP 7新特性深度解析及其最佳实践
【10月更文挑战第31天】本文将深入探讨PHP 7带来的革新,从性能提升到语法改进,再到错误处理机制的变革。我们将通过实际代码示例,展示如何高效利用这些新特性来编写更加健壮和高效的PHP应用。无论你是PHP新手还是资深开发者,这篇文章都将为你打开一扇窗,让你看到PHP 7的强大之处。
|
29天前
|
JavaScript Linux iOS开发
详解如何实现自由切换Node.js版本
不同的项目中需要使用不同版本的 Node.js,有时旧项目需要旧版本,而新项目则可能依赖最新的 Node.js 版本
31 0

推荐镜像

更多