扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇内容介绍了“ecmascript的特性有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
创新互联专注于婺城企业网站建设,成都响应式网站建设公司,商城网站建设。婺城网站建设公司,为婺城等地区提供建站服务。全流程定制网站制作，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务
ecmascript的特性有：1、class（类）；2、模块化；3、箭头函数；4、模板字符串；5、解构赋值；6、延展操作符；7、Promise；8、let与const；9、指数操作符“**”；10、“async/await”等等。
本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。
ECMAScript 是一种由 ECMA国际（前身为欧洲计算机制造商协会）通过 ECMA-262 标准化的脚本程序设计语言。
Ecma国际（Ecma International）是一家国际性会员制度的信息和电信标准组织。1994年之前，名为欧洲计算机制造商协会（European Computer Manufacturers Association）。因为计算机的国际化，组织的标准牵涉到很多其他国家，因此组织决定改名表明其国际性。现名称已不属于首字母缩略字。
与国家政府标准机构不同，Ecma国际是企业会员制的组织。组织的标准化过程比较商业化，自称这种营运方式减少官僚追求效果。
其实 Ecma国际负责了很多标准的制定，比如有如下这些规范。大家可以看到这里面有我们今天的主角，ECMAScript 规范、 C#语言规范、 C++/CLI语言规范等。
1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。
该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。
因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。
ECMAScript 2015（简称 ES2015）这个词，也是经常可以看到的。它与 ES6 是什么关系呢？
2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。
但是，因为这个版本引入的语法功能太多，而且制定过程当中，还有很多组织和个人不断提交新功能。事情很快就变得清楚了，不可能在一个版本里面包括所有将要引入的功能。常规的做法是先发布 6.0 版，过一段时间再发 6.1 版，然后是 6.2 版、6.3 版等等。
标准委员会最终决定，标准在每年的 6 月份正式发布一次，作为当年的正式版本。接下来的时间，就在这个版本的基础上做改动，直到下一年的 6 月份，草案就自然变成了新一年的版本。这样一来，就不需要以前的版本号了，只要用年份标记就可以了。
因此，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。
1996年11月，Netscape公司将Js提交给国际化标准组织ECMA，当初该语言能够成为国际化标准。
1997年，ECMAScript 1.0版本推出。（在这年，ECMA发布262号标准文件（ECMA-262）的第一版，规定浏览器脚本语言的标准，并将这种语言称为ECMAScript，也就是ES1.0版本。）
1998年6月，ES 2.0 版发布。
1999年12月，ES 3.0 版发布，并成为JS的通行标准，得到广泛支持。
2007年10月，ES 4.0 版草案发布。
2008年7月，由于各方分歧太大，ECMA决定终止ES 4.0的开发。转而将其中涉及现有功能改善的一小部分发布为ES 3.1 。但是回后不久将其改名为ES 5.0版；
2009年12月，ES 5.0 版正式发布。
2011年6月，ES 5.1 版发布，并成为ISO国际标准（ISO/IEC 16262：2011）。
2013年3月，ES 6 草案终结，并且不再添加新的功能。
2013年12月，ES 6 草案发布。
2015年6月，ES 6 正式版本发布。
从此后面每年6月都会发布一个正式版本，所以目前最新的版本是2021年6月发布的ES12。
1、class
ES6 引入了 class（类），让 JavaScript 的面向对象编程变得更加简单和易于理解。
class Student {
constructor() {
console.log("I'm a student.");
}
study() {
console.log('study!');
}
static read() {
console.log("Reading Now.");
}
}
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."2、模块化
ES5 支持原生的模块化，在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域，模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过 import 来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));3、箭头函数
=>不只是关键字 function 的简写，它还带来了其它好处。箭头函数与包围它的代码共享同一个 this,能帮你很好的解决this的指向问题。比如 var self = this;或 var that =this这种引用外围this的模式。但借助 =>，就不需要这种模式了。
() => 1
v => v+1
(a,b) => a+b
() => {
alert("foo");
}
e => {
if (e == 0){
return 0;
}
return 1000/e;
}4、模板字符串
ES6 支持 模板字符串，使得字符串的拼接更加的简洁、直观。
//不使用模板字符串
var name = 'Your name is ' + first + ' ' + last + '.'
//使用模板字符串
var name = `Your name is ${first} ${last}.`在 ES6 中通过 ${}就可以完成字符串的拼接，只需要将变量放在大括号之中。
5、解构赋值
解构赋值语法是 JavaScript 的一种表达式，可以方便的从数组或者对象中快速提取值赋给定义的变量。
// 对象
const student = {
name: 'Sam',
age: 22,
sex: '男'
}
// 数组
// const student = ['Sam', 22, '男'];
// ES5；
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name + ' --- ' + age + ' --- ' + sex);
// ES6
const { name, age, sex } = student;
console.log(name + ' --- ' + age + ' --- ' + sex);6、延展操作符
延展操作符…可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开；还可以在构造对象时, 将对象表达式按 key-value 的方式展开。
//在函数调用时使用延展操作符
function sum(x, y, z) {
return x + y + z
}
const numbers = [1, 2, 3]
console.log(sum(...numbers))
//数组
const stuendts = ['Jine', 'Tom']
const persons = ['Tony', ...stuendts, 'Aaron', 'Anna']
conslog.log(persions)7、Promise
Promise 是异步编程的一种解决方案，比传统的解决方案 callback 更加的优雅。它最早由社区提出和实现的，ES6 将其写进了语言标准，统一了用法，原生提供了 Promise 对象。
const getJSON = function(url) {
const promise = new Promise(function(resolve, reject){
const handler = function() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
const client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
});
return promise;
};
getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出错了', error);
});8、let 与 const
在之前 JS 是没有块级作用域的，const与 let 填补了这方便的空白，const与 let 都是块级作用域。
function f() {
{
let x;
{
// 正确
const x = "sneaky";
// 错误，常量const
x = "foo";
}
// 错误，已经声明过的变量
let x = "inner";
}
}1、Array.prototype.includes()
includes() 函数用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回 false。
[1, 2, 3].includes(-1) // false
[1, 2, 3].includes(1) // true
[1, 2, 3].includes(3, 4) // false
[1, 2, 3].includes(3, 3) // false
[1, 2, NaN].includes(NaN) // true
['foo', 'bar', 'quux'].includes('foo') // true
['foo', 'bar', 'quux'].includes('norf') // false2、指数操作符
在 ES7 中引入了指数运算符 **， **具有与 Math.pow(…)等效的计算结果。使用指数运算符 **，就像 +、- 等操作符一样。
//之前的版本 Math.pow(5, 2) // ES7 5 ** 2 // 5 ** 2 === 5 * 5
1、async/await
异步函数返回一个AsyncFunction对象并通过事件循环异步操作。
const resolveAfter3Seconds = function() {
console.log('starting 3 second promsise')
return new Promise(resolve => {
setTimeout(function() {
resolve(3)
console.log('done in 3 seconds')
}, 3000)
})
}
const resolveAfter1Second = function() {
console.log('starting 1 second promise')
return new Promise(resolve => {
setTimeout(function() {
resolve(1)
console.log('done, in 1 second')
}, 1000)
})
}
const sequentialStart = async function() {
console.log('***SEQUENTIAL START***')
const one = await resolveAfter1Second()
const three = await resolveAfter3Seconds()
console.log(one)
console.log(three)
}
sequentialStart();2、Object.values()
Object.values()是一个与 Object.keys()类似的新函数，但返回的是 Object 自身属性的所有值，不包括继承的值。
const obj = { a: 1, b: 2, c: 3 }
//不使用 Object.values()
const vals = Object.keys(obj).map((key) => obj[key])
console.log(vals)
//使用 Object.values()
const values = Object.values(obj1)
console.log(values)从上述代码中可以看出 Object.values()为我们省去了遍历 key，并根据这些 key 获取 value 的步骤。
3、Object.entries()
Object.entries()函数返回一个给定对象自身可枚举属性的键值对的数组。
//不使用 Object.entries()
Object.keys(obj).forEach((key) => {
console.log('key:' + key + ' value:' + obj[key])
})
//key:b value:2
//使用 Object.entries()
for (let [key, value] of Object.entries(obj1)) {
console.log(`key: ${key} value:${value}`)
}
//key:b value:24、String padding
在 ES8 中 String 新增了两个实例函数 String.prototype.padStart和 String.prototype.padEnd，允许将空字符串或其他字符串添加到原始字符串的开头或结尾。
console.log('0.0'.padStart(4, '10'))
console.log('0.0'.padStart(20))
console.log('0.0'.padEnd(4, '0'))
console.log('0.0'.padEnd(10, '0'))5、Object.getOwnPropertyDescriptors()
Object.getOwnPropertyDescriptors()函数用来获取一个对象的所有自身属性的描述符,如果没有任何自身属性，则返回空对象。
let myObj = {
property1: 'foo',
property2: 'bar',
property3: 42,
property4: () => console.log('prop4')
}
Object.getOwnPropertyDescriptors(myObj)
/*
{ property1: {…}, property2: {…}, property3: {…}, property4: {…} }
property1: {value: "foo", writable: true, enumerable: true, configurable: true}
property2: {value: "bar", writable: true, enumerable: true, configurable: true}
property3: {value: 42, writable: true, enumerable: true, configurable: true}
property4: {value: ƒ, writable: true, enumerable: true, configurable: true}
__proto__: Object
*/1、async iterators
ES9 引入异步迭代器（asynchronous iterators）， await可以和 for…of循环一起使用，以串行的方式运行异步操作。
//如果在 async/await中使用循环中去调用异步函数，则不会正常执行
async function demo(arr) {
for (let i of arr) {
await handleDo(i);
}
}
//ES9
async function demo(arr) {
for await (let i of arr) {
handleDo(i);
}
}2、Promise.finally()
一个 Promise 调用链要么成功到达最后一个 .then()，要么失败触发 .catch()。在某些情况下，你想要在无论 Promise 运行成功还是失败，运行相同的代码，例如清除，删除对话，关闭数据库连接等。
.finally()允许你指定最终的逻辑。
function doSomething() {
doSomething1()
.then(doSomething2)
.then(doSomething3)
.catch((err) => {
console.log(err)
})
.finally(() => {})
}3、Rest/Spread属性
Rest：对象解构赋值的其余属性。
Spread：对象解构赋值的传播属性。
//Rest
let { fname, lname, ...rest } = { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" };
fname; //"Hemanth"
lname; //"HM"
rest; // {location: "Earth", type: "Human"}
//Spread
let info = {fname, lname, ...rest};
info; // { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" }1、Array的 flat()方法和 flatMap()方法
flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap通常在合并成一种方法的效率稍微高一些。
let arr = ['a', 'b', ['c', 'd']]; let flattened = arr.flat(); console.log(flattened); // => ["a", "b", "c", "d"] arr = ['a', , , 'b', ['c', 'd']]; flattened = arr.flat(); console.log(flattened); // => ["a", "b", "c", "d"] arr = [10, [20, [30]]]; console.log(arr.flat()); // => [10, 20, [30]] console.log(arr.flat(1)); // => [10, 20, [30]] console.log(arr.flat(2)); // => [10, 20, 30] console.log(arr.flat(Infinity)); // => [10, 20, 30]
2、String的 trimStart()方法和 trimEnd()方法
分别去除字符串首尾空白字符
const str = " string "; console.log(str.trimStart()); // => "string " console.log(str.trimEnd()); // => " string"
3、Object.fromEntries()
Object.entries()方法的作用是返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for…in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。
而 Object.fromEntries() 则是 Object.entries() 的反转，Object.fromEntries() 函数传入一个键值对的列表，并返回一个带有这些键值对的新对象。
const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);
console.log(obj); // => {one: 1, two: 2, three: 3}1、Promise.allSettled
Promise.all最大问题就是如果其中某个任务出现异常(reject)，所有任务都会挂掉，Promise 直接进入 reject 状态。
Promise.allSettled在并发任务中，无论一个任务正常或者异常，都会返回对应的的状态（fulfilled 或者 rejected）与结果（业务 value 或者 拒因 reason），在 then 里面通过 filter 来过滤出想要的业务逻辑结果，这就能最大限度的保障业务当前状态的可访问性。
const promise1 = Promise.resolve(3); const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo')); const promises = [promise1, promise2]; Promise.allSettled(promises). then((results) => results.forEach((result) => console.log(result.status))); // expected output: // "fulfilled" // "rejected"
2、String.prototype.matchAll
matchAll() 方法返回一个包含所有匹配正则表达式及分组捕获结果的迭代器。 在 matchAll出现之前，通过在循环中调用 regexp.exec来获取所有匹配项信息（regexp需使用 /g 标志)。如果使用 matchAll，就可以不必使用 while 循环加 exec 方式（且正则表达式需使用／g标志）。使用 matchAll会得到一个迭代器的返回值，配合 for…of, array spread, or Array.from() 可以更方便实现功能。
const regexp = /t(e)(st(\d?))/g; const str = 'test1test2'; const array = [...str.matchAll(regexp)]; console.log(array[0]); // expected output: Array ["test1", "e", "st1", "1"] console.log(array[1]); // expected output: Array ["test2", "e", "st2", "2"]
1、Promise.any
Promise.any() 接收一个Promise可迭代对象，只要其中的一个 promise 成功，就返回那个已经成功的 promise 。如果可迭代对象中没有一个 promise 成功（即所有的 promises 都失败/拒绝），就返回一个失败的 promise。
const promise1 = new Promise((resolve, reject) => reject('我是失败的Promise_1'));
const promise2 = new Promise((resolve, reject) => reject('我是失败的Promise_2'));
const promiseList = [promise1, promise2];
Promise.any(promiseList)
.then(values=>{
console.log(values);
})
.catch(e=>{
console.log(e);
});2、逻辑运算符和赋值表达式
逻辑运算符和赋值表达式，新特性结合了逻辑运算符（&&=，||=，??=）。
a ||= b //等价于 a = a || (a = b) a &&= b //等价于 a = a && (a = b) a ??= b //等价于 a = a ?? (a = b)
3、replaceAll
返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉。
const str = 'hello world';
str.replaceAll('l', ''); // "heo word"4、数字分隔符
数字分隔符，可以在数字之间创建可视化分隔符，通过_下划线来分割数字，使数字更具可读性。
const money = 1_000_000_000; //等价于 const money = 1000000000; 1_000_000_000 === 1000000000; // true
“ecmascript的特性有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网