极简三分钟ES6 - ES7新增

191 阅读2分钟

ES7中新增内容不多,主要是在增强之前提供的api

Array.prototype.includes()

用来检查数组是否包含某个值

我们可以像查快递单号一样,快速确认数组里是否存在指定值,返回 true(有)或 false(无)

const fruits = ["🍎", "🍌", "🍊"];
console.log(fruits.includes("🍌"));  // true(找到香蕉)
console.log(fruits.includes("🍉"));  // false(没有西瓜)

对比 indexOf 的三大优势

语义更直观

includes 直接回答“有没有”,indexOf 回答“在哪儿”

// includes:关注存在性 
if (fruits.includes("🍎"))  { ... }

// indexOf:需额外判断索引 
if (fruits.indexOf("🍎")  !== -1) { ... }

正确处理 NaN

indexOf 无法识别 NaN(因为 NaN === NaN 返回 false),但 includes 可以

const nums = [1, NaN, 3];
console.log(nums.indexOf(NaN));    // -1(找不到)
console.log(nums.includes(NaN));   // true(正确识别) 

避免“0”的误判

indexOf 返回索引值,若元素是 0 可能被误判为“不存在”

const arr = [0, 1, 2];
if (arr.indexOf(0))  { ... } // 0 被转成 false,逻辑错误!
if (arr.includes(0))  { ... } // true,逻辑正确

指定搜索起点

通过第二个参数指定开始搜索的位置

const letters = ["a", "b", "c", "d"];
console.log(letters.includes("c",  2)); // true(从索引2开始找到"c")
console.log(letters.includes("b",  2)); // false(从索引2开始,跳过了"b")

需要注意的点

仅支持值类型(非引用类型)

无法检测对象、数组等引用类型(因内存地址不同)

const users = [{name: "小明"}];
console.log(users.includes({name:  "小明"})); // false 

严格相等检查(===

[1, "2"].includes(1);    // true 
[1, "2"].includes("1");  // false(类型不同)

什么时候使用

场景推荐方法
检查值是否存在✅ includes
需要元素位置❌ 用 indexOf
处理含 NaN 的数组✅ includes
检查对象/数组等引用类型❌ 用 find/some

牢记

includes 查快递:有吗?(true/false) → 一目了然; NaN 也能验,起点自由选,引用类型靠边站。”

幂运算符

想象我们需要计算 3 的 4 次方(即 3×3×3×3

  • 传统写法:调用 Math.pow(3, 4)
  • ES7 新写法:直接写 3 ** 4
console.log(2  ** 3);    // 8(2的3次方)
console.log(10  ** 2);   // 100(10的平方)

特性详解

优先级高于乘除

先算幂运算,再算乘除加减

console.log(2  + 3 ** 2); // 11(先算3²=9,再算2+9)
console.log((2  + 3) ** 2); // 25(先算2+3=5,再算5²)

支持复合赋值 **=

简化重复计算

let num = 3;
num **= 2; // 等同于 num = num ** 2 
console.log(num);  // 9

处理特殊值

  • NaN 参与运算结果恒为 NaN
  • 任何数的 0 次方结果都是 1(含 0**0 → 1
  • 负数的小数次方返回 NaN(如 (-2)**0.5 虚数不支持)

牢记

** 是数学中的‘上标’搬到代码里——写 a ** b,就像写 aᵇ 一样自然!”