ES6笔记上(深入浅出ES6—阮一峰)

在线转换

Babel 提供一个REPL在线编译器,可以在线将 ES6 代码转为 ES5 代码。转换后的代码,可以直接作为 ES5 代码插入网页运行。


let和const命令

let和var的区别

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代码中,变量i是var声明的,在全局范围内都有效,所以全局只有一个变量i。每一次循环,变量i的值都会发生改变,而循环内被赋给数组a的function在运行时,会通过闭包读到这同一个变量i,导致最后输出的是最后一轮的i的值,也就是10。

而如果使用let,声明的变量仅在块级作用域内有效,最后输出的是6。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

上面代码中,变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。

另外,for循环还有一个特别之处,就是循环语句部分是一个父作用域,而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

上面代码输出了3次abc,这表明函数内部的变量i和外部的变量i是分离的。就是说i每循环一次 ,每次产生新的作用域 (块级作用域) 也就是把当前的j值保存下来

不存在变量提升

var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。

为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。


// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

暂时性死区

只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。

var tmp = 123;

if (true) {
tmp = ‘abc’; // ReferenceError
let tmp;
}
上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。

ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。

总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

ES6 规定暂时性死区和let、const语句不出现变量提升

不允许重复声明

let不允许在相同作用域内,重复声明同一个变量。

// 报错
function () {
  let a = 10;
  var a = 1;
}

// 报错
function () {
  let a = 10;
  let a = 1;
}

因此,不能在函数内部重新声明参数。

function func(arg) {
  let arg; // 报错
}

function func(arg) {
  {
    let arg; // 不报错
  }
}

块级作用域

ES5 只有全局作用域和函数作用域,没有块级作用域

第一种场景,内层变量可能会覆盖外层变量。

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

上面代码的原意是,if代码块的外部使用外层的tmp变量,内部使用内层的tmp变量。但是,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量。

第二种场景,用来计数的循环变量泄露为全局变量。

var s = 'hello';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); // 5

上面代码中,变量i只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量。


ES6 的块级作用域

  • let实际上为 JavaScript 新增了块级作用域。
function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

上面的函数有两个代码块,都声明了变量n,运行后输出5。这表示外层代码块不受内层代码块的影响。如果使用var定义变量n,最后输出的值就是10。

ES6 允许块级作用域的任意嵌套。

{{{{{let insane = 'Hello World'}}}}};

上面代码使用了一个五层的块级作用域。外层作用域无法读取内层作用域的变量。

{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 报错
}}}};

内层作用域可以定义外层作用域的同名变量。

{{{{
  let insane = 'Hello World';
  {let insane = 'Hello World'}
}}}};

块级作用域的出现,实际上使得获得广泛应用的立即执行函数表达式(IIFE)不再必要了。

// IIFE 写法
(function () {
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

块级作用域与函数声明


 function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());

上面代码在 ES5 中运行,会得到“I am inside!”,ES6 就完全不一样了,理论上会得到“I am outside!”。因为块级作用域内声明的函数类似于let,对作用域之外没有影响。

另外,还有一个需要注意的地方,考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。



// 函数声明语句
{
  let a = 'secret';
  function f() {
    return a;
  }
}

// 函数表达式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

do 表达式

本质上,块级作用域是一个语句,将多个操作封装在一起,没有返回值。

{
  let t = f();
  t = t * t + 1;
}

上面代码中,块级作用域将两个语句封装在一起。但是,在块级作用域以外,没有办法得到t的值,因为块级作用域不返回值,除非t是全局变量。

do表达式,可以返回值。

let x = do {
  let t = f();
  t * t + 1;
};

上面代码中,变量x会得到整个块级作用域的返回值。


const 命令

基本用法

const声明一个只读的常量。一旦声明,常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错。

const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。

const foo;
// SyntaxError: Missing initializer in const declaration

上面代码表示,对于const来说,只声明不赋值,就会报错。

const的作用域与let命令相同:只在声明所在的块级作用域内有效。

if (true) {
  const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not defined

const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。


if (true) {
  console.log(MAX); // ReferenceError
  const MAX = 5;
}

上面代码在常量MAX声明之前就调用,结果报错。

const声明的常量,也与let一样不可重复声明。

var message = "Hello!";
let age = 25;

// 以下两行都会报错
const message = "Goodbye!";
const age = 30;

常量foo储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。

const foo = {};
// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only

下面是另一个例子。

const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

上面代码中,常量a是一个数组,这个数组本身是可写的,但是如果将另一个数组赋值给a,就会报错。

如果真的想将对象冻结,应该使用Object.freeze方法。

const foo = Object.freeze({});
// 常规模式时,下面一行不起作用;
// 严格模式时,该行会报错
foo.prop = 123;

上面代码中,常量foo指向一个冻结的对象,所以添加新属性不起作用,严格模式时还会报错。

除了将对象本身冻结,对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。

var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

ES6 声明变量的六种方法

ES5 只有两种声明变量的方法:var命令和function命令。ES6除了添加let和const命令,后面章节还会提到,另外两种声明变量的方法:import命令和class命令。所以,ES6 一共有6种声明变量的方法。


let arr = [1, 2, 3,4];
let {0 : first, 1:second, [arr.length - 1] : last} = arr;
console.log(first); // 1
console.log(second); //
console.log(last); // 3

上面代码对数组进行对象解构。数组arr的0键对应的值是1,[arr.length - 1]就是2键,对应的值是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

变量的解构赋值

用途

(1)交换变量的值

let x = 1;
let y = 2;
[x,y] = [y,x];
console.log(y);  //x = 2,y = 1;

这样的写法不仅简洁,而且易读,语义非常清晰。

(2)从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。

// 返回一个数组
  function example() {
  return [1, 2, 3];
  }
  let [a, b, c] = example();
  console.table([a,b,c]);

结果:
这里写图片描述

(3)函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。

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

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

(4)提取JSON数据

解构赋值对提取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]

上面代码可以快速提取 JSON 数据的值。

(5)函数参数的默认值

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

指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || ‘default foo’;这样的语句。

(6)遍历Map结构
任何部署了Iterator接口的对象,都可以用for…of循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值就非常方便。

var 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) {
  // ...
}

这里说明下:Set 本身是一个构造函数,用来生成 Set 数据结构。它类似于数组,但是成员的值都是唯一的,没有重复的值。

