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

47次阅读

共计 3879 个字符，预计需要花费 10 分钟才能阅读完成。

原文链接：阮一峰 ECMAScript6 入门

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

太长了。
简要说 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");

模板字符串

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

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

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

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

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

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

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

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

仅对数值无效

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

判断是不是整数，返回 boolean

极小的常量

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

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

此处过长，暂略

浅拷贝
可扩大运算符

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 的对象都能够应用扩大运算符 …

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

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

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

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

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

会扭转原有数组

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

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

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

返回的是迭代器对象，所以能够应用 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"

返回boolean

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

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

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

Symbol，示意举世无双的值。

数据类型的分类形式，

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

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

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

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

数组的去重
字符串的去重

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

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

Array.from() 把 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"]

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

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

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

正文完

前端

发表至：前端

2020-08-11

0

关于前端:使用-CSS-Scroll-Snap-优化滚动提升用户体验

关于前端:为什么-Vuejs-是响应式-Web-应用程序开发的首选

关于前端:这18个网站能让你的页面背景炫酷起来

关于前端:前端该如何优雅地-Mock-数据

关于service-mesh:初试-Open-Service-MeshOSM

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

一、简介

对于 babel

二、let 与 const

三、变量的解构赋值

四、字符串的拓展

五、字符串的新增办法

5.1 检索字符串

5.2 repeat(3)

5.3 主动补全

5.4 trim

5.5 matchAll

6、正则的扩大

7、数值的扩大

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

7.2 Number.isFinite Number.isNaN

7.3 Number.parseInt Number.parseFloat

7.4 Number.isInteger()

7.5 Number.EPSILON

7.6 Number.isSafeInteger()

7.7

8、函数的扩大

9、数组的扩大

9.1 可扩大运算符

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

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

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

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

9.6 数组实例的 includes()

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

9.8 数组的空位

12、Symbel

13、Set 和 Map 数据结构

13.1 Set

13.2 Set 的实例属性

13.3 Set 的遍历操作

13.4 Map 构造

13.5 Map 的参数

Just My Socks（注册教程内含优惠码）

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

一、简介

对于 babel

二、let 与 const

三、变量的解构赋值

四、字符串的拓展

五、字符串的新增办法

5.1 检索字符串

5.2 repeat(3)

5.3 主动补全

5.4 trim

5.5 matchAll

6、正则的扩大

7、数值的扩大

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

7.2 Number.isFinite Number.isNaN

7.3 Number.parseInt Number.parseFloat

7.4 Number.isInteger()

7.5 Number.EPSILON

7.6 Number.isSafeInteger()

7.7

8、函数的扩大

9、数组的扩大

9.1 可扩大运算符

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

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

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

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

9.6 数组实例的 includes()

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

9.8 数组的空位

12、Symbel

13、Set 和 Map 数据结构

13.1 Set

13.2 Set 的实例属性

13.3 Set 的遍历操作

13.4 Map 构造

13.5 Map 的参数

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）