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

相关推荐
光影少年6 分钟前
前端 AIGC
前端·aigc
启山智软16 分钟前
供应链商城核心功能模块清单
java·前端·开源
徐同保20 分钟前
Claude Code提示词案例(开发复杂动态路由详情页面)
前端
Σdoughty24 分钟前
python第三次作业
开发语言·前端·python
是萧萧吖24 分钟前
每日一练——有效的括号
java·开发语言·javascript
gpldock22229 分钟前
Flutter App Templates Deconstructed: A 2025 Architectural Review
开发语言·javascript·flutter·wordpress
白中白1213840 分钟前
Vue系列-2
前端·javascript·vue.js
jin4213521 小时前
React Native鸿蒙跨平台完成闪屏页作为移动应用的入口级页面,实现的二手置换应用闪屏页SecondhandSplash
javascript·react native·react.js·ecmascript·harmonyos
CHU7290351 小时前
一番赏盲盒小程序前端功能:层级乐趣与便捷服务的双向赋能
前端·小程序
共享家95271 小时前
基于 Coze 工作流搭建历史主题图片生成器
前端·人工智能·js