news 2026/2/17 4:20:12

ES6新增了哪些新特性

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
ES6新增了哪些新特性

1.let/const 声明变量(彻底替代 var)

解决var变量提升、没有块级作用域、可重复声明三大问题,是 ES6 最基础也是最必须的特性。

  • let:声明可变的块级作用域变量,不可重复声明,无变量提升(暂时性死区);
  • const:声明不可变的块级作用域常量,必须初始化,不可重复声明,注意:引用类型(对象 / 数组)的内容可修改,只是指向的地址不可变
// var的问题 var a = 1; var a = 2; // 可重复声明,无报错 if (true) { var a = 3; } console.log(a); // 3,无块级作用域,全局覆盖 // let/const的正确用法 let b = 1; // let b = 2; // 报错:Identifier 'b' has already been declared if (true) { let b = 3; console.log(b); } // 3,块级作用域内有效 console.log(b); // 1,不受块内影响 const PI = 3.14; // PI = 3.1415; // 报错:Assignment to constant variable const obj = { name: 'ES6' }; obj.name = 'JavaScript'; // 正常,引用类型内容可修改

2.箭头函数(=>)(简化函数写法)

简化函数定义,同时解决this 指向混乱的问题(箭头函数没有自己的 this,其 this 继承自外层作用域的 this)。

  • 语法(参数) => { 函数体 },单参数可省略(),单行返回可省略{}return
  • 注意:不能作为构造函数(不能 new),没有 arguments 对象,不能用 yield(不能作生成器)。
// 普通函数 vs 箭头函数 const add = function(a, b) { return a + b; }; const add = (a, b) => a + b; // 简化:多参数+单行返回 const fn = a => a * 2; // 单参数省略() const say = () => { console.log('Hello ES6'); }; // 无参数需() // 解决this指向问题(经典场景:定时器/回调函数) const person = { name: 'Tom', sayHi: function() { // 普通函数:this指向调用者person setTimeout(() => { // 箭头函数:this继承自外层sayHi的this,即person console.log(`Hi, I'm ${this.name}`); // Hi, I'm Tom }, 1000); } }; person.sayHi();

使用场景:回调函数(定时器、数组方法、Promise)、简单函数,避免在对象方法、构造函数中使用

3.解构赋值(★★★★★,快速提取数据)

快速从数组 / 对象中提取值,赋值给变量,简化繁琐的取值代码,开发中高频用于接口数据解析、函数参数传值。

  • 数组解构:按顺序提取,支持默认值、剩余参数;
  • 对象解构:按属性名提取,支持重命名、默认值、剩余参数。
// 数组解构 const [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 1 2 3 const [x, , y] = [4, 5, 6]; // 跳过第二个元素 const [m, n = 10] = [7]; // 默认值:n=10 const [first, ...rest] = [1,2,3,4]; // 剩余参数:rest=[2,3,4] // 对象解构(开发高频) const user = { name: 'Alice', age: 20, gender: 'female' }; const { name, age } = user; // 按属性名提取 console.log(name, age); // Alice 20 const { name: uname, gender = 'male' } = user; // 重命名+默认值 const { ...info } = user; // 剩余参数:info={name,age,gender} // 实战场景:接口数据解析 const res = { code: 200, data: { list: [1,2,3], total: 3 }, msg: 'success' }; const { data: { list, total } } = res; // 嵌套解构 c
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/2/13 12:18:29

CoDeSys入门实战一起学习(二十):布尔、整型、实数、字符串、时间5大类标准数据类型详解(附实战案例)

写CoDeSys程序的第一步,必然是声明变量/常量,而所有声明都离不开数据类型。CoDeSys的标准数据类型完全遵循IEC61131-3标准,共分为布尔、整型、实数、字符串、时间5大类,是所有PLC程序的“基础积木”。很多新手容易踩坑&#xff1a…

作者头像 李华
网站建设 2026/1/31 7:45:53

KingbaseES数据库瓶颈排查实战指南:从实例到语句的全维度解析

在高并发、海量数据的业务场景下,数据库性能直接决定了应用系统的响应速度和稳定性,而瓶颈排查则是性能调优的核心前提——只有精准定位问题根源,才能避免盲目调参、优化无效的内耗。KingbaseES作为国产数据库中的优秀代表,在政务…

作者头像 李华
网站建设 2026/2/4 15:46:50

巡防勤务可视化管理

巡防勤务可视化管理 巡防勤务管理可视化系统,基于大数据平台的警务地理信息系统,可以实时查看警力在岗状态、警力分布、应急资源等。系统支持快速定位警员、车辆的位置,查看警力详细信息,调取监控视频画面,并进行单方…

作者头像 李华
网站建设 2026/2/15 13:54:13

想把网页保存成PDF文件,快速删掉侧边栏广告再打印

想要把网页保存成PDF文件的时候经常会有右侧左侧侧边栏挡住主要内容。怎么办呢? 打开 开发者模式 在 console 里粘贴以下,回车,就好了! // 隐藏所有可能包含侧边栏的常见元素 var style document.createElement(style); style.in…

作者头像 李华
网站建设 2026/2/15 0:46:03

深度学习之第八课迁移学习(残差网络ResNet)

目录 简介 一、迁移学习 1.什么是迁移学习 2. 迁移学习的步骤 二、残差网络ResNet 1.了解ResNet 2.ResNet网络—残差结构 三、代码分析 1. 导入必要的库 2. 模型准备(迁移学习) 3. 数据预处理 4. 自定义数据集类 5. 数据加载器 6. 设备配置 7. 训练函数 8. 测…

作者头像 李华
网站建设 2026/2/7 13:51:02

计算机视觉系列之opencv语法基础案例分析之银行卡号识别

简介 计算机视觉系列第一课opencv语法(一)保姆级教学 计算机视觉系列第一课opencv语法(二)保姆级教学 计算机视觉系列第一课opencv语法(三)保姆级教学 [计算机视觉第一课opencv(四)保姆级教学][opencv 3] 关于计算机视觉的基础内容我们之前已经说完了,今天我们就来用…

作者头像 李华