例如:

var s = new Set();
[2,3,5,4,5,2,2].map(x => s.add(x))
for (i of s) {console.log(i)}
// 2 3 5 4

注:add()方法,向Set 数据结构数据结构添加元素。

(7)输入模块的指定方法
加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

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

字符串的扩展

codePointAt()

codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。

function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}

is32Bit("") // true
is32Bit("a") // false

String.fromCodePoint()

ES5提供String.fromCharCode方法,用于从码点返回对应字符,但是这个方法不能识别32位的UTF-16字符(Unicode编号大于0xFFFF)。

String.fromCharCode(0x20BB7)
// "ஷ"

ES6提供了String.fromCodePoint方法,可以识别0xFFFF的字符,弥补了String.fromCharCode方法的不足。在作用上,正好与codePointAt方法相反。

String.fromCodePoint(0x20BB7)
// ""
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
// true

注意,fromCodePoint方法定义在String对象上,而codePointAt方法定义在字符串的实例对象上。


字符串的遍历器接口

用for…of循环遍历

代码如下:

 for(let codePointAt of 'hicai'){
     console.log(codePointAt);
  }  

结果:
这里写图片描述

除了遍历字符串,这个遍历器最大的优点是可以识别大于0xFFFF的码点

var text = String.fromCodePoint(0x20BB7);

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

for (let i of text) {
  console.log(i);
}
// ""

上面代码中,字符串text只有一个字符,但是for循环会认为它包含两个字符(都不可打印),而
for…of循环会正确识别出这一个字符。


at()

ES5对字符串提供charAt方法,但不能识别码点大于0xFFFF的字符。
ES6的at方法,可以识别Unicode编号大于0xFFFF的字符,返回正确的字符。

'abc'.at(0) // "a"
''.at(0) // ""

normalize()

比如Ǒ(\u01D1)。另一种是提供合成符号(combining character),即原字符与重音符号的合成,两个字符合成一个字符,比如O(\u004F)和ˇ(\u030C)合成Ǒ(\u004F\u030C)。

这两种表示方法,在视觉和语义上都等价,但是JavaScript不能识别。

'\u01D1'==='\u004F\u030C' //false
'\u01D1'.length // 1
'\u004F\u030C'.length // 2

ES6提供字符串实例的normalize()方法,用来将字符的不同表示方法统一为同样的形式,这称为Unicode正规化。

'\u01D1'.normalize() === '\u004F\u030C'.normalize()
// true

includes(), startsWith(), endsWith()

ES5中的indexOf方法,用来检索字符串中指定字符串出现的位置 而ES6又提供了三种新方法。

includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。

var s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

这三个方法都支持第二个参数,表示开始搜索的位置。

var s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 0) // true

注意:endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。


repeat()

repeat方法返回一个新字符串,表示将原字符串重复n次。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

参数如果是小数,会被取整。

'na'.repeat(2.9) // "nana"

如果repeat的参数是负数或者Infinity,会报错。

'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

但是,如果参数是0到-1之间的小数,则等同于0,这是因为会先进行取整运算。0到-1之间的小数,取整以后等于-0,repeat视同为0。

'na'.repeat(-0.9) // " "

参数NaN等同于0。

'na'.repeat(NaN) // ""

如果repeat的参数是字符串,则会先转换成数字。

'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

padStart(),padEnd()

字符串补全长度功能,padStart()用于头部补全,padEnd()用于尾部补全。

//padStart()
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
//padEnd()
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

参数:第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。

如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串。

'abc'.padStart(10, '0123456789')
// '0123456abc'

如果省略第二个参数,默认使用空格补全长度。

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

padStart的常见用途是为数值补全指定位数。下面代码生成10位的数值字符串。

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

另一个用途是提示字符串格式。

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

数值的扩展

Number.isFinite(), Number.isNaN()

Number.isFinite()用来检查一个数值是否为有限的(finite)。

Number.isFinite(15); // true
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite(-Infinity); // false
Number.isFinite('foo'); // false
Number.isFinite('15'); // false
Number.isFinite(true); // false

Number.isNaN()用来检查一个值是否为NaN。

Number.isNaN(NaN) // true
Number.isNaN(15) // false
Number.isNaN('15') // false
Number.isNaN(true) // false
Number.isNaN(9/NaN) // true
Number.isNaN('true'/0) // true
Number.isNaN('true'/'true') // true

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

例如:

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

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

Number.parseInt(), Number.parseFloat()

ES6将全局方法parseInt()和parseFloat(),移植到Number对象上面,行为完全保持不变。


// ES5的写法
parseInt('12.34') // 12
parseFloat('123.45#') // 123.45

// ES6的写法
Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45

这样做的目的,是逐步减少全局性方法,使得语言逐步模块化。

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

Number.isInteger()

Number.isInteger()用来判断一个值是否为整数。

Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false
Number.isInteger("15") // false
Number.isInteger(true) // false

Number.EPSILON

ES6在Number对象上面,新增一个极小的常量Number.EPSILON。

Number.EPSILON
// 2.220446049250313e-16
Number.EPSILON.toFixed(20)
// '0.00000000000000022204'

安全整数和Number.isSafeInteger()

JavaScript能够准确表示的整数范围在-2^53到2^53之间(不含两个端点),超过这个范围,无法精确表示这个值。

Math.pow(2, 53) // 9007199254740992

9007199254740992  // 9007199254740992
9007199254740993  // 9007199254740992

Math.pow(2, 53) === Math.pow(2, 53) + 1
// true

上面代码中,超出2的53次方之后,一个数就不精确了。

ES6引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量,用来表示这个范围的上下限。

Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1
// true
Number.MAX_SAFE_INTEGER === 9007199254740991
// true

Number.MIN_SAFE_INTEGER === -Number.MAX_SAFE_INTEGER
// true
Number.MIN_SAFE_INTEGER === -9007199254740991
// true

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

Number.isSafeInteger('a') // false
Number.isSafeInteger(null) // false
Number.isSafeInteger(NaN) // false
Number.isSafeInteger(Infinity) // false
Number.isSafeInteger(-Infinity) // false

Number.isSafeInteger(3) // true
Number.isSafeInteger(1.2) // false
Number.isSafeInteger(9007199254740990) // true
Number.isSafeInteger(9007199254740992) // false

