关于前端:ES6-笔记

ES6 ECMAScript 6

ECMA（European Computer Manufacturers Association / 欧洲计算机制造商协会）

var 和 let

应用 var 关键字申明变量时，它是全局申明的，如果在函数外部申明则是部分申明的。

let 关键字的行为相似，但有一些额定的性能。在代码块、语句或表达式中应用 let 关键字申明变量时，其作用域仅限于该代码块、语句或表达式。

如果创立一个函数，将它存储起来，稍后在应用 i 变量的 for 循环中应用。这么做可能会呈现问题。这是因为存储的函数将始终援用更新后的全局 i 变量的值。

var printNumTwo;
for (var i = 0; i < 3; i++) {if (i === 2) {printNumTwo = function() {return i;};
  }
}
console.log(printNumTwo()); // 3

能够看到，printNumTwo() 打印了 3 而不是 2。这是因为赋值给 i 的值曾经更新，printNumTwo() 返回全局的 i，而不是在 for 循环中创立函数时 i 的值。

const

默认状况下，一些开发人员更喜爱应用 const调配所有变量，除非他们晓得须要重新分配值。只有在这种状况下，他们才应用 let。

然而，重要的是要理解应用 const 调配给变量的对象（包含数组和函数）依然是可变的。应用 const 申明只能避免变量标识符的重新分配。

const s = [5, 6, 7];
s = [1, 2, 3]; // error
s[2] = 45;
console.log(s); // [5, 6, 45] 

如你所见，能够扭转对象 [5, 6, 7] 自身，变量 s 仍将指向更改后的数组 [5, 6, 45]。像所有数组一样，s 中的数组元素是可变的，然而因为应用了 const，所以不能应用变量标识符 s 来指向一个应用赋值运算符的不同数组。

避免对象扭转 Prevent Object Mutation

为了确保数据不被扭转，JavaScript 提供了一个函数 Object.freeze。

任何更改对象的尝试都将被回绝，如果脚本在严格模式下运行，将抛出谬误。

const MATH_CONSTANTS = {PI: 3.14};
Object.freeze(MATH_CONSTANTS);

箭头函数、匿名函数 Arrow Function、Anonymous Function

在 JavaScript 里，会常常遇到不须要给函数命名的状况，尤其是在须要将一个函数作为参数传给另外一个函数的时候。这时，创立匿名函数。因为这些函数不会在其余中央复用，所以不须要给它们命名。

通常的语法：

const myFunc = function() {
  const myVar = "value";
  return myVar;
}

ES6 的写法：

const myFunc = () => {
  const myVar = "value";
  return myVar;
}

当不须要函数体，只返回一个值的时候，箭头函数容许省略 return 关键字和里面的大括号。这样就能够将一个简略的函数简化成一个单行语句。

const myFunc = () => "value"; // value

如果箭头后有花括号，必须加上 return 关键字，如果没有括号则能够省略 return

const listItems = chemists.map(person => {return <li>...</li>;});

const listItems = chemists.map(person => 
                              <li>...</li>);

和个别的函数一样，也能够给箭头函数传递参数。

const doubler = (item) => item * 2;
doubler(4); // 8

如果箭头函数只有一个参数，则能够省略参数里面的括号。

const doubler = item => item * 2; // 8

默认参数 Default Parameter

如果定义一个函数，并调用：

function noDefaultParams(number) {console.log('result':, number ** 2);
}

noDefaultParams() // NaN

因为 JS 的动静个性，不传入参数尽管不报错，然而返回了 Not a Number 无意义的值。

ES6 里容许给函数传入默认参数，来构建更加灵便的函数。默认参数会在参数没有被指定（值为 undefined）的时候起作用。

const increment = (number, value = 1) => number + value;

rest 操作符代表参数列表

ES6 推出了用于函数参数的 rest 操作符创立更加灵便的函数。rest 操作符能够用于创立有一个变量来承受多个参数的函数。这些参数被贮存在一个能够在函数外部读取的数组中。

