ES6 基础概述 #36

Checkson · 2019-06-05T06:57:19Z

1. let 和 const 命令

在ES6之前，JavaScript 声明变量只能用 var 这个关键字；而在ES6中，则引入了其他两个关键字 let 和 const，那么，它们俩，到底与 var 有哪些异同呢？请看下表：

名称	作用	是否存在变量提升	是否存在块级作用域	是否能重复声明
var	变量声明	是	否	能
let	变量声明	否	是	不能
const	常量声明	否	是	不能

2. 变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

数据类型	常见解构形式	描述
数组	`let [a, b, c] = [1, 2, 3];`	按照对应位置，对变量赋值
对象	`let { foo, bar } = { foo: 'aaa', bar: 'bbb' };`	变量必须与属性同名
字符串	`const [a, b, c, d, e] = 'hello';`	字符串被转成类数组对象
数值	`let {toString: s} = 123;`	解构前转为对象
布尔值	`let {toString: s} = true;`	解构前转为对象
函数参数	`let add = ([x, y]) => x + y;`	类似数组解构
函数参数	`let sub = ({x, y}) => x - y;`	类似对象解构

3. 字符串扩展

3.1 模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。

// es5
var name = 'Checkson';
var str = 'Hello ' + name + '!';

// es6
const name = 'Checkson';
const str = `Hello ${Checkson}!`;

3.2 includes() 实例方法

返回布尔值，表示是否找到了参数字符串（接受第二参数，代表开始搜索下标）。

// es5
var str = 'This is just test!';
if (str.indexOf('is') > -1) {
   // do something...
}

// es6
const str = 'This is just test!';
if (str.includes('is')) {
   // do something...
}

3.3 startsWith(), endsWith() 实例方法

两者都返回布尔值，前者表示参数字符串是否在原字符串的头部，后者表示参数字符串是否在原字符串的尾部（都接受第二参数，代表开始搜索下标）。

// es5
var str = 'Learn Once, Write Anywhere';
if (/^Learn/.test(str) || /Anywhere$/.test(str)) {
    // do something...
}

// es6
const str = 'Learn Once, Write Anywhere';
if (str.startsWith('Learn') || str.endsWith('Anywhere')) {
    // do something...
}

3.4 repeat() 实例方法

repeat方法返回一个新字符串，表示将原字符串重复n次，n为非负整数。

// es5
var str = '';
for (var i = 0; i < 6; i++) {
    str += 'template';
}

// es6
var str = 'template'.repeat(6);

3.5 padStart(), padEnd() 实例方法

ES2017 新增了 padStart()，padEnd() 实例方法用来分别为字符串首、尾补全指定的字符。

// padStart
// es5
function prevZero (num) {
    return ('0' + num).substr(-2);
}

// es6
function prevZero (num) {
    return ('' + num).padStart(2, '0');
}

// padEnd 同理

3.6 trimStart(), trimEnd() 实例方法

ES2019 新增了 trimStart() 和 trimEnd() 实例方法。它们的行为与trim()一致，前者消除字符串头部的空格，后者消除尾部的空格。

// trimStart
// es5
function trimStartSpace (str) {
    var res = '', isFirst = true ;
    for (var i = 0, len = str.length; i < len; i++) {
        if (isFirst && str[i] === ' ') {
            continue;
        }
        isFirst && (isFirst = !isFirst);
        res += str[i];
    }
    return res;
}

// es6
function trimStartSpace (str) {
    return str.trimStart();
}

// trimEnd 同理

4. 正则的扩展

字符串对象共有 4 个方法，可以使用正则表达式：match()、replace()、search()和split()。ES6 将这 4 个方法，在语言内部全部调用RegExp的实例方法，从而做到所有与正则相关的方法，全都定义在RegExp对象上。

5. 数值的扩展

5.1 二进制和八进制表示法

ES6 提供了二进制和八进制数值的新的写法，分别用前缀0b（或0B）和0o（或0O）表示。

// 二进制
0b1000 === 8 // true
// 八进制
0o10 === 8   // true
// 转成十进制
Number(0b1000); // 8
Number(0o10);   // 8

5.2 Number.isFinite(), Number.isNaN()