Number.isSafeInteger(Number.MIN_SAFE_INTEGER - 1) // false
Number.isSafeInteger(Number.MIN_SAFE_INTEGER) // true
Number.isSafeInteger(Number.MAX_SAFE_INTEGER) // true
Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1) // false

Math对象的扩展

Math.trunc()

Math.trunc方法用于去除一个数的小数部分,返回整数部分。

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内部使用Number方法将其先转为数值。

Math.trunc('123.456')
// 123

对于空值和无法截取整数的值,返回NaN。

Math.trunc(NaN);      // NaN
Math.trunc('foo');    // NaN
Math.trunc();         // NaN

Math.sign()

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.sign('foo'); // NaN
Math.sign(); // NaN

Math.cbrt()

Math.cbrt方法用于计算一个数的立方根。( 3的立方)

Math.cbrt(-1) // -1
Math.cbrt(0)  // 0
Math.cbrt(1)  // 1
Math.cbrt(2)  // 1.2599210498948734

对于非数值,Math.cbrt方法内部也是先使用Number方法将其转为数值。

Math.cbrt('8') // 2 
Math.cbrt('hello') // NaN

Math.clz32()

Math.clz32方法返回一个数的32位无符号整数形式有多少个前导0。

Math.clz32(0) // 32
Math.clz32(1) // 31
Math.clz32(1000) // 22
Math.clz32(0b01000000000000000000000000000000) // 1
Math.clz32(0b00100000000000000000000000000000) // 2

上面代码中,0的二进制形式全为0,所以有32个前导0;1的二进制形式是0b1,只占1位,所以32位之中有31个前导0;1000的二进制形式是0b1111101000,一共有10位,所以32位之中有22个前导0。

Math.imul()

Math.imul方法返回两个数以32位带符号整数形式相乘的结果,返回的也是一个32位的带符号整数。

Math.imul(2, 4)   // 8
Math.imul(-1, 8)  // -8
Math.imul(-2, -2) // 4

Math.fround()

Math.fround方法返回一个数的单精度浮点数形式。

Math.fround(0)     // 0
Math.fround(1)     // 1
Math.fround(1.337) // 1.3370000123977661
Math.fround(1.5)   // 1.5
Math.fround(NaN)   // NaN

Math.hypot()

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

上面代码中,3的平方加上4的平方,等于5的平方。

如果参数不是数值,Math.hypot方法会将其转为数值。只要有一个参数无法转为数值,就会返回NaN。


对数方法

(1) Math.expm1()

Math.expm1(x)返回ex - 1,即Math.exp(x) - 1。

Math.expm1(-1) // -0.6321205588285577
Math.expm1(0)  // 0
Math.expm1(1)  // 1.718281828459045

(2)Math.log1p()
Math.log1p(x)方法返回1 + x的自然对数,即Math.log(1 + x)。如果x小于-1,返回NaN。

Math.log1p(1)  // 0.6931471805599453
Math.log1p(0)  // 0
Math.log1p(-1) // -Infinity
Math.log1p(-2) // NaN

(3)Math.log10()
Math.log10(x)返回以10为底的x的对数。如果x小于0,则返回NaN。

Math.log10(2)      // 0.3010299956639812
Math.log10(1)      // 0
Math.log10(0)      // -Infinity
Math.log10(-2)     // NaN
Math.log10(100000) // 5

( 4 ) Math.log2()
Math.log2(x)返回以2为底的x的对数。如果x小于0,则返回NaN。

Math.log2(3)       // 1.584962500721156
Math.log2(2)       // 1
Math.log2(1)       // 0
Math.log2(0)       // -Infinity
Math.log2(-2)      // NaN
Math.log2(1024)    // 10
Math.log2(1 << 29) // 29

三角函数方法

ES6新增了6个三角函数方法。
Math.sinh(x) 返回x的双曲正弦(hyperbolic sine)
Math.cosh(x) 返回x的双曲余弦(hyperbolic cosine)
Math.tanh(x) 返回x的双曲正切(hyperbolic tangent)
Math.asinh(x) 返回x的反双曲正弦(inverse hyperbolic sine)
Math.acosh(x) 返回x的反双曲余弦(inverse hyperbolic cosine)
Math.atanh(x) 返回x的反双曲正切(inverse hyperbolic tangent)

Math.signbit()

Math.sign()用来判断一个值的正负,但是如果参数是-0,它会返回-0。

Math.signbit(2) //false
Math.signbit(-2) //true
Math.signbit(0) //false
Math.signbit(-0) //true

该方法的算法如下。

如果参数是NaN,返回false
如果参数是-0,返回true
如果参数是负值,返回true
其他情况返回false

指数运算符

ES2016 新增了一个指数运算符()**。

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

指数运算符可以与等号结合,形成一个新的赋值运算符(=)**。

 let b = 4;
 b **= 3;  // 等同于 b = b * b * b;
 console.log(b)  //64

数组的扩展

Array.from()

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。
下面是一个类似数组的对象,Array.from将它转为真正的数组。

 let arrayLike = {
    '0':'a',
    '1':'b',
    '2':'c',
    length:3
  };
  //ES5写法
  var arr1 = [].slice.call(arrayLike);
  //ES6写法
  let arr2 = Array.from(arrayLike);
  console.log(arr1);
  console.log(arr2); 

控制台结果:
这里写图片描述

实际应用中,常见的类似数组的对象是DOM操作返回的NodeList集合,以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。

举个例子:

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<script>
let ps = document.querySelectorAll('p');
  Array.from(ps).forEach(function(item){
    console.log(item)
  })
</script>

控制台结果:
这里写图片描述


// arguments对象
function foo() {
  var args = Array.from(arguments);
  // ...
}

只要是部署了Iterator接口的数据结构,Array.from都能将其转为数组。

Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

如果参数是一个真正的数组,Array.from会返回一个一模一样的新数组。

let arr = Array.from([1,2,3])
console.log(arr) //[1, 2, 3]

扩展运算符(…)也可以将某些数据结构转为数组。

// arguments对象
function foo() {
  var args = [...arguments];
}

// NodeList对象
[...document.querySelectorAll('div')]

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]

利用Array.from获取一组DOM节点的文本内容
举个例子:

