ES6新特性:对象、数组新增方法

2023年 8月 28日 47.2k 0

ES6新特性

ES6(ECMAScript 2015)是 JavaScript 的一个重要版本,引入了许多新的语法和功能,增强了语言的表达能力和开发体验。以下是 ES6 中一些重要的新特性的全面总结:

  • let 和 const 声明:let 和 const 是新的变量声明关键字,用于定义块级作用域的变量。let 允许变量被重新赋值,而 const 则定义一个不可变的常量。
  • 箭头函数:箭头函数使用更简洁的语法定义函数,并自动绑定外部作用域的 this 值。适用于简短的函数和回调函数。
  • 模板字符串:模板字符串使用反引号 `` 定义字符串,可以在其中插入变量和表达式,使字符串拼接更加方便。
  • 解构赋值:解构赋值允许从数组或对象中提取值并赋给变量,使得变量的赋值更加简洁。
  • 默认参数:可以在函数参数中为参数设置默认值,使得调用函数时可以省略一些参数。
  • 展开运算符:展开运算符 ... 可以将数组或对象展开为单独的元素或属性,方便进行数组合并、函数参数传递等操作。
  • 类和继承:引入了类和面向对象编程的语法,更易于创建和继承对象。
  • 模块化:引入了 import 和 export 关键字,支持模块化编程,让代码更结构化和可维护。
  • 迭代器和生成器:迭代器和生成器提供了更强大的迭代和异步编程方式,可以简化异步操作的处理。
  • Promise:Promise 提供了更便捷的处理异步操作的方式,避免了回调地狱,改善了代码的可读性。
  • Symbol 和 Map/Set:Symbol 是一种新的数据类型,用于创建唯一的属性键。Map 和 Set 是新的数据结构,分别用于键值对和集合。
    • Symbol:Symbol 是 ES6 中引入的一种新的原始数据类型,用于创建独一无二的值。每个通过 Symbol() 创建的值都是唯一的,不会与其他值相等。Symbol 可以用作对象属性的键,用于避免命名冲突。
      const uniqueSymbol = Symbol('description'); // 创建一个带有描述的 Symbolconst obj = {  [uniqueSymbol]: 'some value'};
    • Map:Map 是一种新的数据结构,它是一种键值对的集合,与对象不同,Map 的键可以是任何类型的值,包括对象、函数等,而不仅仅是字符串。Map 的键值对在插入顺序上保持有序。
      const map = new Map();map.set('key1', 'value1');map.set('key2', 'value2');
      console.log(map.get('key1')); // 输出 'value1'console.log(map.size); // 输出 2
    • Set:Set 是一种类似于数组的数据结构,但它的值是唯一的,不允许重复。它提供了一种存储无重复值的集合的方式。
      const set = new Set();set.add('value1');set.add('value2');set.add('value1'); // 重复的值不会被添加
      console.log(set.has('value1')); // 输出 trueconsole.log(set.size); // 输出 2
  • 模块化的 Math 和 Number 方法:Math 和 Number 对象的方法现在以模块化的方式提供,可以通过 Math.xxx 和 Number.xxx 来访问。
  • 数组

    ES6在数组上新增了以下几种方法:

  • Array.from() 从类数组对象中创建数组,可传入map函数。
  • jslet arrayLike = {0: 'a', 1: 'b', length: 2}let arr = Array.from(arrayLike, x => x.toUpperCase())// ['A', 'B']
  • Array.of() 创建数组实例,参数为数组元素。
  • js let arr = Array.of(1, 2, 3)// [1, 2, 3]
  • find() 找到第一个符合条件的元素
  • jslet arr = [1, 2, 3] let found = arr.find(x => x > 1) // 2
  • findIndex() 找到第一个符合条件元素的下标
  • jslet arr = [1, 2, 3]let index = arr.findIndex(x => x > 1) // 1
  • fill() 使用指定值填充数组
  • jslet arr = new Array(3).fill(0) // [0, 0, 0]
  • copyWithin() 选择源数据,拷贝到指定位置
  • jslet arr = [1, 2, 3, 4] arr.copyWithin(2, 0, 2) // [1, 2, 1, 2]
  • entries()/keys()/values() 遍历数组
  • includes() 检查数组是否包含某个值,返回布尔值。
  • jslet arr = [1, 2, 3]arr.includes(2) // true
  • flat() 将多维数组转为低一级的数组。
  • js let arr = [1, [2, 3]]arr.flat() // [1, 2, 3]
  • flatMap() 先对数组元素执行map,再flat。
  • jslet arr = [1, 2, 3]arr.flatMap(x => [x * 2]) // [2, 4, 6] 
  • at() 取得给定索引处的元素,支持负索引。
  • jslet arr = [1, 2, 3]arr.at(-1) // 3
  • sort()优化 内置了对数字的正确排序。
  • 对象

    ES6 在对象的语法和 API 上也引入了一些重要的改进。以下是 ES6 在对象上新增的一些语法和 API 的详细总结:

  • 对象字面量增强:ES6 允许在对象字面量中使用变量作为属性名,而不必显式声明属性名。例如:
    const key = 'name';const person = {  [key]: 'John',  age: 30};
  • 对象的方法缩写:在对象字面量中,如果一个属性的值是一个函数,可以将函数的 function 关键字省略。
    const person = {  name: 'John',  sayHello() {    console.log(`Hello, ${this.name}!`);  }};
  • Object.assign(target, ...sources):这个静态方法用于将一个或多个源对象的属性复制到目标对象,可以用于对象的合并。
    const obj1 = { a: 1, b: 2 };const obj2 = { b: 3, c: 4 };const mergedObj = Object.assign({}, obj1, obj2);
  • Object.keys(obj)Object.values(obj) 和 Object.entries(obj):这些静态方法分别返回一个数组,用于遍历对象的键、值和键值对(键和值组成的数组)。
  • Object.getOwnPropertyDescriptor(obj, prop) 和 Object.defineProperty(obj, prop, descriptor)getOwnPropertyDescriptor 方法获取对象属性的描述符,defineProperty 方法用于修改或定义对象属性的描述符。
  • Object.setPrototypeOf(obj, prototype) 和 Object.getPrototypeOf(obj)setPrototypeOf 方法设置对象的原型,getPrototypeOf 方法获取对象的原型。
  • Object.is(value1, value2):这个静态方法用于比较两个值是否严格相等,类似于 === 运算符,但对于 NaN 和 +0/-0 有不同的结果。
  • Object.getOwnPropertySymbols(obj):这个静态方法返回一个数组,包含对象中的所有符号属性。
  • Object.freeze(obj)Object.seal(obj) 和 Object.preventExtensions(obj):这些静态方法用于分别冻结对象、密封对象(阻止添加和删除属性)、阻止对象扩展(阻止添加属性)。
  • Object.fromEntries(iterable):这个静态方法用于将键值对的可迭代对象转换为一个对象。
  • 相关文章

    JavaScript2024新功能:Object.groupBy、正则表达式v标志
    PHP trim 函数对多字节字符的使用和限制
    新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
    使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
    为React 19做准备:WordPress 6.6用户指南
    如何删除WordPress中的所有评论

    发布评论