应用 rest 参数，就不须要查看 args 数组，并且容许在参数数组上应用 map()、filter() 和 reduce()。

留神：rest 必须是最初一个参数。

const sum = (...args) => {return args.reduce((a, b) => a + b, 0);
}

能够把数组的一部分放入另一数组：

const top5 = [1,2,3,4,5];
const [first, second, ...rest] = top5;
console.log(rest); // [3,4,5]

应用 rest 拼接数组和对象

const fruit = ['apple', 'banana'];
const vegetable = ['carrot', 'potato'];
const sum = [...fruit, ...vegetable];
console.log(sum); // ['apple', 'banana', 'carrot', 'potato']

const arr1 = [1,2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]

const flying = {wings: 2}
const car = {wheels: 4}
const flyingCar = {...flying, ...car}
console.log(flyingCar) // {wings: 2, wheels: 4}

spread 操作符开展数组

ES6 引入了开展操作符 ...，能够开展数组以及须要多个参数或元素的表达式。

上面的 ES5 代码应用了 apply() 来计算数组的最大值：

var arr = [6, 89, 3, 45];
var maximus = Math.max.apply(null, arr); // 89

必须应用 Math.max.apply(null, arr)，因为 Math.max(arr) 返回 NaN。Math.max() 函数中须要传入的是一系列由逗号分隔的参数，而不是一个数组。开展操作符能够晋升代码的可读性，使代码易于保护。

const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr); // 89

...arr 返回一个解压的数组。也就是说，它 开展 数组。然而，开展操作符只可能在函数的参数中或者数组中应用。

const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
let arr2;

arr2 = [...arr1]; 

console.log(arr2); // ['JAN', 'FEB', 'MAR', 'APR', 'MAY']

应用 spread 把字符串转化为字符串数组

const greeting = "Hello";
const arrayOfChars = [...greeting];
console.log(arrayOfChars); //  ['H', 'e', 'l', 'l', 'o']

应用 spread 拷贝对象, 数组

spread 做的是浅拷贝（shallow copy）。

const car1 = {
    speed: 200,
    color: 'yellow'
}
const car 2 = {...car1}
car1.speed = 201
console.log(car1.speed, car2.speed)
// 201, 200


const fruits1 = ['apples', 'pears']
const fruits2 = [...fruits]
fruits1.pop()
console.log(fruits1, "not", fruits2)
// ['apples'] 'not' ['apples','pears']

解构 Destructure

解构赋值

解构赋值是 ES6 引入的新语法，用来从数组和对象中提取值，并优雅地对变量进行赋值。

let {PI} = Math;
PI // 3.1415926

PI === Math.PI // true
PI = 1;
PI === Math.PI // false

只能解构对象中存在的货色。解构的变量和原来的变量之间没有关联。

有如下 ES5 代码：

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

const name = user.name; // John Doe
const age = user.age; // 34

上面是应用 ES6 解构赋值语句，实现雷同成果：

const {name, age} = user;

在这里，主动创立 name 和 age 变量，并将 user对象相应属性的值赋值给它们。

赋予变量名

能够给解构的值赋予一个新的变量名，通过在赋值的时候将新的变量名放在冒号前面来实现。

const HIGH_TEMPERATURES = {
  yesterday: 75,
  today: 77,
  tomorrow: 80
};

const {today: highToday, tomorrow: highTomorrow} = HIGH_TEMPERATURES;

解构对象

解构嵌套对象中的值。

const LOCAL_FORECAST = {yesterday: { low: 61, high: 75},
  today: {low: 64, high: 77},
  tomorrow: {low: 68, high: 80}
};

const {today: { low: lowToday, high: highToday} } = LOCAL_FORECAST;

解构数组

与数组解构不同，数组的扩大运算会将数组里的所有内容分解成一个由逗号分隔的列表。所以，不能抉择哪个元素来给变量赋值。而对数组进行解构却能够。