<span>苹果</span>
<span>香蕉</span>
<span></span>
<span>西瓜</span>
<span>桃子</span>
<script>
    var spans = document.querySelectorAll('span');
    //ES5写法
    var names1 = Array.prototype.map.call(spans,function(i){
        return i.textContent;
    })
    console.log(names1);

   //ES6写法
   let spans2 = document.querySelectorAll('span');
   let names2 = Array.from(spans2,i => i.textContent);
   console.log(names2);
</script>

控制台结果都相同:
这里写图片描述

Array.from可以将数组中布尔值为false的成员转为0。
例如:

Array.from([1, , 2, , 3], (n) => n || 0)
// [1, 0, 2, 0, 3]

经过测试:NaN、undefined转化也为0

let arr = Array.from([1,NaN, 2,undefined, 3], (n) => n || 0)
console.log(arr);

Array.from返回各种数据的类型
举个例子:

function typesOf () {
  return Array.from(arguments, value => typeof value)
}
typesOf(null, [], NaN)
// ['object', 'object', 'number']

Array.of()

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

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

Array方法没有参数、一个参数、三个参数时,返回结果都不一样。只有当参数个数不少于2个时,Array()才会返回由参数组成的新数组。参数个数只有一个时,实际上是指定数组的长度。

Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

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

数组实例的copyWithin()

数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组

Array.prototype.copyWithin(target, start = 0, end = this.length)

三个参数:
target(必需):从该位置开始替换数据。
start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。*

举个例子:

let arr = Array.of(1,2,3,4,5);
console.log(arr.copyWithin(0,3)) //[4, 5, 3, 4, 5]

上面代码表示将从3号位直到数组结束的成员(4和5),复制到从0号位开始的位置,结果覆盖了原来的1和2。

注意:三个参数都应该是数值,如果不是,会自动转为数值。

例如刚才的例子,输出结果相同:

console.log(arr.copyWithin(0,'3')) //[4, 5, 3, 4, 5]

数组实例的find()和findIndex()

find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

[1, 4, -5, 10].find((n) => n < 0)
// -5

find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。
切记:是返回第一个符合条件的值,就不会找下一个了。例如:

  var arr = [1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;

}) 
 console.log(arr)  //10

findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

切记:是返回第一个符合条件值的索引值

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

另外,这两个方法都可以发现NaN,弥补了数组的IndexOf方法的不足。

[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))
// 0

注意:Object.is()是ES6新增的用来比较两个值是否严格相等的方法,与===的行为基本一致。

例如:

var a = 3; 
var b = "3"; 

a==b;    // true
a===b;   // false,因为*a*,*b*的类型不一样 
Object.is( a, b );  //false,因为*a*,*b*的类型不一样 

数组实例的fill()

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

  let arr = new Array('a','b','c');
  console.log(arr.fill(7)) //[7, 7, 7];

  //fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。
  let arr2 = new Array(3).fill(6);
  console.log(arr2)// [6, 6, 6]

fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置
例如:fill方法从1号位开始,向原数组填充7,到2号位之前结束。

['a', 'b', 'c'].fill(7, 1, 2)// ['a', 7, 'c']

entries(),keys()和values()用于遍历数组

用于遍历数组。它们都返回一个遍历器对象,可以用for…of循环进行遍历。

keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

//entries()是对键值对的遍历
 let arr = new Array('A','B','C');
   for(let [index,elem] of arr.entries()){
      console.log(index,elem);
   }

这里写图片描述

//keys()是对键名的遍历
for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1
//values()是对键值的遍历
let arr = [['姓名','阿蔡'],['年龄','23']];
   for(var elem of arr.values()){  
         console.log(elem); 
  }

控制台结果:
这里写图片描述


includes()

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

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

函数的扩展

基本用法

,可以把参数默认值写在参数定义后面
例如:

