关于前端:ES6-个人学习笔记阮一峰ES6

原文链接：阮一峰 ECMAScript6 入门

一、简介

对于 babel

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

二、let 与 const

太长了。
简要说 let。
let 与 var 相比，块级作用域，局部变量。不可提前写。

const 申明当前不能更改。

三、变量的解构赋值

解构赋值不仅能够作用于数组，还能够对象，还能够字符串，还能够数值和布尔值。

应用办法：
1、替换数据地位

let x = 1;
let y = 2;

[x, y] = [y, x];

2、函数想返回多个数据，可采纳数组加解构赋值

function example() {return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let {foo, bar} = example();

3、解决了传参
解构赋值能够不便地将一组参数与变量名对应起来。

// 参数是一组有秩序的值
function f([x, y, z]) {...}
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) {...}
f({z: 3, y: 2, x: 1});

4、提取 json 数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let {id, status, data: number} = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

5、函数参数的默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {// ... do stuff};

6、遍历 Map 构造

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {console.log(key + "is" + value);
}

7、输出模块的指定办法

const {SourceMapConsumer, SourceNode} = require("source-map");

四、字符串的拓展

模板字符串

五、字符串的新增办法

5.1 检索字符串

传统上，JavaScript 只有 indexOf 办法，能够用来确定一个字符串是否蕴含在另一个字符串中。ES6 又提供了三种新办法。

• includes()：返回布尔值，示意是否找到了参数字符串。
• startsWith()：返回布尔值，示意参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，示意参数字符串是否在原字符串的尾部。

这三个办法都反对第二个参数，示意开始搜寻的地位。

5.2 repeat(3)

repeat办法返回一个新字符串，示意将原字符串反复 n 次。

5.3 主动补全

ES2017 引入了字符串补全长度的性能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

5.4 trim

字符串实例新增了 trimStart() 和trimEnd()这两个办法。它们的行为与 trim() 统一，trimStart()打消字符串头部的空格，trimEnd()打消尾部的空格。它们返回的都是新字符串，不会批改原始字符串。

5.5 matchAll

matchAll()办法返回一个正则表达式在以后字符串的所有匹配

6、正则的扩大

7、数值的扩大

7.1 八进制与二进制的表示法

Number('0b111')  // 7 二进制
Number('0o10')  // 8 八进制

7.2 Number.isFinite Number.isNaN

仅对数值无效

7.3 Number.parseInt Number.parseFloat

与全局雷同，逐渐缩小全局放大，语言趋于模块化

7.4 Number.isInteger()

判断是不是整数，返回 boolean

7.5 Number.EPSILON

极小的常量

7.6 Number.isSafeInteger()

Number.isSafeInteger()则是用来判断一个整数是否落在这个范畴之内

7.7

大数运算
数学方法，log 幂运算 等

8、函数的扩大

此处过长，暂略

9、数组的扩大

9.1 可扩大运算符

浅拷贝
可扩大运算符

const a1 = [{foo: 1}];
const a2 = [{bar: 2}];

const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];

a3[0] === a1[0] // true
a4[0] === a1[0] // true

具备 Iterator 的对象都能够应用扩大运算符 …

9.2 Array.from 把对象转换成数组

Array.from 能够把两类对象转换成真正的数组，一种是类数组对象 arguments，一种是可遍历对象（Set,Map）

以往的办法是 Array.prototype.slice.call(arguemnts)

返回数据的类型

function type(){return Array.from(arguments,value=>typeof value)
}

type(null,[],NaN) // object object number

9.3 Array.of 把一组值转换成数组

比照 Array() 与Array.of()
Array() 的参数为一个的时候，它其实指的是返回数组的长度，如下：

Array(3) // [,,]
Array(1,2) // [1,2]

Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

Array.of(3) // [3]
Array.of()  // []
Array.of(undifined) // [undifined]

9.4 Ayyar.copyWithin()复制数组外部某数值笼罩数组外部的另一个数值

会扭转原有数组

const arr= [1,2,3,4,5];

arr.copyWithin(0,3,4) // [4,2,3,4,5]

// 0 target: 把截取的数组放在哪里
// 3 start: 截取数组的开始地位
// 4 end: 截取数去的截止地位

9.5 Array.keys() Array.values() Array.entries() 新增的遍历办法

返回的是迭代器对象，所以能够应用 for ...of 进行遍历

for (let index of ['a', 'b'].keys()) {console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {console.log(index, elem);
}
// 0 "a"
// 1 "b"

9.6 数组实例的 includes()

返回boolean

9.7 Array.flat() 多维数组的拉平

想要拉平几维的数组，flat()的参数就是几。全副拉平，应用flat(Infinity)

9.8 数组的空位

es5 对空位的解决不对立。
es6 会把空位转换为 undefined

==> 总之，应该防止空位

12、Symbel

Symbol，示意举世无双的值。

数据类型的分类形式，

一、根底数据类型。二、值类型，援用数据类型
undefined
null
string
number
boolean
object

13、Set 和 Map 数据结构

13.1 Set

相似于数组，然而每个元素都是惟一的

// 先去重，而后转换为数组
const tempModules = Array.from(new Set(this.modules));

new Set()其自身就是一个构造函数，承受数组，对象等作为参数
作用：

• 数组的去重
• 字符串的去重

13.2 Set 的实例属性

Set.prototype.constructor(value)
Set.proptotype.size() // 实例的成员总数

add() // add
delete() // 返回一个布尔值，是不是返回胜利
clear() // 清空所有成员，没有返回值
has() // 返回布尔值

Array.from() 把 Set 构造转换成数组

13.3 Set 的遍历操作

keys()、values()、entries() 返回的都是迭代器对象。

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"]

13.4 Map 构造

Map 构造实质上是一种对象。
然而对象的键只能是 字符串 - 值 ，Map 构造能够 值 - 值 对应。

13.5 Map 的参数

任何一个具备 Iterator 接口，且每个成员都有两个元素的数据结构

解释了二维数组能够作为 Map 的参数。