极简三分钟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ᵇ 一样自然!"

相关推荐
Lhuu(重开版21 小时前
CSS:动效布局动画
前端·css
Q***K5521 小时前
前端构建工具
前端
laocooon52385788621 小时前
创建了一个带悬停效果的“我的个人主页“按钮
前端
2013编程爱好者1 天前
Vue工程结构分析
前端·javascript·vue.js·typescript·前端框架
小满zs1 天前
Next.js第十一章(渲染基础概念)
前端
不羁的fang少年1 天前
前端常见问题(vue,css,html,js等)
前端·javascript·css
change_fate1 天前
el-menu折叠后文字下移
前端·javascript·vue.js
yivifu1 天前
CSS Grid 布局详解(2025最新标准)
前端·css
o***Z4481 天前
前端性能优化案例
前端
张拭心1 天前
前端没有实际的必要了?结合今年工作内容,谈谈我的看法
前端·ai编程