//ES5写法
function log(x, y) {
 if (typeof y === 'undefined') {
  y = 'World';
  }
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World

//ES6写法
function log(x,y='World'){
  console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

可以看到,ES6 的写法比 ES5 简洁许多。

注意:参数变量是默认声明的,所以不能用let或const再次声明。

function foo(x = 5) {
  let x = 1; // error
  const x = 2; // error
}

参数默认值的位置

*注意:如果非尾部的参数设置默认值,实际上这个参数是没法省略的。是非位数!!如果省略就报错*
举个例子:

    function foo(x,y=1){
        console.log(x,y);
    }
    foo(1,); //[1,undefined]

    //如果是非尾部参数设置默认值
    function foo(x=1,y){
        console.log(x,y);
    }
   foo(,2) //报错

再举个例子:

function f(x, y = 5, z) {
  return [x, y, z];
}

f() // [undefined, 5, undefined]
f(1) // [1, 5, undefined]
f(1, ,2) // 报错
f(1, undefined, 2) // [1, 5, 2]

总结:
有默认值的参数都不是尾参数。这时,无法只省略该参数,而不省略它后面的参数,除非显式输入undefined。

function foo(x = 5, y = 6) {
  console.log(x, y);
}

foo(undefined, null)
// 5 null

如果传入undefined,将触发该参数等于默认值,null则没有这个效果。


函数的 length 属性

指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数。也就是说,指定了默认值后,length属性将失真。

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

length属性的含义是,该函数预期传入的参数个数。某个参数指定默认值以后,预期传入的参数个数就不包括这个参数了。同理,rest参数也不会计入length属性。

(function(...args) {}).length // 0

如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了。

(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

作用域

函数进行声明初始化时,参数会形成一个单独的作用域(context)。等到初始化结束,这个作用域就会消失。

  var x = 8;
   function f(x,y = x){
     console.log(y)
   } 

   f();//undefined
   f(2); //2
   f(1,3) //3

参数y的默认值等于变量x。调用函数f时,参数形成一个单独的作用域。在这个作用域里面,默认值变量x指向第一个参数x,而不是全局变量x,所以输出是2。

再看下面的例子。


let x = 1;

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // 1

上面代码中,函数f调用时,参数y = x形成一个单独的作用域。这个作用域里面,变量x本身没有定义,所以指向外层的全局变量x。函数调用时,函数体内部的局部变量x影响不到默认值变量x。

如果此时,全局变量x不存在,就会报错。

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // ReferenceError: x is not defined

这样写,也会报错。

var x = 1;

function foo(x = x) {
  // ...
}

foo() // ReferenceError: x is not defined

参数x = x形成一个单独作用域。实际执行的是let x = x,由于暂时性死区的原因,这行代码会报错”x 未定义“。

再举个例子:

var x = 1;
function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y();
  console.log(x);
}

foo() // 3
x // 1

上面代码中,函数foo的参数形成一个单独作用域。这个作用域里面,首先声明了变量x,然后声明了变量y,y的默认值是一个匿名函数。这个匿名函数内部的变量x,指向同一个作用域的第一个参数x。函数foo内部又声明了一个内部变量x,该变量与第一个参数x由于不是同一个作用域,所以不是同一个变量,因此执行y后,内部变量x和外部全局变量x的值都没变。


应用

利用参数默认值,可以指定某一个参数不得省略,如果省略就抛出一个错误。

function throwIfMissing() {
  throw new Error('Missing parameter');
}

function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
}

foo()
// Error: Missing parameter

上面代码的foo函数,如果调用的时候没有参数,就会调用默认值throwIfMissing函数,从而抛出一个错误。


rest参数

ES6 引入 rest 参数(形式为“…变量名”),用于获取函数的多余参数。
例如:

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

注意,rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。

// 报错
function f(a, ...b, c) {
  // ...
}

扩展运算符

扩展运算符(spread)是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

扩展运算符可以用于函数的调用

function push(array, ...items) {
  array.push(...items);
}
  function add(x,y){
    return x + y;
  }
  var numbers = [3,7];
  console.log(add(...numbers)); //10

扩展运算符还可以与正常函数参数结合使用

  function f(a,b,c,d,e){
    console.log(a,b,c,d,e)
  }
  var number = [3,5];
  f(1,...number,...[7,9])  //1,3,5,7,9

替代数组的apply方法

由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。

// ES5的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f(...args);

通过push函数,将一个数组添加到另一个数组的尾部

//ES5的写法
var arr1 = [0,1,2];
var arr2 = [3,4,5];
Array.prototype.push.apply(arr1,arr2);

//ES6的写法
var arr1 = [0,1,2];
var arr2 = [3,4,5];
arr1.push(...arr2)

扩展运算符的应用

1.合并数组

// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]

再举个例子:


   var arr1 = ['a','b'];
   var arr2 = ['c'];
   var arr3 = ['b'];

   //ES5写法
   var array = arr1.concat(arr2,arr3);
   console.log(array);    

  //ES6写法
  var array2 = [...arr1,...arr2,...arr3];
   console.log(array2);
   //["a", "b", "c", "b"]

注意:将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。

2.与解构赋值结合
扩展运算符可以与解构赋值结合起来,用于生成数组。

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [first, ...rest] = [];
first // undefined
rest  // []:

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。

const [...butLast, last] = [1, 2, 3, 4, 5];
// 报错

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错

3.函数的返回值
JavaScript的函数只能返回一个值,如果需要返回多个值,只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

上面代码从数据库取出一行数据,通过扩展运算符,直接将其传入构造函数Date。

4.字符串
扩展运算符还可以将字符串转为真正的数组。

[...'hello']
// [ "h", "e", "l", "l", "o" ]

正确返回字符串长度的函数,识别32位的Unicode字符。

function length(str) {
  return [...str].length;
}

length('x\uD83D\uDE80y') // 3

5.实现了Iterator接口的对象
任何Iterator接口的对象,都可以用扩展运算符转为真正的数组。

var nodeList = document.querySelectorAll('div');
var array = [...nodeList];

6.Map和Set结构,Generator函数
扩展运算符内部调用的是数据结构的Iterator接口,因此只要具有Iterator接口的对象,都可以使用扩展运算符,比如Map结构。

let map = new Map([ //Map是键值对结构
  [1,'one'],
  [2,'two'],
  [3,'three']
])
let arr = [...map.keys()];
console.log(arr); // [1, 2, 3]

注意:Set和Map类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。


name 属性

函数的name属性,返回该函数的函数名。

function foo() {}
foo.name // "foo"

ES6 对这个属性的行为做出了一些修改。如果将一个匿名函数赋值给一个变量,ES5 的name属性,会返回空字符串,而 ES6 的name属性会返回实际的函数名。

var f = function () {};

// ES5
f.name // ""

// ES6
f.name // "f"

如果将一个具名函数赋值给一个变量,则 ES5 和 ES6 的name属性都返回这个具名函数原本的名字。

const bar = function baz() {};

// ES5
bar.name // "baz"

// ES6
bar.name // "baz"

Function构造函数返回的函数实例,name属性的值为anonymous。

(new Function).name // "anonymous"

箭头函数

(箭头函数导致this总是指向函数定义生效时所在的对象)

基本用法

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

var f = v => v;

上面的箭头函数等同于:

var f = function(v) {
  return v;
};

如果箭头函数不需要参数或多个参数:

var f = () => 5;
//等同于
var f = function(){return 5};

var sum = (num1,num2) => num1 + num2;
//等同于
var sum = function(num1,num2){return num1 + num2}

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。

var getTempItem = id => ({ id: id, name: "Temp" });

箭头函数可以与变量解构结合使用。

const full = ({first,last}) => first + ' ' + last;

//等同于
function full(person){
   return person.first + ' ' + person.last;
}

箭头函数的一个用处是简化回调函数。

//ES5写法
[1,2,3].map(function(x)){
    return x * x;
}

//ES6写法
[1,2,3].map(x => x * x);

rest参数与箭头函数结合

const numbers = (...nums) => nums;
numbers(1,2,3,4) //[1,2,3,4]

const headAndTail = (head, ...tail) => [head, tail];
headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]

使用注意点

箭头函数有几个使用注意点。

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。

(4)不可以使用yield命令,因此箭头函数不能用作Generator函数。

箭头函数this指向问题
箭头函数里面的this,绑定定义时所在的作用域,而不是指向运行时所在的作用域。

this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。


对象的扩展

属性的整洁表达法

ES6允许直接写入变量和函数,作为对象的属性和方法。这样书写更简洁。

  var foo = 'bar';
  var obj = {foo};
  obj //{foo: "bar"}

ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值

//函数参数名直接作为对象属性值
  function f(x,y){
    return {obj1: x , obj2: y};
  } 
  f(1,2) //{obj1: 1, obj2: 2}

