blog/Full-Stack-Notes
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ES6基础

Browse Source
This commit is contained in:
罗祥 2019-12-16 16:58:41 +08:00
parent ab217d2d04
commit 33d9d403ea
1 changed files with 171 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

341
notes/ES6_基础.md
View File

@ -55,6 +55,7 @@
</nav> </nav>
## 一、变量声明 ## 一、变量声明
### 1.1 var ### 1.1 var
@ -107,13 +108,13 @@ console.log(window.RegExp === RegExp); // true
```javascript ```javascript
function test(flag) { function test(flag) {
if (flag) { if (flag) {
let value = "blue"; // value的作用域被限制在该{}所包裹的代码块中 let value = "blue"; // value的作用域被限制在该{}所包裹的代码块中
console.log(value); console.log(value);
} else { } else {
console.log(value); //value在此处不能访问 console.log(value); //value在此处不能访问
} }
console.log(value); //value在此处不能访问 console.log(value); //value在此处不能访问
} }
``` ```
@ -143,12 +144,12 @@ ES6 中新增了 `const` 关键字，用于声明不可变的常量，它类似
```javascript ```javascript
const author = { const author = {
name: "heibai", name: "heibai",
}; };
author.name = "ying"; // 可以修改对象的属性 author.name = "ying"; // 可以修改对象的属性
console.log(author); // 但不可以对 const 修饰的常量进行重新赋值 console.log(author); // 但不可以对 const 修饰的常量进行重新赋值
author = { author = {
name: "heibaiying" name: "heibaiying"
}; };
``` ```
@ -158,9 +159,9 @@ author = {
```javascript ```javascript
(function test() { (function test() {
console.log(typeof value); // ReferenceError: value is not defined console.log(typeof value); // ReferenceError: value is not defined
let value = "blue"; // 下面的语句都不会被输出 let value = "blue"; // 下面的语句都不会被输出
console.log(value); console.log(value);
})(); })();
``` ```
@ -169,8 +170,8 @@ author = {
```javascript ```javascript
console.log(typeof value); // undefined console.log(typeof value); // undefined
(function test() { (function test() {
let value = "blue"; let value = "blue";
console.log(value); // blue console.log(value); // blue
})(); })();
``` ```
@ -205,12 +206,12 @@ list.forEach(function (func) {
```javascript ```javascript
let list = []; let list = [];
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
list.push(function () { list.push(function () {
console.log(i); console.log(i);
}); });
} }
list.forEach(function (func) { list.forEach(function (func) {
func(); func();
}); });
// 输出 0 到 9 // 输出 0 到 9
``` ```
@ -272,27 +273,27 @@ console.log("hello".repeat(2));
```java ```java
// 1.模板字面量 // 1.模板字面量
let name = "Nicholas", let name = "Nicholas",
message01 = `Hello, ${name}.`; message01 = `Hello, ${name}.`;
console.log(message01); // "Hello, Nicholas." console.log(message01); // "Hello, Nicholas."
// 2.支持JS表达式 // 2.支持JS表达式
let count = 10, let count = 10,
price = 0.25, price = 0.25,
message02 = `${count} items cost $${(count * price).toFixed(2)}.`; message02 = `${count} items cost $${(count * price).toFixed(2)}.`;
console.log(message02); // "10 items cost $2.50." console.log(message02); // "10 items cost $2.50."
// 3.多行字符串 // 3.多行字符串
let message03 = `Multiline let message03 = `Multiline
string`; string`;
console.log(message03); // Hello, console.log(message03); // Hello,
// string // string
// 4.多行字符串与模板嵌套 // 4.多行字符串与模板嵌套
let fullName = "Nicholas", let fullName = "Nicholas",
message04 = `Hello, message04 = `Hello,
my name is ${fullName}.`; my name is ${fullName}.`;
console.log(message04); // Hello, console.log(message04); // Hello,
// my name is Nicholas. // my name is Nicholas.
``` ```
@ -305,8 +306,8 @@ ES6 中支持为函数的参数指定默认值，该默认值可以是基本类
```javascript ```javascript
function request(url, timeout = 2000, callback = function() {}) { function request(url, timeout = 2000, callback = function() {}) {
console.log(`url: ${url}, timeout: ${timeout}`); console.log(`url: ${url}, timeout: ${timeout}`);
callback(); callback();
} }
request("GitHub"); // url: GitHub, timeout: 2000 request("GitHub"); // url: GitHub, timeout: 2000
@ -320,7 +321,7 @@ request("GitHub", 5000, () => console.log("超时异常")); // url: GitHub, time
```javascript ```javascript
function test01(first, second = first) { function test01(first, second = first) {
console.log(`first: ${first}, second: ${second}`); console.log(`first: ${first}, second: ${second}`);
} }
``` ```
@ -328,7 +329,7 @@ function test01(first, second = first) {
```javascript ```javascript
function test02(first = second, second) { function test02(first = second, second) {
console.log(`first: ${first}, second: ${second}`); console.log(`first: ${first}, second: ${second}`);
} }
test02(undefined,2); // ReferenceError: second is not defined test02(undefined,2); // ReferenceError: second is not defined
@ -343,7 +344,7 @@ test02(1,2);
```javascript ```javascript
function each(...elements) { function each(...elements) {
elements.forEach((element) => console.log(element)); elements.forEach((element) => console.log(element));
} }
test(1, 2, 3, 4, 5); test(1, 2, 3, 4, 5);
@ -356,8 +357,8 @@ test(1, 2, 3, 4, 5);
```javascript ```javascript
let object = { let object = {
set name(...value) { // 异常：Setter function argument must not be a rest parameter set name(...value) { // 异常：Setter function argument must not be a rest parameter
} }
}; };
``` ```
@ -367,7 +368,7 @@ let object = {
```javascript ```javascript
function each(...elements) { function each(...elements) {
elements.forEach((element) => console.log(element)); elements.forEach((element) => console.log(element));
} }
let list = [1, 2, 3, 4, 5]; let list = [1, 2, 3, 4, 5];
@ -401,27 +402,27 @@ let doNothing02 = function() {};
let reflect01 = value => value; let reflect01 = value => value;
// 等效箭头表达式： // 等效箭头表达式：
let reflect02 = function (value) { let reflect02 = function (value) {
return value; return value;
}; };
let sum01 = (num1, num2) => num1 + num2; let sum01 = (num1, num2) => num1 + num2;
// 等效箭头表达式： // 等效箭头表达式：
let sum02 = function (num1, num2) { let sum02 = function (num1, num2) {
return num1 + num2; return num1 + num2;
}; };
let getDetail01 = id => ({id: id, name: "heibaiying"}); let getDetail01 = id => ({id: id, name: "heibaiying"});
// 等效箭头表达式： // 等效箭头表达式：
let getDetail02 = function (id) { let getDetail02 = function (id) {
return { return {
id: id, id: id,
name: "heibaiying" name: "heibaiying"
}; };
}; };
function test() { function test() {
// // 箭头函数能访问包含它的函数的arguments // // 箭头函数能访问包含它的函数的arguments
return () => arguments[0]; return () => arguments[0];
} }
let arrowFunction = test("hello"); let arrowFunction = test("hello");
console.log(arrowFunction()); // hello console.log(arrowFunction()); // hello
@ -641,8 +642,8 @@ ES6 允许按照一定模式，从数组和对象中提取值来对变量进行
```javascript ```javascript
let person = { let person = {
name: "heibaiying", name: "heibaiying",
age: 18 age: 18
}; };
let {name, age} = person; let {name, age} = person;
console.log(name); // "heibaiying" console.log(name); // "heibaiying"
@ -653,8 +654,8 @@ ES6 还支持为待解构的变量传入默认值：
```javascript ```javascript
let person = { let person = {
name: "heibaiying", name: "heibaiying",
age: 18 age: 18
}; };
let {name, age, occupation = "programmer"} = person; let {name, age, occupation = "programmer"} = person;
console.log(occupation); // programmer console.log(occupation); // programmer
@ -664,8 +665,8 @@ console.log(occupation); // programmer
```javascript ```javascript
let person = { let person = {
name: "heibaiying", name: "heibaiying",
age: 18 age: 18
}; };
let {name: myName, age: myAge, occ: occupation = "programmer"} = person; let {name: myName, age: myAge, occ: occupation = "programmer"} = person;
console.log(myName); console.log(myName);
@ -677,11 +678,11 @@ console.log(occupation);
```javascript ```javascript
let person = { let person = {
name: "heibaiying", name: "heibaiying",
age: 18, age: 18,
teacher: { teacher: {
name: "heibai" name: "heibai"
} }
}; };
let {teacher: {name: teacherName}} = person; let {teacher: {name: teacherName}} = person;
console.log(teacherName); // "heibai" console.log(teacherName); // "heibai"
@ -758,12 +759,12 @@ let a = 1, b = 2;
```javascript ```javascript
function setCookie(name, value, options) { function setCookie(name, value, options) {
options = options || {}; options = options || {};
let secure = options.secure, let secure = options.secure,
path = options.path, path = options.path,
domain = options.domain, domain = options.domain,
expires = options.expires; expires = options.expires;
..... .....
} }
``` ```
@ -771,12 +772,12 @@ function setCookie(name, value, options) {
```javascript ```javascript
function setCookie(name, value, {secure, path, domain, expires} = {}) { function setCookie(name, value, {secure, path, domain, expires} = {}) {
console.log(`secure: ${secure}, path: ${path}, domain:${domain}, expires:${expires}`) console.log(`secure: ${secure}, path: ${path}, domain:${domain}, expires:${expires}`)
} }
setCookie("type", "js", { setCookie("type", "js", {
secure: true, secure: true,
expires: 60000 expires: 60000
}); // secure: true, path: undefined, domain:undefined, expires:60000 }); // secure: true, path: undefined, domain:undefined, expires:60000
``` ```
@ -784,12 +785,12 @@ setCookie("type", "js", {
```javascript ```javascript
function setCookie02(name, value, function setCookie02(name, value,
{ {
secure = false, secure = false,
path = "/", path = "/",
domain = "example.com", domain = "example.com",
expires = new Date(Date.now() + 360000000) expires = new Date(Date.now() + 360000000)
} = {} ) { } = {} ) {
} }
``` ```
@ -872,11 +873,11 @@ console.log(symbol05); // Symbol(age)
```javascript ```javascript
function getPerson(name, age) { function getPerson(name, age) {
return { return {
name, name,
age, age,
[Symbol("createTime")]: Date.now() [Symbol("createTime")]: Date.now()
} }
} }
let person = getPerson("heibaiying", 10); let person = getPerson("heibaiying", 10);
@ -922,8 +923,8 @@ Set 在使用 `forEach()` 进行遍历时，会接收三个参数：
```javascript ```javascript
let set03 = new Set(["hei", "bai", "ying"]); let set03 = new Set(["hei", "bai", "ying"]);
set03.forEach(function (value, key, ownerSet) { set03.forEach(function (value, key, ownerSet) {
console.log(key + " " + value); console.log(key + " " + value);
console.log(ownerSet === set03); console.log(ownerSet === set03);
}); });
// hei hei // hei hei
// true // true
@ -939,27 +940,27 @@ set03.forEach(function (value, key, ownerSet) {
let Set04 = new Set([1, 2]); let Set04 = new Set([1, 2]);
let processor = { let processor = {
// 输出方法 // 输出方法
output(value) { output(value) {
console.log(value); console.log(value);
}, },
process(dataSet) { process(dataSet) {
dataSet.forEach(function (value) { dataSet.forEach(function (value) {
this.output(value); // 调用this指代对象的输出方法 this.output(value); // 调用this指代对象的输出方法
}, this); }, this);
// 1. 给forEach()传入一个this作为第二个参数 // 1. 给forEach()传入一个this作为第二个参数
} }
}; };
processor.process(Set04); processor.process(Set04);
// 2. 使用箭头函数，箭头函数的this由包含它的第一个非箭头函数来决定 // 2. 使用箭头函数，箭头函数的this由包含它的第一个非箭头函数来决定
let set05 = new Set([1, 2]); let set05 = new Set([1, 2]);
let processor = { let processor = {
output(value) { output(value) {
console.log(value); console.log(value);
}, },
process(dataSet) { process(dataSet) {
dataSet.forEach((value) => this.output(value)); dataSet.forEach((value) => this.output(value));
} }
}; };
processor.process(set05); processor.process(set05);
``` ```
@ -970,7 +971,7 @@ Set 对内部存储的对象持有的是强引用，这意味只要对于 Set
```javascript ```javascript
let set07 = new Set(), let set07 = new Set(),
item = {name: "heibaiying"}; item = {name: "heibaiying"};
set07.add(item); set07.add(item);
item = null; item = null;
// 将item置为null,其所指向的对象 {name: "heibaiying"} 仍然不会被垃圾回收，因为其还被Set所持有 // 将item置为null,其所指向的对象 {name: "heibaiying"} 仍然不会被垃圾回收，因为其还被Set所持有
@ -1012,8 +1013,8 @@ console.log(map02.size); // 2
// 3.进行遍历 // 3.进行遍历
let map03 = new Map([["name", "Nicholas"], ["age", 25]]); let map03 = new Map([["name", "Nicholas"], ["age", 25]]);
map03.forEach(function (value, key, ownerMap) { map03.forEach(function (value, key, ownerMap) {
console.log(key + " " + value); console.log(key + " " + value);
console.log(ownerMap === map03); console.log(ownerMap === map03);
}); });
``` ```
@ -1031,20 +1032,20 @@ WeakMap 和上面的 WeakSet 类似，用于解决 Map 存在的强引用问题
```javascript ```javascript
function createIterator(items) { function createIterator(items) {
let i = 0; let i = 0;
return { return {
hasNext() { hasNext() {
return i < items.length; return i < items.length;
}, },
next() { next() {
return i < items.length ? items[i++] : undefined; return i < items.length ? items[i++] : undefined;
}, },
}; };
} }
let iterator = createIterator([1, 2, 3, 4, 5]); let iterator = createIterator([1, 2, 3, 4, 5]);
while (iterator.hasNext()) { while (iterator.hasNext()) {
console.log(iterator.next()); console.log(iterator.next());
} }
``` ```
@ -1054,9 +1055,9 @@ while (iterator.hasNext()) {
```javascript ```javascript
function* createIterator(items) { function* createIterator(items) {
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
yield items[i]; yield items[i];
} }
} }
let iterator = createIterator([1, 2, 3]); let iterator = createIterator([1, 2, 3]);
@ -1070,9 +1071,9 @@ console.log(iterator.next()); // { value: undefined, done: true }
```javascript ```javascript
function * getIterator() { function * getIterator() {
yield 1; yield 1;
yield 2; yield 2;
yield 3; yield 3;
} }
let iterator = getIterator(); let iterator = getIterator();
console.log(iterator.next().value); // 1 console.log(iterator.next().value); // 1
@ -1089,7 +1090,7 @@ ES6 中的大多数集合都支持使用 for-of 循环，示例如下：
```javascript ```javascript
let colors = ["red", "green", "blue"]; let colors = ["red", "green", "blue"];
for (let color of colors){ for (let color of colors){
console.log(color) console.log(color)
} }
``` ```
@ -1097,18 +1098,18 @@ for (let color of colors){
```javascript ```javascript
let collection = { let collection = {
items: [], items: [],
* [Symbol.iterator]() { * [Symbol.iterator]() {
for (let item of this.items) { for (let item of this.items) {
yield item; yield item;
} }
} }
}; };
collection.items.push(1); collection.items.push(1);
collection.items.push(2); collection.items.push(2);
collection.items.push(3); collection.items.push(3);
for (let x of collection) { for (let x of collection) {
console.log(x); console.log(x);
} }
``` ```
@ -1134,21 +1135,21 @@ map.set("name", "heibaiying");
map.set("age", "12"); map.set("age", "12");
for (let entry of list.entries()) { for (let entry of list.entries()) {
console.log(entry); console.log(entry);
} }
// [ 0, 'red' ] // [ 0, 'red' ]
// [ 1, 'green' ] // [ 1, 'green' ]
// [ 2, 'blue' ] // [ 2, 'blue' ]
for (let entry of set.entries()) { for (let entry of set.entries()) {
console.log(entry); console.log(entry);
} }
// [ 'red', 'red' ] // [ 'red', 'red' ]
// [ 'green', 'green' ] // [ 'green', 'green' ]
// [ 'blue', 'blue' ] // [ 'blue', 'blue' ]
for (let entry of map.entries()) { for (let entry of map.entries()) {
console.log(entry); console.log(entry);
} }
// [ 'name', 'heibaiying' ] // [ 'name', 'heibaiying' ]
@ -1162,7 +1163,7 @@ for (let entry of map.entries()) {
```javascript ```javascript
var divs = document.getElementsByTagName("div"); var divs = document.getElementsByTagName("div");
for (let div of divs) { for (let div of divs) {
console.log(div.id); console.log(div.id);
} }
``` ```
@ -1171,7 +1172,7 @@ for (let div of divs) {
```javascript ```javascript
let message = "abc"; let message = "abc";
for (let i = 0; i < message.length; i++) { for (let i = 0; i < message.length; i++) {
console.log(message[i]); console.log(message[i]);
} }
// a // a
// b // b
@ -1197,20 +1198,20 @@ ES6 中的类和函数一样，是一等公民，这意味着它能作为参数
```javascript ```javascript
class Employee { class Employee {
/*构造器*/ /*构造器*/
constructor(name, age) { constructor(name, age) {
this.name = name; this.name = name;
this.age = age; this.age = age;
} }
/*实例方法*/ /*实例方法*/
sayName() { sayName() {
console.log("员工：" + this.name); console.log("员工：" + this.name);
} }
/*静态方法*/ /*静态方法*/
static create(name) { static create(name) {
return new Employee(name); return new Employee(name);
} }
} }
let employee = new Employee("heibai"); let employee = new Employee("heibai");
@ -1224,10 +1225,10 @@ employee.sayName();
```javascript ```javascript
class Manager extends Employee { class Manager extends Employee {
/*覆写原有的方法*/ /*覆写原有的方法*/
sayName() { sayName() {
console.log("领导：" + this.name); console.log("领导：" + this.name);
} }
} }
let manager = new Manager("ying"); let manager = new Manager("ying");
@ -1238,11 +1239,11 @@ manager.sayName();
```javascript ```javascript
function getBase(flag) { function getBase(flag) {
if (flag) { if (flag) {
return Manager; return Manager;
} else { } else {
return Employee; return Employee;
} }
} }
class CEO extends getBase(true) { class CEO extends getBase(true) {
@ -1273,28 +1274,28 @@ ES6 引入代理的真正作用是：允许用户拦截在目标对象上的底
```javascript ```javascript
let person = { let person = {
name: "heibai", name: "heibai",
idCard: null idCard: null
}; };
// 建立代理 // 建立代理
let proxy = new Proxy(person, { let proxy = new Proxy(person, {
// 拦截写入操作 // 拦截写入操作
set(target, propertyKey, value, receiver) { set(target, propertyKey, value, receiver) {
// 对输入的合法性进行校验 // 对输入的合法性进行校验
if (propertyKey === "idCard" && value.length !== 18) { if (propertyKey === "idCard" && value.length !== 18) {
throw new Error("输入的身份证长度必须为18位"); throw new Error("输入的身份证长度必须为18位");
} }
// 调用反射进行修改 // 调用反射进行修改
return Reflect.set(target, propertyKey, value, receiver); return Reflect.set(target, propertyKey, value, receiver);
}, },
// 拦截读取操作 // 拦截读取操作
get(target, propertyKey, receiver) { get(target, propertyKey, receiver) {
if (propertyKey === "idCard") { if (propertyKey === "idCard") {
throw new Error("身份证是私密信息，无权读取"); throw new Error("身份证是私密信息，无权读取");
} }
// 调用反射获取值 // 调用反射获取值
return Reflect.get(target, propertyKey, receiver); return Reflect.get(target, propertyKey, receiver);
} }
}); });
proxy.name = "ying"; proxy.name = "ying";
console.log(proxy.name); console.log(proxy.name);
@ -1344,19 +1345,19 @@ export const magicNumber = 7;
// 2.导出函数 // 2.导出函数
export function sum(num1, num2) { export function sum(num1, num2) {
return num1 + num1; return num1 + num1;
} }
// 3.导出类 // 3.导出类
export class Rectangle { export class Rectangle {
constructor(length, width) { constructor(length, width) {
this.length = length; this.length = length;
this.width = width; this.width = width;
} }
} }
function multiply(num1, num2) { function multiply(num1, num2) {
return num1 * num2; return num1 * num2;
} }
// 4.导出已有的函数 // 4.导出已有的函数
@ -1422,18 +1423,18 @@ ES6 支持使用 `default` 关键字来实现默认值导出，一个模块只
```javascript ```javascript
// 方式一 // 方式一
export default function(num1, num2) { export default function(num1, num2) {
return num1 + num2; return num1 + num2;
} }
// 方式二 // 方式二
function sum(num1, num2) { function sum(num1, num2) {
return num1 + num2; return num1 + num2;
} }
export default sum; export default sum;
// 方式三 // 方式三
function sum(num1, num2) { function sum(num1, num2) {
return num1 + num2; return num1 + num2;
} }
export { sum as default }; export { sum as default };
``` ```
@ -1465,9 +1466,9 @@ export * from "./example.js";
```javascript ```javascript
Array.prototype.pushAll = function(items) { Array.prototype.pushAll = function(items) {
if (!Array.isArray(items)) { if (!Array.isArray(items)) {
throw new TypeError("Argument must be an array."); throw new TypeError("Argument must be an array.");
} }
return this.push(...items); return this.push(...items);
}; };
``` ```