JavaScript - ES6(ECMAScript 6.0标准)相关记录

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的版本标准

var 和 let 关键字差异

使用 var 关键字来声明变量，会出现重复声明导致变量被覆盖却不会报错的问题。

var camper = 'James';
var camper = 'David';
console.log(camper);
控制台将显示字符串 David

使用 let 的时候，同一名字的变量只能被声明一次。 请注意 “use strict”。 这代表着开启了严格模式，用于检测常见的代码错误以及“不安全”的行为

"use strict";
x = 3.14;
这将显示一个错误 x is not defined

var 和 let 关键字的作用域

使用 var 关键字来声明一个变量的时候，这个变量会被声明成全局变量，或是函数内的局部变量。

let 关键字的作用与此类似，但会有一些额外的特性。 如果在代码块、语句或表达式中使用关键字 let 声明变量，这个变量的作用域就被限制在当前的代码块、语句或表达式之中。

const 常量

const 拥有 let 的所有优点，不同的是，通过 const 声明的变量是只读的。 这意味着通过 const 声明的变量只能被赋值一次，而不能被再次赋值。

防止对象改变（冻结Object.freeze）

当一个对象被冻结的时候，你不能再对它的属性再进行增、删、改的操作。 任何试图改变对象的操作都会被阻止，却不会报错

et obj = {
  name:"FreeCodeCamp",
  review:"Awesome"
};
Object.freeze(obj);

箭头函数编写匿名函数

在不需要给函数命名的情况，尤其是在需要将一个函数作为参数传给另外一个函数使用。
这时，我们会创建匿名函数。 因为这些函数不会在其他地方复用

通常使用：
const myFunc = function() {
  const myVar = "value";
  return myVar;
}
可用箭头函数：
const myFunc = () => {
  const myVar = "value";
  return myVar;
}
当不需要函数体，只返回一个值的时候，箭头函数允许省略 return 关键字和外面的大括号。
const myFunc = () => "value";

带参数的箭头函数

const doubler = (item) => item * 2;
doubler(4);
如果箭头函数只有一个参数，则可以省略参数外面的括号
const doubler = item => item * 2;
多个参数
const multiplier = (item, multi) => item * multi;
multiplier(4, 2);

设置函数的默认参数

const greeting = (name = "Anonymous") => "Hello " + name;
console.log(greeting("John"));
console.log(greeting());
控制台将显示字符串 Hello John 和 Hello Anonymous
参数 name 会在没有得到新的值的时候，默认使用值 Anonymous

rest 操作符使函数可以接收任意数量的参数

function howMany(...args) {
  return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2));
console.log(howMany("string", null, [1, 2, 3], { }));
控制台将显示字符串 You have passed 3 arguments. 和 You have passed 4 arguments.

使用 rest 参数，就不需要查看 args 数组，并且允许我们在参数数组上使用 map()、filter() 和 reduce()

spread 运算符展开数组项

spread 运算符

const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr);
Math.max(arr) 会返回 NaN
因为Math.max() 函数中需要传入的是一系列由逗号分隔的参数，而不是一个数组。 展开操作符可以提升代码的可读性，使代码易于维护。

解构赋值来获取对象的值

const user = { name: 'John Doe', age: 34 };
const { name, age } = user;
name 的值是字符串 John Doe， age 的值是数字 34

使用解构赋值从对象中分配变量

const user = { name: 'John Doe', age: 34 };
const { name: userName, age: userAge } = user;

使用解构赋值从嵌套对象中分配变量

const user = {
  johnDoe: { 
    age: 34,
    email: 'johnDoe@freeCodeCamp.com'
  }
};
解构对象的属性值赋值给具有相同名字的变量：
const { johnDoe: { age, email }} = user;
将对象的属性值赋值给具有不同名字的变量：
const { johnDoe: { age: userAge, email: userEmail }} = user;

使用解构赋值从数组中分配变量

const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c);
控制台将显示 a、b 和 c 的值为 1, 2, 5

使用解构赋值配合 rest 操作符来重新分配数组元素

const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
console.log(a, b);
console.log(arr);
控制台将显示 1, 2 和 [3, 4, 5, 7]

使用解构赋值将对象作为函数的参数传递

const profileUpdate = (profileData) => {
  const { name, age, nationality, location } = profileData;
}
同下
const profileUpdate = ({ name, age, nationality, location }) => {
}

使用模板字面量创建字符串

模板字符串可以使用多行字符串和字符串插值功能。

const person = {
  name: "Zodiac Hasbro",
  age: 56
};

const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;

