讲师中心 微信公众号
AI工具推荐 视频效率加速

es6比es5新增了什么

云婷酱_2626

云婷酱_2626

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

|

2793人浏览过

|

来源于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);

函数新增内容:

  • 箭头函数:没有this和arguments

  • 参数默认值

数组新增方法:

构造函数的方法:

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

    参数:

    javascript-pro
    javascript-pro

    专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家,适用于现代开发

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

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

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

    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工具

更多
UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

80

2026.10.22

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

40

2026.10.22

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

60

2026.10.22

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

20

2026.10.22

PHP时间戳漏洞修复教程
PHP时间戳漏洞修复教程

本专题汇总PHP常见时间戳漏洞,包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等,并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案,帮助开发者快速排查和加固时间相关代码。

40

2026.10.22

Golangci-lint配置文件与规则设置
Golangci-lint配置文件与规则设置

本专题聚焦Golangci-lint YAML配置文件,讲清运行参数、规则启停、目录排除、问题过滤及严重级别设置,便于团队统一检查标准。

20

2026.10.22

Golangci-lint安装与入门教程
Golangci-lint安装与入门教程

本专题讲解Golangci-lint的安装、初始化、基础命令和首次代码检查,覆盖本地环境、Docker及多平台用法,帮助Go开发者快速上手。

40

2026.10.22

PHP2Shell高危漏洞修复教程
PHP2Shell高危漏洞修复教程

PHP2Shell漏洞是什么,哪些PHP版本和运行环境会受到影响,服务器应该如何检测与修复?本专题提供版本自查脚本、Linux与Docker升级命令、PHP-FPM和Apache排查步骤,以及修复验证、临时缓解和应急响应方案。

260

2026.10.22

剧云人物设定与关系管理教程
剧云人物设定与关系管理教程

本专题介绍剧云人物设定与关系管理,讲解角色小传、性格职业、人物目标、背景资料和关系网络的创建及维护方法。

40

2026.10.22

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn