ES6新增功能


它是什么:
是JS的下一个版本标准。
它的作用:
主要解决ES5的功能不足,如类的概念。
适应更复杂的应用,实现代码库之间的共享,不断迭代维护新版本。
标准提供了许多新的语法和编程特性以提高开发效率和体验。

let 命令

let 是在自身所在的代码块内有效。
因此 for 循环计数器就很适合用 let 声明。
用法:

{
  let a = 0;
  a		//0
}
a		//报错
它不存在变量提升,先使用后声明会报错。
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错
let bar = 2;

暂时性死区,只要块级作用域内存在let命令,它所声明的变量就绑定这个区域,不再受外部的影响。

var tmp = 123;
if (true) {
  tmp = 'abc'; // 报错
  let tmp;
}

const 命令

const 是声明一个只读变量,声明后不允许改变。
并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。
一旦声明必须初始化,否则会报错。
用法:

const PI = 3.1415;
PI 		// 3.1415
PI = 3;	//报错

特点:
const声明的变量不得改变值。
一旦声明变量,就必须立即初始化,不能留到以后赋值,只声明不赋值会报错。

const foo;
// SyntaxError: Missing initializer in const declaration

与 let 一样不允许在相同作用域内,重复声明同一个变量。

var message = "Hello!";
let age = 25;
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;

暂时性死区,ES6有明确规定,代码块内如果存在 let 或者 const,代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内,在声明变量之前使用它会报错。

if (true) {
  console.log(MAX); //报错
  const MAX = 5;
}

Set

Set 对象可以存储任何类型的数据。
值是唯一的,没有重复的值。
特殊值:

  1. +0 与 -0 恒等,不重复。
  2. undefined 与 undefined 恒等,不重复。
  3. NaN 与 NaN 不恒等,但在 Set 中只能存一个,不重复。
    应用:
    数组去重
    使用 Set 值是唯一的特点可以对数组进行去重。
var arr=[...new Set([1, 5, 4, 4, 7, 6, 6])];
document.write(a)	//[1, 5, 4, 7, 6]

并集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var arr = new Set([...a, ...b]);	//{1, 2, 3, 4}

交集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var arr = new Set([...a].filter(x => b.has(x)));	//{2, 3}

差集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var arr = new Set([...a].filter(x => !b.has(x)));	//{1}

Map

Map和对象差不多,是键值对的集合,各种类型的值(包括对象)都可以当作键。
Map与object区别:

  1. 一个 Object 的键只能是字符串或者 Symbols,但一个 Map 的键可以是任意值。
  2. Map 中的键值是有序的(FIFO 原则),而添加到对象中的键则不是。
  3. Map 的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算。
  4. Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
    用法:

在这里插入图片描述
以上创建map实例时,将name与title指定为键。
Size获取键值对数量,has(‘name’)判断是否有name的键,get(‘name’)获取name的值。
在这里插入图片描述上述例子中map构造函数接受数组作为参数来使用,不仅仅是数组,只要是双元素的数组数据结构都可以当作map构造函数的参数。
在这里插入图片描述在这里插入图片描述
对同一个键多次赋值,后面的值会将前面的值覆盖掉。
读取未知的键,则返回undefined未定义。

Map 与 Array的转换

var kvArray = [["key1", "value1"], ["key2", "value2"]]; 
// Map 构造函数可以将一个二维键值对数组转换成一个 Map 对象 
var myMap = new Map(kvArray); 
// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组 
var outArray = Array.from(myMap);
Map 的克隆
var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]); 
var myMap2 = new Map(myMap1); 
console.log(original === clone); 
// 打印 false。 Map 对象构造函数生成实例,迭代出新的对象。
Map 的合并
var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]); 
var second = new Map([[1, 'uno'], [2, 'dos']]); 
// 合并两个 Map 对象时,如果有重复的键值,则后面的会覆盖前面的,对应值即 uno,dos, three。
var merged = new Map([...first, ...second]);

Proxy

Proxy是对目标对象的读取、调用等操作进行拦截,再进行处理。但是它不能直接操作对象,需要代理对象。
用法:

var proxy = new Proxy(target, handler);

new Proxy()生成一个proxy对象,target参数是要拦截的目标对象,handler参数是对象,用来设置拦截行为。
在这里插入图片描述若handler没有设置拦截,就会直接指向原对象。
结合get和set方法就可以防止内部属性被外部读写。

Get方法

用于拦截属性的读取操作,接受三个参数,分别为目标对象、属性名、proxy本身(可选)。
例子:
在这里插入图片描述
Set方法
用于拦截属性的赋值操作,接受四个参数,分别是目标对象、属性名、属性值、proxy本身(可选)。
例子:
在这里插入图片描述
apply方法
用于拦截函数的调用、call和apply操作。接受三个参数,分别是目标对象、目标对象的上下文对象(this)、目标对象的参数数组。
例子:
在这里插入图片描述