ES6在Number对象上，新提供了Number.isFinite()和Number.isNaN()两个方法。前者检查传入值是否有限，后者检查传入值是否为NaN。

// es5
isFinite(25) // true
isFinite("25") // true
isFinite(true) // true
// es6
Number.isFinite(25) // true
Number.isFinite("25") // false
Number.isFinite(true) // false

// es5
isNaN(NaN) // true
isNaN("NaN") // true
// es6
Number.isNaN(NaN) // true
Number.isNaN("NaN") // false
Number.isNaN(1) // false

它们与传统的全局方法isFinite()和isNaN()的区别在于，传统方法先调用Number()将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效，Number.isFinite()对于非数值一律返回false, Number.isNaN()只有对于NaN才返回true，非NaN一律返回false。

5.3 Number.parseInt(), Number.parseFloat()

ES6 将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。这样做的目的，是逐步减少全局性方法，使得语言逐步模块化。

Number.parseInt === parseInt // true
Number.parseFloat === parseFloat // true

5.4 指数运算符

ES2016 新增了一个指数运算符（**）。

// es5
Math.pow(2, 2); // 4
Math.pow(2, 3); // 8

// es6
2 ** 2 // 4
2 ** 3 // 8

6. 函数的扩展

6.1 函数参数的默认值

ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。

// es5
function foo (x, y) {
    y = y || 'World';
    return x + y;
}

// es6
function foo (x, y = 'World') {
    return x + y;
}

6.2 解构 + 函数参数默认值

// es5
function foo (obj) {
    obj.y = obj.y || 2;
    return obj.x + obj.y;
}

// es6
function foo ({x, y = 2}) {
    return x + y;
}

6.3 rest 参数

ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。

// es5
function add () {
    var args = [].slice.call(arguments);
    var sum = 0;
    args.forEach(function (val) {
         sum += val;
    });
    return sum;
}

// es6
function add(...args) {
  let sum = 0;
  for (let val of args) {
    sum += val;
  }
  return sum;
}

6.4 箭头函数

ES6 允许使用“箭头”（=>）定义函数。

// es5
var foo = function () {
    return false;
}

// es6
const foo = () => false;

注意： 对于箭头函数，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象；不可以当作构造函数（不能被new）；不可以使用arguments对象；不可以使用yield命令。

6.5 尾递归

函数调用自身，称为递归。如果尾调用自身，就称为尾递归。

// 非尾递归 - 容易栈溢出
function factorial (n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}

// 尾递归
function factorial (n, total) {
    if (n === 1) return total;
    return factorial(n - 1, total * n);
}

7. 数组的扩展

7.1 Array.from()

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// es5
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// es6
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

7.2 Array.of()

Array.of方法用于将一组值，转换为数组。

//  es5
var arr = [];
[].push.call(arr, 1, 2, 3);

// es6
const arr = Array.of(1, 2, 3);

7.3 find() 实例方法

数组实例的find方法，用于找出第一个符合条件的数组成员。若果找到符合条件的成员，则返回第一个满足条件的成员；如果找不到满足条件的成员，返回undefined。

var arr = [1, 2, 3, 4],  res = 'undefine';

// es5
for (var i = 0; i < arr.length; i++) {
      if (arr[i] > 2) {
           res = arr[i]; // 3
           break;
      }
}

// es6
res = arr.find(item => item > 2); // 3

7.4 findIndex() 实例方法

findIndex 方法与 indexOf 方法作用类似，但是findIndex能识别数组是否存在NaN。

// es5
[1, NaN, 2, NaN].indexOf(NaN); // -1

// es6
[1, NaN, 2, NaN].findIndex(item => isNaN(item)); // 1

7.5 fill() 实例方法

fill方法使用给定值，填充一个数组。

// es5
new Array(6, 6, 6); // [6, 6, 6]

// es6
new Array(3).fill(6); // [6, 6, 6]

7.6 includes() 实例方法

ES2016引入Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。

// es5
[1, 2, 3].indexOf(2) > -1 // true 

// es6
[1, 2, 3].includes(2); // true
[1, 2, NaN].includes(NaN); // true

7.7 flat 实例方法

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

// es5
function flatten(arr) {
    return arr.reduce((a, b) => {
        return a.concat(Array.isArray(b) ? flatten(b) : b);
    }, []);
};
flatten([1, 2, [3, 4]]); // [1, 2, 3, 4]

