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

相关推荐
ZC跨境爬虫17 小时前
跟着 MDN 学 HTML day_9:(信件语义标记)
前端·css·笔记·ui·html
前端老石人17 小时前
HTML 字符引用完全指南
开发语言·前端·html
matlab_xiaowang17 小时前
Redux 入门:JavaScript 可预测状态管理库
开发语言·javascript·其他·ecmascript
幼儿园技术家17 小时前
前端如何设计权限系统(RBAC / ABAC)?
前端
前端摸鱼匠19 小时前
Vue 3 的v-bind合并行为:讲解v-bind与普通属性合并的规则
前端·javascript·vue.js·前端框架·ecmascript
REDcker19 小时前
浏览器端Web程序性能分析与优化实战 DevTools指标与工程清单
开发语言·前端·javascript·vue·ecmascript·php·js
donecoding21 小时前
一个 sudo 引发的血案:npm 全局包权限错乱彻底修复
前端·node.js·前端工程化
风骏时光牛马21 小时前
Raku正则匹配与数据批量处理实操案例
前端
nbwenren21 小时前
2026实测:Gemini 3 镜像站视觉能力实践——拍照原型图,一键生成 HTML+CSS 代码
前端·css·html
Lee川21 小时前
Prisma 实战指南:像搭积木一样设计古诗词数据库
前端·数据库·后端