0

0

es6比es5新增了什么

青灯夜游

青灯夜游

发布时间:2022-10-21 19:08:10

|

2693人浏览过

|

来源于php中文网

原创

新增内容:1、let、const关键字,用于声明变量,支持块级作用域,拥有暂时性死区;2、解构赋值,是针对数组或者对象进行模式匹配,然后对其中的变量进行赋值的意思;3、展开运算符,可用于将集合和数组中的元素扩展为单个单独的元素;4、Set对象,一种新的数据结构,类似于数组,但是成员的值都是唯一的,没有重复的值;5、构造函数的方法Array.from()、Array.of()。

es6比es5新增了什么

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

ES6比ES5新增的特性

let、const:

let和const支持块级作用域,拥有暂时性死区(必须先声明,再使用,不支持变量提升);

const是常量,声明时必须赋值,当赋值为基本类型时,不能改变它的值;当赋值为引用类型时,不能改变它的引用,但是可以对引用类型进行操作,如数组的push、对象的属性增删改

解构赋值:

es6允许按照一定的模式,从数组或对象中提取值,给变量进行赋值,称为解构赋值。

解构赋值在代码书写上简单易懂,语义清晰明了,方便对复杂对象中数据字段的获取。

对象的解构赋值:

let obj = {
  a: 1,
  b: 2
};
let {a, b, c} = obj; // 大括号中的变量名必须和obj的属性名一致
console.log(a, b, c);

// 输出:
// a: 1
// b: 2
// c: undefined

数组的解构赋值:(字符串一样)

let arr = ['a', 'b', 'c'];
let [e, f] = arr;	// 中括号中的变量按数组中元素的顺序被赋值
console.log(e, f);

// 输出:
// e: 'a'
// f: 'b'

// 快速交换两个变量值
let a = 1, b = 2;
[a, b] = [b, a];

展开运算符:

由三个点 ( ...) 表示,JavaScript 扩展运算符是在 ES6 中引入的。它可用于将集合和数组中的元素扩展为单个单独的元素。

扩展运算符可用于创建和克隆数组和对象、将数组作为函数参数传递、从数组中删除重复项等等。

扩展运算符只能用于可迭代对象。它必须在可迭代对象之前使用,没有任何分隔。例如:

console.log(...arr);

数组:

let arr1 = [1, 2, 3, 4];
let arr2 = ['a', 'b', ...arr1, 'c'];
console.log(arr2);

// 输出:
// ['a', 'b', 1, 2, 3, 4, 'c']

对象:

let obj1 = {
  a: 1,
  b: 2
};
let obj2 = {
  ...obj1,
  c: 3,
  d: 4
};
console.log(obj2);

// 输出:
// {a: 1, b: 2, c: 3, d: 4}

剩余参数处理:

数组:

let arr = [1, 2, 3, 4, 5];
let [a, b, ...c] = arr;	// 将arr后面所有的剩余参数放入c中
console.log(a, b, c);

// 输出:
// a: 1
// b: 2
// c: [3, 4, 5]

对象:

let obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};
let {a, b, ...c} = obj;
console.log(a, b, c);

// 输出:
// a: 1
// b: 2
// c: {c: 3, d: 4}

// 对象的复制(不是传地址)
let obj2 = {...obj};

Set对象:

Set是ES6提供的一种新的数据结构,类似于数组,但是成员的值都是唯一的,没有重复的值。

  • Set 本身是一个构造函数,用来生成 Set 数据结构。

  • Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。

  • Set 中的元素只会出现一次,即 Set 中的元素是唯一的。

  • 另外,NaN 和 undefined 都可以被存储在 Set 中,NaN 之间被视为相同的值(尽管 NaN !== NaN)。

  • Set 函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。

数组去重:

let arr = [2, 1, 2, 1, 3, 4, 4, 5];
let s = new Set(arr);
arr = [...s];
// arr: [2, 1, 3, 4, 5]

Set方法:

let s = new Set([1, 1, 2, 3, 'a']);
// 得到Set元素个数:
s.size;
// 清空集合
s.clear();
// 删除集合中的某个值,返回操作是否成功
s.delete('a');
// 查看集合是否包含某个值
s.has('a');
// 添加一项,返回集合本身的引用
s.add('b');

Map对象:

ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。

Map 特征:

  • Map 对象保存键值对,并且能够记住键的原始插入顺序。

  • 任何值(对象或者原始值) 都可以作为一个键或一个值。

let arr = [
  ['a', 1],
  ['b', 2],
  ['c', 3]
];
let m = new Map(arr);
// m: {'a' => 1, 'b' => 2, 'c' => 3}