// es6
[1, 2, [3, 4]].flat(); // [1, 2, 3, 4]

8. 对象的扩展

8.1 属性的简洁表示法

ES6 允许直接写入变量和函数，作为对象的属性和方法。

// es5
function foo (x, y) {
    return { x: x, y: x };
}

// es6
function foo (x, y) {
    return {x, y};
}

8.2 属性名表达式

ES6 允许字面量定义对象时，表达式作为对象的属性名，即把表达式放在方括号内。

// es5
var obj = {
     foo: 1
};
obj['b' + 'ar'] = 2;

// es6
var obj = {
    foo: 1,
    ['b' + 'ar']: 2
}

8.3 属性遍历方法

ES6 一共有 5 种方法可以遍历对象的属性。

（1）for...in

for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。

（2）Object.keys(obj)

Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。

（3）Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。

（4）Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名。

（5）Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。

8.4 扩展运算符

对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

var foo = { a: 1 };
var bar = { b: 2, c: 3 };

// es5
var baz = {};
for (var k in foo) baz[k] = foo[k];
for (var k in bar) baz[k] = bar[k];

// es6
var baz = {
    ...foo,
    ...bar
}

8.5 Object.is()

Object.is()方法用来判断两值是否一样。

// es5
-0 === +0 // true
NaN === NaN // false

// es6
Object.is(-0, +0); // false
Object.is(NaN, NaN); // true;

8.6 Object.assign()

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

var foo = { a: 1 };
var bar = { b: 2 };
var baz = { c: 3 };

// es5 - 对象合并
for (var prop in bar) foo[prop] = bar[prop];
for (var prop in baz) foo[prop] = baz[prop];
console.log(foo);  // { a: 1, b: 2, c: 3 }

// es6 - 对象合并
Object.assign(foo, bar, baz); 
console.log(foo); // { a: 1, b: 2, c: 3};

8.7 Object.values()

Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。

var obj = { foo: 'bar', baz: 42 };
// es5
var arr = [];
for (var prop in obj) arr.push(obj[prop]); // ['bar', 42]

// es6
Object.values(obj); // ['bar', 42]

8.8 Object. entries()

Object.entries()方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

var obj = { foo: 'bar', baz: 42 };
// es5
var arr = [];
for (var prop in obj) arr.push([prop, obj[prop]]); // [["foo", "bar"], ["baz", 42]]

// es6
Object.entries(obj); // [["foo", "bar"], ["baz", 42]]

9. Symbol

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值，可以保证不会与其他属性名产生冲突。

var x = Symbol();
var y = Symbol();

x === y // false
typeof x; // "Symbol"

9.1 可以为Symbol添加描述

const sym = Symbol('foo');
sym.description // foo

9.2 作为属性名的 Symbol

let mySymbol = Symbol();

// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';

// 第二种写法
let a = {
  [mySymbol]: 'Hello!'
};

// 第三种写法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

9.3 Symbol.for

该方法可以重用同一个 Symbol 值。

const s1 = Symbol.for('foo');
const s2 = Symbol.for('foo');

s1 === s2 // true

9.4 Symbol.keyFor

该方法返回一个已登记的 Symbol 类型值的key。

let s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo"

10. Set 和 Map 数据解构

10.1 Set 定义

ES6 提供了新的数据结构 Set （集合）。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set 本身是一个构造函数，它可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。下面罗列几种常见的创建形式：

// 方式一
const set = new Set();
[2, 3, 3, 4, 5, 5, 6].forEach(x => set.add(x));
console.log(set); // Set(5) {2, 3, 4, 5, 6}

// 方式二
const set = new Set([2, 3, 3, 4, 5, 5, 6]);
console.log(set); // Set(5) {2, 3, 4, 5, 6}

// 方式三
const set = new Set(document.querySelectorAll('div'));

10.2 Set 实例的属性和方法

Set 实例的属性：
- Set.prototype.constructor: 构造函数，默认是就是 Set 函数。
- Set.prototype.size: 返回 Set 实例的成员总数。
Set 实例的方法：
- add(value)：添加某个值，返回 Set 结构本身。
- delete(value): 删除某个值，返回一个布尔值，表示删除是否成功。
- has(value): 返回一个布尔值，表示该值是否为 Set 的成员。
- clear()：清除所有成员，没有返回值。

