ES7、ES8、ES9、ES10、ES11、ES12新特性

原创

于 2025-05-30 13:37:23 发布 · 1.4k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

ES7 新特性

1.Array.prototype.includes

用于判断数组是否包含特定元素，替代传统的 indexOf 检查，返回布尔值更直观。

基本语法与功能
- 语法：arr.includes(searchElement, fromIndex)
  searchElement：需要查找的元素值；
  fromIndex（可选）：起始搜索的索引位置，默认为 0。
- 返回值：布尔值（true 表示包含，false 表示不包含）

[1, 2, 3].includes(2);      // true
[1, 2, 3].includes(4);      // false
[1, 2, NaN].includes(NaN); // true（正确处理 NaN）

参数 fromIndex 的详细规则
正值：从指定索引开始向后搜索

[1, 2, 3].includes(3, 3); // false（从索引 3 开始，超出范围）

负值：转换为数组长度 + fromIndex，若结果仍为负数则从头开始搜索

['a', 'b', 'c'].includes('a', -100); // true（等效于从索引 0 开始）
['a', 'b', 'c'].includes('a', -2);   // false（等效于从索引 1 开始）

超出数组长度：直接返回 false，不执行搜索

['a', 'b', 'c'].includes('c', 100); // false[1,2]

2.指数运算符 **

简化幂运算，替代 Math.pow()，提升代码可读性

2 ** 3; // 8（等价于 Math.pow(2, 3)）
10 ** -2;   // 0.01
let num = 3;
num **= 2;  // num = 9

ES8 新特性

1.Object.values() 和 Object.entries()

Object.values()：返回对象自身可枚举属性值的数组

const obj = {
   
    a: 1, b: 2, c: 3 };
Object.values(obj); // [1, 2, 3] // 获取对象的值
Object.keys(obj); // ['a', 'b', 'c'] 获取对象的键名

// 用的非常少
console.log(Object.values(["abc", "cba", "nba"]))
console.log(Object.values("abc"))

Object.entries() ：返回一个包含对象自身可枚举属性键值对的数组，每个键值对是一个 [key, value] 数组。

const user = {
   
   
  name: 'Bob',
  age: 25,
  profession: 'Developer'
};

const entries = Object.entries(user);
console.log(entries);
/* 输出: 
[
  ["name", "Bob"],
  ["age", 25],
  ["profession", "Developer"]
]
*/

2.字符串填充方法 String.prototype.padStart() 和 String.prototype.padEnd()

字符串填充（String Padding）主要是指两个字符串操作方法：padStart 和 padEnd 方法，分别是对字符串的首尾进行填充的
主要用在某些字符串我们需要对其进行前后的填充，来实现某种格式化效果

该两种方法都是来自String原型上的方法，所以可以在任何字符串后进行.符号调用和连续链式调用

'5'.padStart(3, '0'); // 开头填充 → "005"
'5'.padEnd(3, '0');   // 结尾填充 → "500"
//padStart:位数不够往前填充，第一个值填所需位数，第二个值填当位数不够时的填充内容
  const minute = "2".padStart(2,"0")
  //padEnd:位数不够往后填充
  const second = "1".padEnd(2,"0")
  console.log(`${
       
       minute}:${
       
       second}`);//02:10
  //连续链式调用
  const minute = "2".padStart(2,"0").padEnd(3,"0")//020

常见使用场景

// 格式化日期
const date = new Date();
const formattedDate = `${
     
     date.getFullYear()}-${
     
     (date.getMonth() + 1).toString().padStart(2, '0')}-${
     
     date.getDate().toString().padStart(2, '0')}`;
console.log(formattedDate); // 输出：2025-05-29
//文本对齐
const text = 'Hello';
console.log(text.padStart(10, ' ')); // 输出：'     Hello'
console.log(text.padEnd(10, ' '));   // 输出：'Hello     '
// 数据脱敏
const cardNumber = "110102YYYYMMDD888X"//身份证号码
const lastFourNumber = cardNumber.slice<