ES6-ES11（ECMAScript2015-ECMAScript2010）

最新推荐文章于 2024-06-24 14:37:02 发布
置顶 最新推荐文章于 2024-06-24 14:37:02 发布
阅读量888 收藏 2
点赞数
分类专栏： JS 文章标签： es6/es7 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i15730384741/article/details/107513323
版权

ES6-ES11新特性

ECMASript 6 新特性

let 关键字

let 关键字用来声明变量,使用 let 声明的变量有几个特点:

  1. 不允许重复声明
  2. 块儿级作用域
  3. 不存在变量提升
  4. 不影响作用域链
    应用场景:以后声明变量使用 let 就对了

const 关键字

const 关键字用来声明常量,const 声明有以下特点

  1. 声明必须赋初始值
  2. 标识符一般为大写
  3. 不允许重复声明
  4. 值不允许修改
  5. 块儿级作用域
    注意: 对象属性修改和数组元素变化不会出发 const 错误
    应用场景:声明对象类型使用 const,非对象类型声明选择 let

变量的解构赋值

const arr = ['张学友', '刘德华', '黎明', '郭富城'];
let [zhang, liu, li, guo] = arr;
// 对象的解构赋值
const lin = {
name: '林志颖',
tags: ['车手', '歌手', '小旋风', '演员']
};
let {name, tags} = lin;
// 复杂解构
let wangfei = {
name: '王菲',
age: 18,
songs: ['红豆', '流年', '暧昧', '传奇'],
history: [
{name: '窦唯'},
{name: '李亚鹏'},
{name: '谢霆锋'}
]
};
let {songs: [one, two, three], history: [first, second, third]} =
wangfei;

模板字符串

// 变量拼接
let star = '王宁';
let result = `${star}在前几年离开了开心麻花`;

简化对象写法

let name = 'jason';
let slogon = '永远追求行业更高标准';
let improve = function () {
console.log('可以提高你的技能');
}
// 属性和方法简写
let school = {
name,
slogon,
improve,
change() {
console.log('可以改变你')
}
};

箭头函数

/**
* 1. 通用写法
*/
let fn = (arg1, arg2, arg3) => {
return arg1 + arg2 + arg3;
}
/**
* 2. 省略小括号的情况
*/
let fn2 = num => {
return num * 10;
};
/**
* 3. 省略花括号的情况
*/
let fn3 = score => score * 20;
/**
* 4. this 指向声明时所在作用域中 this 的值
*/
let fn4 = () => {
	console.log(this);
}
let school = {
	name: 'jason',
    getName(){
        let that = this;
        let fn5 = () => {
            console.log(this);
        }
        function fn6() {
            console.log(that)
        }
        fn5();
        fn6();
    }
};

箭头函数的注意点:

  1. 如果形参只有一个,则小括号可以省略
  2. 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的执行结果
  3. 箭头函数 this 指向声明时所在作用域下 this 的值
  4. 箭头函数不能作为构造函数实例化
  5. 不能使用 arguments

函数默认值

ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments

rest 参数

/**
* 作用与 arguments 类似
*/
function add(...args){
console.log(args);
}
add(1,2,3,4,5);
/**
* rest 参数必须是最后一个形参
*/
function minus(a,b,...args){
console.log(a,b,args);
}
minus(100,1,2,3,4,5,19);

spread (…)扩展运算符

/**
* 展开数组
*/
let tfboys = ['德玛西亚之力','德玛西亚之翼','德玛西亚皇子'];
function fn(){
console.log(arguments);
}
fn(...tfboys)
/**
* 展开对象
*/
let skillOne = {
q: '致命打击',
};
let skillTwo = {
w: '勇气'
};
let skillThree = {
e: '审判'
};
let skillFour = {
r: '德玛西亚正义'
};
let gailun = {...skillOne, ...skillTwo,...skillThree,...skillFour};

Symbol

迭代器