Map方法:

// 清空Map
m.clear();
// 删除某一项,返回操作是否成功
m.delete(key);
// 获取某一项的值,返回对应的val
m.get(key);
// 是否包含某一项
m.has(key);
// 添加一项,返回Map本身的引用
m.set(key, val);

函数新增内容:

  • 箭头函数:没有thisarguments

  • 参数默认值

数组新增方法:

构造函数的方法:

  • 把一个类数组转换成真正的数组:Array.from(arrLike [, mapFunc, mapThis]);

    参数:

    • arrLike:类数组
    • mapFunc:对类数组每一项的操作函数
    • mapThis:替换mapFuncthis指向

    另一种方法:let arr = [...arrLike];

    Cursor
    Cursor

    一个新的IDE,使用AI来帮助您重构、理解、调试和编写代码。

    下载
  • 将参数列表转换为数组:

    Array.of(...items);

  • 检测一个对象是否是一个数组:

    Array.isArray(obj);

对象的方法:

  • arr.find(callback [, thisArg]):查找数组中满足条件的第一个元素的值

    let arr = [1, 2, 3, 4];
    let val = arr.find((item, index) => item >= 3);
    // val: 3
    let val = arr.find((item, index) => item >= 5);
    // val: undefined
  • arr.findIndex(callback [, thisArg]):查找数组中满足条件的第一个元素的索引

  • 数组扁平化:

    • arr.flat([depth])

      参数:depth:指定要提取嵌套数组的结构深度,默认为1,当depth = infinity时,无论数组多少层,都提取为一维数组。

    • arr.flatMap(callback[, thisArg])

      参数:callback:对原数组的每个元素进行操作,返回新数组的元素;

      该函数值支持深度为1的扁平化

  • 数组元素填充:arr.fill(value[, start[, end]]);

    用一个固定的值填充一个数组中从起始索引到终止索引内到全部元素。不包括终止索引;不会改变数组长度

    参数:

    • value:用来填充数组元素的值;
    • start:起始索引,默认值为0;
    • end:终止索引,默认值为 arr.length ;
  • arr.includes(valueToFind[, fromIndex]):判断数组中是否包含一个指定的值

    参数:

    • valueToFind:需要查找的值
    • fromIndex:从 fromIndex 处开始向后查找

字符串新增方法:

  • str.startsWith(searchString[, position]):判断当前字符串是否以另一个给定的子字符串开头

    参数:

    • searchString:要搜索的字符串
    • position:在 str 中搜索 searchString 的开始位置,默认为0,也就是真正的字符串开头处
  • str.endsWith(searchString[, position]):判断当前字符串是否以另一个给定的子字符串结束

    参数:

    • searchString:要搜索的字符串
    • position:在str中反向搜索的开始位置,默认为 str.length
  • str.repeat(times):返回重复str字符串times次的字符串

模版字符串:

反引号:``,可以换行

插值表达式:${}

对象新增方法:

  • 简洁表示法:

    let a = 1, b = 2;
    // 原来的表示方法:
    let obj = {
      a: a,
      b: b,
      c: function() {}
    };
    // 简洁表示法:
    let obj = {
      a,
      b,
      c() {}
    };
  • 属性名表达式:

    let name = "小明";
    let obj = {
      [name]: 111
    };
    console.log(obj);
    // 输出:
    // obj: {'小明': 111}
    
    // 等价于:
    let obj = {};
    obj[name] = 111;
  • Object.assign(obj1, obj2, ...):将第二个参数即之后的参数对象合并到第一个参数对象中

    let obj1 = {a: 1, b: 2};
    let obj2 = {c: 3, d: 4};
    Object.assign(obj2, obj1);
    // 等价于
    obj2 = {
      ...obj1,
      ...obj2
    }
    // 等价于
    obj2 = Object.assign({}, obj1, obj2);
  • Object.is(value1, value2):判断两个值是否相等(强类型)

    ===的区别:

    +0 === -0;	// true
    Object.is(+0, -0);	// false
    
    NaN === NaN; // false
    Object.is(NaN, NaN); // true

babel编译器:

将es6语法编译为es5语法

【相关推荐:javascript视频教程编程视频

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

26

2026.03.13

Python异步编程与Asyncio高并发应用实践
Python异步编程与Asyncio高并发应用实践

本专题围绕 Python 异步编程模型展开,深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例,帮助开发者掌握 Python 在高并发场景中的高效开发方法,并提升系统资源利用率与整体运行性能。

46

2026.03.12

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

178

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

51

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

92

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

102

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

227

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

532

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

171

2026.03.04

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号