除了属性简写,方法也可以简写

  //ES5写法 
   var o = {
      method: function(){
         return 'hello';
      }
   }

   //ES6写法
   var o2 = {
     method:() => 'hello'
   }

再举个例子:

  var birth = '1995/1/5'
  var Person = {
      name:'阿蔡',
      birth,
      hello(){
         return 'hello'
      }

  } 
 console.log(Person);

控制台结果:
这里写图片描述

还可以,用于函数的返回值

function getPoint() {
  var x = 1;
  var y = 10;
  return {x, y};
}

getPoint() // {x:1, y:10}

属性名表达式

JavaScript语言定义对象的属性,有两种方法。

// 方法一:直接用标识符作为属性名
obj.foo = true;

// 方法二:表达式作为属性名,这时要将表达式放在方括号之内
obj[‘a’ + ‘bc’] = 123;

ES5和ES6字面量定义对象写法:

  // ES5
  var obj = {
       foo: true,
       abc: 123
  }
   console.log(obj);  //{foo: true, abc: 123}

  //ES6
  let propKey = 'foo';
  let obj2 = {
      [propKey]: true,
      ['a' + 'bc']: 123 
  }; 
  console.log(obj2);  //{foo: true, abc: 123}

再举个例子:

var lastWord = 'last word';

var a = {
  'first word': 'hello',
  [lastWord]: 'world'
};

a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

表达式还可以用于定义方法名

   let obj = {
      ['h' + 'ello'](){
         return 'hello'
      }
   }
   console.log(obj.hello())    //hello
   //或者可以这么写  obj['h' + 'ello']()

注意,属性名表达式与简洁表示法,不能同时使用,会报错。

正确写法:

    let name = '姓名:';
    let obj = {[name]:'阿蔡'} //{姓名:: "阿蔡"} 

方法的 name 属性

1、函数的name属性,返回函数名。对象方法也是函数,因此也有name属性。

举个例子:name属性返回函数名

  const person = {
      sayName(){
        return 'hello';
      }
   }
   console.log(person.sayName.name); //sayName

2、name属性读取取值函数(getter)和存值函数(setter)上的方法

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"

3、bind方法创造的函数,name属性返回bound加上原函数的名字;Function构造函数创造的函数,name属性返回anonymous。

(new Function()).name // "anonymous"

var doSomething = function() {
  // ...
};
doSomething.bind().name // "bound doSomething"

4.如果对象的方法是一个 Symbol 值,那么name属性返回的是这个 Symbol 值的描述。

const key1 = Symbol('description');  //新的原始数据类型Symbol,表示独一无二的值
const key2 = Symbol();
let obj = {
  [key1]() {},
  [key2]() {},
};
obj[key1].name // "[description]"
obj[key2].name // ""

Object.is()

在ES5中,比较两个值是否相等,只有两个运算符:相等运算符(==)和严格等于运算符(===)。

但是缺点:
(==)会自动转换数据类型。
(===)NaN不等于自身,+0等于-0。

在ES6中,Object.is()可以比较两个值是否相等,与严格相等运算符行为基本一致,不同处在于:NaN等于自身,+0不等于-0

//ES6写法
 Object.is('foo','foo') //true
 Object.is({},{})  //false
 Object.is('+0','-0') //false
 Object.is(NaN,NaN) //true

//ES5写法
+0 === -0 //true
NaN === NaN //false

Object.assign()

基本用法
Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。

var targeObject.assign方法的第一个参数是目标对象,后面的参数都是源对象t = { a: 1 };

var source1 = { b: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。

1.注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。

var target = { a: 1, b: 1 };

var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

再举个例子:

var target = { a: { b: 'c', d: 'e' } }
var source = { a: { b: 'hello' } }
Object.assign(target, source)
// { a: { b: 'hello' } }

2.对于这种嵌套的对象,一旦遇到同名属性,Object.assign的处理方法是替换,而不是添加。

3.如果该参数不是对象,则会先转成对象,然后返回。

typeof Object.assign(2) // "object"

4.undefined和null无法转成对象,所以如果它们作为参数,就会报错。

Object.assign(undefined) // 报错
Object.assign(null) // 报错

5.非对象参数出现在源对象的位置(即非首参数),那么处理规则有所不同。首先,这些参数都会转成对象,如果无法转成对象,就会跳过。这意味着,如果undefined和null不在首参数,就不会报错。

let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true

6.其他类型的值(即数值、字符串和布尔值)不在首参数,也不会报错。但是,除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果。

var v1 = 'abc';
var v2 = true;
var v3 = 10;

var obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

v1、v2、v3分别是字符串、布尔值和数值,结果只有字符串合入目标对象(以字符数组的形式),数值和布尔值都会被忽略。这是因为只有字符串的包装对象,会产生可枚举属性。

7.Object.assign拷贝的属性是有限制的,只拷贝源对象的自身属性(不拷贝继承属性),也不拷贝不可枚举的属性(enumerable: false)

Object.assign({b: 'c'},
  Object.defineProperty({}, 'invisible', {
    enumerable: false,
    value: 'hello'
  })
)
// { b: 'c' }

8.属性名为Symbol值的属性,也会被Object.assign拷贝。

Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
// { a: 'b', Symbol(c): 'd' }

注意:Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。

9.Object.assign可以用来处理数组,但是会把数组视为对象。

Object.assign([1,2,3],[4,5]) //[4,5,3]

上面代码,Object.assign把数组视为属性名为0、1、2的对象,因此源数组的0号属性4覆盖了目标数组的0号属性1。

常见用途

(1)为对象添加属性
通过Object.assign方法,将x属性和y属性添加到Point类的对象实例。

class Point {
  constructor(x, y) {
    Object.assign(this, {x, y});
  }
}

(2)为对象添加方法

Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    ···
  },
  anotherMethod() {
    ···
  }
});

(3)克隆对象

function clone(origin) {
  return Object.assign({}, origin);
}

上面代码将原始对象拷贝到一个空对象,就得到了原始对象的克隆。

如果想要保持继承链,可以采用下面的代码。

function clone(origin) {
  let originProto = Object.getPrototypeOf(origin);
  return Object.assign(Object.create(originProto), origin);
}

(4)合并多个对象

将多个对象合并到某个对象。