遍历器(Iterator)就是一种机制。它是一种接口,为各种不同的数据结构提
供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作。

  1. ES6 创造了一种新的遍历命令 for…of 循环,Iterator 接口主要供 for…of 消费
  2. 原生具备 iterator 接口的数据(可用 for of 遍历)
    a) Array
    b) Arguments
    c) Set
    d) Map
    e) String
    f) TypedArray
    g) NodeList
  3. 工作原理
    a) 创建一个指针对象,指向当前数据结构的起始位置
    b) 第一次调用对象的 next 方法,指针自动指向数据结构的第一个成员
    c)接下来不断调用 next 方法,指针一直往后移动,直到指向最后一个成员
    d) 每调用 next 方法返回一个包含 value 和 done 属性的对象
    注: 需要自定义遍历数据的时候,要想到迭代器。

生成器

function * gen(){
yield '一只没有耳朵';
yield '一只没有尾巴';
return '真奇怪';
}
let iterator = gen();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

代码说明:

  1. * 的位置没有限制
  2. 生成器函数返回的结果是迭代器对象,调用迭代器对象的 next 方法可以得到
    yield 语句后的值
  3. yield 相当于函数的暂停标记,也可以认为是函数的分隔符,每调用一次 next
    方法,执行一段代码
  4. next 方法可以传递实参,作为 yield 语句的返回值

Promise

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果。避免了回调地狱问题。

Set

ES6 提供了新的数据结构 Set(集合)。它类似于数组,但成员的值都是唯
一的,集合实现了 iterator 接口,所以可以使用『扩展运算符』和『for…of…』进
行遍历,集合的属性和方法:

  1. size 返回集合的元素个数
  2. add 增加一个新元素,返回当前集合
  3. delete 删除元素,返回 boolean 值
  4. has 检测集合中是否包含某个元素,返回 boolean 值
  5. clear 清空集合,返回 undefined
// 创建一个空集合
let s = new Set();
// 创建一个非空集合
let s1 = new Set([1,2,3,1,2,3]);
// 集合属性与方法
// 返回集合的元素个数
console.log(s1.size);
// 添加新元素
console.log(s1.add(4));
// 删除元素
console.log(s1.delete(1));
// 检测是否存在某个值
console.log(s1.has(2));
// 清空集合
console.log(s1.clear());

Map

ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是“键”
的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map 也实现了
iterator 接口,所以可以使用『扩展运算符』和『for…of…』进行遍历。Map 的属
性和方法:

  1. size 返回 Map 的元素个数
  2. set 增加一个新元素,返回当前 Map
  3. get 返回键名对象的键值
  4. has 检测 Map 中是否包含某个元素,返回 boolean 值
  5. clear 清空集合,返回 undefined
// 创建一个空 map
let m = new Map();
// 创建一个非空 map
let m2 = new Map([
	['name','尚硅谷'],
	['slogon','不断提高行业标准']
]);
// 属性和方法
// 获取映射元素的个数
console.log(m2.size);
// 添加映射值
console.log(m2.set('age', 6));
// 获取映射值
console.log(m2.get('age'));
// 检测是否有该映射
console.log(m2.has('age'));
// 清除
console.log(m2.clear());

class 类

ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对
象的模板。通过 class 关键字,可以定义类。基本上,ES6 的 class 可以看作只是
一个语法糖,它的绝大部分功能,ES5 都可以做到,新的 class 写法只是让对象
原型的写法更加清晰、更像面向对象编程的语法而已。
知识点:

  1. class 声明类
  2. constructor 定义构造函数初始化
  3. extends 继承父类
  4. super 调用父级构造方法
  5. static 定义静态方法和属性
  6. 父类方法可以重写

数值扩展

二进制和八进制

ES6 提供了二进制和八进制数值的新的写法,分别用前缀 0b 和 0o 表示。

Number.isFinite() 与 Number.isNaN()

Number.isFinite() 用来检查一个数值是否为有限的
Number.isNaN() 用来检查一个值是否为 NaN

Number.parseInt() 与 Number.parseFloat()

ES6 将全局方法 parseInt 和 parseFloat,移植到 Number 对象上面,使用不变。

Math.trunc

用于去除一个数的小数部分,返回整数部分。

Number.isInteger

