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

相关推荐
invicinble6 小时前
【无标题】
前端
EasyGBS6 小时前
从接入到稳定播放:无插件直播H5视频流媒体播放器EasyPlayer.js如何撑起Web端流媒体
开发语言·前端·javascript
不可能片场6 小时前
nohup 之后进程还是死了:GUI 子进程的存活陷阱
前端·electron
Carl_奕然6 小时前
【智能体】Agent的四种设计模式之:React(2026最新版)
javascript·人工智能·python·react.js·设计模式·语言模型
名为沙丁鱼的猫7296 小时前
React/JSX 编码规范
前端·javascript·react.js
是吕先森7 小时前
【python】selenium实现web自动化测试
前端·python·selenium
Highcharts.js7 小时前
甘特图纵向任务、横向时间显示图表可视化开发|Highcharts甘特图示例
开发语言·前端·javascript·可视化·甘特图·数据可视化·highcharts
yume_sibai7 小时前
Element Plus 导航与反馈组件完全指南(15个核心组件)
前端·elementui·交互
烬羽7 小时前
给 Agent 一个检索式记忆:把对话历史存进 Milvus,该记的都记得
javascript·数据库·agent
磐链科技7 小时前
区块链开发入门实战:用 Hardhat 与 Ethers.js 搭建你的第一个 DApp
开发语言·javascript·区块链