const merge =
  (target, ...sources) => Object.assign(target, ...sources);

如果希望合并后返回一个新对象,可以改写上面函数,对一个空对象合并。

const merge =
  (...sources) => Object.assign({}, ...sources);

(5)为属性指定默认值

const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
};

function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
  console.log(options);
  // ...
}

上面代码中,DEFAULTS对象是默认值,options对象是用户提供的参数。Object.assign方法将DEFAULTS和options合并成一个新对象,如果两者有同名属性,则option的属性值会覆盖DEFAULTS的属性值。


属性可枚举性

对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

let obj = {foo:123};
Object.getOwnPropertyDescripto(obj,'foo')
//  {
//    value: 123,
//    writable: true,
//    enumerable: true,  //描述对象enumerable属性,称为“可枚举性”,如果该属性为false,就表示某些操作会忽略当前属性。
//    configurable: true
//  }

ES5有三个操作会忽略enumerable为false的属性。
for…in循环:只遍历对象自身的和继承的可枚举的属性
Object.keys():返回对象自身的所有可枚举的属性的键名
JSON.stringify():只串行化对象自身的可枚举的属性

ES6新增了一个操作Object.assign(),会忽略enumerable为false的属性,只拷贝对象自身的可枚举的属性。

toString和length属性的enumerable都是false,因此for…in不会遍历到这两个继承自原型的属性。

Object.getOwnPropertyDescriptor(Object.prototype,'toString').enumerable //false
Object.getOwnPropertyDescriptor([],'length').enumerable //false

另外,ES6规定,所有Class的原型的方法都是不可枚举的。

Object.getOwnPropertyDescriptor(class {foo(){}}.prototype, 'foo').enumerable // false

属性的遍历

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

var obj = {a:'1',[Symbol('b')]:2,d:4};
    //添加新的属性
    Object.defineProperty(obj,'c',{
        value:3,
        enumerable:false
    });

    console.log(obj); //{a: "1", d: 4, c: 3, Symbol(b): 2}

     //属性遍历

     //1.for...in循环,遍历对象自身和继承可枚举性
    for(var i in obj){
        console.log(i) //a , b
    }

     //2.Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)。
    console.log(Object.keys(obj)); //["a", "d"]

    //3.Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性)。
    console.log(Object.getOwnPropertyNames(obj)) //["a", "d", "c"]


    //4.Object.getOwnPropertySymbols(obj)返回一个数组,包含对象自身的所有Symbols属性
   console.log(Object.getOwnPropertySymbols(obj))   //[Symbol(b)]

   //5返回一个数组,包含对象自身的所有属性,不管是属性名是Symbol或字符串,也不管是否可枚举。
   console.log(Reflect.ownKeys(obj)) //["a", "d", "c", Symbol(b)]

以上的5种方法遍历对象的属性,都遵守同样的属性遍历的次序规则。

首先遍历所有属性名为数值的属性,按照数字排序。
其次遍历所有属性名为字符串的属性,按照生成时间排序。
最后遍历所有属性名为Symbol值的属性,按照生成时间排序。


proto属性,Object.setPrototypeOf(),Object.getPrototypeOf()

proto属性

proto属性(前后各两个下划线),用来读取或设置当前对象的prototype(原型)对象。目前,所有浏览器(包括 IE11)都部署了这个属性。

//es6的写法
var obj = {
  method:function(){...}
};
obj.__proto__ = someOtherObj;

//es5的写法
var obj = Object.create(someOtherObj);
obj.method = function() { ... };

注意:该属性没有写入 ES6 的正文,本质上是一个内部属性,而不是一个正式的对外的 API。无论从语义的角度,还是从兼容性的角度,都不要使用这个属性,而是使用下面的Object.setPrototypeOf()(写操作)、Object.getPrototypeOf()(读操作)、Object.create()(生成操作)代替。


Object.setPrototypeOf()

Object.setPrototypeOf方法的作用与_proto_相同,用来设置一个对象的prototype对象,返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。

格式:

Object.setPrototypeOf(object, prototype)

用法:

var o = Object.setPrototypeOf({}, null)

举个例子:

let proto = {};
let obj = {x:10};
Object.setPrototypeOf(obj,proto); //proto对象设为obj对象的原型,所以从obj对象可以读取proto对象的属性。

proto.y = 20;
proto.z = 40;
obj.x //10
obj.y //20
obj.z //40

如果第一个参数不是对象,会自动转为对象。但是由于返回的还是第一个参数,所以这个操作不会产生任何效果。

Object.setPrototypeOf(1, {}) === 1 // true
Object.setPrototypeOf('foo', {}) === 'foo' // true
Object.setPrototypeOf(true, {}) === true // true

由于undefined和null无法转为对象,所以如果第一个参数是undefined或null,就会报错。


Object.getPrototypeOf()

该方法与Object.setPrototypeOf方法配套,用于读取一个对象的原型对象。

Object.getPrototypeOf(obj);

举个例子

 function foo() {
  // ...
}

var rec = new foo();

console.log(Object.getPrototypeOf(rec) === foo.prototype);// true

console.log(Object.setPrototypeOf(rec, Object.prototype)); //__proto__ :Object
console.log(Object.getPrototypeOf(rec) === foo.prototype);// false

如果参数不是对象,会被自动转为对象

Object.getPrototypeOf(1) // Number {[[PrimitiveValue]]: 0}
Object.getPrototypeOf('foo') //String {length: 0, [[PrimitiveValue]]: ""}
Object.getPrototypeOf(true) // Boolean {[[PrimitiveValue]]: false}

如果参数是undefined或null,则无法转化为对象。直接报错。

Object.getPrototypeOf(undefined)
Object.getPrototypeOf(null)
// TypeError: Cannot convert undefined or null to object

Object.keys()

ES5 引入了Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。

var obj = {foo:'bar',baz:42};
Object.keys(obj) //['foo','baz'];

ES7 引入了跟Object.keys配套的Object.values和Object.entries,作为遍历一个对象的补充手段,供for…of循环使用。

let {keys,values,entries} = Object;
let obj = {a:1,b:2,c:3};
console.log(keys(obj))  //["a", "b", "c"]

for(let key of keys(obj)){
  console.log(key); //a,b,c
}

for(let value of values(obj)){
   console.log(value) // 1,2,3
}