Number.isInteger() 用来判断一个数值是否为整数

对象扩展

ES6 新增了一些 Object 对象的方法

  1. Object.is 比较两个值是否严格相等,与『===』行为基本一致(+0 与 NaN)
  2. Object.assign 对象的合并,将源对象的所有可枚举属性,复制到目标对象
  3. proto、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型

模块化

模块化的好处

模块化的优势有以下几点:

  1. 防止命名冲突
  2. 代码复用
  3. 高维护性

模块化规范产品

ES6 之前的模块化规范有:

  1. CommonJS => NodeJS、Browserify
  2. AMD =>
    requireJS
  3. CMD =>
    seaJS

ES6 模块化语法

模块功能主要由两个命令构成:export 和 import。
⚫ export 命令用于规定模块的对外接口
⚫ import 命令用于输入其他模块提供的功能
⚫ export default 命令用于默认规定模块的对外接口

ECMASript 7 新特性

Array.prototype.includes

Includes 方法用来检测数组中是否包含某个元素,返回布尔类型值

指数操作符

在 ES7 中引入指数运算符「**」,用来实现幂运算,功能与 Math.pow 结果相同

ECMASript 8 新特性

async 和 await

async 和 await 两种语法结合可以让异步代码像同步代码一样

async 函数

  1. async 函数的返回值为 promise 对象,
  2. promise 对象的结果由 async 函数执行的返回值决定

await 表达式

  1. await 必须写在 async 函数中
  2. await 右侧的表达式一般为 promise 对象
  3. await 返回的是 promise 成功的值
  4. await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理

Object.values 和 Object.entries

  1. Object.values()方法返回一个给定对象的所有可枚举属性值的数组
  2. Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组

Object.getOwnPropertyDescriptors

该方法返回指定对象所有自身属性的描述对象

ECMASript 9 新特性

Rest/Spread 属性

Rest 参数与 spread 扩展运算符在 ES6 中已经引入,不过 ES6 中只针对于数组,
在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符

function connect({host, port, ...user}) {
console.log(host);
console.log(port);
console.log(user);
}
connect({
host: '127.0.0.1',
port: 3306,
username: 'root',
password: 'root',
type: 'master'
});

正则表达式命名捕获组

ES9 允许命名捕获组使用符号『?』,这样获取捕获结果可读性更强

let str = '<a href="http://www.jason.com">JasonLi</a>';
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
const result = reg.exec(str);
console.log(result.groups.url);
console.log(result.groups.text);

正则表达式反向断言

ES9 支持反向断言,通过对匹配结果前面的内容进行判断,对匹配进行筛选。

// 声明字符串
let str = 'JS5211314 你知道么 555 啦啦啦';
// 正向断言
const reg = /\d+(?=啦)/;
const result = reg.exec(str);
// 反向断言
const reg = /(?<=么)\d+/;
const result = reg.exec(str);
console.log(result);

正则表达式 dotAll 模式

正则表达式中点.匹配除回车外的任何单字符,标记『s』改变这种行为,允许行
终止符出现

let str = `
<ul>
<li>
<a>肖生克的救赎</a>
<p>上映日期: 1994-09-10</p>
</li>
<li>
<a>阿甘正传</a>
<p>上映日期: 1994-07-06</p>
</li>
</ul>`;
// 声明正则
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
// 执行匹配
const result = reg.exec(str);
let result;
let data = [];
while(result = reg.exec(str)){
data.push({title: result[1], time: result[2]});
}
// 输出结果
console.log(data);

ECMASript 10 新特性

Object.fromEntries

trimStart 和 trimEnd

Array.prototype.flat 与 flatMap

Symbol.prototype.description

ECMASript 11 新特性

String.prototype.matchAll

类的私有属性#

Promise.allSettled

总是返回成功，Ｐromise.all必须都成功

可选链操作符

动态 import 导入

globalThis 对象

