这片文章主要是基于阮一峰老师的ECMAScript 6 入门。在看了阮一峰老师的这ES6入门之后,自己做了一下总结,将一些觉得对自己目前有用的东西整理出来方便日后再来巩固复习。总觉得看别人的东西当时懂了过了一段时间就忘记了,所以我总是会将别人的东西验证一遍,这样对知识的理解是能提升一个层次的。
- 1、ECMAScript和JavaScript的关系以及ES6的含义?
- 2、let和const
- 3、变量的解构赋值
- 4、字符串的扩展
- 5、数值的扩展
- 6、函数的扩展
- 7、数组的扩展
- 8、对象的扩展
- 9、对象的新增方法
- 10、Symbol
- 11、Set
- 12、Map
- 13、Proxy
- 14、Reflect
- 15、Promise
- 16、Iterator和for…of循环
1、ECMAScript和JavaScript的关系
前者是后者的规格,后者是前者的一种实现。ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等,而 ES2015 则是正式名称,特指该年发布的正式版本的语言标准。
2、let和const
2.1 let
let用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
let和const有几个特点:
1、 不存在变量声明提升;
2、 暂时性死区(只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。);
3、 不允许重复声明。不允许在相同作用域内,重复声明同一个变量。
4、 块级作用域
块级作用域的例子
{
let a=12;
var b=23;
}
console.log(b);//23
console.log(a);// a is not defined
for(let i=0;i<10;i++){
}
console.log(i);// is not defined
-----------------------------------------------------------------
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
复制代码
分析:变量i是let声明的,所以i只在let声明的代码块内有效。for循环一共循环了10次,每一次都是一个独立的代码块——{},所以每次循环中的i都是独立的,当前的i只在当前循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。
for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。
for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc
复制代码
2.2 不存在变量声明提升
// var 的情况
console.log(foo); // 输出undefined,变量声明提升,相当于在输出之前就var foo;
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError,没有变量声明提升
let bar = 2;
————————————————————————————————————————————————————————————
复制代码
2.3 暂时性死区(temporal dead zone,简称 TDZ)
在区块中使用let和const命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错(声明之前都是死区)。本质:只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。
2.4 不允许重复声明
let不允许在相同作用域内,重复声明同一个变量。
function func() {
let a = 10;
var a = 1;
}
funb()// // 报错 Identifier 'a' has already been declared
function func() {
let a = 10;
let a = 1;
}
func()// 报错 Identifier 'a' has already been declared
————————————————————————————————————————————————————————
function bar(x = y, y = 2) {
return [x, y];
}
bar(); // 报错 参数x默认值等于另一个参数y,而此时y还没有声明,属于"死区"(参数读取从左至右)。
复制代码
不能在函数内部重新声明参数。
function funb(arg) {
let arg;
}
func() // 报错Identifier 'arg' has already been declared 形参arg跟局部变量arg在同一个{}内,所以报错
function func(arg) {
{
let arg;
console.log(arg);//undefined
}
console.log(arg);//34
}
func(34)
复制代码
2.5 块级作用域
优点:
1、没有块级作用域,内层变量可能会覆盖外层变量(变量声明提升)。
2、用来计数的循环变量会泄露为全局变量。
特点:
1、 允许任意嵌套。
2、 外层作用域无法读取内层作用域的变量。
3、 使得立即执行函数不再必要了。
4、 允许在块级作用域中声明函数,函数声明类似于var,函数声明会提升到所在的块级作用域的头部。
2.6 const
const一旦声明变量,就必须立即初始化,不能留到以后赋值,且变量的值也不能改变。本质:并不是变量的值不得改动,而是变量指向的那个内存地址所不得改动。
对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。
1、变量指向的是对象时,可以改变该对象的属性。但是不可将该变量指向另一个对象。
const obj = {}
// 为 foo 添加一个属性,可以成功
obj.prop = 123;
// 将 obj 指向另一个对象,就会报错,此时已经改变了obj所指向的内存地址了
obj = {}; // TypeError: "foo" is read-only
1、变量指向的是数组时,可以改变该数组中的元素及数组的属性。但是不可将该变量指向另一个数组。
const a = [];
a.push('Hello'); // 可执行
a.length = 0; // 可执行
a = ['Dave']; // 报错,指向了另一个数组
复制代码
2.7 ES6声明变量的6种方式
var、function、let、const、class、import。es5只有var和function两种。
顶层对象的差异: 在浏览器环境指的是window对象,在 Node中 指的是global对象,在Web Worker 里面,self也指向顶层对象。
ES5 之中,顶层对象的属性与全局变量是等价的。ES6中的var命令和function命令声明的全局变量,依旧是顶层对象的属性;let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。
var a = 1;
window.a // 1
let b = 1;
window.b // undefined
复制代码
3、变量的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。本质上,这种写法属于模式匹配,只要等号两边的模式相同,左边的变量就会被赋予对应的值。 如果解构不成功,变量的值就等于undefined。
3、1 数组的结构赋值
事实上,只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值。 let [foo = true] = [];foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
let [x = 1] = [null]; x //null null不严格等于undefined,但是null==undefined
let [x = 1, y = x] = []; // x=1; y=1
let [x = 1, y = x] = [2]; // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = []; // y is not undefined
从左到右的读取。
let [x , y] = [];//[undefined,undefined]
复制代码
注意:ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined。
3、2 对象的解构赋值
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: "aaa", bar: "bbb" };baz // undefined
let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz//"aaa",foo是匹配的模式,baz才是变量名
let { foo, bar } = { foo: "aaa", bar: "bbb" };
是下面表示的简写。
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
复制代码
由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。数组arr的0键对应的值是1,[arr.length - 1]就是2键,对应的值是3。方括号这种写法,属于属性名表达式。
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3
复制代码
3、3 字符串的解构赋值
字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
复制代码
类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
len // 5
复制代码
3、4 数值和布尔值的解构赋值
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
复制代码
解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。 由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错。
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
复制代码
3、5 函数参数的解构赋值
function move({x = 0, y = 0} = {}) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
复制代码
上面代码中,函数move为变量x和y指定默认值,函数move的参数是一个对象,通过对这个对象进行解构,得到变量x和y的值。如果解构失败,x和y等于默认值。用实参将{}覆盖。
function move({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined],相当于{x,y}={x,3}
move({}); // [undefined, undefined],相当于{x,y}={};
move(); // [0, 0]
复制代码
上面代码是为函数move的参数(形参)指定默认值,而不是为变量x和y指定默认值,所以会得到与前一种写法不同的结果。这种写法直接是将所传参数将默认参数进行覆盖。用实参将{x:0,y:0}覆盖。
上面两种写法本质上都是用所传参数将默认参数进行覆盖。
3、6 解构赋值的用处
(1) 交换变量的值。 let{x,y}={y,x};
复制代码
(2) 从函数返回多个值;
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
复制代码
(3) 函数参数的定义;
function f([x, y, z]) { ... }
f([1, 2, 3]);
复制代码
(4) 提取json数据
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
复制代码
(5) 输入模块的指定方法;
const { SourceMapConsumer, SourceNode } = require("source-map");
复制代码
(6) 函数参数的默认值(这样避免了在函数内部再设置默认值)
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
} = {}) {
// ... do stuff
};
复制代码
(7) 遍历map结构(map原生支持iterator接口)
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
// first is hello
// second is world
// 获取键名
for (let [key] of map) {
// ...
}
// 获取键值
for (let [,value] of map) {
// ...
}
复制代码
4、字符串的扩展
4、1 includes()、startsWith()、endsWith()
includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。 endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
这三个方法都支持第二个参数,表示开始搜索的位置。endsWith的行为与其他两个方法有所不同,n表示的是结束搜索的位置,而其他两个方法针n个表示的是开始搜索的位置。
4、2 repeat()
repeat方法返回一个新字符串,表示将原字符串重复n次。 参数如果是小数,会被取整。相当于调用了parseInt()。
”a”.repeat(1.9)==>”a”.
复制代码
如果repeat的参数是字符串,则会先转换成数字。
'na'.repeat('na') // "" Number("na")等于NAN
'na'.repeat('3') // "nanana"
复制代码
4、3 padStart(),padEnd()
padStart()用于头部补全,padEnd()用于尾部补全。padStart()和padEnd()一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。 (1) 如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
'xxx'.padStart(5, 'ab') // 'abxxx'
'xxx'.padEnd(5, 'ab') // 'xxxab'
复制代码
(2) 如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串。
'abc'.padStart(10, '0123456789') // '0123456abc'
复制代码
(3) 如果省略第二个参数,默认使用空格补全长度。
'x'.padStart(4) // ' x'
'x'.padEnd(4) // 'x '
复制代码
4、4 模板字符串
是增强版的字符串,用反引号(`)标识。
(1) 如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。
let greeting = `\`Yo\` World!`;
复制代码
(2) 所有模板字符串的空格和换行,都是被保留的,比如ul标签前面会有一个换行。如果你不想要这个换行,可以使用trim方法消除它。
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`.trim());
复制代码
(3)模板字符串中嵌入变量,需要将变量名写在${}之中。
(4)大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性。如果大括号中的值不是字符串,将按照一般的规则转为字符串。本质:模板字符串的大括号内部,就是执行 JavaScript 代码。
let x = 1;
let y = 2;
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"
let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"
复制代码
(5)模板字符串之中还能调用函数。
function fn() {
return "Hello World";
}
`foo ${fn()} bar`
// foo Hello World bar
复制代码
5、数值的扩展
5、1 Number.isFinite()、Number.isNaN()
这两个新方法只对数值有效,不会先调用Number()方法。
Number.isFinite(): 用来检查一个数值是否为有限的(finite)。如果参数类型不是数值,Number.isFinite一律返回false。
Number.isNaN(): 用来检查一个值是否为NaN。Number.isNaN()只有对于NaN才返回true,非NaN一律返回false。
5、2 Number.isSafeInteger
Number.isSafeInteger()则是用来判断一个整数是否落在这个范围之内。javaScript 能够准确表示的整数范围在-2^53到2^53之间(不含两个端点),超过这个范围,无法精确表示这个值。Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量,用来表示这个范围的上下限。
5、3 Math对象的扩展
扩展方法在使用时都会参数使用Number()转为数值来来处理。
Math.trunc(): 用于去除一个数的小数部分,返回整数部分。对于非数值,Math.trunc内部使用Number方法将其先转为数值(本质上就是parseInt()方法)。
Math.trunc(4.1) // 4
Math.trunc(4.9) // 4
Math.trunc(-4.1) // -4
Math.trunc(-4.9) // -4
Math.trunc(-0.1234) // -0
Math.trunc('123.456') // 123
Math.trunc(true) //1
Math.trunc(false) // 0
Math.trunc(null) // 0
Math.trunc('123.456') // 123
Math.trunc(true) //1
Math.trunc(false) // 0
Math.trunc(null) // 0
复制代码
Math.sign(): 用来判断一个数到底是正数、负数、还是零。
• 参数为正数,返回+1;
• 参数为负数,返回-1;
• 参数为 0,返回0;
• 参数为-0,返回-0;
• 其他值,返回NaN。
Math.sign(-5) // -1
Math.sign(5) // +1
Math.sign(0) // +0
Math.sign(-0) // -0
Math.sign(NaN) // NaN
复制代码
Math.cbrt(): 用于计算一个数的立方根。对于非数值,Math.cbrt方法内部也是先使用Number方法将其转为数值。
Math.cbrt(-1) // -1
Math.cbrt(0) // 0
Math.cbrt(1) // 1
Math.cbrt(2) // 1.2599210498948734
Math.cbrt("8")//2
复制代码
Math.imul(): 方法返回两个数以 32 位带符号整数形式相乘的结果,返回的也是一个 32 位的带符号整数。
Math.imul(2, 4) // 8
Math.imul(-1, 8) // -8
Math.imul(-2, -2) // 4
复制代码
Math.hypot(): 方法返回所有参数的平方和的平方根。
Math.hypot(3, 4); // 5
Math.hypot(3, 4, 5); // 7.0710678118654755
Math.hypot(); // 0
Math.hypot(NaN); // NaN
Math.hypot(3, 4, 'foo'); // NaN
Math.hypot(3, 4, '5'); // 7.0710678118654755
Math.hypot(-3); // 3
复制代码
6、函数的扩展
6、1 函数参数的默认值
参数变量是默认声明的,所以不能用let或const再次声明。
function foo(x = 5) {
let x = 1; // error
const x = 2; // error
}
foo()//Identifier 'x' has already been declared
复制代码
6、2 函数的length属性
指定了默认值以后,函数的length属性,将返回没有指定默认值之前的的参数的个数。 也就是说,指定了默认值后,length属性将失真。默认值后面的参数将不参加计算。函数的length属性,不包括 rest 参数。
(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2
(function(...args) {}).length // 0
复制代码
6、3 作用域
一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context)。等到初始化结束,这个作用域就会消失。(本质上是暂时性死区和不能重复声明)
var x = 1;
function f(x, y = x) {
//let x=3;Identifier 'x' has already been declared
//let y=7;// Identifier 'y' has already been declared
console.log(y);//2
}
f(2)
复制代码
6、4 rest参数
形式为(...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。注意:rest参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。
function push(array, ...items) {
items.forEach(function(item) {
array.push(item);
console.log(item);
});
}
var a = [];
push(a, 1, 2, 3)
复制代码
6、5 严格模式
只要函数参数使用了默认值、解构赋值、或者扩展运算符(ES6语法默认是严格模式),那么函数内部就不能显式设定为严格模式,否则会报错。6、6 name属性
如果将一个匿名函数赋值给一个变量,ES5的name属性,会返回空字符串,而 ES6 的name属性会返回实际的函数名。 如果将一个具名函数赋值给一个变量,则 ES5 和 ES6 的name属性都返回这个具名函数原本的名字。
const bar = function baz() {};
// ES5
bar.name // "baz"
// ES6
bar.name // "baz"
复制代码
6、7 箭头函数
ES6 允许使用“箭头”(=>)定义函数。如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。 如果箭头函数直接返回一个对象,必须在对象外面加上括号 ,否则会报错。
// 报错
let getTempItem = id => { id: id, name: "Temp" };
// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });
复制代码
箭头函数需要注意的地方有以下几点
1. 函数体内的this对象,就是定义时所在的对象(固定不变),而不是使用时所在的对象。
2. 不可以当作构造函数, 也就是说,不可以使用new命令,否则会抛出一个错误。 3. 不可以使用arguments对象, 该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
4. 不可以使用yield命令, 因此箭头函数不能用作 Generator 函数。
function Timer() {
this.s1 = 0;
this.s2 = 0;
// 箭头函数
setInterval(() => this.s1++, 1000);
// 普通函数
setInterval(function () {
this.s2++;//this表示window,setInterval是window的属性
}, 1000);
}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0
复制代码
上面代码中,Timer函数内部设置了两个定时器,分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域(即Timer函数),后者的this指向运行时所在的作用域(即全局对象)。所以,3100 毫秒之后,timer.s1被更新了 3 次,而timer.s2一次都没更新。 this固定化的本质:并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。 正常情况下,this引用的是函数据以执行的环境对象,或者说是调用该函数的对象。
function foo() {
return () => {
return () => {
return () => {
console.log('id:', this.id);
};
};
};
}
var f = foo.call({id: 1});
var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1
复制代码
上面代码之中,只有一个this,就是函数foo的this,所以t1、t2、t3都输出同样的结果。因为所有的内层函数都是箭头函数,都没有自己的this,它们的this其实都是最外层foo函数的this。
箭头函数不适用场合:
1、定义函数的方法(此时应该用普通函数的方式)
var lives=18;
const cat = {
lives: 9,
a:this.lives,//this指向的是window,
say:function(){
console.log(this.lives);//this指的是cat
},
jumps: () => {
this.lives--;//this指的是window,定义时的this指的就是window
}
}
cat.say();
cat.jumps();
console.log(cat.a);
复制代码
2、需要动态this的时候
var button = document.getElementById('press');
button.addEventListener('click', () => {
this.classList.toggle('on');//this指的是window
})
复制代码
适用场合:回调
var handler = {
id: '123456',
init: function() {
document.addEventListener('click',
event => this.doSomething(event.type), false);//this指的是handler
},
doSomething: function(type) {
console.log('Handling ' + type + ' for ' + this.id);//this指的是hander
}
};
复制代码
6、8 尾调用
是指某个函数的最后一步是调用另一个函数。 尾调用由于是函数的最后一步操作,所以不需要保留外层函数的调用帧,因为调用位置、内部变量等信息都不会再用到了,只要直接用内层函数的调用帧,取代外层函数的调用帧就可以了。(就是说外层函数的作用域链会被销毁,但它的活动对象任然会留在内存中)
function f(x){
return g(x);
}
复制代码
6、9 尾递归
尾调用自身,就称为尾递归。缺点:把所有用到的内部变量改写成函数的参数。优点:不会发生栈溢出,相对节省内存。
function factorial(n, total) {
if (n === 1) return total;
return factorial(n - 1, n * total);
}
factorial(5, 1) // 120
复制代码
采用es6语法(参数的默认值)可以解决这个缺点
function factorial(n, total=1) {
if (n === 1) return total;
return factorial(n - 1, n * total);
}
factorial(5) // 120
复制代码
7、数组的扩展
7、1 扩展运算符
扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。 扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换。
注意:扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。本质上就是rest参数
console.log(…[1,2,3])// 1 2 3
复制代码
扩展运算符的应用:
1、 替代函数的apply用法
// ES5 的写法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6的写法
function f(x, y, z) {
// ...
}
let args = [0, 1, 2];
f(...args);
复制代码
2、求取数组中的最大值:
// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
复制代码
3、 简化push函数的用法
// ES5的 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
// ES6 的写法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);
复制代码
4、 复制数组
const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;
写法一二相当于把数组中a1的元素复制到a2中
const a1 = [1, 2];
const a2 = a1.concat();
a2[0] = 2;
a1 // [1, 2]
上面两个方法修改a2都不会对a1产生影响。
复制代码
5、 合并数组
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
这两种方法都是浅拷贝,使用的时候需要注意。
const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];
const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];
console.log(a3[0] === a1[0]) // true 指向相同的内存地址
console.log(a4[0] === a1[0]) // true 指向相同的内存地址
a3[0].foo=2;
console.log(a1)//{foo: 2}
复制代码
a3和a4是用两种不同方法合并而成的新数组,但是它们的成员都是对原数组成员的引用,这就是浅拷贝。如果修改了原数组的成员,会同步反映到新数组。
6、 与解构赋值结合
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest) // [2, 3, 4, 5]
const [first, ...rest] = [];
console.log(first) // undefined
console.log(rest) // []
const [first, ...rest] = ["foo"];
console.log(first) // "foo"
console.log(rest) // []
复制代码
将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。跟rest参数一样。
const [...butLast, last] = [1, 2, 3, 4, 5];// 报错
const [first, ...middle, last] = [1, 2, 3, 4, 5];//报错,Rest element must be last element
复制代码
7、 字符串
扩展运算符还可以将字符串转为真正的数组。
[...'hello']; // [ "h", "e", "l", "l", "o" ]
[…'hello'].length;//5
复制代码
8、 实现了 Iterator 接口的对象
任何定义了遍历器(Iterator)接口的对象,都可以用扩展运算符转为真正的数组。
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];//实现了Iterator接口
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
let arr = [...arrayLike];// // TypeError: Cannot spread non-iterable object.
//可以改成下面这样
let arr=Array.form(arrayLike)//把对象变成数组,把类似数组的变成数组
复制代码
map结构:
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]
Generator 函数:
const go = function*(){
yield 1;
yield 2;
yield 3;
};
[...go()] // [1, 2, 3]
复制代码
7、2 Array.from()
Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。
任何有length属性的对象,都可以通过Array.from方法转为数组,而此时扩展运算符就无法转换。
Array.from({ length: 3 });
// [ undefined, undefined, undefined ]
复制代码
1、类似于数组的对象
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']
复制代码
2、可遍历的对象:
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
复制代码
3、不支持该方法的浏览器,可以用下面这种方法来进行兼容:
const toArray = (() =>
Array.from ? Array.from : obj => [].slice.call(obj)
)();
复制代码
4、Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)// [1, 4, 9]
let spans = document.querySelectorAll('span.name');
// map()
let names1 = Array.prototype.map.call(spans, s => s.textContent);
// Array.from()
let names2 = Array.from(spans, s => s.textContent)
复制代码
5、Array.from()可以将各种值转为真正的数组。
Array.from({ length: 2 }, () => 'jack')// ['jack', 'jack']
复制代码
6、将字符串转为数组,然后返回字符串的长度
function countSymbols(string) {
return Array.from(string).length;
}
复制代码
7、3 Array.of()
用于将一组值,转换为数组。这个方法的主要目的,是弥补数组构造函数Array()的不足。Array.of基本上可以用来替代Array()或new Array()。 Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
复制代码
7、4 copywithin()
数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。
Array.prototype.copyWithin(target, start = 0, end = this.length)
target(必需):从该位置开始替换数据。如果为负值,表示倒数。
start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示倒数。
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
[1, 2, 3, 4, 5].copyWithin(0, 3)// [4, 5, 3, 4, 5]
上面代码表示将从 3 号位直到数组结束的成员(4 和 5),复制到从 0 号位开始的位置,结果覆盖了原来的 1 和 2。
[1, 2, 3, 4, 5].copyWithin(0, 2)// [3, 4, 5, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 2,3)// [3, 2, 3, 4, 5]
复制代码
7、5 find()和findIndex()
数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。 [1, 4, -5, 10].find((n) => n < 0)// -5
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
复制代码
数组实例的findIndex(),返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
复制代码
这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。
function f(v){
return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person); // 26
复制代码
这两个方法都可以发现NaN,弥补了数组的indexOf方法的不足。
[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))
// 0
复制代码
Object.is()用来比较两个值是否严格相等,与严格相等运算符(===)一样。
7、6 fill()
//使用给定值,填充一个数组,并返回填充后的数组。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
复制代码
数组中已有的元素,会被全部抹去。 fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。这根splice()很像,只是splice方法没有返回值。
['a', 'b', 'c'].fill(7, 1, 2)// ['a', 7, 'c']
复制代码
注意:如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象。
let arr = new Array(3).fill({name: "Mike"});
arr[0].name = "Ben";
console.log(arr)// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]
复制代码
7、7 entries()、keys()、values()
它们都返回一个遍历器对象(Iterator),可以用for...of循环进行遍历。 let letter = ['a', 'b', 'c'];
let keys=letter.keys();
let values=letter.values()
let entries = letter.entries();
console.log(keys,values,entries)
// Array Iterator {} Array Iterator {} Array Iterator {}
for (let index of keys) {
console.log(index);
} //0, //1,//2
复制代码
7、8 includes()
返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。 [1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
复制代码
该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。
indexOf方法有两个缺点。
1、不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1。
2、它内部使用严格相等运算符(===)进行判断,这会导致对NaN的误判。
[NaN].includes(NaN) //true
复制代码
可以用如下方法来判断当前环境是否支持该方法。
const contains = (() =>
Array.prototype.includes ?
(arr, value) => arr.includes(value) :
(arr, value) => arr.some(el => el === value)
)();
console.log(contains(['foo', 'bar'], 'baz')); // => false
复制代码
7、9 flat()、flatMap()
用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。
[1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]
[1, [2, [3]]].flat(Infinity) // [1, 2, 3],这种方式不管嵌套多少层,都会被拉平。
复制代码
如果原数组有空位,flat()方法会跳过空位。
[1, 2, , 4, 5].flat() // [1, 2, 4, 5]
复制代码
flatMap()方法对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。flatMap()只能展开一层数组。
// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]
复制代码
7、10 数组的空位
注意,空位不是undefined,一个位置的值等于undefined,依然是有值的。空位是没有任何值。ES5:
1、forEach(), filter(), reduce(), every() 和some()都会跳过空位。
2、map()会跳过空位,但会保留这个值。
3、join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。
ES6:明确将空位转为undefined。
8、对象的扩展
8、1 属性的简洁表示法
const foo = 'bar';
const baz = {foo};
console.log(baz) // {foo: "bar"}
// 等同于
const baz = {foo: foo};
复制代码
ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值。
function f(x, y) {
return {x, y};
}
// 等同于
function f(x, y) {
return {x: x, y: y};
}
f(1, 2) // {x: 1, y: 2}
复制代码
8、2 属性名表达式
JavaScript 定义对象的属性,有两种方法。 // 方法一
obj.foo = true;
// 方法二
obj['a' + 'bc'] = 123;
复制代码
ES6 允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内。
let lastWord = 'last word';
const a = {
'first word': 'hello',
[lastWord]: 'world'
};
a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"
复制代码
表达式还可以用于定义方法名。
let obj = {
['h' + 'ello']() {
return 'hi';
}
};
obj.hello() // hi
复制代码
注意,属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串[object Object],这一点要特别小心。
const keyA = {a: 1};
const keyB = {b: 2};
const myObject = {
[keyA]: 'valueA',
[keyB]: 'valueB'
};
myObject // Object {[object Object]: "valueB"}
复制代码
8、3 方法的name属性
const person = {
sayName() {
console.log('hello!');
},
};
person.sayName.name // "sayName"
复制代码
如果对象的方法使用了取值函数(getter)和存值函数(setter),则name属性不是在该方法上面,而是该方法的属性的描述对象的get和set属性上面,返回值是方法名前加上get和set。
const obj = {
get foo() {},
set foo(x) {}
};
obj.foo.name
// TypeError: Cannot read property 'name' of undefined
const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');
descriptor.get.name // "get foo"
descriptor.set.name // "set foo"
复制代码
如果对象的方法是一个 Symbol 值,那么name属性返回的是这个 Symbol 值的描述。
const key1 = Symbol('description');
const key2 = Symbol();
let obj = {
[key1]() {},
[key2]() {},
};
obj[key1].name // "[description]"
obj[key2].name // ""
复制代码
有两种特殊情况:bind方法创造的函数,name属性返回bound加上原函数的名字;Function构造函数创造的函数,name属性返回anonymous(匿名)。
(new Function()).name // "anonymous"
var doSomething = function() {
// ...
};
doSomething.bind().name // "bound doSomething"
复制代码
8、4 属性的可枚举性和遍历
1、可枚举性: 对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。 let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
// {
// value: 123,
// writable: true,
// enumerable: true,//可枚举性
// configurable: true
// }
复制代码
目前,有四个操作会忽略enumerable为false的属性。
1、 for...in循环:只遍历对象自身的和继承的可枚举的属性。
2、 Object.keys():返回对象自身的可枚举的属性的属性。
3、 JSON.stringify():只串行化对象自身的可枚举的属性。
4、 Object.assign(): 忽略enumerable为false的属性,只拷贝对象自身的可枚举的属性。
总结:尽量不要用for...in循环,而用Object.keys()代替。
2、属性的遍历
1、 for…in:for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。
2、 Object.keys(obj) 返回一个数组,包括对象自身的所有可枚举属性(不含 Symbol 属性)的键名。
3、 Object.getOwnPropertyNames(obj) 返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。
4、 Object.getOwnPropertySymbols(obj) 返回一个数组,包含对象自身的所有 Symbol 属性的键名。
5、 Reflect.ownKeys(obj) 返回一个数组,包含对象自身的所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。
以上的 5 种方法遍历对象的键名,都遵守同样的属性遍历的次序规则。
1、首先遍历所有数值键,按照数值升序排列。
2、其次遍历所有字符串键,按照加入时间升序排列。
3、最后遍历所有 Symbol 键,按照加入时间升序排列。
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 }) // ['2', '10', 'b', 'a', Symbol()]
复制代码
8、5 对象的扩展运算符
对象的解构赋值 (在=赋值左边) 用于从一个对象取值,相当于将目标对象自身的所有可遍历的(enumerable)、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。属于浅拷贝。
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1 y // 2 z // { a: 3, b: 4 }
复制代码
对象的解构赋值的注意事项
1、由于解构赋值要求等号右边是一个对象,所以如果等号右边是undefined或null,就会报错,因为它们无法转为对象。
let { x, y, ...z } = null; // 运行时错误
let { x, y, ...z } = undefined; // 运行时错误
复制代码
2、解构赋值必须是最后一个参数,否则会报错。
let { ...x, y, z } = someObject; // 句法错误
let { x, ...y, ...z } = someObject; // 句法错误
复制代码
3、扩展运算符的解构赋值,不能复制继承自原型对象的属性。
let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let { ...o3 } = o2;
o3 // { b: 2 }
o3.a // undefined
Object.create({ x: 1, y: 2 });创建的是原型对象
const o = Object.create({ x: 1, y: 2 });
o.z = 3;
let { x, ...newObj } = o;//newObj只能获取z的值
let { y, z } = newObj;
x // 1
y // undefined
z // 3
复制代码
4、 变量声明语句之中,如果使用解构赋值,扩展运算符后面必须是一个变量名,而不能是一个解构赋值表达式。
let { x, ...{ y, z } } = o;
// SyntaxError: ... must be followed by an identifier in declaration contexts
复制代码
扩展运算符: (在等号=右边) 对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。
对象的扩展运算符的注意事项
1、由于数组是特殊的对象,所以对象的扩展运算符也可以用于数组。
let foo = { ...['a', 'b', 'c'] };
console.log(foo);// {0: "a", 1: "b", 2: "c"}
复制代码
2、 如果扩展运算符后面不是对象,则会自动将其转为对象。
// 等同于 {...Object(1)}
{...1} // {} 由于该对象没有自身属性,所以返回一个空对象。
// 等同于 {...Object(true)}
{...true} // {}
// 等同于 {...Object(undefined)}
{...undefined} // {}
// 等同于 {...Object(null)}
{...null} // {}
复制代码
3、 如果扩展运算符后面是字符串,它会自动转成一个类似数组的对象,因此返回的不是空对象。
{...'hello'} // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
复制代码
4、 对象的扩展运算符等同于使用Object.assign()方法。
let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);
复制代码
5、 如果想完整克隆一个对象,还拷贝对象原型的属性,可以采用下面的写法。
// 写法1
const clone2 = Object.assign(
Object.create(Object.getPrototypeOf(obj)),
obj
);
// 写法2
const clone3 = Object.create(
Object.getPrototypeOf(obj),
Object.getOwnPropertyDescriptors(obj)
)
复制代码
6、 扩展运算符可以用于合并两个对象。
let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);
复制代码
7、 如果用户自定义的属性,放在扩展运算符后面,则扩展运算符内部的同名属性会被覆盖掉。
let a={x:2,y:3;z:4}
let aWithOverrides = { ...a, x: 1, y: 2 };
console.log(aWithOverrides)// {x: 1, y: 2, z: 4}
let arr={a:1,b:2}
let arr1={b:3,c:4}
let arr2={...arr,...arr1}
console.log(arr2) // {a: 1, b: 3, c: 4}
复制代码
9、对象的新增方法
9、1 Object.is()
用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。与ES5的不同之处只有两个:一是+0不等于-0,二是NaN等于自身。 +0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
复制代码
ES5 可以通过下面的代码,部署Object.is。
Object.defineProperty(Object, 'is', {
value: function(x, y) {
if (x === y) {
// 针对+0 不等于 -0的情况
return x !== 0 || 1 / x === 1 / y;
}
// 针对NaN的情况
return x !== x && y !== y;
},
configurable: true,
enumerable: false,
writable: true
});
复制代码
9、2 Object.assign()
用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。 如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。 const target = { a: 1, b: 1 };
const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };
const target={};
Object.assign(target, source1, source2);
Console.log(target); // {a:1, b:2, c:3}
复制代码
注意1:由于undefined和null无法转成对象,所以如果它们作为参数,就会报错。如果undefined和null不在首参数,就不会报错。
Object.assign(undefined) // 报错
Object.assign(null) // 报错
let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true
复制代码
注意2:其他类型的值(即数值、字符串和布尔值)不在首参数,也不会报错。但是,除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果。
const v1 = 'abc';
const v2 = true;
const v3 = 10;
const obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }
复制代码
注意3:Object.assign拷贝的属性是有限制的,只拷贝源对象的自身属性(不拷贝继承属性),也不拷贝不可枚举的属性(enumerable: false)。
Object.assign的特点
1、 Object.assign()是浅拷贝。
2、 同名属性的替换;(后者替换前者)
3、 数组的处理。Object.assign把数组视为属性名为 0、1、2 的对象,因此源数组的 0 号属性4覆盖了目标数组的 0 号属性1。
Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]
复制代码
4、 取值函数的处理;(求值后再复制)
const source = {
get foo() { return 1 }
};
const target = {};
Object.assign(target, source)
// { foo: 1 }
复制代码
Object.assign的常见用途:
1、 为对象添加属性
class Point {
constructor(x, y) {
Object.assign(this, {x, y});
}
}
复制代码
2、 为对象添加方法
Object.assign(SomeClass.prototype, {
someMethod(arg1, arg2) {
},
anotherMethod() {
}
});
// 等同于下面的写法
SomeClass.prototype.someMethod = function (arg1, arg2) {
};
SomeClass.prototype.anotherMethod = function () {
};
复制代码
3、 克隆对象(克隆自身与其继承的值)
function clone(origin) {
let originProto = Object.getPrototypeOf(origin);
return Object.assign(Object.create(originProto), origin);
}
复制代码
4、 合并多个对象
const merge = (target, ...sources) => Object.assign(target, ...sources);
复制代码
5、 为属性指定默认值
const DEFAULTS = {
logLevel: 0,
outputFormat: 'html'
};
function processContent(options) {
options = Object.assign({}, DEFAULTS, options);
}
复制代码
9、3 Object.getOwnPropertyDescriptors()
返回指定对象所有自身属性(非继承属性)的描述对象。主要是为了解决Object.assign()无法正确拷贝get属性和set属性的问题。
9、4. __proto__属性,Object.setPrototypeOf(),Object.getPrototypeOf()
__proto__属性:
用来读取或设置当前对象的prototype对象。目前,所有浏览器(包括 IE11)都部署了这个属性。建议不要使用此属性。使用下面的Object.setPrototypeOf()(写操作)、Object.getPrototypeOf()(读操作)、Object.create()(生成操作)代替。
Object.setPrototypeOf(): 用来设置一个对象的prototype对象。如果第一个参数不是对象,会自动转为对象。但是由于返回的还是第一个参数,所以这个操作不会产生任何效果。 由于undefined和null无法转为对象,所以如果第一个参数是undefined或null,就会报错。
Object.setPrototypeOf(1, {}) === 1 // true
Object.setPrototypeOf('foo', {}) === 'foo' // true
Object.setPrototypeOf(true, {}) === true // true
Object.setPrototypeOf(undefined, {})
// TypeError: Object.setPrototypeOf called on null or undefined
Object.setPrototypeOf(null, {})
// TypeError: Object.setPrototypeOf called on null or undefined
复制代码
Object.getPrototypeOf() 用于读取一个对象的原型对象。如果参数不是对象,会被自动转为对象。如果参数是undefined或null,它们无法转为对象,所以会报错。
Object.getPrototypeOf(1) === Number.prototype // true
Object.getPrototypeOf('foo') === String.prototype // true
Object.getPrototypeOf(true) === Boolean.prototype // true
Object.getPrototypeOf(null)
// TypeError: Cannot convert undefined or null to object
Object.getPrototypeOf(undefined)
// TypeError: Cannot convert undefined or null to object
复制代码
Object.create() 从指定原型对象创建一个新的对象.
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.sayName=function(){
console.log(this.name)
}
function Teacher(subject,name,age){
this.subject=subject;
return Person.call(this,name,age);//继承Person实例属性
}
//继承原型属性,指向同一引用地址
Teacher.prototype=Object.create(Person.prototype);
var person1=new Person();
var person2=Object.create(person1);
person2.__proto__===person1;//true;
复制代码
9、5 Object.keys(),Object.values(),Object.entries()
Object.keys(): 返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。
Object.values(): 返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。属性名为数值的属性,是按照数值大小,从小到大遍历的,因此返回的顺序是b、c、a。Object.values会过滤属性名为 Symbol 值的属性。
const obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj)
// ["b", "c", "a"]
Object.values({ [Symbol()]: 123, foo: 'abc' });
// ['abc'] 会过滤属性名为 Symbol 值的属性。
如果参数不是对象,Object.values会先将其转为对象。如果Object.values方法的参数是一个字符串,会返回各个字符组成的一个数组。
Object.values('foo') // ['f', 'o', 'o']
Object.values(42) // []
Object.values(true) // []
复制代码
Object.entries(): 返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。除了返回值不一样,该方法的行为与Object.values基本一致。
const obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]
复制代码
主要用途: 1、 遍历对象的属性。 2、 将对象转为真正的Map结构。
const obj = { foo: 'bar', baz: 42 };
const map = new Map(Object.entries(obj));
map // Map { foo: "bar", baz: 42 }
复制代码
Object.fromEntries(): 是Object.entries()的逆操作,用于将一个键值对数组转为对象。
9、6 Obj.hasOwnProperty(obj.prop)
返回一个布尔值,指示对象自身属性中是否具有指定的属性。和 in 运算符不同,该方法会忽略掉那些从原型链上继承到的属性。 o = new Object();
o.prop = 'exists';
o.hasOwnProperty('prop'); // 返回 true
o.hasOwnProperty('toString'); // 返回 false
o.hasOwnProperty('hasOwnProperty'); // 返回 false
复制代码
10、Symbol
新的原始数据类型Symbol,表示独一无二的值,是javascript的第七种数据类型。前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。
注意事项:
1、Symbol函数前不能使用new命令,否则会报错。由于 Symbol 值不是对象,所以不能添加属性。基本上,它是一种类似于字符串的数据类型。 Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述。
let s1 = Symbol('foo');
let s2 = Symbol('bar');
console.log(s1) // Symbol(foo)
console.log(s1.toString()) // Symbol(foo)
复制代码
2、如果 Symbol 的参数是一个对象,就会调用该对象的toString方法,将其转为字符串,然后才生成一个 Symbol 值。
const obj = {
toString() {
return 'abc';
}
};
const sym = Symbol(obj);
console.log(sym) // Symbol(abc)
复制代码
3、Symbol函数的参数只是表示对当前 Symbol 值的描述,因此相同参数的Symbol函数的返回值是不相等的。
// 没有参数的情况
let s1 = Symbol();
let s2 = Symbol();
s1 === s2 // false
// 有参数的情况
let s1 = Symbol('foo');
let s2 = Symbol('foo');
s1 === s2 // false
复制代码
4、Symbol 值不能与其他类型的值进行运算,会报错。
let sym = Symbol('My symbol');
"your symbol is " + sym
// TypeError: can't convert symbol to string
`your symbol is ${sym}`
// TypeError: can't convert symbol to string
复制代码
5、Symbol 值可以显式转为字符串。也可以转为布尔值,但是不能转为数值。
let sym = Symbol('My symbol');
String(sym) // 'Symbol(My symbol)'
sym.toString() // 'Symbol(My symbol)'
let sym = Symbol();
Boolean(sym) // true
!sym // false
if (sym) {
}
Number(sym) // TypeError
Console.log(sym + 2) // TypeError
复制代码
10.1、 作为属性名
Symbol 值作为对象属性名时,不能用点运算符。一般使用方括号。 const mySymbol = Symbol();
const a = {};
a.mySymbol = 'Hello!';//此处的mySymbol只能看成是字符串,而不能看成是一个Symbol值
console.log(a[mySymbol]) // undefined
consoe.log(a['mySymbol']) // "Hello!"
复制代码
在对象的内部,使用 Symbol 值定义属性时,Symbol 值必须放在方括号之中。
let s = Symbol();
let obj = {
[s]: function (arg) { ... }
};
obj[s](123);
复制代码
Symbol 类型还可以用于定义一组常量,保证这组常量的值都是不相等的。 Symbol 值作为属性名时,该属性还是公开属性,不是私有属性。 魔术字符串:在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。利用Symbol来消除。
const shapeType = {
triangle: Symbol('Triangle')
};
function getArea(shape, options) {
let area = 0;
switch (shape) {
case shapeType.triangle:
area = 5 * options.width * options.height;
break;
}
return area;
}
getArea(shapeType.triangle, { width: 100, height: 100 });
复制代码
10、2 属性名的遍历
Symbol 作为属性名,该属性不会出现在for...in、for...of循环中,也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。但是,它也不是私有属性,有一个Object.getOwnPropertySymbols方法,可以获取指定对象的所有 Symbol 属性名。 可以利用这个特性,为对象定义一些非私有的、但又希望只用于内部的方法。10、3 Symbol.for()、Symbol.keyFor()
Symbol.for(“foo”): 接受一个字符串作为参数,然后搜索有没有以该参数作为名称的 Symbol 值。如果有,就返回这个 Symbol 值,否则就新建并返回一个以该字符串为名称的 Symbol 值。
let s1 = Symbol.for('foo');
let s2 = Symbol.for('foo');
console.log(s1 === s2) // true
复制代码
Symbol.keyFor: 返回一个已登记的 Symbol 类型值的key。返回一个使用Symbol.for()方法定义的key。
let s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo"
let s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined
复制代码
注意:Symbol.for为 Symbol 值登记的名字,是全局环境的,可以在不同的 iframe 或 service worker 中取到同一个值。
10、4 内置的Symbol值
Symbol.hasInstance: 对象的Symbol.hasInstance属性,指向一个内部方法。当其他对象使用instanceof运算符,判断是否为该对象的实例时,会调用这个方法。比如,foo instanceof Foo在语言内部,实际调用的是Foo[Symbol.hasInstance](foo)。
class MyClass {
[Symbol.hasInstance](foo) {
return foo instanceof Array;
}
}
Console.log([1, 2, 3] instanceof new MyClass()) // trueSymbol.isConcatSpreadable
复制代码
Symbol.isConcatSpreadable: 等于一个布尔值,表示该对象用于Array.prototype.concat()时,是否可以展开。
let arr1 = ['c', 'd'];
['a', 'b'].concat(arr1, 'e') // ['a', 'b', 'c', 'd', 'e']
arr1[Symbol.isConcatSpreadable] // undefined
let arr2 = ['c', 'd'];
arr2[Symbol.isConcatSpreadable] = false;
['a', 'b'].concat(arr2, 'e') // ['a', 'b', ['c','d'], 'e']
复制代码
类似数组的对象正好相反,默认不展开。它的Symbol.isConcatSpreadable属性设为true,才可以展开。
let obj = {length: 2, 0: 'c', 1: 'd'};
['a', 'b'].concat(obj, 'e') // ['a', 'b', obj, 'e']
obj[Symbol.isConcatSpreadable] = true;
['a', 'b'].concat(obj, 'e') // ['a', 'b', 'c', 'd', 'e']
复制代码
Symbol.species: 指向一个构造函数。创建衍生对象时,会使用该属性。下面例子中b、c是a的衍生对象。
class MyArray extends Array {
static get [Symbol.species]() { return Array; }
}
const a = new MyArray(1, 2, 3);
const b = a.map(x => x);
const c = a.filter(x => x > 1);
b instanceof MyArray // false
b instanceof Array //true
c instanceof MyArray // false
复制代码
主要的用途: 有些类库是在基类的基础上修改的,那么子类使用继承的方法时,作者可能希望返回基类的实例,而不是子类的实例。
还有其他属性就不一一例举了:Symbol.match、Symbol.replace、Symbol.search、Symbol.split、Symbol.iterator、Symbol.toPrimitive、Symbol.toStringTag(toString())、Symbol.unscopables(with)
11、Set
11.1、 Set
一种数据结构,类似于数组,但是成员的值都是唯一的,没有重复的值。
const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
console.log(i);
}
// 2 3 5 4
复制代码
Set函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。
// 例一
const set = new Set([1, 2, 3, 4, 4]);
console.log([...set])
// [1, 2, 3, 4]
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]
// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5
// 例三
const set = new Set(document.querySelectorAll('div'));
set.size // 56
复制代码
将set转为数组的方式
[...new Set('ababbc')]
复制代码
可以用于去重
[...new Set('ababbc')].join('') //abc
复制代码
向 Set 加入值的时候,不会发生类型转换,所以5和"5"是两个不同的值。在 Set 内部,两个NaN是相等。
11.2、 Set实例的属性和方法
实例属性:
1、Set.prototype.constructor:构造函数,默认就是Set函数。
2、Set.prototype.size:返回Set实例的成员总数。
操作方法:
1、add(value):添加某个值,返回 Set 结构本身。
2、delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
3、has(value):返回一个布尔值,表示该值是否为Set的成员。
4、clear():清除所有成员,没有返回值。
Array.from方法可以将 Set 结构转为数组。
const items = new Set([1, 2, 3, 4, 5]);
//方法1
const array = Array.from(items);
//方法2
const arr=[…items]
复制代码
遍历方法:
1、keys():返回键名的遍历器。
2、values():返回键值的遍历器。
3、entries():返回键值对的遍历器。
4、forEach():使用回调函数遍历每个成员。
由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致。 Set 结构的实例默认可遍历,它的默认遍历器生成函数就是它的values方法。
Set.prototype[Symbol.iterator] === Set.prototype.values
// true
复制代码
这意味着,可以省略values方法,直接用for...of循环遍历 Set。
let set = new Set(['red', 'green', 'blue']);
for (let x of set) {
console.log(x);
}
// red // green // blue
复制代码
数组的map和filter方法也可以间接用于 Set 了。
let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set结构:{2, 4, 6}
let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set结构:{2, 4}
复制代码
11.3、 WeakSet
WeakSet 结构与 Set 类似,但是,它与 Set 有两个区别。
首先:WeakSet 的成员只能是对象,而不能是其他类型的值。
const ws = new WeakSet();
ws.add(1)
// TypeError: Invalid value used in weak set
ws.add(Symbol())
// TypeError: invalid value used in weak set
复制代码
其次:WeakSet 中的对象都是弱引用,垃圾回收机制不考虑 WeakSet 对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于 WeakSet 之中。 因此,WeakSet 适合临时存放一组对象。由于上面这个特点,WeakSet 的成员是不适合引用的,因为它会随时消失。WeakSet 不可遍历。
作为构造函数,WeakSet 可以接受一个数组或类似数组的对象作为参数。注意,是a数组的成员成为 WeakSet 的成员,而不是a数组本身。这意味着,数组的成员只能是对象。
const a = [[1, 2], [3, 4]];
const ws = new WeakSet(a);
// WeakSet {[1, 2], [3, 4]}
const b = [3, 4];
const ws = new WeakSet(b);
// Uncaught TypeError: Invalid value used in weak set(…)
复制代码
有以下几个实例方法:add()、delete()、has()。
12、Map
12.1、Map
JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。
Map: 一种数据结构,类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
作为构造函数,Map 也可以接受一个数组作为参数。该数组的成员是一个表示键值对的数组。任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作Map构造函数的参数。这就是说,Set和Map都可以用来生成新的 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"
复制代码
Map构造函数接受数组作为参数,实际上执行的是下面的算法。
const items = [
['name', '张三'],
['title', 'Author']
];
const map = new Map();
items.forEach(
([key, value]) => map.set(key, value)
);
复制代码
如果对同一个键多次赋值,后面的值将覆盖前面的值。只有对同一个对象的引用,Map 结构才将其视为同一个键
const map = new Map();
map.set(1, 'aaa').set(1, 'bbb');
map.get(1) // "bbb"
const map = new Map();
map.set(['a'], 555);
map.get(['a']) // undefined //这两个[“a”]的内存地址不一样
复制代码
注意: 虽然NaN不严格相等于自身,但 Map 将其视为同一个键。
12.2、实例的属性和操作方法:
size、set()、get()、has()、delete()、clear()
12.3、遍历方法
1、 keys():返回键名的遍历器。
2、values():返回键值的遍历器。
3、entries():返回所有成员的遍历器。
4、forEach():遍历 Map 的所有成员。
Map 结构转为数组结构,比较快速的方法是使用扩展运算符(...)。
const map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
[...map.keys()] // [1, 2, 3]
[...map.values()] // ['one', 'two', 'three']
[...map.entries()] // [[1,'one'], [2, 'two'], [3, 'three']]
[...map] // [[1,'one'], [2, 'two'], [3, 'three']]
复制代码
结合数组的map方法、filter方法,可以实现 Map 的遍历和过滤(Map 本身没有map和filter方法)。
const map0 = new Map().set(1, 'a').set(2, 'b').set(3, 'c')
const map1 = new Map(
[...map0].filter(([k, v]) => k < 3)
);
// 产生 Map 结构 {1 => 'a', 2 => 'b'}
const map2 = new Map(
[...map0].map(([k, v]) => [k * 2, '_' + v])
);
// 产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}
复制代码
12.4、与其他数据结构的互相转换:
1、 Map与数组的转换: const myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
[...myMap] //Map转数组
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
复制代码
数组转Map
new Map([
[true, 7],
[{foo: 3}, ['abc']]
])
// Map {
// true => 7,
// Object {foo: 3} => ['abc']
// }
复制代码
2、 Map与对象的转换
Map转对象
function strMapToObj(strMap) {
let obj = Object.create(null);
for (let [k,v] of strMap) {
obj[k] = v;
}
return obj;
}
const myMap = new Map() .set('yes', true).set('no', false);
strMapToObj(myMap) // { yes: true, no: false }
复制代码
对象转Map
function objToStrMap(obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
}
objToStrMap({yes: true, no: false}) // Map {"yes" => true, "no" => false}
复制代码
3、 Map与Json的转换 Map 的键名都是字符串,这时可以选择转为对象 JSON。
function strMapToJson(strMap) {
return JSON.stringify(strMapToObj(strMap));
}
let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'
复制代码
Map 的键名有非字符串,这时可以选择转为数组 JSON。
function mapToArrayJson(map) {
return JSON.stringify([...map]);
}
let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'
复制代码
Json转Map,所有键名都是字符串。
function jsonToStrMap(jsonStr) {
return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}
复制代码
Json转Map,整个 JSON 就是一个数组,且每个数组成员本身,又是一个有两个成员的数组。
function jsonToMap(jsonStr) {
return new Map(JSON.parse(jsonStr));
}
jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}
复制代码
12.5、WeakMap:
WeakMap与Map的区别有两点。首先,WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名。
其次,WeakMap的键名所指向的对象,不计入垃圾回收机制。 WeakMap的专用场合就是,它的键所对应的对象,可能会在将来消失。WeakMap结构有助于防止内存泄漏。
注意 ,WeakMap 弱引用的只是键名,而不是键值。键值依然是正常引用。
const wm = new WeakMap();
let key = {};
let obj = {foo: 1};
wm.set(key, obj);
obj = null;//解除引用,相当于切断联系,但是{foo:1}所占内存空间依然存在。
console.log(wm.get(key))
// Object {foo: 1}
复制代码
WeakMap 与 Map 在 API 上的区别主要是两个,一是没有遍历操作(即没有keys()、values()和entries()方法),也没有size属性。WeakMap只有四个方法可用:get()、set()、has()、delete()。
weakMap的用途:
1、 就是 DOM 节点作为键名
let myElement = document.getElementById('logo');
let myWeakmap = new WeakMap();
myWeakmap.set(myElement, {timesClicked: 0});
myElement.addEventListener('click', function() {
let logoData = myWeakmap.get(myElement);
logoData.timesClicked++;
}, false);
复制代码
2、 部署私有属性
const _counter = new WeakMap();
const _action = new WeakMap();
class Countdown {
constructor(counter, action) {
_counter.set(this, counter);
_action.set(this, action);
}
dec() {
let counter = _counter.get(this);
if (counter < 1) {
return;
}
_counter.set(this, --counter);
if (counter === 0) {
_action.get(this)();
}
}
}
const c = new Countdown(2, () => console.log('DONE'));
c.dec()
c.dec()
// DONE
复制代码
13、Proxy
Proxy 用于修改某些操作的默认行为。 Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。
var proxy = new Proxy(target, handler);
复制代码
target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。
注意:要使得Proxy起作用,必须针对Proxy实例进行操作,而不是针对目标对象进行操作。如果handler没有设置任何拦截,那就等同于直接通向原对象。
var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
target.a // "b"
复制代码
Proxy 实例也可以作为其他对象的原型对象。
var proxy = new Proxy({}, {
get: function(target, property) {
return 35;
}
});
let obj = Object.create(proxy);
obj.time // 35
复制代码
13.1、 Proxy 支持的拦截操作一览,一共 13 种。
1、 get(target, propKey,receiver):拦截对象属性的读取,比如proxy.foo和proxy['foo']。2、 set(target, propKey, value, receiver):拦截对象属性的设置,比如proxy.foo = v或proxy['foo'] = v,返回一个布尔值。
3、has(target, propKey):拦截propKey in proxy的操作,返回一个布尔值。但是has拦截对for...in循环不生效。
4、deleteProperty(target, propKey):拦截delete proxy[propKey]的操作,返回一个布尔值。
5、ownKeys(target):拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
6、getOwnPropertyDescriptor(target, propKey):拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。
7、defineProperty(target, propKey, propDesc):拦截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一个布尔值。
8、preventExtensions(target):拦截Object.preventExtensions(proxy),返回一个布尔值。
9、getPrototypeOf(target):拦截Object.getPrototypeOf(proxy),返回一个对象。
10、isExtensible(target):拦截Object.isExtensible(proxy),返回一个布尔值。否则返回值会被自动转为布尔值。
11、setPrototypeOf(target, proto):拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。
12、apply(target, object, args):拦截 Proxy 实例作为函数调用的操作,比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
13、construct(target, args):拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(...args)。回的必须是一个对象,否则会报错。
13.2、 Proxy.revocable()
方法返回一个可取消的 Proxy 实例。 let target = {};
let handler = {};
let {proxy, revoke} = Proxy.revocable(target, handler);
proxy.foo = 123;
proxy.foo // 123
revoke();
proxy.foo // TypeError: Revoked
复制代码
13.3、 this问题
即不做任何拦截的情况下,也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下,目标对象内部的this关键字会指向 Proxy 代理。 const _name = new WeakMap();
class Person {
constructor(name) {
_name.set(this, name);
}
get name() {
return _name.get(this);
}
}
const jane = new Person('Jane');
console.log(jane.name) // 'Jane'
const proxy = new Proxy(jane, {});
console.log(proxy.name) // undefined
复制代码
如果handler没有设置任何拦截,那就等同于直接通向原对象。因为通过调用构造函数时this指的是Person,而proxy.name获取name时的this指的是proxy,所以此时取不到值。
实例:通过拦截使得this绑定原始对象。
const target = new Date('2015-01-01');
const handler = {
get(target, prop) {
if (prop === 'getDate') {
return target.getDate.bind(target);
}
return Reflect.get(target, prop);
}
};
const proxy = new Proxy(target, handler);
proxy.getDate() // 1
复制代码
14、Reflect
与Proxy对象一样,也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。1. 将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty),放到Reflect对象上。
2. 修改某些Object方法的返回结果,让其变得更合理。
3. 让Object操作都变成函数行为。
// 老写法
'assign' in Object // true
// 新写法
Reflect.has(Object, 'assign') // true
复制代码
4. Reflect对象的方法与Proxy对象的方法一一对应,只要是Proxy对象的方法,就能在Reflect对象上找到对应的方法。
5. Reflect对象的静态方法有13个,跟Proxy的静态方法时一一对应的。
1)Reflect.get(target, name, receiver):查找并返回target对象的name属性,如果没有该属性,则返回undefined。
var myObject = {
foo: 1,
bar: 2,
get baz() {
return this.foo + this.bar;
},
}
console.log(Reflect.get(myObject, 'foo') )// 1
console.log(Reflect.get(myObject, 'baz') )// 3
var myReceiverObject = {
foo: 4,
bar: 4,
};
console.log((Reflect.get(myObject, 'baz', myReceiverObject)) // 8
复制代码
如果name属性部署了读取函数(getter),则读取函数的this绑定receiver。
2)Reflect.set(target, name, value, receiver): Reflect.set方法设置target对象的name属性等于value。如果name属性设置了赋值函数,则赋值函数的this绑定receiver。如果第一个参数不是对象,Reflect.set会报错。
var myObject = {
foo: 1,
set bar(value) {
return this.foo = value;
},
}
myObject.foo // 1
Reflect.set(myObject, 'foo', 2);
myObject.foo // 2
Reflect.set(myObject, 'bar', 3)
myObject.foo // 3
复制代码
3)Reflect.has(obj,name):对应name in obj里面的in运算符。如果第一个参数不是对象,Reflect.has和in运算符都会报错。
var myObject = {
foo: 1,
};
// 旧写法
'foo' in myObject // true
// 新写法
Reflect.has(myObject, 'foo') // true
复制代码
….
实例:利用proxy实现观察者模式
const queuedObservers = new Set();//观察者队列
const observe = fn => queuedObservers.add(fn);//添加观察者
const observable = obj => new Proxy(obj, {set});//添加代理
function set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
queuedObservers.forEach(observer => observer());
return result;
}
//观察目标
const person = observable({
name: '张三',
age: 20
});
//观察者
function print() {
console.log(`${person.name}, ${person.age}`)
}
observe(print);
person.name = '李四';
复制代码
15、Promise
是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。Promise对象有以下两个特点。
1) 对象的状态不受外界影响。 Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。
2) 一旦状态改变,就不会再变, 任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。
优点: 将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。
不足:
1、无法取消Promise,一旦新建它就会立即执行,无法中途取消。
2、如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。
3、当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
15.1、 基本用法
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
复制代码
resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value) {
// success
}, function(error) {
// failure
});
复制代码
实例:
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
}
timeout(100).then((value) => {
console.log(value); //done
});
复制代码
Promise新建后就会立即执行:then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行。
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
});
promise.then(function() {
console.log('resolved.');
});
console.log('Hi!');
顺序:// Promise // Hi! // resolved
复制代码
15.2、 Promise.prototype.then()
它的作用是为 Promise 实例添加状态改变时的回调函数。 前面说过,then方法的第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数。
then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。
getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {//参数post是上一个then返回的数据-json.post
// ...
});
复制代码
如果then()返回的是一个Promise,那么接下来的代码可以这么写:
getJSON("/post/1.json").then(
post => getJSON(post.commentURL)
).then(
comments => console.log("resolved: ", comments),//成功
err => console.log("rejected: ", err)//失败
);
复制代码
15.3、 Promise.prototype.catch
方法是.then(null, rejection)或.then(undefined, rejection)的别名,用于指定发生错误时的回调函数。用于捕获Promise对象和then()方法指定的回调函数中的错误。
Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获。 如果 Promise 状态已经变成resolved,再抛出错误是无效的。
const promise = new Promise(function(resolve, reject) {
resolve('ok');
throw new Error('test');
});
promise.then(function(value) { console.log(value) })
.catch(function(error) { console.log(error) });
// ok
复制代码
Promise 在resolve语句后面,再抛出错误,不会被捕获,等于没有抛出。因为 Promise 的状态一旦改变,就永久保持该状态,不会再变了。
15.4、 Promise.prototype.finally()
用于指定不管 Promise 对象最后状态如何,都会执行的操作。不管前面的 Promise 是fulfilled还是rejected,都会执行回调函数callback。
Promise.resolve(2).then(() => {}, () => {})
// resolve 的值是 undefined
Promise.resolve(2).finally(() => {})
// resolve 的值是 2
Promise.reject(3).then(() => {}, () => {})
// reject 的值是 undefined
Promise.reject(3).finally(() => {})
// reject 的值是 3
复制代码
15.5、 Promise.all()
const p = Promise.all([p1, p2, p3]);
复制代码
参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例。
(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
15.6、 Promise.race()
const p = Promise.race([p1, p2, p3]);
复制代码
只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。
15.7、 Promise.resolve()
将现有对象转为 Promise 对象。
Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
复制代码
Promise.resolve方法的参数分成四种情况。
(1)参数是一个 Promise 实例。那么Promise.resolve将不做任何修改、原封不动地返回这个实例。
(2)参数是一个thenable对象。thenable对象指的是具有then方法的对象,Promise.resolve方法会将这个对象转为 Promise 对象,然后就立即执行thenable对象的then方法。
let thenable = {
then: function(resolve, reject) {
resolve(42);
}
};
let p1 = Promise.resolve(thenable);
p1.then(function(value) {
console.log(value); // 42
});
复制代码
(3)参数不是具有then方法的对象,或根本就不是对象,则Promise.resolve方法返回一个新的 Promise 对象,状态为resolved。
const p = Promise.resolve('Hello');
p.then(function (s){
console.log(s)
});
// Hello
复制代码
(4)不带有任何参数。直接返回一个resolved状态的 Promise 对象。注意: 立即resolve的 Promise 对象,是在本轮“事件循环”(event loop)的结束时,而不是在下一轮“事件循环”的开始时。setTimeout(fn, 0)在下一轮“事件循环”开始时执行,
setTimeout(function () {
console.log('three');
}, 0);
Promise.resolve().then(function () {
console.log('two');
});
console.log('one');
// one
// two
// three
复制代码
setTimeout(fn, 0)在下一轮“事件循环”开始时执行,Promise.resolve()在本轮“事件循环”结束时执行,console.log('one')则是立即执行,因此最先输出。
15.8、 Promise.reject()
返回一个新的 Promise 实例,该实例的状态为rejected。 const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))
p.then(null, function (s) {
console.log(s)
});
// 出错了
复制代码
注意: Promise.reject()方法的参数,会原封不动地作为reject的理由,变成后续方法的参数。这一点与Promise.resolve方法不一致。
const thenable = {
then(resolve, reject) {
reject('出错了');
}
};
Promise.reject(thenable)
.catch(e => {
console.log(e === thenable) // true
})
复制代码
15.9、 Promise.try()
Promise.try为所有操作提供了统一的处理机制。事实上,Promise.try就是模拟try代码块,就像promise.catch模拟的是catch代码块。 Promise.try(() => database.users.get({id: userId})).then(...).catch(...)
复制代码
15.10 实例:加载图片
const preloadImage = function (path) {
return new Promise(function (resolve, reject) {
const image = new Image();
image.onload = resolve(src,path);
image.onerror = reject(src);
image.src = path;
});
};
preloadImage(“http://www.tj.com/123.jpg”).then(function(img,path){
//此时的参数path为undefined,因为此时的path是preloadImage(path)中的形参,是局部变量,在调用结束后他的内存就被释放了。
},function(img){})
复制代码
16、Iterator和for…of循环
Iterator是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。 Iterator 的作用有三个:
- 为各种数据结构,提供一个统一的、简便的访问接口;
- 使得数据结构的成员能够按某种次序排列;
- ES6 创造了一种新的遍历命令for...of循环,Iterator 接口主要供for...of消费。
ES6 规定,默认的 Iterator接口部署在数据结构的Symbol.iterator属性上,或者说,一个数据结构只要具有Symbol.iterator属性,就可以认为是“可遍历”的。
const obj = {
[Symbol.iterator] : function () {
return {
next: function () {
return {
value: 1,
done: true
};
}
};
}
};
复制代码
原生具备 Iterator 接口的数据结构如下。
1、Array
2、Map
3、Set
4、String
5、TypedArray
6、函数的 arguments 对象
7、NodeList 对象
下面是两个通过调用Symbol.iterator方法来Iterator接口的例子。
//数组的遍历 部署 Iterator 接口 let iter = arr[Symbol.iterator]();
let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();
console.log(iter.next()) // { value: 'a', done: false }
console.log (iter.next()) // { value: 'b', done: false }
console.log (iter.next()) // { value: 'c', done: false }
console.log (iter.next()) // { value: undefined, done: true }
//字符串的遍历 部署 Iterator 接口 someString[Symbol.iterator]();
var someString = "hi";
typeof someString[Symbol.iterator]
// "function"
var iterator = someString[Symbol.iterator]();
iterator.next() // { value: "h", done: false }
iterator.next() // { value: "i", done: false }
iterator.next()
复制代码
对于类似数组的对象(存在数值键名和length属性),部署 Iterator 接口,有一个简便方法,就是Symbol.iterator方法直接引用数组的 Iterator 接口。
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
// 或者
NodeList.prototype[Symbol.iterator] = [][Symbol.iterator];
[...document.querySelectorAll('div')] // 可以执行了
复制代码
16.1、 调用iterator接口的场合
(1) 解构赋值
var set=[1,2,3]
let [first, ...rest] = set;
复制代码
(2) 扩展运算符
var str = 'hello';
console.log([...str]) // ['h','e','l','l','o']
复制代码
(3) yield*
let generator = function* () {
yield 1;
yield* [2,3,4];
yield 5;
};
var iterator = generator();
iterator.next() // { value: 1, done: false }
iterator.next() // { value: 2, done: false }
iterator.next() // { value: 3, done: false }
iterator.next() // { value: 4, done: false }
iterator.next() // { value: 5, done: false }
iterator.next() // { value: undefined, done: true }
复制代码
(4) 其他一些场合(for…of、Array.form())
JavaScript 原有的for...in循环,只能获得对象的键名,不能直接获取键值。ES6 提供for...of循环,允许遍历获得键值。数组的遍历器接口只返回具有数字索引的属性。
var arr = ['a', 'b', 'c', 'd'];
arr.foo = 'hello';
//获取的是键名
for (let a in arr) {
console.log(a); // 0 1 2 3
}
//获取的是键值
for (let a of arr) {
console.log(a); // a b c d
}
复制代码
Set 结构遍历时,返回的是一个值,而 Map 结构遍历时,返回的是一个数组,该数组的两个成员分别为当前 Map 成员的键名和键值。
let map = new Map().set('a', 1).set('b', 2);
for (let pair of map) {
console.log(pair); // ['a', 1] // ['b', 2]
}
for (let [key, value] of map) {
console.log(key + ' : ' + value); // a : 1 // b : 2
}
复制代码
并不是所有类似数组的对象都具有 Iterator 接口,一个简便的解决方法,就是使用Array.from方法将其转为数组。
let arrayLike = { length: 2, 0: 'a', 1: 'b' };
// 报错
for (let x of arrayLike) {
console.log(x);
}
// 正确
for (let x of Array.from(arrayLike)) {
console.log(x);
}
复制代码
for...in循环有几个缺点。
1、数组的键名是数字,但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
2、for...in循环不仅遍历数字键名,还会遍历手动添加的其他键,甚至包括原型链上的键。
3、某些情况下,for...in循环会以任意顺序遍历键名。
总之,for...in循环主要是为遍历对象而设计的,不适用于遍历数组。
for...of循环相比上面几种做法,有一些显著的优点:
1、有着同for...in一样的简洁语法,但是没有for...in那些缺点。
2、不同于forEach方法,它可以与break、continue和return配合使用。
3、提供了遍历所有数据结构的统一操作接口。