let a = 8, b = 6;
[a, b] = [b, a];

配合

以下代码的后果与应用 Array.prototype.slice() 相似：

const [a, b, ...arr] = [1, 2, 3, 4, 5, 6];
console.log(a, b); // 1, 2
console.log(arr); // [3, 4, 5, 6]

在某些状况下，能够在函数的参数里间接解构对象。

请看以下代码：

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

}

下面的操作解构了传给函数的对象。这样的操作也能够间接在参数里实现：

const profileUpdate = ({name, age, nationality, location}) => {}

当 profileData 被传递到下面的函数时，从函数参数中解构出值以在函数内应用。

应用模版字面量创立字符串 Template Literal

模板字符串是 ES6 的另外一项新的性能。

模板字符串能够应用多行字符串和字符串插值性能。

请看以下代码：

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

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

console.log(greeting); //  `Hello, my name is Zodiac Hasbro!` 和 `I am 56 years old.`。

首先，这个例子应用反引号（` ），而不是引号（' 或者 "）将字符串括起来。

其次，留神代码和输入中的字符串都是多行的。不须要在字符串中插入 \n。下面应用的 ${variable} 语法是一个占位符（变量插值 interpolation）。这样一来，不再须要应用 + 运算符来连贯字符串。当须要在字符串里减少变量的时候，只须要在变量的里面括上 ${ 和 }，并将其放在模板字符串里就能够了。同样，能够在字符串中蕴含其余表达式，例如 ${a + b}。

简洁对象字面量申明 Concise Object Literal

ES6 增加了一些很棒的性能，用于更不便地定义对象。

请看以下代码：

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

getMousePosition 简略的函数，返回领有两个属性的对象。ES6 提供了一个语法糖，打消了相似 x: x 这种冗余的写法。能够只写一次 x，解释器会主动将其转换成 x: x（或成果雷同的内容）。上面是应用这种语法重写的同样的函数：

const getMousePosition = (x, y) => ({x, y});

简洁函数

在 ES5 中，当须要在对象中定义一个函数的时候，必须像这样应用 function 关键字：

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

用 ES6 的语法在对象中定义函数的时候，能够删除 function 关键词和冒号。请看以下例子：

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

class 构造函数 Constructor Function

ES6 提供了一个新的创建对象的语法，应用关键字 class。

值得注意的是，class 只是一个语法糖，它并不像 Java、Python 或者 Ruby 这一类的语言一样，严格履行了面向对象的开发标准。

在 ES5 外面，通常会定义一个构造函数 constructor，而后应用 new 关键字来实例化一个对象：

var SpaceShuttle = function(targetPlanet) {this.targetPlanet = targetPlanet;}
vat zeus = new SpaceShuttle('Moon');

class 语法只是简略地替换了构造函数 constructor 的写法，class 关键字后跟大写的类名：

class SpaceShuttle {constructor(targetPlanet) {this.targetPlanet = targetPlanet;}
  takeOff() {console.log("we are going to the moon!");
  }
}
const zeus = new SpaceShuttle("Moon");

应该留神 class 关键字申明了一个新的函数，外面增加了一个构造函数。当用 new 创立一个新的对象时，构造函数会被调用。

留神：首字母大写驼峰命名法 UpperCamelCase 是 ES6 class 命名的常规，就像下面的 SpaceShuttle。

constructor 办法是一个非凡办法，用于创立和初始化 class 创立的对象。

setter 和 getter

能够从对象中取得一个值，也能够给对象的属性赋值。

这些操作通常被称为 getters 以及 setters。

Getter 函数的作用是能够让对象返回一个公有变量，而不须要间接去拜访公有变量。

Setter 函数的作用是能够基于传进的参数来批改对象中公有变量。这些批改能够是计算，或者是间接替换之前的值。

class Thermostat {constructor(fahrenheit) {this.fahrenheit = fahrenheit;}
  
  get temperature() {return (5 / 9) * (this.fahrenheit - 32);
  }
  
  set temperature(celsius) {this.fahrenheit = (celsius * 9.0) / 5 + 32;
  }
}

留神： 通常会在公有变量前增加下划线（_）。然而，这种做法自身并不是将变量变成公有的。

模块脚本 Module Script

在模块之前，JS 的函数在 window 范畴内是全局的，如果引入的第三方库中的函数名和自定义的雷同就会引起抵触。为了解决这一问题，Mozilla 的工程师创作了 Server JS，当初称为 CommonJS。CommonJS 批示了 JS 在浏览器外的环境应该怎么做，例如在 Node 中，它的问题是浏览器并不能了解 CommonJS 的语法（例如 require 和 module.export）。

ES6 引入了在多个 JavaScript 文件之间共享代码的机制。它能够导出文件的一部分供其它文件应用，而后在须要它的中央按需导入。为了应用这一性能，须要在 HTML 文档里创立一个 type 为 module 的脚本。

应用了 module 类型的脚本能够应用 import 和 export 个性

<html>
  <body>
<script type="module" src="index.js"></script>
  </body>
</html>

export

假如有一个文件 math_functions.js，该文件蕴含了数学运算相干的一些函数。其中一个存储在变量 add 里，该函数承受两个数字作为参数返回它们的和。想在几个不同的 JavaScript 文件中应用这个函数。要实现这个目标，就须要 export 它。

export const add = (x, y) => {return x + y;}

下面是导出单个函数罕用办法，还能够这样导出：

const add = (x, y) => {return x + y;}

export {add};

导出变量和函数后，就能够在其它文件里导入应用从而防止了代码冗余。反复第一个例子的代码能够导出多个对象或函数，在第二个例子外面的导出语句中增加更多值也能够导出多项，例子如下：

export {add, subtract};

另外一种被称为默认导出的 export 的语法。在文件中只有一个值须要导出的时候，通常会应用这种语法。它也经常用于给文件或者模块创立返回值。

export default 用于为模块或文件申明一个返回值，在每个文件或者模块中该当只默认导出一个值。此外，不能将 export default 与 var、let 或 const 同时应用

export default function add(x, y) {return x + y;}
export default function(x, y) {return x + y;}

import

import 能够导入文件或模块的一部分。

import {add} from './math_functions.js';

在这里，import 会在 math_functions.js 里找到 add，只导入这个函数，疏忽残余的局部。./通知程序在以后文件的雷同目录寻找 math_functions.js 文件。用这种形式导入时，相对路径（./）和文件扩展名（.js）都是必须的。

还须要一种 import 的语法来导入默认的导出。在上面的例子里，add 是 math_functions.js 文件的默认导出。以下是如何导入它：

import add from "./math_functions.js";

这个语法有一处特地的中央，被导入的 add 值没有被花括号（{}）所突围。add 只是一个变量的名字，对应 math_functions.js 文件的任何默认导出值。在导入默认导出时，能够应用任何名字。

将某文件所有内容导入到以后文件中。能够用 import * as 语法来实现

import * as myMathModule from "./math_functions.js";

Promise

定义

Promise 是异步编程的一种解决方案 – 它在将来的某时会生成一个值。工作实现，分执行胜利和执行失败两种状况。Promise 是结构器函数，须要通过 new 关键字来创立。结构器参数是一个函数，该函数有两个参数 – resolve 和 reject。通过它们来判断 promise 的执行后果。

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

状态

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 很有用。服务器申请会破费一些工夫，当完结时，须要依据服务器的响应执行一些操作。这能够用 then办法来实现，当 promise 实现 resolve 时会触发 then 办法。

例子如下：

myPromise.then(result => {});

result 即传入 resolve 办法的参数。

catch

当 promise 失败时会调用 catch 办法。当 promise 的 reject 办法执行时会间接调用。用法如下：

myPromise.catch(error => {});

error 是传入 reject 办法的参数。