Reflect

Reflect对象对某些方法的返回结果进行了修改,使其更合理。
使用函数的方式实现object的命令式操作。
静态方法:

Reflect.get(target, name, receiver)

例子:
在这里插入图片描述

Promise对象

它可以获取异步操作的信息然后进行处理,就是提供统一的接口,各种异步操作都可以用同样的方法进行处理,使控制异步操作更容易。
一旦创建完成,无法中途取消,当处于进行中状态时,无法得知它是刚刚开始还是即将完成。
Promise对象代表一个异步操作,有三种状态pending(进行中)、fulfilled(已成功)和rejected(已失败)。一旦状态改变就不会再变,这种就称它为已定性。
例子:
在这里插入图片描述

Iterator

它是一种接口,是遍历器。
任何数据的结构只要使用iterator接口,就可以完成遍历操作。
作用:

  1. 为各种数据结构提供一个统一的、简便的访问接口。
  2. 使数据结构的数据能按照某种次序排列。
  3. 为for…of循环的遍历命令提供自动遍历条件。
    过程:
    创建一个指针对象,就是一个指向变量的变量。遍历器对象本质就是一个指针对象。
    第一次调用指针指向数据结构的第一个成员,第二次指向第二个,不断的调用一直到数据结构的最后一个。
    for…of循环
    Iterator 接口的目的就是给数据结构提供一个for…of循环的访问机制。
    当使用for…of循环遍历数据结构时,会自动去寻找Iterator接口。
    也就是只要部署了Iterator 接口,那这种数据结构就是可遍历的。

async函数

async函数是generator函数的语法糖。
语法糖是种语法,对语言的功能无影响,但是更方便使用。增加程序可读性,减少代码出错率。
async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await

Class

引入class(类),作为对象的模板,也可以看作一个语法糖。让对象原型的写法更加清晰。

Symbol

概述:
Symbol 是ES6新引入的原始数据类型。
它表示独一无二的值,因此一般用来定义唯一的属性名,防止属性名冲突。
基本用法:

let sy = Symbol("KK");
console.log(sy);   // Symbol(KK)
typeof(sy);        // "symbol"
// 相同参数 Symbol() 返回的值不相等
let sy1 = Symbol("kk"); 
sy === sy1;       // false

sy 和 sy1 的返回值参数相同,但它们是不相等的。
Symbol 的值不能与其他类型的值进行运算,会报错。
属性名用法:

let sy = Symbol("key1");
// 写法1
let syObject = {};
syObject[sy] = "kk";
console.log(syObject);    // {Symbol(key1): "kk"}
// 写法2
let syObject = {
  [sy]: "kk"
};
console.log(syObject);    // {Symbol(key1): "kk"}
// 写法3
let syObject = {};
Object.defineProperty(syObject, sy, {value: "kk"});
console.log(syObject);    // {Symbol(key1): "kk"}

由于它的值不相等,当作为对象的属性名时,可以保证属性不重名,防止改写或覆盖。
作为对象属性名时不能用 . 运算符,要用方括号 [ ]。

syObject[sy];  // "kk"
syObject.sy;   // undefined

定义常量:

const COLOR_RED = Symbol("red");
const COLOR_YELLOW = Symbol("yellow");
const COLOR_BLUE = Symbol("blue");

使用 Symbol 定义常量,可以保证一组内常量的值都不相等。

属性名遍历:

const obj = {};
let a = Symbol('a');
let b = Symbol('b');
obj[a] = 'Hello';
obj[b] = 'World';
const objectSymbols = Object.getOwnPropertySymbols(obj);
objectSymbols
// [Symbol(a), Symbol(b)]

Symbol 值作为属性名时,该属性是公有属性不是私有属性,可以在类的外部访问。
不会出现在 for…in 、 for…of 的循环中,也不会被 Object.keys() 、 Object.getOwnPropertyNames() 返回。
如果要读取到一个对象的 Symbol 属性,可以通过Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。
解构赋值
使用模式匹配的写法,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
数组解构按次序排列,变量取值由他的位置决定。
对象解构变量需与属性同名,进行取值。
交换变量的值
从函数返回多个值
函数参数的定义
提取JSON数据
函数参数默认值
遍历map结构
输入模块的指定方式
箭头函数
定义函数比原先写法要更简洁清晰,可在函数内部绑定this。
模板字符串。用反引号标识起始,用$()引用变量插入内容到文档中。
解构。从数组和对象中提取值,对变量进行赋值。
ES6中的类是一种语法糖,用于定义原型。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值