JavaScript复习笔记 （十四）ES6

主要包括：箭头函数、解构、类、promise 和模块

一、var，let，const

var ：
声明变量时，是全局声明的，如果在函数内部声明则是局部声明的。
let ：
类似var，但有一些额外的功能。
在代码块、语句或表达式中使用 let 声明变量，其作用域仅限于该代码块、语句或表达式。
const：
const 分配给变量的对象（包括数组和函数）仍然是可变的。
使用 const 声明只能防止变量标识符的重新分配（会报错）。

默认情况下，一些开发人员更喜欢使用 const 分配所有变量，除非他们知道需要重新分配值。 只有在这种情况下，他们才使用 let。

为了确保数据不被改变，JavaScript 提供了一个函数 Object.freeze。
——任何更改对象的尝试都将被拒绝，如果脚本在严格模式下运行，将抛出错误。

二、箭头函数

const myFunc = () => "value";
//带参数
const multiplier = (item, multi) => item * multi;
//带默认函数
const increment = (number, value=1) => number + value;

rest
rest 操作符可以用于创建有一个变量来接受多个参数的函数。
这些参数被储存在一个可以在函数内部读取的数组中。

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

展开操作符
使用 spread 运算符展开数组项
...arr 返回一个解压的数组。 也就是说，它展开数组。

• 返回一个对象需要用（）

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

三、解构赋值

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

//指定新的变量名
const { name: userName, age: userAge } = user;
//从嵌套对象中分配变量
const { johnDoe: { age: userAge, email: userEmail }} = user;

从数组中分配变量:
可以在数组解构中使用逗号分隔符，来获取任意一个想要的值

const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
//交换ab的值
[a,b]=[b,a]

在函数的参数里直接解构对象:

const stats = {
  max: 56.78,
  min: -0.75,
};

const half = ({max,min}) => (max + min) / 2.0; 
half(stats)

四、模板字符串

这是一种可以轻松构建复杂字符串的方法。

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

使用反引号 ` , 可以在字符串中包含其他表达式，例如 ${a + b}

ES6定义函数：

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

五、class

class SpaceShuttle {
  constructor(targetPlanet) {
    this.targetPlanet = targetPlanet;
  }
}
const zeus = new SpaceShuttle('Jupiter');

当用 new 创建一个新的对象时，构造函数会被调用。

ES6 class 命名：首字母大写驼峰命名法

使用 getter 和 setter 来控制对象的访问 ( 隐藏内部的实现细节 )

通常会在私有变量前添加下划线（_）

class Book {
  constructor(author) {
    this._author = author; 
  }
  // getter
  get writer() {
    return this._author;
  }
  // setter
  set writer(updatedAuthor) {
    this._author = updatedAuthor;
  }
}

六、模块

使用了 module 类型的脚本可以使用 import 和 export 特性

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

1. export，import :

//用 export 导出：
const add = (x, y) => {
  return x + y;
}
export { add };

//通过 import 复用 JavaScript 代码 :
import { add, subtract } from './math_functions.js';

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

//import 语句会创建一个对象。 对象包含 js 文件里的所有导出，可以像访问对象的属性那样访问里面的函数
import * as stringFunctions from './string_functions.js'
//使用
stringFunctions.uppercaseString("hello");

3. export default 默认导出 :
   ( 在文件中只有一个值需要导出的时候，通常会使用这种语法。 )

//默认导出：
//命名函数
export default function add(x, y) {
  return x + y;
}
//匿名函数
export default function(x, y) {
  return x + y;
}

//导入：自定义变量名不需要 {}
import add from "./math_functions.js";

七、Promise

1. Promise 是构造器函数，需要通过 new 关键字来创建。
   该函数有两个参数 - resolve 和 reject。 来判断 promise 的执行结果。
2. Promise 有三个状态：pending、fulfilled 和 rejected
   ( 创建的 promise 阻塞在 pending 状态里，调用 resolve 和 reject 结束 )
3. 当 promise 完成 resolve 时会触发 then 方法
4. 使用 catch 处理 Promise 失败的情况

const makeServerRequest = new Promise((resolve, reject) => {
  // responseFromServer 设置为 false，表示从服务器获得无效响应
  let responseFromServer = false;

  if(responseFromServer) {
    resolve("We got the data");
  } else {  
    reject("Data not received");
  }
})
.then(result =>console.log(result))
.catch(error=>console.log(error));