diff --git a/css/app.css b/css/app.css index 84fcfd5..841ee8e 100644 --- a/css/app.css +++ b/css/app.css @@ -154,9 +154,11 @@ body { } #content p>code, -#content li>code { - color: #c7254e; - background: #f9f2f4; +#content li>code, +#content h2>code, +#content h3>code{ + color: #c7254e; + background: #f9f2f4; } #content h2 { diff --git a/docs/array.md b/docs/array.md index 939d85c..57b2d4b 100644 --- a/docs/array.md +++ b/docs/array.md @@ -2,7 +2,7 @@ ## Array.from() -Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。 +`Array.from`方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。 ```javascript Array.from('hello') @@ -20,26 +20,40 @@ Array.from(ps).forEach(function (p) { }); ``` -上面代码中,querySelectorAll方法返回的是一个类似数组的对象,只有将这个对象转为真正的数组,才能使用forEach方法。 +上面代码中,`querySelectorAll`方法返回的是一个类似数组的对象,只有将这个对象转为真正的数组,才能使用forEach方法。 -Array.from方法可以将函数的arguments对象,转为数组。 +`Array.from`方法可以将函数的`arguments`对象,转为数组。 ```javascript function foo() { - var args = Array.from( arguments ); + var args = Array.from(arguments); } -foo( "a", "b", "c" ); +foo('a', 'b', 'c'); ``` -任何有length属性的对象,都可以通过Array.from方法转为数组。 +值得提醒的是,扩展运算符(`...`)也可以将某些数据结构转为数组。 + +```javascript +// arguments对象 +function foo() { + var args = [...arguments]; +} + +// NodeList对象 +[...document.querySelectorAll('div')] +``` + +扩展运算符背后调用的是遍历器接口(`Symbol.iterator`),如果一个对象没有部署这个接口,就无法转换。`Array.from`方法就不存在这个问题,比如下面的这个例子,扩展运算符就无法转换。 + +任何有`length`属性的对象,都可以通过`Array.from`方法转为数组。 ```javascript Array.from({ 0: "a", 1: "b", 2: "c", length: 3 }); // [ "a", "b" , "c" ] ``` -对于还没有部署该方法的浏览器,可以用Array.prototype.slice方法替代。 +对于还没有部署该方法的浏览器,可以用`Array.prototype.slice`方法替代。 ```javascript const toArray = (() => @@ -47,7 +61,7 @@ const toArray = (() => )(); ``` -Array.from()还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理。 +`Array.from`还可以接受第二个参数,作用类似于数组的`map`方法,用来对每个元素进行处理。 ```JavaScript Array.from(arrayLike, x => x * x); @@ -58,14 +72,26 @@ Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9] ``` -下面的例子将数组中布尔值为false的成员转为0。 +下面的例子将数组中布尔值为`false`的成员转为`0`。 ```javascript Array.from([1, , 2, , 3], (n) => n || 0) // [1, 0, 2, 0, 3] ``` -`Array.from()`可以将各种值转为真正的数组,并且还提供map功能。这实际上意味着,你可以在数组里造出任何想要的值。 +另一个例子是返回各种数据的类型。 + +```javascript +function typesOf () { + return Array.from(arguments, value => typeof value) +} +typesOf(null, [], NaN) +// ['object', 'object', 'number'] +``` + +如果`map`函数里面用到了`this`关键字,还可以传入`Array.from`的第三个参数,用来绑定`this`。 + +`Array.from()`可以将各种值转为真正的数组,并且还提供`map`功能。这实际上意味着,你可以在数组里造出任何想要的值。 ```javascript Array.from({ length: 2 }, () => 'jack') @@ -74,7 +100,7 @@ Array.from({ length: 2 }, () => 'jack') 上面代码中,`Array.from`的第一个参数指定了第二个参数运行的次数。这种特性可以让该方法的用法变得非常灵活。 -`Array.from()`的另一个应用是,将字符串转为数组,然后返回字符串的长度。这样可以避免JavaScript将大于`\uFFFF`的Unicode字符,算作两个字符的bug。 +`Array.from()`的另一个应用是,将字符串转为数组,然后返回字符串的长度。因为它能正确处理各种Unicode字符,可以避免JavaScript将大于`\uFFFF`的Unicode字符,算作两个字符的bug。 ```javascript function countSymbols(string) { @@ -84,7 +110,7 @@ function countSymbols(string) { ## Array.of() -Array.of方法用于将一组值,转换为数组。 +`Array.of`方法用于将一组值,转换为数组。 ```javaScript Array.of(3, 11, 8) // [3,11,8] @@ -92,17 +118,26 @@ Array.of(3) // [3] Array.of(3).length // 1 ``` -这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。 +这个方法的主要目的,是弥补数组构造函数`Array()`的不足。因为参数个数的不同,会导致`Array()`的行为有差异。 ```javascript Array() // [] Array(3) // [undefined, undefined, undefined] -Array(3,11,8) // [3, 11, 8] +Array(3, 11, 8) // [3, 11, 8] ``` -上面代码说明,只有当参数个数不少于2个,Array()才会返回由参数组成的新数组。 +上面代码说明,只有当参数个数不少于2个,`Array()`才会返回由参数组成的新数组。 -Array.of方法可以用下面的代码模拟实现。 +`Array.of`基本上可以用来替代`new Array()`,并且不存在`new Array(length)`导致的重载。它的行为非常统一。 + +```javascript +Array.of() // [] +Array.of(undefined) // [undefined] +Array.of(1) // [1] +Array.of(1, 2) // [1, 2] +``` + +`Array.of`方法可以用下面的代码模拟实现。 ```javascript function ArrayOf(){ @@ -112,12 +147,16 @@ function ArrayOf(){ ## 数组实例的copyWithin() -数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。 +数组实例的`copyWithin`方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。 + +```javascript +Array.prototype.copyWithin(target, start = 0, end = this.length) +``` 它接受三个参数。 -- target(必需):从该位置开始复制数据。 -- start(必需):从该位置开始读取数据。如果为负值,表示倒数。 +- target(必需):从该位置开始替换数据。 +- start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。 - end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。 这三个参数都应该是数值,如果不是,会自动转为数值。 @@ -157,7 +196,7 @@ i32a.copyWithin(0, 2); ## 数组实例的find()和findIndex() -数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。 +数组实例的`find`方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为`true`的成员,然后返回该成员。如果没有符合条件的成员,则返回`undefined`。 ```javascript [1, 4, -5, 10].find((n) => n < 0) @@ -172,9 +211,9 @@ i32a.copyWithin(0, 2); }) // 10 ``` -上面代码中,find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。 +上面代码中,`find`方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。 -数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。 +数组实例的`findIndex`方法的用法与`find`方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回`-1`。 ```javascript [1, 5, 10, 15].findIndex(function(value, index, arr) { @@ -198,7 +237,7 @@ i32a.copyWithin(0, 2); ## 数组实例的fill() -fill()使用给定值,填充一个数组。 +`fill`方法使用给定值,填充一个数组。 ```javascript ['a', 'b', 'c'].fill(7) @@ -208,9 +247,9 @@ new Array(3).fill(7) // [7, 7, 7] ``` -上面代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。 +上面代码表明,`fill`方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。 -fill()还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。 +`fill`方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。 ```javascript ['a', 'b', 'c'].fill(7, 1, 2) diff --git a/docs/number.md b/docs/number.md index 5b56329..23fe543 100644 --- a/docs/number.md +++ b/docs/number.md @@ -271,13 +271,21 @@ ES6在Math对象上新增了17个与数学相关的方法。所有这些方法 ### Math.trunc() -Math.trunc方法用于去除一个数的小数部分,返回整数部分。 +`Math.trunc`方法用于去除一个数的小数部分,返回整数部分。 ```javascript 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`方法将其先转为数值。 + +```javascript +Math.trunc('123.456') +// 123 ``` 对于空值和无法截取整数的值,返回NaN。 @@ -298,7 +306,7 @@ Math.trunc = Math.trunc || function(x) { ### Math.sign() -Math.sign方法用来判断一个数到底是正数、负数、还是零。 +`Math.sign`方法用来判断一个数到底是正数、负数、还是零。 它会返回五种值。 @@ -332,13 +340,20 @@ Math.sign = Math.sign || function(x) { ### Math.cbrt() -Math.cbrt方法用于计算一个数的立方根。 +`Math.cbrt`方法用于计算一个数的立方根。 ```javascript -Math.cbrt(-1); // -1 -Math.cbrt(0); // 0 -Math.cbrt(1); // 1 -Math.cbrt(2); // 1.2599210498948734 +Math.cbrt(-1) // -1 +Math.cbrt(0) // 0 +Math.cbrt(1) // 1 +Math.cbrt(2) // 1.2599210498948734 +``` + +对于非数值,`Math.cbrt`方法内部也是先使用`Number`方法将其转为数值。 + +```javascript +Math.cbrt('8') // 2 +Math.cbrt('hello') // NaN ``` 对于没有部署这个方法的环境,可以用下面的代码模拟。 @@ -352,7 +367,7 @@ Math.cbrt = Math.cbrt || function(x) { ### Math.clz32() -JavaScript的整数使用32位二进制形式表示,Math.clz32方法返回一个数的32位无符号整数形式有多少个前导0。 +JavaScript的整数使用32位二进制形式表示,`Math.clz32`方法返回一个数的32位无符号整数形式有多少个前导0。 ```javascript Math.clz32(0) // 32 @@ -360,16 +375,28 @@ Math.clz32(1) // 31 Math.clz32(1000) // 22 ``` -上面代码中,0的二进制形式全为0,所以有32个前导0;1的二进制形式是0b1,只占1位,所以32位之中有31个前导0;1000的二进制形式是0b1111101000,一共有10位,所以32位之中有22个前导0。 +上面代码中,0的二进制形式全为0,所以有32个前导0;1的二进制形式是`0b1`,只占1位,所以32位之中有31个前导0;1000的二进制形式是`0b1111101000`,一共有10位,所以32位之中有22个前导0。 -对于小数,Math.clz32方法只考虑整数部分。 +`clz32`这个函数名就来自”count leading zero bits in 32-bit binary representations of a number“(计算32位整数的前导0)的缩写。 + +左移运算符(`<<`)与`Math.clz32`方法直接相关。 + +```javascript +Math.clz32(0) // 32 +Math.clz32(1) // 31 +Math.clz32(1 << 1) // 30 +Math.clz32(1 << 2) // 29 +Math.clz32(1 << 29) // 2 +``` + +对于小数,`Math.clz32`方法只考虑整数部分。 ```javascript Math.clz32(3.2) // 30 Math.clz32(3.9) // 30 ``` -对于空值或其他类型的值,Math.clz32方法会将它们先转为数值,然后再计算。 +对于空值或其他类型的值,`Math.clz32`方法会将它们先转为数值,然后再计算。 ```javascript Math.clz32() // 32 @@ -384,7 +411,7 @@ Math.clz32(true) // 31 ### Math.imul() -Math.imul方法返回两个数以32位带符号整数形式相乘的结果,返回的也是一个32位的带符号整数。 +`Math.imul`方法返回两个数以32位带符号整数形式相乘的结果,返回的也是一个32位的带符号整数。 ```javascript Math.imul(2, 4); // 8 @@ -392,13 +419,13 @@ Math.imul(-1, 8); // -8 Math.imul(-2, -2); // 4 ``` -如果只考虑最后32位(含第一个整数位),大多数情况下,`Math.imul(a, b)`与`a * b`的结果是相同的,即该方法等同于`(a * b)|0`的效果。之所以需要部署这个方法,是因为JavaScript有精度限制,超过2的53次方的值无法精确表示。这就是说,对于那些很大的数的乘法,低位数值往往都是不精确的,Math.imul方法可以返回正确的低位数值。 +如果只考虑最后32位(含第一个整数位),大多数情况下,`Math.imul(a, b)`与`a * b`的结果是相同的,即该方法等同于`(a * b)|0`的效果(超过32位的部分溢出)。之所以需要部署这个方法,是因为JavaScript有精度限制,超过2的53次方的值无法精确表示。这就是说,对于那些很大的数的乘法,低位数值往往都是不精确的,`Math.imul`方法可以返回正确的低位数值。 ```javascript (0x7fffffff * 0x7fffffff)|0 // 0 ``` -上面这个乘法算式,返回结果为0。但是由于这两个数的个位数都是1,所以这个结果肯定是不正确的。这个错误就是因为它们的乘积超过了2的53次方,JavaScript无法保存额外的精度,就把低位的值都变成了0。Math.imul方法可以返回正确的值1。 +上面这个乘法算式,返回结果为0。但是由于这两个二进制数的最低位都是1,所以这个结果肯定是不正确的,因为根据二进制乘法,计算结果的二进制最低位应该也是1。这个错误就是因为它们的乘积超过了2的53次方,JavaScript无法保存额外的精度,就把低位的值都变成了0。`Math.imul`方法可以返回正确的值1。 ```javascript Math.imul(0x7fffffff, 0x7fffffff) // 1 @@ -428,7 +455,7 @@ Math.fround = Math.fround || function(x) { ### Math.hypot() -Math.hypot方法返回所有参数的平方和的平方根。 +`Math.hypot`方法返回所有参数的平方和的平方根。 ```javascript Math.hypot(3, 4); // 5 @@ -448,7 +475,7 @@ Math.hypot(-3); // 3 ES6新增了4个对数相关方法。 -(1) Math.expm1() +**(1) Math.expm1()** `Math.expm1(x)`返回ex - 1。 @@ -466,9 +493,9 @@ Math.expm1 = Math.expm1 || function(x) { }; ``` -(2)Math.log1p() +**(2)Math.log1p()** -`Math.log1p(x)`方法返回1 + x的自然对数。如果x小于-1,返回NaN。 +`Math.log1p(x)`方法返回`1 + x`的自然对数。如果`x`小于-1,返回`NaN`。 ```javascript Math.log1p(1); // 0.6931471805599453 @@ -485,7 +512,7 @@ Math.log1p = Math.log1p || function(x) { }; ``` -(3)Math.log10() +**(3)Math.log10()** `Math.log10(x)`返回以10为底的x的对数。如果x小于0,则返回NaN。 @@ -505,17 +532,18 @@ Math.log10 = Math.log10 || function(x) { }; ``` -(4)Math.log2() +**(4)Math.log2()** `Math.log2(x)`返回以2为底的x的对数。如果x小于0,则返回NaN。 ```javascript -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(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 ``` 对于没有部署这个方法的环境,可以用下面的代码模拟。 diff --git a/docs/object.md b/docs/object.md index a9206f0..25d6704 100644 --- a/docs/object.md +++ b/docs/object.md @@ -190,7 +190,16 @@ obj[key2].name // "" ## Object.is() -Object.is()用来比较两个值是否严格相等。它与严格比较运算符(===)的行为基本一致,不同之处只有两个:一是+0不等于-0,二是NaN等于自身。 +`Object.is`用来比较两个值是否严格相等。它与严格比较运算符(===)的行为基本一致。 + +```javascript +Object.is('foo', 'foo') +// true +Object.is({}, {}) +// false +``` + +不同之处只有两个:一是`+0`不等于`-0`,二是`NaN`等于自身。 ```javascript +0 === -0 //true @@ -200,7 +209,7 @@ Object.is(+0, -0) // false Object.is(NaN, NaN) // true ``` -ES5可以通过下面的代码,部署Object.is()。 +ES5可以通过下面的代码,部署`Object.is`。 ```javascript Object.defineProperty(Object, 'is', { @@ -220,7 +229,7 @@ Object.defineProperty(Object, 'is', { ## Object.assign() -Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target)。它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象。只要有一个参数不是对象,就会抛出TypeError错误。 +`Object.assign`方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target)。它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象。只要有一个参数不是对象,就会抛出TypeError错误。 ```javascript var target = { a: 1 }; @@ -244,7 +253,48 @@ Object.assign(target, source1, source2); target // {a:1, b:2, c:3} ``` -assign方法有很多用处。 +`Object.assign`只拷贝自身属性,不可枚举的属性(`enumerable`为false)和继承的属性不会被拷贝。 + +```javascript +Object.assign({b: 'c'}, + Object.defineProperty({}, 'invisible', { + enumerable: false, + value: 'hello' + }) +) +// { b: 'c' } +``` + +上面代码中,`Object.assign`要拷贝的对象只有一个不可枚举属性`invisible`,这个属性并没有被拷贝进去。 + +属性名为Symbol值的属性,也会被`Object.assign`拷贝。 + +```javascript +Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' }) +// { a: 'b', Symbol(c): 'd' } +``` + +对于嵌套的对象,`Object.assign`的处理方法是替换,而不是添加。 + +```javascript +var target = { a: { b: 'c', d: 'e' } } +var source = { a: { b: 'hello' } } +Object.assign(target, source) +// { a: { b: 'hello' } } +``` + +上面代码中,`target`对象的`a`属性被`source`对象的`a`属性整个替换掉了,而不会得到`{ a: { b: 'hello', d: 'e' } }`的结果。这通常不是开发者想要的,需要特别小心。有一些函数库提供`Object.assign`的定制版本(比如Lodash的`_.defaultsDeep`方法),可以解决深拷贝的问题。 + +注意,`Object.assign`可以用来处理数组,但是会把数组视为对象。 + +```javascript +Object.assign([1, 2, 3], [4, 5]) +// [4, 5, 3] +``` + +上面代码中,`Object.assign`把数组视为属性名为0、1、2的对象,因此目标数组的0号属性`4`覆盖了原数组的0号属性`1`。 + +`Object.assign`方法有很多用处。 **(1)为对象添加属性** @@ -329,7 +379,9 @@ function processContent(options) { } ``` -上面代码中,DEFAULTS对象是默认值,options对象是用户提供的参数。assign方法将DEFAULTS和options合并成一个新对象,如果两者有同名属性,则option的属性值会覆盖DEFAULTS的属性值。 +上面代码中,`DEFAULTS`对象是默认值,`options`对象是用户提供的参数。`Object.assign`方法将`DEFAULTS`和`options`合并成一个新对象,如果两者有同名属性,则`option`的属性值会覆盖`DEFAULTS`的属性值。 + +注意,由于存在深拷贝的问题,`DEFAULTS`对象和`options`对象的所有属性的值,都只能是简单类型,而不能指向另一个对象。否则,将导致`DEFAULTS`对象的该属性不起作用。 ## `__proto__`属性,Object.setPrototypeOf(),Object.getPrototypeOf()