ES6

微信公众号：储凡About 25 min

ES6

ES6 首次命名出现是在2015年，是JavaScript版本历史上的第二次重大修订版本，上一次是2009年修订的版本。

目前对于2015年修订的版本称为: ES6 或者 ECMAScript 6，例如：

ES5：ECMAScript 2009
ES6：ECMAScript 2015

let关键字

let关键字允许在块级作用范围内定义变量

var x = 10;
// 这里打印出来，x值为100
{
  let x = 30;
// 这里打印出来，x值为30
}
// 这里打印出来，x值为100

const关键字

const关键字用来声明常量，本质上是值不变的“let变量”。const常量和let变量类似，都是JavaScript的var变量。

随着ES6的普及，不再建议使用var关键字来进行声明。防止出现作用域污染

var x = 100;
// 这里打印出来，x值为100
{
  const x = 40;
  // 这里打印出来，x值为40
}
// 这里打印出来，x值为100

箭头函数

箭头函数支持用一种简单、精炼的方式来定义函数，使得不需要使用function、return关键字，就能定义函数。例如：

// ES5
var result = function (x, y) {
  return x + y
}

// ES6
const result = (x, y) => x + y

箭头函数没有自己的this对象。箭头函数不太适合定义对象方法。
箭头函数不会被提升。它们必须在使用之前定义。
使用const关键字比使用var关键字更安全，因为函数表达式始终是常量值。
如果函数是单个语句，则只能省略关键字和大括号。

拓展运算符

...扩展运算符支持对可迭代对象（例如：数组、对象）进行更加灵活的操作，例如：

const num = [1, 2, 3]
const bigNum = [100, 200, 400]

// 数组内容连接，类似concat操作
const data = [...num, ...bigNum]

同时，拓展运算符好支持函数传参，例如：

const nums = [21, 45, 33, 67, 89]
const maxValue = Math.max(...nums)

for...of循环

JavaScript 的 for/of 语句支持循环遍历可迭代对象的值。这里的可迭代的数据结构支持数组、字符串、映射、节点列表等。

该for/of循环具有以下语法：

// 循环遍历数组
const students = ["Tom", "Lisa"];
let stuResult = "";

for (let stu of students) {
  stuResult += stu + " ";
}

// 循环遍历字符串
let language = "JavaScript";
let result = "";

for (let str of language) {
  result += str + " ";
}

Map映射

Map(映射)是一种常用的数据结构吗，用于存储键值对的集合

Set集合

JavaScript的Set是一个集合，里面的元素具有唯一性，每个元素只允许出现一次。Set数据结构可以保存任何数据类型的数据值。

Class类

JavaScript的类是JavaScript对象的模板，可以使用class关键字创建类。类可以构造函数来创建对象，例如：

/**
 * 创建Student类
 */
class Student {
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}

// 创建对象
const student = new Student('Tom', 18)

用类创建出来的对象，与类有本质的区别。JavaScript的类只是对象的模板。

Promise对象

Symbol类型

JavaScript 符号类型是一种原始数据类型，就像数字、字符串或布尔值一样，代表一个唯一的隐藏标识符，其他代码无法访问。

如果不同的编码人员想要将 student.id 属性添加到属于第三方代码的 student 对象，他们可以混合彼此的值，可以使用Symbol()创建唯一标识符，解决了这个问题。例如：

// 定义student对象
const student = {
  name: "Tom",
  age: 18,
};

// 创建唯一标识符
const id = Symbol('id');
person[id] = 100;

// 返回100
person[id]
// 返回undefined
person.id

默认参数

ES6允许对函数参数设置默认值，例如：

/**
 * 两个值求和
 */
function add(x, y = 10) {
  // 当参数y没有传值时，默认为10
  return x + y;
}

// 返回15
add(5);

剩余参数

剩余参数 ... 允许函数将不定数量的参数视为数组，例如：

/**
 * 参数值累加，不限制参数个数
 * @param args
 */
function sum(...args) {
  let sum = 0;
  for (let arg of args)
    sum += arg;
  return sum;
}

// 计算参数累加和
const reult = sum(4, 9, 16, 25, 29, 100, 66, 77);

字符串新增方法

对于String类型的变量，ES6新增三个方法：

includes()：来判断字符串中是否包含指定值
startsWith()：判断字符串是否以指定值开头
endsWith()：判断字符串是否以指定值结尾

includes()

includes()方法可以用来判断字符串中是否包含指定值，存在返回：true，否则返回：false

const text = "Hello world!";
// 返回true
text.includes("world")

startsWith()

startsWith()方法可以判断字符串是否以指定值开头，存在返回：true，否则返回：false

const text = "Hello world!";
// 返回true
text.startsWith("hello")

endsWith()

endsWith()方法可以判断字符串是否以指定值结尾，存在返回：true，否则返回：false

const text = "Hello world!";
// 返回false
text.endsWith("world")

数组新增方法

Array.from()

Array.from()方法支持从任何迭代对象或者带有length属性的对象中返回一个数组对象，例如：

