ES6新增的语法

sun_qqq

已于 2023-12-01 15:51:29 修改

阅读量686

点赞数

CC 4.0 BY-SA版权

文章标签： es6 javascript 前端

于 2023-03-14 11:40:17 首次发布

本文链接：https://blog.csdn.net/sun_qqq/article/details/129521596

文章介绍了ES6中新增的数据类型如BigInt和Symbol，以及数据结构Set和Map。还讨论了Array的新方法如Array.from和Array.of，模块化的默认/命名导出与引入机制，结构赋值的使用，Let和Const的作用域特点，模板字符串的便利性，Object.keys的功能，以及rest参数与arguments的区别和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：新增数据类型

ES5数据类型：number、string、boolean、null、undefined、object
ES6数据类型：bigInt、symbol

二：新增的数据结构

ES5具有的数据结构：Array、Object

ES6新增的数据结构：Set、Map

Set、Map分别是对Array、Object的完善，

set：数组的拓展，set相当于没有重复项的数组。Set的构造函数可接收数组。
Map：传统Object的键只能是字符串，Map可以理解成键可以是变量的对象。

三：Array

1、Array.from: 将类数组转为数据，比如set、map、argument、dom对象

Array新增的from方法，与es5新增的Set数据类型，可以配合使用，达到过滤数组的功能如下

Array.from(new Set([1,2,1,2])); // 返回[1,2]

2、Array.of：将一组数组转为数组

3、array.map: map()方法用于对数组中的每个元素调用指定的回调函数进行处理，并返回包含结果的数组；语法“array.map(function callbackfn (value, index, array), thisArg);”

四：模块化

1、导出：默认/命名导出

一个模块中只能有一个默认导出export default ，但是却可以有任意命名导出（0个，1个，多个）。如A.js可以如下两种方式导出

export default 42
export const A=42

2、引入

如果模块是默认导出，则引入时不使用花括号；如果为命名导出，引入时需要加上花括号。

import someting from "./A" // 引用默认导出的模块，import 模块时的命名是随意的
import {A} from "./A" // 引入命名导出的模块，需要加{}，引入与导出只名称需一致

五：结构赋值

1、如何将一个字符串，处理成两个变量

let inputArray = ["3 1"];

let [m,n] = inputArray[0].split(" ").map(Number);

console.log(m); // 3

console.log(n);  // 1

六：Let/Const

JavaScript 声明的变量会提升，但初始化的值不会提升。即

console.log(x); // 输出：undefined，而不会输出初始化值5
var x = 5;

七：字符串

1、模板字符串

1、1 用法

传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

1、2 模板字符串的toString

模板字符串默认会调用该变量的toString()，即获取的变量都是字符串类型的

let a = 5;
`${a}`   // '5'

实例

typeof `${{Object}}`.prototype

如上语句的解析过程

typeof `${{Object:Object}}`.prototype

typeof Object.toString().prototype // undefined

八：静态方法

1、Object.keys()

获取对象的键值，得到存有key的数组

Object.keys({a:1,b:2}) // ['a','b']

九：rest

rest 参数是一个真正的数组，也就是说能够在它上面直接使用所有的数组方法，比如 sort，map，forEach或pop，而 arguments 是一个类数组。因此，应选择使用rest语法替代arguments。