代码小李
关注
专栏目录
ES6 ~ ES11整理
gxll499294075的博客
02-28 873
持续学习中。。。。。 ES 全称 EcmaScript，是脚本语言的规范，而平时经常编写的 JavaScript，是EcmaScript的一种实现，所以 ES 新特性其实指的就是 JavaScript 的新特性。 一、ESMAScript相关介绍 1.1 什么是ECMA ECMA（European Computer Manufacture Associate）中文名称为欧洲计算机制造协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994年后该组织改名为 Ec...
ES6-ES11
illion booked
01-06 226
第一章 ECMA6新特性 1.1 let关键字 let关键字用来声明变量，使用let声明的变量有几个特点： 不允许重复声明 块儿级作用域 不存在变量提升 不影响作用域 应用场景：以后声明变量使用let就对了 2.2 const关键字 const关键字用来声明产量，const声明有以下特点 声明必须赋初始值 标识符一般为大写 不允许重复声明 值不允许修改 块儿级作用域 注意：对象属性修改和数组元素变化不会出发const错误 应用场景：声明对象类型使用const，非对象类型声明选择let 1.3 变量的
ES6~ES13-ES7~ES12必学知识点~
最新发布
2401_83384536的博客
06-24 718
在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过indexOf获取结果，并且判断是否为-1。 在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false。
ES6---ES11
一个有深度的博客
11-01 1329
ES6---ES11新特性
ES6~11
m0_74206393的博客
02-15 220
目录一，ES6新特性1，let变量声明和声明特性2，const声明变量和特点3，变量的解构赋值3.1.数组的解构3.2.对象的解构4,模板字符串5,对象的简化写法6,箭头函数以及声明特点6.1特点：6.2箭头函数的适用场景7函数参数的扩展7.1默认参数7.2 不定参数8,rest参数rest参数必须要放到最后9,扩展运算符9.1扩展运算符的运用10,Symbolsymbol基本使用（身份证）symbol作用：给对象添加属性和方法symbol内置值11,迭代器(iterator)迭代器的应用12,生成器生成器
ES6到ES11
qq_38472535的博客
07-15 298
ES6 01.课程介绍.mp4 02.ES6-ECMAScript相关名词介绍.mp4 03.ES6-let变量声明以及声明特性.mp4 04.ES6-let经典案例实践.mp4 05.ES6-const声明常量以及特点.mp4 06.ES6-变量的解构赋值.mp4 07.ES6-模板字符串.mp4 08.ES6-对象的简化写法.mp4 09.ES6-箭头函数以及声明特点.mp4 10.ES6-箭头函数的实践与应用场景.mp4 11.ES6-...
es6-support:ECMAScript 6
06-13
ECMAScript 6 支持提示和示例 这是一小部分提示和示例，用于展示如何在各种场景中的实践中使用，这要归功于出色的转译工具包。 如果您想了解更多关于 ECMAScript 6 的信息，请查看我们的配套项目 。 代码示例 以下是...
ES6-ES11新特性（这一篇就够了）
m0_61490399的博客
06-29 3610
ECMAScript 是一种由 Ecma 国际（前身为欧洲计算机制造商协会）在标准 ECMA-262 中定义的脚本语言规范。这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMA-262 标准的实现和扩展ECMAScript 是由网景的布兰登·艾克开发的一种脚本语言的标准化规范；最初命名为Mocha，后来改名为 LiveScript，最后重命名为 JavaScript。1995年12月，升阳与网景联合发表了JavaScript。1996年11月，网景公
JavaScript --- ES6 涵盖（ES6 -- ES11）语法学习
02-24
从ES6（ECMAScript 2015）到ES11（ECMAScript 2020），JavaScript引入了一系列的新特性，极大地提升了代码的可读性和效率。本篇文章将深入探讨这些重要的语法更新。 一、箭头函数 ES6引入了箭头函数，其语法简洁...
harmonyos2-ES6-Learning:学习ECMAScript6的资源列表！
07-01
ES:Harmony 兼容的模块加载器和模块制造器，非常适合您必须使用的每个 JS 文件。 - RequireJS 加载器插件，支持 ES6 模块。 - 基于最新规范的 ES6 模块加载器 polyfill。 - 通用动态模块加载器 - 在浏览器和 NodeJS ...
ES6新特性_ES6迭代器技术---JavaScript_ECMAScript_ES6-ES11新特性工作笔记018
添柴程序猿的专栏
01-29 277
然后我们再来看迭代器 迭代器,就跟java中的iterator一样的. 首先先看看遍历数组我们可以用 for....of 或者for ...in 可以看到用of,获取的是值 用in获取的是key,下标对吧. 然后我们打印这个数组去看看 console.log(xiyou); 可以看到右边 可以往下看到有个iterator方法.他是Symbol的. 去看看他的工作原理 我们去获取这个iterator,然后 打印一下这个iterator,可以看到这个是个数.
【猛地学】ES6-ES11主要知识点（根据网上学习资料修改整合而来）
fangyuan__的博客
07-19 223
ES6-11一些的重要的点
前端学习之 ES6-ES11
weixin_46683645的博客
06-25 467
ES6 let 1.变量不能重复声明 let 声明的变量名不能重复，避免变量污染 let star = '罗志祥'; let star = '小猪'; console.log(star); var声明的变量可以重复，后面的值会覆盖前面的值 var star = '罗志祥'; var star = '小猪'; console.log(star); 2.块级作用域 如果在块级作用域中使用let声明变量，则有块级作用域 { let myName= '王思聪'; } console.log(myName)
ES笔记大全（ES6-ES11新特性总结）
BlackStar的博客
02-17 1713
目录 let声明变量的规则 const声明变量的规则 变量的解构赋值 ES6 引入新的声明字符串的方式——模板字符串[``] '' "" ES6 箭头函数 ES6 rest参数 ES6 扩展运算符 ... ES6 Symbol JavaScript的七种数据类型： ES6 迭代器 ES6 生成器 yield 可作为代码的分隔符 Promise Promise-then方法 Promise-catch方法 Set Map class类 数值扩展 对象方法扩展 模块..
一幅长文细学JavaScript（五）——ES6-ES11新特性
弄鹊
08-24 1172
ES5的先天不足致使ES后续版本的发展，这也是前端人员绕不开的一个点。如果我们想要在工作和面试中轻松解决问题，那么了解ES6-ES11是必不可少的。 在本文中，我将采用一种更加通俗的方式来讲述这一块知识点，而不是照搬书上概念。
ES6（十一）Promise
那边小伙
06-06 464
Promise 的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map
emmmm.....
06-01 458
ES6 1. let 关键字 1.1 声明变量 1.2 块级作用域 1.3 不存在变量提升 1.4 不影响作用域链 1.5 案例实践 -- 点击 DIV 换色 2. const 关键字 2.1 声明常量 2.2 不允许重复声明 2.3 值不允许修改 2.4 块儿级作用域 2.5 对于数组和对象的元素修改, 不算做对常量的修改 3. 变量的解构赋值 3.1 数组的结构 3.2 对象的解构 4. 模板字符串 4.1 模板字符串声明 4.2 字符串中可以出现换行符 4.3 可以使用 ${xxx} 形式输出变量 5
ES6-11 学习笔记
m0_60394632的博客
07-19 214
学习ES5-11S时候做的笔记，第一遍过注重各个新特性的用法，实际案例在将来开发中遇到将会补充上来
ES6~11学习笔记
YangLX的博客
10-28 186
let关键字 不能重复声明（防止变量被污染） 块级作用域 不会变量提升 不影响作用域链 const关键字 必须赋初值 一般常量大写 常量值不可修改 块级作用域 const定义数组或对象时，内部属性可修改 解构赋值 模板字符串(反引号) 内容中可直接换行 变量拼接（使用“”${变量}“） 简化对象写法 let a = "aString"; let func = function() { console.log(this); }
es6-es11是什么
05-15
ES6、ES7、ES8、ES9、ES10、ES11 是 JavaScript 的几个版本，也被称为 ECMAScript 的不同版本。ES6 是在 2015 年发布的，它引入了许多新的语言特性和 API，例如箭头函数、模板字符串、解构赋值、let 和 const 变量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值