20分钟快速学习了解下ES6

了解 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
true

ES6 默认参数

在 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
f4

ES6 箭头函数

使用箭头函数可以让代码更简洁，但也要注意箭头函数的局限性，而且箭头函数本身并没有this，this指向父级。

let f1 = a => a;let f2 = (a, b) => {
   return a + b;
}console.log(f1(10));
console.log(f2(10, 10));10
20

ES6 对象表达式

使用 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
false

ES6 复制对象

使用 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
true

ES6 原型

使用方法如下。

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
true

ES6 超级

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 hello

ES6 设置

定义获取或修改类属性的 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
John

ES6 静态

使用 static 关键字修改的方法可以直接使用，无需实例化对象

class stu {
   static say(str) {
       console.log(str);
   }
}
stu.say("This is a static method");This is a static method

ES6 扩展

使用继承，可以减少代码冗余，例如：

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-24

ES6 套装

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前端开发

链接: https://www.fly63.com/article/detial/12103

了解 ES6

ES6 块作用域 let

ES6 解构数组

ES6 解构对象

ES6 模板字符串

ES6 检查字符串是否包含其他字符串

ES6 默认参数

ES6 扩展运算符

ES6 展开运算符

ES6 函数名

ES6 箭头函数

ES6 对象表达式

ES6 常量

ES6 对象属性名

ES6 检查两个值是否相等

ES6 复制对象

ES6 设置对象的原型

ES6 原型

ES6 超级

ES6 生成迭代器

ES6 设置

ES6 静态

ES6 扩展

ES6 套装

ES6 Map

ES6 模块化

Recommend

White House reveals plans for big tech with focus on privacy, transparency, and...

京东中秋消费报告

四川泸州高新区用上“防疫泡泡” 疫情防控企业生产两不误

Should Congress save newspapers from Google?

Motorola Edge 30 Ultra and Edge 30 Fusion set to launch in India on September 13

Merriam-Webster just yeeted a bunch of internet slang into the dictionary

Keep没有新故事：3年亏了59亿元，卖会员还是带货？

Write a C program to generate random numbers

crosslight仿真之(三)功能集-1-表象单位

The Woman Who Became a Company Has Lessons for a Post-Roe World

About Joyk