了解 ES6
根据维基百科解释“ECMAScript 规范是由 Netscape 的 Brendan Eich 开发的脚本语言的标准化规范；最初命名为 Mocha，然后是 LiveScript，最后是 JavaScript。”
ECMAScript 2015 (ES2015) 是第 6 版，最初称为 ECMAScript 6 (ES6)，它添加了许多新功能，这些新功能后来成为 Web 开发人员工具包的重要组成部分。本文旨在帮助您以轻松易懂的方式了解这些新的 ES6 特性。
ES6 块作用域 let
首先，什么是范围？范围是指来自我们程序不同部分的变量的可访问性。在使用 let 声明变量之前，JavaScript 变量具有全局范围和函数范围（使用 var 声明时）。当使用 let 声明变量时，ES6 为 JavaScript 带来了块级范围。
{
var a = ":watermelon:";
let b = ":golf:";
}
console.log(a);
console.log(b);:watermelon:
Uncaught ReferenceError: b is not defined可以看出，我们使用var关键字在block中定义了变量“a”，可以全局访问。所以var声明的变量是全局的，但是，我们希望变量在block中生效，退出block时不可访问。然后，可以使用 ES6 新的块级作用域关键字 let 来声明变量，就像这里的变量 b 一样，会报错说 b 没有定义。
ES6 解构数组
首先，我们定义一个返回数组的函数。然后我们调用该函数并将结果存储在变量 temp 中。要访问每个值，我们必须打印 temp[0]、temp[1]、temp[2]。使用解构，我们可以直接调用早餐函数并在此处分离出变量 a、b 和 c 中的每个单独的值（第一个变量将被分配第一个值，第二个变量将被分配第二个值，依此类推）。最后，我们打印三个变量，看看有没有问题。
function breakfast() {
return [':watermelon:', ':hamburger:', ':pizza:'];
}
var temp = breakfast();
console.log(temp[0], temp[1], temp[2]);let [a, b, c] = breakfast();
console.log(a, b, c);:watermelon: :hamburger: :pizza:
:watermelon: :hamburger: :pizza:ES6 解构对象
breakfast函数返回一个对象。使用解构，我们可以直接检索对象的值并将它们存储在变量 a、b 和 c 中。键值对中的key代表映射的实际对象的键名，value为自定义变量。解构完成后会自动完成赋值，然后调用早餐函数返回对象。然后，打印变量a、b、c，可以看到没有问题。
function breakfast() {
return { a: ':watermelon:', b: ':pizza:', c: ':hamburger:' }
}
let { a: a, b: b, c: c } = breakfast();
console.log(a, b, c);:watermelon: :pizza: :hamburger:ES6 模板字符串
在使用模板字符串之前，我们使用 + 运算符连接字符串。
取而代之的是，我们现在可以使用 ES6 提供的模板字符串，首先使用 `` 来包裹字符串，当要使用变量时，使用 ${variable}。
let a = ':watermelon:',
b = ' ️';let c = 'eat watermelon' + a + 'watch TV' + b;
console.log(c);let d = `eat watermelon ${a} watch TV ${b}`;
console.log(d);eat watermelon:watermelon:watch TV ️
eat watermelon :watermelon: watch TV ️ES6 检查字符串是否包含其他字符串
使用这些函数，可以轻松检查字符串是否以某物开头，是否以某物结尾，以及是否包含任何字符串等。
let str = 'hello, my name is Tom :heart:';
console.log(str.startsWith('hello'));
console.log(str.endsWith(':heart:'));
console.log(str.endsWith('hello'));
console.log(str.includes(" "));true
true
false
trueES6 默认参数
在 ES6 中，可以使用默认参数。调用函数时，当参数没有赋值时，会使用设置的默认参数执行。分配参数时，它将使用新分配的值执行，覆盖默认值。使用以下内容：
function say(str) {
console.log(str);
}
function say1(str = 'hey-hey') {
console.log(str);
}
say();
say1();
say1(':heart:');undefined
hey-hey
:heart:ES6 扩展运算符
使用 ... 扩展元素以便于操作。按如下方式使用：
let arr = [':heart:', ':blush:', ':heart_eyes:'];
console.log(arr);
console.log(...arr);
let brr = ['prince', ...arr];
console.log(brr);
console.log(...brr);[ ':heart:', ':blush:', ':heart_eyes:' ]
:heart: :blush: :heart_eyes:
[ 'prince', ':heart:', ':blush:', ':heart_eyes:' ]
prince :heart: :blush: :heart_eyes:ES6 展开运算符
用于函数参数，接收参数数组，使用以下内容：
function f1(a, b, ...c) {
console.log(a, b, c);
console.log(a, b, ...c);
}
f1(':apple:',':rainbow:','☃️',':blush:');:apple: :rainbow: [ '☃️', ':blush:' ]
:apple: :rainbow: ☃️ :blush:ES6 函数名
使用 .name 获取函数的名称，如下：
function f1() { }
console.log(f1.name);
let f2 = function () { };
console.log(f2.name);
let f3 = function f4() { };
console.log(f3.name);f1
f2
f4ES6 箭头函数
使用箭头函数可以让代码更简洁，但也要注意箭头函数的局限性，而且箭头函数本身并没有this，this指向父级。
let f1 = a => a;let f2 = (a, b) => {
return a + b;
}console.log(f1(10));
console.log(f2(10, 10));10
20ES6 对象表达式
使用 ES6 对象表达式，如果对象属性与值相同，则可以省略值，不写函数也可以写函数。用法如下：
let a = ':rainbow:';
let b = '☃️';const obj = {
a: a,
b: b,
say: function () {}
}const es6obj = {
a,
b,
say() {}
}console.log(obj);
console.log(es6obj);{ a: ':rainbow:', b: '☃️', say: [Function: say] }
{ a: ':rainbow:', b: '☃️', say: [Function: say] }ES6 常量
使用 const 关键字定义度量。const 限制为度量分配值的操作，而不是度量中的值。使用以下内容：
const app = ['☃️', ':rainbow:'];
console.log(...app);
app.push(' ');
console.log(...app);
app = 10;
可以看出，当再次给测量赋值时，报错。
☃️ :rainbow:
☃️ :rainbow:
app = 10;
^
TypeError: Assignment to constant variable.ES6 对象属性名
使用点定义对象属性时，如果属性名称中包含空格字符，则为非法，语法不能通过。使用【属性名】就可以完美解决，不仅可以直接写属性名，还可以使用变量来指定，具体使用如下：
let obj = {};
let a = 'little name';
obj.name = 'prince';
// It is illegal to use dots to define properties with spaces between them
// obj.little name = 'little Prince';
obj[a] = 'little Prince';
console.log(obj);{ name: 'prince', 'little name': 'little Prince' }ES6 检查两个值是否相等
使用 === 或 == 比较某些特殊值的结果可能无法满足您的需求。可以用Object.is（第一个值，第二个值）来判断，说不定你会开心 Laughed
console.log(NaN == NaN);
console.log(+0 == -0);
console.log(Object.is(NaN, NaN));
console.log(Object.is(+0, -0));false
true
true
falseES6 复制对象
使用 Object.assign() 将一个对象复制到另一个对象，如下所示：
let obj = {};
Object.assign(
// source
obj,
// Copy target object
{ a: '☃️' }
);
console.log(obj);{ a: '☃️' }ES6 设置对象的原型
使用 es6，可以如下设置对象的原型：
let obj1 = {
get() {
return 1;
}
}
let obj2 = {
a: 10,
get() {
return 2;
}
}
let test = Object.create(obj1);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
Object.setPrototypeOf(test, obj2);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);1
true
2
trueES6 原型
使用方法如下。
let obj1 = {
get() {
return 1;
}
}
let obj2 = {
a: 10,
get() {
return 2;
}
}
let test = {
__proto__: obj1
}
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
test.__proto__ = obj2;
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);1
true
2
trueES6 超级
let obj1 = {
get() {
return 1;
}
}
let test = {
__proto__: obj1,
get() {
return super.get() + ' ☃️';
}
}
console.log(test.get());1 ☃️ES6 生成迭代器
学习之前，先写一个迭代器
function die(arr) {
let i = 0;return {
next() {
let done = (i >= arr.length);
let value = !done ? arr[i++] : undefined;return {
value: value,
done: done
}
}
}
}
let arr = ['☃️', ' ', ':rainbow:'];let dieArr = die(arr);
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());{ value: '☃️', done: false }
{ value: ' ', done: false }
{ value: ':rainbow:', done: false }
{ value: undefined, done: true }OK，看看简化的生成器
function* die(arr) {
for (let i = 0; i < arr.length; i++) {
yield arr[i];
}
}
let test = die([':rainbow:','☃️']);
console.log(test.next());
console.log(test.next());
console.log(test.next());{ value: ':rainbow:', done: false }
{ value: '☃️', done: false }
{ value: undefined, done: true }使用 es6 可以快速轻松地构建类
class stu {
constructor(name) {
this.name = name;
}
say() {
return this.name + 'say hello';
}
}
let xiaoming = new stu("Tom");
console.log(xiaoming.say());Tom say helloES6 设置
定义获取或修改类属性的 get/set 方法
class stu {
constructor(name) {
this.name = name;
}
get() {
return this.name;
}
set(newStr) {
this.name = newStr;
}
}
let xiaoming = new stu("Tom");
console.log(xiaoming.get());
xiaoming.set("John")
console.log(xiaoming.get());Tom
JohnES6 静态
使用 static 关键字修改的方法可以直接使用，无需实例化对象
class stu {
static say(str) {
console.log(str);
}
}
stu.say("This is a static method");This is a static methodES6 扩展
使用继承，可以减少代码冗余，例如：
class Person {
constructor(name, bir) {
this.name = name;
this.bir = bir;
}
showInfo() {
return 'name：' + this.name + 'Birthday：' + this.bir;
}
}
class A extends Person {
constructor(name, bir) {
super(name, bir);
}
}
let zhouql = new A("Tom", "2002-08-24");
// Tom itself does not have a showInfo method, it is inherited from Person
console.log(zhouql.showInfo());Name: Tom Birthday: 2002-08-24ES6 套装
Set 集合，与数组不同，Set 集合中不允许有重复元素:
// Create Set collection
let food = new Set(':apple: ');
// Repeatedly add, only one can enter
food.add(':watermelon:');
food.add(':watermelon:');console.log(food);
// current collection size
console.log(food.size);
// Check if an element exists in a collection
console.log(food.has(':watermelon:'));
// remove an element from a collection
food.delete(' ');
console.log(food);
// loop through the collection
food.forEach(f => {
console.log(f);
});
// empty collection
food.clear();
console.log(food);Set(3) { ':apple:', ' ', ':watermelon:' }
3
true
Set(2) { ':apple:', ':watermelon:' }
:apple:
:watermelon:
Set(0) {}ES6 Map
Map组合存储键值对:
let food = new Map();
let a = {}, b = function () { }, c = "name";food.set(a, ':watermelon:');
food.set(b, ' ');
food.set(b, ' ');
food.set(c, 'rice');console.log(food);
console.log(food.size);
console.log(food.get(a));
food.delete(c);
console.log(food);
console.log(food.has(a));food.forEach((v, k) => {
console.log(`${k} + ${v}`);
});
food.clear();
console.log(food);Map(3) { {} => ':watermelon:', [Function: b] => ' ', 'name' => 'rice' }
3
:watermelon:
Map(2) { {} => ':watermelon:', [Function: b] => ' ' }
true
[object Object] + :watermelon:
function () { } +
Map(0) {}ES6 模块化
使用模块化开发，ES6可以很方便的导入导出一些内容，以及默认导出等细节：
let a = ':watermelon:';
let f1 = function (str = 'you write parameters') {
console.log(str);
}
export { a, f1 };import {a, f1} from './27 module test.js';
console.log(a);
f1();
f1('understood');来源： web前端开发
es6 箭头函数的使用总结，带你深入理解js中的箭头函数
箭头函数是ES6中非常重要的性特性。它最显著的作用就是：更简短的函数,并且不绑定this,arguments等属性，它的this永远指向其上下文的 this。它最适合用于非方法函数，并且它们不能用作构造函数。
详解JavaScript模块化开发require.js
js模块化的开发并不是随心所欲的，为了便于他人的使用和交流，需要遵循一定的规范。目前，通行的js模块规范主要有两种：CommonJS和AMD
js解构赋值,关于es6中的解构赋值的用途总结
ES6中添加了一个新属性解构，允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。用途：交换变量的值、从函数返回多个值、函数参数的定义、提取JSON数据、函数参数的默认值...
ES6中let变量的特点，使用let声明总汇
ES6中let变量的特点：1.let声明变量存在块级作用域，2.let不能先使用再声明3.暂时性死区，在代码块内使用let命令声明变量之前，该变量都是不可用的，4.不允许重复声明
ES6的7个实用技巧
ES6的7个实用技巧包括：1交换元素，2 调试，3 单条语句，4 数组拼接，5 制作副本，6 命名参数，7 Async/Await结合数组解构
ES6 Decorator_js中的装饰器函数
ES6装饰器（Decorator）是一个函数，用来修改类的行为 在设计阶段可以对类和属性进行注释和修改。从本质上上讲，装饰器的最大作用是修改预定义好的逻辑，或者给各种结构添加一些元数据。
基于ES6的tinyJquery
Query作为曾经Web前端的必备利器，随着MVVM框架的兴起，如今已稍显没落。用ES6写了一个基于class简化版的jQuery，包含基础DOM操作，支持链式操作...
ES6 中的一些技巧，使你的代码更清晰，更简短，更易读！
ES6 中的一些技巧：模版字符串、块级作用域、Let、Const、块级作用域函数问题、扩展运算符、函数默认参数、解构、对象字面量和简明参数、动态属性名称、箭头函数、for … of 循环、数字字面量。
Rest/Spread 属性_探索 ES2018 和 ES2019
Rest/Spread 属性:rest操作符在对象解构中的使用。目前，该操作符仅适用于数组解构和参数定义。spread操作符在对象字面量中的使用。目前，这个操作符只能在数组字面量和函数以及方法调用中使用。
使用ES6让你的React代码提升到一个新档次
ES6使您的代码更具表现力和可读性。而且它与React完美配合！现在您已了解更多基础知识：现在是时候将你的ES6技能提升到一个新的水平！嵌套props解构、 传下所有props、props解构、作为参数的函数、列表解构
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!