极简三分钟ES6 - ES7新增

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

Array.prototype.includes()

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

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

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

对比 indexOf 的三大优势

语义更直观

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

js 复制代码
// includes:关注存在性 
if (fruits.includes("🍎"))  { ... }

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

正确处理 NaN

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

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

避免"0"的误判

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

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

指定搜索起点

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

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

需要注意的点

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

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

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

严格相等检查(===

js 复制代码
[1, "2"].includes(1);    // true 
[1, "2"].includes("1");  // false(类型不同)

什么时候使用

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

牢记

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

幂运算符

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

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

特性详解

优先级高于乘除

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

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

支持复合赋值 **=

简化重复计算

js 复制代码
let num = 3;
num **= 2; // 等同于 num = num ** 2 
console.log(num);  // 9

处理特殊值

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

牢记

"** 是数学中的'上标'搬到代码里------写 a ** b,就像写 aᵇ 一样自然!"

相关推荐
昔人'2 小时前
纯`css`轻松防止滚动穿透
前端·css
TangAcrab2 小时前
记一次 electron 添加 检测 终端编码,解决终端打印中文乱码问题
前端·javascript·electron
Asort2 小时前
JavaScript入门:从零开始理解其在前端开发中的核心作用
前端·javascript
阿笑带你学前端2 小时前
Flutter应用架构设计:基于Riverpod的状态管理最佳实践
前端·flutter
江城开朗的豌豆2 小时前
前端数据流之争:React与Vue的"内心戏"大揭秘
前端·javascript·react.js
无奈何杨2 小时前
风控系统的事中与事后一致性与闭环
前端·后端
江城开朗的豌豆2 小时前
前端路由暗战:React与Vue的导航哲学对决
前端·javascript·react.js
鹏多多2 小时前
Vue移动端开发的适配方案与性能优化技巧
前端·javascript·vue.js
王琦03182 小时前
Python 0909
前端·javascript·python