首页 / ECMASCRIPT / ECMAScript6快速入手攻略

ECMAScript6快速入手攻略

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了ECMAScript6快速入手攻略，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9633字，纯文字阅读大概需要14分钟。

内容图文

简介

ECMAScript 6 是JavaScript的下一个标准，正处在快速开发之中，ECMAScript 6 的目标，是使得JavaScript可以用来编写复杂的应用程序、函数库和代码的自动生成器（code generator）。最新的浏览器已经部分支持ECMAScript 6 的语法，ECMAScript 6 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6 的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。

1. let、const 和 block 作用域

let 允许创建块级作用域，ES6 推荐在函数中使用 let 定义变量，而非 var：

var a = 2;
{
 let a = 3;
 console.log(a); // 3
}
console.log(a); // 2

同样在块级作用域有效的另一个变量声明方式是 const，它可以声明一个常量。ES6 中，const 声明的常量类似于指针，它指向某个引用，也就是说这个「常量」并非一成不变的，如：

{
 const ARR = [5,6];
 ARR.push(7);
 console.log(ARR); // [5,6,7]
 ARR = 10; // TypeError
}

有几个点需要注意：

let 关键词声明的变量不具备变量提升（hoisting）特性

let 和 const 声明只在最靠近的一个块中（花括号内）有效

当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING

const 在声明时必须被赋值

2. 箭头函数（Arrow Functions）

ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体：

var getPrice = function() {
 return 4.55;
};
 
// Implementation with Arrow Function
var getPrice = () => 4.55;

需要注意的是，上面栗子中的 getPrice 箭头函数采用了简洁函数体，它不需要reture 语句，下面这个栗子使用的是正常函数体：

let arr = ['apple', 'banana', 'orange'];
 
let breakfast = arr.map(fruit => {
 return fruit + 's';
});
 
console.log(breakfast); // apples bananas oranges

当然，箭头函数不仅仅是让代码变得简洁，函数中 this 总是绑定总是指向对象自身。具体可以看看下面几个栗子：

function Person() {
 this.age = 0;
 
 setInterval(function growUp() {
 // 在非严格模式下，growUp() 函数的 this 指向 window 对象
 this.age++;
 }, 1000);
}
var person = new Person();

我们经常需要使用一个变量来保存 this，然后在 growUp 函数中引用：

function Person() {
 var self = this;
 self.age = 0;

 setInterval(function growUp() {
 self.age++;
 }, 1000);
}

而使用箭头函数可以省却这个麻烦：

function Person(){
 this.age = 0;
 
 setInterval(() => {
 // |this| 指向 person 对象
 this.age++;
 }, 1000);
}
 
var person = new Person();

3. 函数参数默认值

ES6 中允许你对函数参数设置默认值：

let getFinalPrice = (price, tax=0.7) => price + price * tax;
getFinalPrice(500); // 850

4. Spread / Rest 操作符

Spread / Rest 操作符指的是 ...，具体是 Spread 还是 Rest 需要看上下文语境。

当被用于迭代器中时，它是一个 Spread 操作符：

function foo(x,y,z) {
 console.log(x,y,z);
}
 
let arr = [1,2,3];
foo(...arr); // 1 2 3

当被用于函数传参时，是一个 Rest 操作符：