// 返回 [A,B,C,D,E,F,G]
Array.from("ABCDEFG")

keys()

返回带数组键的数组迭代对象，例如：

// 定义数组
const students = ['Lisa', 'Tom']
const keys = students.keys()

// 遍历keys对象
let text = ''
for (const x of keys) {
  text += x + '---'
}
console.log(text)

上面例子的keys()函数，数组的角标0、1、2... ，所以返回的迭代对象中的为number类型。

find()

find()方法返回满足回调函数的第一个数组元素的值，例如：

const numbers = [4, 9, 16, 25, 29];

// 获取满足回调函数的一个数组元素值
const firstNum = numbers.find((value, index, array) => {
  return value > 20;
});

findIndex()

findIndex()方法返回满足回调函数的第一个数组元素的索引，例如：

const numbers = [4, 9, 16, 25, 29];

// 获取满足回调函数的一个数组元素值的索引（角标）
const firstNum = numbers.find((value, index, array) => {
  return value > 20;
});

注意：findIndex()方法返回的是索引，find()方法返回的是数组中满足条件的第一个元素值

Math新增方法

Math对象上新增5个方法：

Math.trunc()
Math.sign()
Math.cbrt()
Math.log2()
Math.log10()

Math.trunc()

返回数字的整数部分，例如：

// 返回7
Math.trunc(7.8);
// 返回6
Math.trunc(6.2);
// 返回6
Math.trunc(6.5);
// 返回4
Math.trunc(4.3);
// 返回-8
Math.trunc(-8.4);

Math.sign()

返回数字为负数、空、正数，例如：

// 返回-1 代表负数
Math.sign(-8);
// 返回0
Math.sign(0);
// 返回1 代表正数
Math.sign(6);

Math.cbrt()

计算参数的立方根，类似解方程，例如：

// 返回0
Math.cbrt(0);
// 返回3
Math.cbrt(27);
// 返回-1
Math.cbrt(-1);

Math.log2()

计算参数以 2 为底的对数，类似于对数方程，例如：

// 返回0
Math.log2(1);
// 返回2
Math.log2(4);

Math.log10()

计算参数以 10 为底的对数，类似于对数方程，例如：

// 返回0
Math.log10(1);
// 返回1
Math.log10(10);
// 返回2
Math.log10(100);

Number对象

Number对象新增三个属性：

EPSILON ：是 JavaScript 能够表示的最小精度。误差如果小于这个值，就可以认为已经没有意义了，即不存在误差了。可以用来确认浮点运算是否精确
MIN_SAFE_INTEGER：最小安全整数
MAX_SAFE_INTEGER：最大安全整数

Number对象新增两个方法：

Number.isInteger()
Number.isSafeInteger()

Number.isInteger()

用来判断是否为整数，例如：

// 返回true
Number.isInteger(100);

// 返回false
Number.isInteger(70.5);

Number.isSafeInteger()

用来判断是否为安全整数，这里的安全指的是在JS的精度范围内，例如：

// 返回true
Number.isSafeInteger(10);

// 返回false
Number.isSafeInteger(99999999999999999);

全局方法

isFinite()

全局方法，判断是否为有限数，如果参数是无限数或不是数字类型，函数返回false，例如：

// 返回false
isFinite(60 / 0);

// 返回true
isFinite(100 / 2);

isNaN()

全局方法，用来确认变量不是Number类型，函数可理解为is not a Number，例如：

// 返回true
isNaN("hello")

// 返回false
isNaN(100)

对象上entries()方法

在Object对象上新增entries()方法，用来获取带有键/值对的数组类型的迭代（Iterator）对象，例如：

const students = ["Tom", "Lisa"];
const stu = students.entries();

// 循环
for (let s of stu) {
  // 数据形式：[index，value]
  console.log(s)
}

模块导入

解构到导入
导入默认

在模块中导出，可以采用默认导出，例如：

export default {
  name: 1
}

对此，导入则需要通过变量接收默认对象，例如：

import defaultExport from './export.ts'

// 打印name属性
console.log(defaultExport.name)

同样的。导出还可以指定变量导出，例如：

export const name = 1

对于指定变量导出，则可以通过解构的方式，例如：

// 直接解构，或者采用变量接收后解构
import {name} from './export.ts'

console.log(name)

ES6

# ES6

# let关键字

# const关键字

# 箭头函数

# 拓展运算符

# for...of循环

# Map映射

# Set集合

# Class类

# Promise对象

# Symbol类型

# 默认参数

# 剩余参数

# 字符串新增方法

# includes()

# startsWith()

# endsWith()

# 数组新增方法

# Array.from()

# keys()

# find()

# findIndex()

# Math新增方法

# Math.trunc()

# Math.sign()

# Math.cbrt()

# Math.log2()

# Math.log10()

# Number对象

# Number.isInteger()

# Number.isSafeInteger()

# 全局方法

# isFinite()

# isNaN()

# 对象上entries()方法

# 模块导入

ES6