（三）ES6基础语法。。。freecodecamp笔记

ECMAScript6

ECMAScript 是 JavaScript 的标准化版本，它旨在统一语言的规范和功能。所有主流的浏览器或者 Javascript 的运行环境都支持这个规范，因此 ECMAScript 和 JavaScript 的术语是通用的。在2015年，ECMAScript 发布了被称为 ECMAScript 6 (ES6) 的最新版本。

• 箭头函数
• 类
• 模块
• Promises 对象
• 异步生成器 Generators
• let以及const语法

一、探索var和let关键字之间的差异

1. 使用var关键字来声明变量，会出现重复声明导致变量被覆盖却不会报错的问题。
2. 当使用let的时候，同一名字的变量只能被声明一次。（和java一样，存在全局变量可以创建同名的局部变量）
3. 写明"use strict"。这代表着开启了严格模式，在函数内部声明是局部作用域 (只在函数内使用严格模式)，外部则是全局作用域
4. 使用var关键字来声明一个变量的时候，这个变量会被声明成全局变量，或是函数内的局部变量。（var是可变的，同一块内存空间）
5. 如果你在代码块、语句或表达式中使用关键字let声明变量，这个变量的作用域就被限制在当前的代码块，语句或表达式之中。（let是不可变的）

二、用 const 关键字声明只读变量

1. const拥有let的所有优点，所不同的是，通过const声明的变量是只读的。这意味着通过const声明的变量只能被赋值一次，而不能被再次赋值。
2. 你应该使用const关键字来对所有不打算再次赋值的变量进行声明。一个最佳实践是对所有常量的命名采用全大写字母，并在单词之间使用下划线进行分隔。
3. 对象（包括数组和函数）在使用const声明的时候依然是可变的。使用const来声明只会保证它的标识不会被重新赋值。(你可以将const声明的变量指向一个对象，更改对象中的数据是可行的，但是不能建该变量指向另一个对象)

三、防止对象改变

1. 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之后。