function foo(...args) {
 console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

5. 对象词法扩展

ES6 允许声明在对象字面量时使用简写语法，来初始化属性变量和函数的定义方法，并且允许在对象属性中进行计算操作：

function getCar(make, model, value) {
 return {
 // 简写变量
 make, // 等同于 make: make
 model, // 等同于 model: model
 value, // 等同于 value: value
 
 // 属性可以使用表达式计算值
 ['make' + make]: true,
 
 // 忽略 `function` 关键词简写对象函数
 depreciate() {
 this.value -= 2500;
 }
 };
}
 
let car = getCar('Barret', 'Lee', 40000);
 
// output: {
// make: 'Barret',
// model:'Lee',
// value: 40000,
// makeBarret: true,
// depreciate: function()
// }

6. 二进制和八进制字面量

ES6 支持二进制和八进制的字面量，通过在数字前面添加 0o 或者 0O 即可将其转换为二进制值：

let oValue = 0o10;
console.log(oValue); // 8
 
let bValue = 0b10; // 二进制使用 `0b` 或者 `0B`
console.log(bValue); // 2

7. 对象和数组解构

解构可以避免在对象赋值时产生中间变量：

function foo() {
 return [1,2,3];
}
let arr = foo(); // [1,2,3]
 
let [a, b, c] = foo();
console.log(a, b, c); // 1 2 3
 
function bar() {
 return {
 x: 4,
 y: 5,
 z: 6
 };
}
let {x: x, y: y, z: z} = bar();
console.log(x, y, z); // 4 5 6

8. 对象超类

ES6 允许在对象中使用 super 方法：

var parent = {
 foo() {
 console.log("Hello from the Parent");
 }
}
 
var child = {
 foo() {
 super.foo();
 console.log("Hello from the Child");
 }
}
 
Object.setPrototypeOf(child, parent);
child.foo(); // Hello from the Parent
  // Hello from the Child

9. 模板语法和分隔符

ES6 中有一种十分简洁的方法组装一堆字符串和变量。

${ ... } 用来渲染一个变量
` 作为分隔符

let user = 'Barret';
console.log(`Hi ${user}!`); // Hi Barret!

10. for...of VS for...in

for...of 用于遍历一个迭代器，如数组：

let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname of nicknames) {
 console.log(nickname);
}
Result: di, boo, punkeye

for...in 用来遍历对象中的属性：

let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname in nicknames) {
 console.log(nickname);
}
Result: 0, 1, 2, size

11. Map 和 WeakMap

ES6 中两种新的数据结构集：Map 和 WeakMap。事实上每个对象都可以看作是一个Map。

一个对象由多个 key-val 对构成，在 Map 中，任何类型都可以作为对象的 key，如：

var myMap = new Map();
 
var keyString = "a string",
 keyObj = {},
 keyFunc = function () {};
 
// 设置值
myMap.set(keyString, "value 与 'a string' 关联");
myMap.set(keyObj, "value 与 keyObj 关联");
myMap.set(keyFunc, "value 与 keyFunc 关联");
 
myMap.size; // 3
 
// 获取值
myMap.get(keyString); // "value 与 'a string' 关联"
myMap.get(keyObj); // "value 与 keyObj 关联"
myMap.get(keyFunc); // "value 与 keyFunc 关联"

WeakMap

WeakMap 就是一个 Map，只不过它的所有 key 都是弱引用，意思就是 WeakMap 中的东西垃圾回收时不考虑，使用它不用担心内存泄漏问题。

另一个需要注意的点是，WeakMap 的所有 key 必须是对象。它只有四个方法delete(key),has(key),get(key) 和 set(key, val)：

let w = new WeakMap();
w.set('a', 'b'); 
// Uncaught TypeError: Invalid value used as weak map key
 
var o1 = {},
 o2 = function(){},
 o3 = window;
 
w.set(o1, 37);
w.set(o2, "azerty");
w.set(o3, undefined);
 
w.get(o3); // undefined, because that is the set value
 
w.has(o1); // true
w.delete(o1);
w.has(o1); // false

12. Set 和 WeakSet

Set 对象是一组不重复的值，重复的值将被忽略，值类型可以是原始类型和引用类型：

let mySet = new Set([1, 1, 2, 2, 3, 3]);
mySet.size; // 3
mySet.has(1); // true
mySet.add('strings');
mySet.add({ a: 1, b:2 });

可以通过 forEach 和 for...of 来遍历 Set 对象：

mySet.forEach((item) => {
 console.log(item);
 // 1
 // 2
 // 3
 // 'strings'
 // Object { a: 1, b: 2 }
});
 
for (let value of mySet) {
 console.log(value);
 // 1
 // 2
 // 3
 // 'strings'
 // Object { a: 1, b: 2 }
}

Set 同样有 delete() 和 clear() 方法。

WeakSet

类似于 WeakMap，WeakSet 对象可以让你在一个集合中保存对象的弱引用，在WeakSet 中的对象只允许出现一次：

var ws = new WeakSet();
var obj = {};
var foo = {};
 
ws.add(window);
ws.add(obj);
 
ws.has(window); // true
ws.has(foo); // false, foo 没有添加成功
 
ws.delete(window); // 从结合中删除 window 对象
ws.has(window); // false, window 对象已经被删除

13. 类

ES6 中有 class 语法。值得注意是，这里的 class 不是新的对象继承模型，它只是原型链的语法糖表现形式。

函数中使用 static 关键词定义构造函数的的方法和属性：

class Task {
 constructor() {
 console.log("task instantiated!");
 }
 
 showId() {
 console.log(23);
 }
 
 static loadAll() {
 console.log("Loading all tasks..");
 }
}
 
console.log(typeof Task); // function
let task = new Task(); // "task instantiated!"
task.showId(); // 23
Task.loadAll(); // "Loading all tasks.."

类中的继承和超集：

class Car {
 constructor() {
 console.log("Creating a new car");
 }
}
 
class Porsche extends Car {
 constructor() {
 super();
 console.log("Creating Porsche");
 }
}
 
let c = new Porsche();
// Creating a new car
// Creating Porsche

extends 允许一个子类继承父类，需要注意的是，子类的 constructor 函数中需要执行 super() 函数。

当然，你也可以在子类方法中调用父类的方法，如 super.parentMethodName()。

在这里阅读更多关于类的介绍。

有几点值得注意的是：

类的声明不会提升（hoisting)，如果你要使用某个 Class，那你必须在使用之前定义它，否则会抛出一个 ReferenceError 的错误
在类中定义函数不需要使用 function 关键词

14. Symbol

Symbol 是一种新的数据类型，它的值是唯一的，不可变的。ES6 中提出 symbol 的目的是为了生成一个唯一的标识符，不过你访问不到这个标识符：

var sym = Symbol( "some optional description" );
console.log(typeof sym); // symbol

注意，这里 Symbol 前面不能使用 new 操作符。

如果它被用作一个对象的属性，那么这个属性会是不可枚举的：

var o = {
 val: 10,
 [ Symbol("random") ]: "I'm a symbol",
};
 
console.log(Object.getOwnPropertyNames(o)); // val

如果要获取对象 symbol 属性，需要使用 Object.getOwnPropertySymbols(o)。

15. 迭代器（Iterators）

迭代器允许每次访问数据集合的一个元素，当指针指向数据集合最后一个元素是，迭代器便会退出。它提供了 next() 函数来遍历一个序列，这个方法返回一个包含 done 和value 属性的对象。

ES6 中可以通过 Symbol.iterator 给对象设置默认的遍历器，无论什么时候对象需要被遍历，执行它的 @@iterator 方法便可以返回一个用于获取值的迭代器。

数组默认就是一个迭代器：

var arr = [11,12,13];
var itr = arr[Symbol.iterator]();
 
itr.next(); // { value: 11, done: false }
itr.next(); // { value: 12, done: false }
itr.next(); // { value: 13, done: false }
 
itr.next(); // { value: undefined, done: true }

你可以通过 [Symbol.iterator]() 自定义一个对象的迭代器。

16. Generators

Generator 函数是 ES6 的新特性，它允许一个函数返回的可遍历对象生成多个值。

在使用中你会看到 * 语法和一个新的关键词 yield:

function *infiniteNumbers() {
 var n = 1;
 while (true){
 yield n++;
 }
}
 
var numbers = infiniteNumbers(); // returns an iterable object
 
numbers.next(); // { value: 1, done: false }
numbers.next(); // { value: 2, done: false }
numbers.next(); // { value: 3, done: false }

每次执行 yield 时，返回的值变为迭代器的下一个值。

17. Promises

ES6 对 Promise 有了原生的支持，一个 Promise 是一个等待被异步执行的对象，当它执行完成后，其状态会变成 resolved 或者 rejected。

var p = new Promise(function(resolve, reject) { 
 if (/* condition */) {
 // fulfilled successfully
 resolve(/* value */); 
 } else {
 // error, rejected
 reject(/* reason */); 
 }
});

每一个 Promise 都有一个 .then 方法，这个方法接受两个参数，第一个是处理 resolved 状态的回调，一个是处理 rejected 状态的回调：

p.then((val) => console.log("Promise Resolved", val),
 (err) => console.log("Promise Rejected", err));

以上就是为大家整理的ECMAScript6快速入手的简介，需要的朋友们可以学习参考。

内容总结

以上是互联网集市为您收集整理的ECMAScript6快速入手攻略全部内容，希望文章能够帮你解决ECMAScript6快速入手攻略所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/351136.html

来源：【匿名】

【上一篇】深入理解ECMAScript的几个关键语句【下一篇】ECMAScript6中类继承解析（附示例）

更多 ►

【ECMAScript6快速入手攻略】教程文章相关的互联网学习教程文章

饮冰三年-人工智能-Python-46 Python之初识ECMAScript6【代码】

一、ECMAScript与JavaScript 的关系前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。二、let和const命令 1、let与var　　var:变量提升与 let:块级作用域<script>console.log(a) //输出结果： undefinedconsole.log(b) //直接报错： Uncaught ReferenceError: Cannot access ‘b‘ before initializationvar a = "Hello,World";let b ="Hello,ECMA6" </script>var变量提升<script>{var a = "Hello,W...

ECMAScript6 － Iterators and Generators【代码】

Iterators and GeneratorsIterators have been used in many programming languages as a way to more easily work with collections of data. In ECMAScript 6, JavaScript adds iterators as an important feature of the language. When coupled with new array methods and new types of collections (such as sets and maps), iterators become even more important for efficient processing of data.　　在其他的语言中，遍...

phpstorm 配置 babel 支持EcmaScript6【代码】【图】

1.安装nodejs2.npm install --save-dev babel-cli3.npm install babel-preset-es2015 --save-dev4.phpstorm->settings->language&framework->javascript->ecmaScript65.phpstorm->settings->tools->file Watchers->"+ Babel"建议file type选择ecmascript6 使用*.es6文件编写es6 编译后生成*.js 这样避免*.js编译后仍然生成*.js在工程目录下新建.babelrc 添加配置配置{ "presets": ["es2015"] } 改写文件原文：http://www.cnblogs....

ECMAScript6学习笔记

一. 声明变量let和const1. let的特点：（1）不存在变量提升（2）暂存性死区：let声明的变量被绑定到该区域，不再受外部影响。（3）同一个作用域中，不允许重复声明 2. 块级作用域（使用let声明变量）（1）以前只有全局作用域和函数作用域，es6中一个代码块就是一个作用域{}（2）允许块级作用域互相嵌套，外层作用域无法读取内层作用域的变量，内层作用域可以定义外层作用域的同名变量。（3）ES5规定函数只在全局作用域和函数作用域...

一小时学会ECMAScript6新特性（二）【代码】

1、对象属性名es5中我们为一个对象添加属性可以用如下代码：let foods = {};foods.dessert = ‘蛋糕‘;console.log(foods)但是属性名中间有空格则不能用点的形式添加，es6中的属性名可以有空格：let foods = {};foods.dessert = ‘蛋糕‘; foods[‘hot drink‘] = ‘可乐‘console.log(foods)方括号中还可以用变量的形式引入：let foods = {},drink = ‘hot drink‘;foods.dessert = ‘蛋糕‘; foods[drink] = ‘可乐‘console.lo...

ECMAScript6函数剩余参数（Rest Parameters）【图】

我们知道JS函数内部有个arguments对象，可以拿到全部实参。现在ES6给我们带来了一个新的对象，可以拿到除开始参数外的参数，即剩余参数（废话好多 O(∩_∩)O~）。这个新的对象和arguments不一样，它是程序员自定义的一个普通标识符，只是需要在前面加上三个点：... function func(a, ...rest) {console.log(a)console.log(rest) } func(1) func(1, 2, 3, 4) 注意func的第二个参数rest，前面有三个点。定义好后调用了两次，结果分别...

ECMAScript6中Promise是什么？有什么用？（附示例）

本篇文章给大家带来的内容是关于ECMAScript6中Promise是什么？有什么用？（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。刚学习完，有点粗略印象。整理记录一下以便后续学习补充，加深理解。Promise是什么Promise是构造函数，可以通过new来生成Promise对象。Promise有什么用目前我的感受是：更加方便来操作异步流程，更加明确直观的控制事件的流程以及可以链式调用Promise特点摘自ES6入门Promise对象...

ECMAScript6 新特性范例大全【图】

ECMAScript6（ECMAScript 2015 ，ES5，ES2016）技术已经在前端圈子很流行了，他给前端开发人员带来了很多惊喜，提供的语法糖使复杂的操作变得简单。本文没有详细描述这些新特性，因为网上都已经有很多相关的介绍了。主要针对ES6 新特性收集了相关范例代码，他可以让你快速了解这个新的javascript规范。箭头函数 function() 函数的简写表示法，但它不绑定 this。var odds = evens.map(v => v + 1); // no parentes and no bracket...

ECMAScript6是什么？

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 1.ECMAScript 和 JavaScript 的关系一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？要讲清楚这个问题，需要回顾历史。1996年11月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给国际标准化组织ECMA，希望这种语...

ECMAScript6函数默认参数

语言更新时每一个新增的特性都是从千百万开发者需求里提取过来的，规范采用后能减少程序员的痛苦，带来便捷。我们经常会这么写 function calc(x, y) {x = x || 0;y = y || 0;// to do with x, y// return x/y } 简单说就是x，y提供了一个默认值为0，不传时x, y以值0来运算。传了就以实际值计算。又如定义一个ajax function ajax(url, async, dataType) {async = async !== falsedataType = dataType || JSON// ... } 自己用原生J...

ECMAScript6--解构

大致介绍解构：就是将声明的一组变量和与相同结构的数组或者对象的元素数值一一对应，并将变量相对应元素进行赋值数组解构例子：let [a,b,c] = [1,2,3];console.log(a); //1console.log([a,b,c]); //[1, 2, 3]可以看到，数组中的a,b,c分别对应1，2,3 嵌套的数组也可以进行解构 let [a,[b,[c]]] = [1,[2,[3]]];console.log(c); //3let [d,,e] = [1,2,3];console.log(e); //3let [f,...tail] = [1,2,3];console.log(tail); //[2, ...

浅谈ECMAScript6新特性之let、const【图】

第一次写博客有点紧张，如果说的不对的地方，欢迎大家留言指正。咱们先来说说“ECMAScript”这到底是啥玩意儿？它和javascript的关系又是如何的？首先，在1996年11月的时候，javascript的创造者（网景公司Netscape）和sun公司联合ECMA（欧洲计算机制造商协会）对javascript进行标准化，次年，ECMA发布262号标准文件文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准（在这里提个问题：为什么要标准化？），并将这种语言称为EC...

ECMAScript6中类继承解析（附示例）

本篇文章给大家带来的内容是关于ECMAScript 6中类继承解析（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。类继承看类继承前，先回顾构造函数怎么实现对象的继承的 function F() {this.a = 1;}function Son() {F.call(this);} function inherit(S, F) {S.prototype = Object.create(F.prototype);S.prototype.constructor = S;}inherit(Son, F);let son = new Son();它实现了哪几个功能：继承F...

ECMAScript6新特性之let、const（图文教程）【图】

下面小编就为大家带来一篇浅谈ECMAScript6新特性之let、const。现在就分享给大家，也给大家做个参考。接下来来介绍一下es6中的新特性之“let”。首先，这个玩意儿其实和var这个命令类似，都是用于声明变量的，但是所声明的变量只在let命令所在的代码块内有效（这里涉及到块级作用域的概念，然而这个概念也是es6中提出来的。在后面我再来讲。PS：在其他编程语言中，早就有块级了）上面的两张图就反映出了let所声明的变量只在let命令...

详解ECMAScript6变量的解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring），本文主要和大家分享嵌套数组的解构例子，大家一起看看吧var [a, b, c] = [1, 2, 3];这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz"]; third ...

ECMASCRIPT - 最新教程

ECMAScript—事件饮冰三年-人工智能-Python-46 Python之...实际上ECMAScript中并没有对类的定义 JavaScript大杂烩13 - 总结ECMAScript ...ECMAScript6 － Iterators and Generat...ECMAScript 原始值和引用值 ECMAScript 总结 javascript学习笔记---ECMAScript 语句 SharePoint 使用ECMAscript对象模型来读...ECMAScript 6新特性之Proxy

ECMASCRIPT - 最热教程

ECMAScript6轮播图实践知识总结 ECMAScript-18 【错误信息-trycatch-严...ECMAScript6中Promise是什么？有什么用...ECMAScript 5中的数组方法 ECMAScript 2020 的新特性 ECMAScript5中的对象存取器属性：gette...《JavaScript高级程序设计》阅读笔记（...ES6新特性_ES6的Rest参数---JavaScript...一小时学会ECMAScript6新特性（二）ECMAScript 定义类、对象