var set = new Set();

set.add(1).add(2).add(2);

set.size // 2

set.has(1); // true
set.has(2); // true
set.has('2'); // false
set.has(3); // false

set.delete(2); // true
set.has(2); // false

set.clear();
set.size: // 0

10.3 Set 遍历

Set 结构的实例有四个遍历方法，可以用于遍历成员。

keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：使用回调函数遍历每个成员

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

10.4 Set 应用

数组去重

[...new Set([1, 1, 2, 3, 3, 4, 4, 4, 5])]; // [1, 2, 3, 4, 5]

字符串去重

[...new Set('abababcd')].join(''); // abcd

实现并集（Union）、交集（Intersect）和差集（Difference）

let a = new Set([1, 2, 3]);
let b = new Set([2, 3, 4]);

// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// Set {2, 3}

// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

10.5 Map 定义

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

var a = { foo: 1 }, b = {};
b[a] = 1;

console.log(b); // {[object Object]: 1} 自动将对象转化为字符串

为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

Map作为构造函数，也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

10.6 Map 实例属性和方法

Map 属性：
- Map.prototype.constructor: 构造函数，默认是就是 Map 函数。
- Map.prototype.size: 返回 Map 实例的成员总数。
Map 操作方法：
- set(key, value) 方法设置键名key对应的键值为value，然后返回整个 Map 结构。
- get(key) 方法读取 key 对应的键值，如果找不到 key，返回 undefined。
- has(key) 方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。
- delete(key) 方法删除某个键，返回 true。如果删除失败，返回 false。
- clear() 方法清除所有成员。

const map = new Map();

map.set('name', 'checkson');
map.get('name'); // checkson
map.set('age', 23).set('sex', 'male'); // 链式用法

map.has('name');
map.size; // 3

map.delete('age');
map.size; // 2

map.clear();
map.size; // 0

10.7 Map遍历

Map 结构原生提供三个遍历器生成函数和一个遍历方法。

keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历 Map 的所有成员。

需要特别注意的是，Map 的遍历顺序就是插入顺序。

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

参考图书

《ECMAScript 6 入门》

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ES6 基础概述 #36

ES6 基础概述 #36

Checkson commented Jun 5, 2019 •

edited

Loading

ES6 基础概述 #36

ES6 基础概述 #36

Comments

Checkson commented Jun 5, 2019 • edited Loading

1. let 和 const 命令

2. 变量的解构赋值

3. 字符串扩展

3.1 模板字符串

3.2 includes() 实例方法

3.3 startsWith(), endsWith() 实例方法

3.4 repeat() 实例方法

3.5 padStart(), padEnd() 实例方法

3.6 trimStart(), trimEnd() 实例方法

4. 正则的扩展

5. 数值的扩展

5.1 二进制和八进制表示法

5.2 Number.isFinite(), Number.isNaN()

5.3 Number.parseInt(), Number.parseFloat()

5.4 指数运算符

6. 函数的扩展

6.1 函数参数的默认值

6.2 解构 + 函数参数默认值

6.3 rest 参数

6.4 箭头函数

6.5 尾递归

7. 数组的扩展

7.1 Array.from()

7.2 Array.of()

7.3 find() 实例方法

7.4 findIndex() 实例方法

7.5 fill() 实例方法

7.6 includes() 实例方法

7.7 flat 实例方法

8. 对象的扩展

8.1 属性的简洁表示法

8.2 属性名表达式

8.3 属性遍历方法

8.4 扩展运算符

8.5 Object.is()

8.6 Object.assign()

8.7 Object.values()

8.8 Object. entries()

9. Symbol

9.1 可以为Symbol添加描述

9.2 作为属性名的 Symbol

9.3 Symbol.for

9.4 Symbol.keyFor

10. Set 和 Map 数据解构

10.1 Set 定义

10.2 Set 实例的属性和方法

10.3 Set 遍历

10.4 Set 应用

10.5 Map 定义

10.6 Map 实例属性和方法

10.7 Map遍历

参考图书

Checkson commented Jun 5, 2019 •

edited

Loading