for(let [key,value] of entries(obj)){
   console.log([key,value]);  // ['a', 1], ['b', 2], ['c', 3]
}

Object.values()

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

var obj = {foo:'bar',baz:42};
Object.values(obj) // ["bar", 42]

属性名为数值的属性,是按照数值大小,从小到大遍历的。因此返回的顺序是b、c、a。

var obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj) //["b", "c", "a"]

Object.values只返回对象自身的可遍历属性。

var obj = Object.create({}, {p:{value:1}});
Object.values(obj) //[]

上面代码中,用Object.create方法的第二参数添加对象属性,默认情况下不可遍历,因为p**属性描述对象enumerable默认是false**,Object.values不会返回这个属性。只要把enumerable改成true,Object.values就会返回属性p的值

var obj = Object.create({},{p:{
    value:1,
    enumerable:true
  }
});
Object.values(obj) // [42]

Object.values会过滤属性名为 Symbol 值的属性。

Object.values({ [Symbol()]: 123, foo: 'abc' });
// ['abc']

如果Object.values方法的参数是一个字符串,会返回各个字符组成的一个数组。

Object.values('foo')
// ['f', 'o', 'o']

如果参数不是对象,Object.values会先将其转为对象。由于数值和布尔值的包装对象,都不会为实例添加非继承的属性。所以,Object.values会返回空数组。

Object.values(42) // []
Object.values(true) // []

Object.entries

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

var obj = {foo:'bar',baz:'42'};
Object.entries(obj) //[foo:'bar',baz:'42']

除了返回值不一样,该方法的行为与Object.values基本一致。
如果原对象的属性名是一个Symbol值,该属性会被忽略。

var obj = {[Symbol()]:123,foo:'abc'};
Object.entries(obj) // ['foo','abc']

对象的扩展运算符

(1)解构赋值
对象的解构赋值用于从一个对象取值,相当于将所有可遍历的,但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。

  let {x,y,...z} = {x:1,y:2,a:3,b:4};
  x //1
  y //2
  z //{a:3,b:4}

解构赋值要求等会右边是一个对象,所以如果等会右边是undefined或null,就会报错。因为它们无法转化为对象。

let {x,y,...z} = null;
let {x,y,...z} = undefined
//运行时发生错误

解构赋值必须是最后一个参数,否则会报错

let {...x,y,z} = obj //句法错误
let {x,...y,...z} = obj //句法错误

只要解构赋值不是最后一个参数,就会报错。

注意,解构赋值的拷贝是浅拷贝,即如果一个键的值是复合类型的值(数组、对象、函数)、那么解构赋值拷贝的是这个值的引用,而不是这个值的副本。

let obj = {a:{b:1}};
let {...x} = obj;
obj.a.b = 2;
x.a.b //2

上面代码中,x是结构赋值所在的对象,拷贝了对象的a属性。a属性引用了一个对象,修改了这个对象的值,会影响到解构赋值对它的引用。

另外,解构赋值不会拷贝继承自原型对象的属性

let o1 = {a:1};
let o2 = {b:2};
o2.__proto__ = o1;
let o3 = {...o2};
o3 //{b:2}

上面代码中,对象o3是o2的拷贝,但是只复制了o2自身的属性,没有复制它的原型对象o1的属性。

解构赋值的一个用处,是扩展某个函数的参数,引入其他操作。

function foo({a,b}){
 //...
}
function wrapFoo({x,y,...restConfig}){
   // 使用x和y参数进行操作
  // 其余参数传给原始函数
  return foo(restConfig);
}

原始函数foo接受a和b作为参数,函数wrapFoo在foo的基础上进行了扩展,能够接受多余的参数,并且保留原始函数的行为。

(2)扩展运算符
扩展运算符(…)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。

let z = {a:1,b:2};
let n = {...z};
n // {a:1, b:2}

这等同于使用Object.assign方法。

let aClone = {...a};
//等同于
let aClone = Object.assign({},a)

扩展运算符可以用于合并两个对象

let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);

扩展运算符的参数对象之中,如果有取值函数get,这个函数是会执行的。

// 并不会抛出错误,因为x属性只是被定义,但没执行
let aWithXGetter = {
  ...a,
  get x() {
    throws new Error('not thrown yet');
  }
};

// 会抛出错误,因为x属性被执行了
let runtimeError = {
  ...a,
  ...{
    get x() {
      throws new Error('thrown now');
    }
  }
};

如果扩展运算符的参数是null或undefined,这两个值会被忽略,不会报错。

let obj = {...null,...undefined}; //不报错

Object.getOwnPropertyDescriptors()

ES5有一个Object.getOwnPropertyDescriptor方法,返回某个对象属性的描述对象(descriptor)。

var obj = {p:'a'};
Object.getOwnPropertyDescriptors(obj,'p') //切记描述对象要加上''
//{value: "a", writable: true, enumerable: true, configurable: true}

ES2017 引入了Object.getOwnPropertyDescriptors方法,返回指定对象所有自身属性(非继承属性)的描述对象。

const obj = {
    foo:123,
    get bar() { return 'abc'}
}
Object.getOwnPropertyDescriptors(obj)
// { foo:
//    { value: 123,
//      writable: true,
//      enumerable: true,
//      configurable: true },
//   bar:
//    { get: [Function: bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }

Object.getOwnPropertyDescriptors方法返回一个对象,所有原对象的属性名都是该对象的属性名,对应的属性值就是该属性的描述对象。


Null 传导运算符

const firstName = message?.body?.user?.firstName || 'default';

上面代码有三个?.运算符,只要其中一个返回null或undefined,就不再往下运算,而是返回undefined。

“Null 传导运算符”有四种用法。
obj?.prop // 读取对象属性
obj?.[expr] // 同上
func?.(…args) // 函数或对象方法的调用
new C?.(…args) // 构造函数的调用

传导运算符之所以写成obj?.prop,而不是obj?prop,是为了方便编译器能够区分三元运算符?:(比如obj?prop:123)。

例子。

// 如果 anull 或 undefined, 返回 undefined
// 否则返回 a.b.c().d
a?.b.c().d

// 如果 a 是 null 或 undefined,下面的语句不产生任何效果
// 否则执行 a.b = 42
a?.b = 42

// 如果 a 是 null 或 undefined,下面的语句不产生任何效果
delete a?.b
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页