（三）ES6基础语法。。。freecodecamp笔记
ECMAScript6
ECMAScript 是 JavaScript 的标准化版本，它旨在统一语言的规范和功能。所有主流的浏览器或者 Javascript 的运行环境都支持这个规范，因此 ECMAScript 和 JavaScript 的术语是通用的。在2015年，ECMAScript 发布了被称为 ECMAScript 6 (ES6) 的最新版本。
- 箭头函数
- 类
- 模块
- Promises 对象
- 异步生成器 Generators
let以及const语法
一、探索var和let关键字之间的差异
- 使用
var关键字来声明变量，会出现重复声明导致变量被覆盖却不会报错的问题。 - 当使用
let的时候，同一名字的变量只能被声明一次。（和java一样，存在全局变量可以创建同名的局部变量） - 写明
"use strict"。这代表着开启了严格模式，在函数内部声明是局部作用域 (只在函数内使用严格模式)，外部则是全局作用域 - 使用
var关键字来声明一个变量的时候，这个变量会被声明成全局变量，或是函数内的局部变量。（var是可变的，同一块内存空间） - 如果你在代码块、语句或表达式中使用关键字
let声明变量，这个变量的作用域就被限制在当前的代码块，语句或表达式之中。（let是不可变的）
二、用 const 关键字声明只读变量
const拥有let的所有优点，所不同的是，通过const声明的变量是只读的。这意味着通过const声明的变量只能被赋值一次，而不能被再次赋值。- 你应该使用
const关键字来对所有不打算再次赋值的变量进行声明。一个最佳实践是对所有常量的命名采用全大写字母，并在单词之间使用下划线进行分隔。 - 对象（包括数组和函数）在使用
const声明的时候依然是可变的。使用const来声明只会保证它的标识不会被重新赋值。(你可以将const声明的变量指向一个对象，更改对象中的数据是可行的，但是不能建该变量指向另一个对象)
三、防止对象改变
- const并不会使得对象中的数据不能够改变，JavaScript 提供了一个函数
Object.freeze来防止数据改变。（你不能再对它的属性再进行增、删、改的操作。出现增删改操作会被忽略，但不会报错）
Object.freeze(MATH_CONSTANTS);
四、使用箭头函数编写简洁的匿名函数
我们会经常遇到不需要给函数命名的情况，如下，代码不需要复用
const myFunc = function() {
const myVar = "value";
return myVar;
}
ES6 提供了其他写匿名函数的方式的语法糖，箭头函数
const myFunc = () => {
const myVar = "value";
return myVar;
}
当不需要函数体，只返回一个值的时候，箭头函数允许你省略return关键字和外面的大括号。
const myFunc= () => "value"
给箭头函数，添加参数
const doubler = (item) => item * 2;
当箭头函数被用到需要用函数作为参数的高阶函数中时会很好用。
FBPosts.filter(function(post) {
return post.thumbnail !== null && post.shares > 100 && post.likes > 500;
})
//简写之后
//filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)
demo
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
"use strict";
// 在这行以下修改代码
const squaredIntegers = arr.filter((num)=>num>0&&num%parseInt(num)===0).map((num)=>Math.pow(num,2));
// 在这行以上修改代码
return squaredIntegers;
};
// 测试你的代码
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);
五、设置函数的默认参数
ES6 里允许给函数传入默认参数，来构建更加灵活的函数。
当参数没有被指定的时候，默认参数起作用，例子：
function greeting(name = "Anonymous") {
return "Hello " + name;
}
console.log(greeting("John")); // Hello John
console.log(greeting()); // Hello Anonymous
六、一个变量来接受多个参数的函数
ES6 推出了用于函数参数的 rest 操作符帮助我们创建更加灵活的函数。你可以创建有一个变量来接受多个参数的函数。这些参数被储存在一个可以在函数内部读取的数组中。
function howMany(...args) {
return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2)); // 输出：You have passed 3 arguments.
console.log(howMany("string", null, [1, 2, 3], { })); // 输出：You have passed 4 arguments.
七、使用 spread 运算符展开数组项
ES6 允许我们使用 展开操作符 来展开数组，以及需要多个参数或元素的表达式。
const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr); // 返回 89
let arr2 = [...arr1];
...arr返回了一个“打开”的数组。或者说它 展开 了数组。
然而，展开操作符只能够在函数的参数中，或者数组之中使用
八、使用解构赋值从对象中分配变量
普通ES5代码
var voxel = {x: 3.6, y: 7.4, z: 6.54 };
var x = voxel.x; // x = 3.6
var y = voxel.y; // y = 7.4
var z = voxel.z; // z = 6.54
ES6解构语法
const { x, y, z } = voxel; // x = 3.6, y = 7.4, z = 6.54
const { x : a, y : b, z : c } = voxel; // a = 3.6, b = 7.4, c = 6.54
我们可以将 嵌套的对象解构到变量中。
const a = {
start: { x: 5, y: 6},
end: { x: 6, y: -9 }
};
const { start : { x: startX, y: startY }} = a;
console.log(startX, startY); // 5, 6
九：使用解构赋值从数组中分配变量
const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b); // 1, 2
变量a以及b分别被数组的第一、第二个元素赋值。
我们甚至能在数组解构中使用逗号分隔符，来获取任意一个想要的值：
const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c); // 1, 2, 5
十、使用解构赋值配合 rest 操作符来重新分配数组元素
在解构数组的某些情况下，我们可能希望将剩下的元素放进另一个数组里面。
const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
console.log(a, b); // 1, 2
console.log(arr); // [3, 4, 5, 7]
十一、使用解构赋值将对象作为函数的参数传递
在某些情况下，你可以在函数的参数里直接解构对象。
const profileUpdate = (profileData) => {
const { name, age, nationality, location } = profileData;
// 对这些变量执行某些操作
}
这样的操作也可以直接在参数里完成：注意参数大括号
const profileUpdate = ({ name, age, nationality, location }) => {
/* 对这些参数执行某些操作 */
}
十二、使用模板字面量创建字符串
模板字符串是 ES6 的另外一项新的功能。这是一种可以轻松构建复杂字符串的方法。
const person = {
name: "Zodiac Hasbro",
age: 56
};
// string interpolation
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.
十三、使用简单字段编写简洁的对象字面量声明
const getMousePosition = (x, y) => ({
x: x,
y: y
});
ES6 提供了一个语法糖，消除了类似x: x这种冗余的写法.你可以仅仅只写一次x，解释器会自动将其转换成x: x。
const getMousePosition = (x, y) => ({ x, y });
十四、用 ES6 编写简洁的函数声明
在 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 语法定义构造函数
在 ES5 里面，我们通常会定义一个构造函数，然后使用 new关键字来实例化一个对象：
var SpaceShuttle = function(targetPlanet){
this.targetPlanet = targetPlanet;
}
var zeus = new SpaceShuttle('Jupiter');
class的语法只是简单地替换了构造函数的写法：constructor
class SpaceShuttle {
constructor(targetPlanet){
this.targetPlanet = targetPlanet;
}
}
const zeus = new SpaceShuttle('Jupiter');
十六、使用 getter 和 setter 来控制对象的访问
function makeClass() {
"use strict";
class Thermostat{
constructor(farenheit){
this.farenheit= 5/9 * (farenheit - 32);
}
get temperature(){
return this.farenheit;
}
set temperature(farenheit){
this.farenheit=farenheit;
}
}
return Thermostat;
}
const Thermostat = makeClass();
const thermos = new Thermostat(76); // 使用华氏温度来初始化
let temp = thermos.temperature; // 摄氏温度24.44度
thermos.temperature = 26;
temp = thermos.temperature; // 摄氏温度26度
十七、了解 import 和 require 之间的差异
ES6 给我们提供了import这个便利的工具。通过它，我们能够从外部的文件或者模块中选择我们需要的部分进行引入。
如math_array_functions拥有大概20个函数，但是我只需要countItems这一个函数在我当前的文件里
import { countItems } from "math_array_functions"
在大括号里的函数名的两侧加上空格是一个最佳实践——这可以帮助我们轻松的阅读import语句。
十八、用 export 来重用（导出）代码块
const capitalizeString = (string) => {
return string.charAt(0).toUpperCase() + string.slice(1);
}
export { capitalizeString } //如何导出函数。
export const foo = "bar"; //如何导出变量。
----------------------------------------
const foo = "bar";
export { capitalizeString, foo }//一行导出
十九、用 * 从文件中导入所有内容
import * as myMathModule from "math_functions";
myMathModule.add(2,3);
myMathModule.subtract(5,3);
你可以在import * as之后添加任意的名称。这个方法接收到的值是一个对象，你可以使用点表示法来获取对象里具体的值。
二十、用 export default 创建一个默认导出
你还需要知道另外一种被称为默认导出的export的语法。在文件中只有一个值需要导出的时候，你通常会使用这种语法。它也常常用于给文件或者模块创建返回值。
export default function add(x,y) {
return x + y;
}
二十一、导入一个默认的导出
import add from "math_functions";
add(5,4); //将会返回 9
这个语法只有一处不同的地方 —— 被导入的add值，并没有被花括号{}所包围。与导出值的方法不同，导入默认导出的写法仅仅只是简单的将变量名写在import之后。