console.log(greeting);
首先，这个例子使用反引号（`），而不是引号（' 或者 "）将字符串括起来。
其次，注意代码和输出中的字符串都是多行的。 不需要在字符串中插入 \n。 
上面使用的 ${variable} 语法是一个占位符。

使用简单字段编写简洁的对象字面量声明

const getMousePosition = (x, y) => ({ x, y });
等同于
const getMousePosition = (x, y) => ({
  x: x,
  y: y
});

简洁的函数声明

const person = {
  name: "Taylor",
  sayHello() {
    return `Hello! My name is ${this.name}.`;
  }
};
等同于
const person = {
  name: "Taylor",
  sayHello: function() {
    return `Hello! My name is ${this.name}.`;
  }
};

class 语法定义构造函数

class SpaceShuttle {
  constructor(targetPlanet) {
    this.targetPlanet = targetPlanet;
  }
}
const zeus = new SpaceShuttle('Jupiter');
class 关键字声明了一个新的函数，里面添加了一个构造函数。 当用 new 创建一个新的对象时，构造函数会被调用。**加粗样式**
constructor 方法是一个特殊方法，用于创建和初始化 class 创建的对象。 

getter 和 setter 来控制对象的访问

Getter 函数的作用是可以让对象返回一个私有变量，而不需要直接去访问私有变量。

Setter 函数的作用是可以基于传进的参数来修改对象中私有变量。 这些修改可以是计算，或者是直接替换之前的值。

class Book {
  constructor(author) {
    this._author = author;
  }
  // getter
  get writer() {
    return this._author;
  }
  // setter
  set writer(updatedAuthor) {
    this._author = updatedAuthor;
  }
}
const novel = new Book('anonymous');
console.log(novel.writer);
novel.writer = 'newAuthor';
console.log(novel.writer);
控制台将显示字符串 anonymous 和 newAuthor。

JavaScript 文件导入导出

<script type="module" src="filename.js"></script>

用 export 来重用代码块

想在几个不同的 JavaScript 文件中使用这个函数
const uppercaseString = (string) => {
  return string.toUpperCase();
}

const lowercaseString = (string) => {
  return string.toLowerCase()
}

export { uppercaseString, lowercaseString };
导出变量和函数后，就可以在其它文件里导入使用

通过 import 复用 JavaScript 代码

import { uppercaseString, lowercaseString } from './string_functions.js';
uppercaseString("hello");
lowercaseString("WORLD!");
import 会在 string_functions.js里找到 uppercaseString、lowercaseString，只导入这个函数，忽略剩余的部分。
./ 告诉程序在当前文件的相同目录寻找 string_functions.js 文件。 用这种方式导入时，相对路径（./）和文件扩展名（.js）都是必需的。

用 * 从文件中导入所有内容

import * as stringFunctions from "./string_functions.js";
stringFunctions.uppercaseString("hello");
stringFunctions.lowercaseString("WORLD!");
上面的 import 语句会创建一个叫作 stringFunctions 的对象。 这只是一个变量名，可以随便命名。 对象包含 string_functions.js 文件里的所有导出，可以像访问对象的属性那样访问里面的函数。

用 export default 创建一个默认导出

export default function add(x, y) {
  return x + y;
}
export default function(x, y) {
  return x + y;
}
第一个是命名函数，第二个是匿名函数。
export default 用于为模块或文件声明一个返回值，在每个文件或者模块中应当只默认导出一个值。 此外，你不能将 export default 与 var、let 或 const 同时使用。

导入一个默认的导出

import subtract from "./math_functions.js";
subtract(7,4);
被导入的 subtract 值没有被花括号（{}）所包围。 subtract 只是一个变量的名字，对应 math_functions.js 文件的任何默认导出值。 在导入默认导出时，可以使用任何名字。

javaScript Promise（异步编程的一种解决方案）

Promise 是异步编程的一种解决方案 - 它在未来的某时会生成一个值。 任务完成，分执行成功和执行失败两种情况。
Promise 是构造器函数，需要通过 new 关键字来创建。 构造器参数是一个函数，该函数有两个参数 - resolve 和 reject。 通过它们来判断 promise 的执行结果。

const myPromise = new Promise((resolve, reject) => {
});

通过 resolve 和 reject 完成 Promise

Promise 有三个状态：pending、fulfilled 和 rejected。上文创建的 promise 一直阻塞在 pending 状态里，因为没有调用 promise 的完成方法。
Promise 提供的 resolve 和 reject 参数就是用来结束 promise 的。 Promise 成功时调用 resolve，promise 执行失败时调用 reject

const myPromise = new Promise((resolve, reject) => {
  if(condition here) {
    resolve("Promise was fulfilled");
  } else {
    reject("Promise was rejected");
  }
});

用 then 处理 Promise 完成的情况

当程序需要花费未知的时间才能完成时（比如一些异步操作），一般是服务器请求，promise 很有用。
服务器请求会花费一些时间，当结束时，需要根据服务器的响应执行一些操作。
可以用 then 方法来实现， 当 promise 完成 resolve 时会触发 then 方法

在上文代码下方添加
makeServerRequest.then(result => {
  console.log(result)
});
result 即传入 resolve 方法的参数。

使用 catch 处理 Promise 失败的情况

当 promise 失败时会调用 catch 方法。 当 promise 的 reject 方法执行时会直接调用。

makeServerRequest.catch(error => {
  console.log(error);
});
error 是传入 reject 方法的参数。