JavaScript基础总结-白红宇

JavaScript基础总结

阅读量：6594 次

发布时间：2019-06-24

本文共 7407 字，大约阅读时间需要 24 分钟。

一.　Symbol的引入：

ES5 的对象属性名都是字符串，这容易造成属性名的冲突，为了从根本上防止属性名的冲突，ES6 引入Symbol。

如：

　　比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。

　　如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突，这就是 ES6 引入Symbol的原因

　　JavaScript 语言的七种数据类型：

　　　　1. undefined

　　　　2. null

　　　　3. 布尔值（Boolean）

　　　　4. 字符串（String）

　　　　5. 数值（Number）

　　　　6. 对象（Object）

　　　　7. Symbol

　　Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型：

　　　　1. 是原来就有的字符串

　　　　2. 就是新增的 Symbol 类型

　　凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。

　　注意，1. Symbol函数前不能使用new命令，否则会报错。

　　　　　　这是因为生成的 Symbol 是一个原始类型的值，不是对象。也就是说，由于 Symbol 值不是对象，所以不能添加属性。基本上，它是一种类似于字符串的数据类型。

　　　　　2. 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 　　　　　　但是，Symbol 值可以显式转为字符串。

　　　　　　let sym = Symbol('My symbol'); 　　　　　　String(sym) // 'Symbol(My symbol)' 　　　　　　sym.toString() // 'Symbol(My symbol)' 　　　　 　　　　 3.Symbol值也可以转为布尔值，但是不能转为数值。

　　　　　　Number(sym) // TypeError 　　　　　　sym + 2 // TypeError

二. 作为属性名的 Symbol

　　const mySymbol = Symbol();

　　const a = {

};

　　a.mySymbol = 'Hello!'; 　　a[mySymbol] // undefined 　　a['mySymbol'] // "Hello!" =================================================

　　const COLOR_RED    = Symbol(); 　　const COLOR_GREEN = Symbol(); 　　function getComplement(color) { 　　switch (color) { 　　case COLOR_RED: 　　return COLOR_GREEN; 　　case COLOR_GREEN: 　　return COLOR_RED; 　　default: 　　throw new Error('Undefined color'); 　　} 　　}　　 三. 消除魔术字符串 魔术字符串指的是，在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码，应该尽量消除魔术字符串，改由含义清晰的变量代替。

function getArea(shape, options) { let area = 0; switch (shape) { case 'Triangle': // 魔术字符串 area = .5 * options.width * options.height; break; /* ... more code ... */ } return area; } getArea('Triangle', { width: 100, height: 100 }); // 魔术字符串

　上面代码中，字符串Triangle就是一个魔术字符串。它多次出现，与代码形成“强耦合”，不利于将来的修改和维护。

　常用的消除魔术字符串的方法，就是把它写成一个变量。

优化后：

const shapeType = {  triangle: '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 }); 上面代码中，我们把Triangle写成shapeType对象的triangle属性，这样就消除了强耦合。 如果仔细分析，可以发现shapeType.triangle等于哪个值并不重要，只要确保不会跟其他shapeType属性的值冲突即可。因此，这里就很适合改用 Symbol 值。

const shapeType = {  triangle: Symbol() }; 上面代码中，除了将shapeType.triangle的值设为一个 Symbol，其他地方都不用修改。 四. 属性名的遍历 Symbol 作为属性名，该属性不会出现在for...in、for...of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。 但是，它也不是私有属性，有一个Object.getOwnPropertySymbols方法，可以获取指定对象的所有 Symbol 属性名。 Object.getOwnPropertySymbols方法返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值。 　　 下面是另一个例子，Object.getOwnPropertySymbols方法与for...in循环、Object.getOwnPropertyNames方法进行对比的例子。如：

　　const obj = {
      }; 　　let foo = Symbol("foo"); 　　Object.defineProperty(obj, foo, { 　　value: "foobar", 　　}); 　　for (let i in obj) { 　　console.log(i); // 无输出 　　} 　　Object.getOwnPropertyNames(obj) 　　// [] 　　Object.getOwnPropertySymbols(obj) 　　// [Symbol(foo)]

上面代码中，使用Object.getOwnPropertyNames方法得不到Symbol属性名，需要使用Object.getOwnPropertySymbols方法。 另一个新的 API，Reflect.ownKeys方法可以返回所有类型的键名，包括常规键名和 Symbol 键名。

let obj = {  [Symbol('my_key')]: 1, enum: 2, nonEnum: 3 }; Reflect.ownKeys(obj) // ["enum", "nonEnum", Symbol(my_key)] 由于以 Symbol 值作为名称的属性，不会被常规方法遍历得到。我们可以利用这个特性，为对象定义一些非私有的、但又希望只用于内部的方法。

5. Symbol.for()，Symbol.keyFor()

　　有时，我们希望重新使用同一个 Symbol 值，Symbol.for方法可以做到这一点。

　　它接受一个字符串作为参数，然后搜索有没有以该参数作为名称的 Symbol 值。如果有，就返回这个 Symbol 值，否则就新建并返回一个以该字符串为名称的 Symbol 值。

　　let s1 = Symbol.for('foo'); 　　let s2 = Symbol.for('foo'); 　　s1 === s2 // true

　　上面代码中，s1和s2都是 Symbol 值，但是它们都是同样参数的Symbol.for方法生成的，所以实际上是同一个值。

　　Symbol.for()与Symbol()这两种写法，都会生成新的 Symbol。它们的区别是，前者会被登记在全局环境中供搜索，后者不会。

　　由于Symbol()写法没有登记机制，所以每次调用都会返回一个不同的值。调用Symbol("cat")30 次，会返回 30 个不同的 Symbol 值。

　Symbol.keyFor方法返回一个已登记的 Symbol 类型值的key。 　　let s1 = Symbol.for("foo"); 　　Symbol.keyFor(s1) // "foo"

　　let s2 = Symbol("foo"); 　　Symbol.keyFor(s2) // undefined 上面代码中，变量s2属于未登记的 Symbol 值，所以返回undefined。 需要注意的是，Symbol.for为 Symbol 值登记的名字，是全局环境的，可以在不同的 iframe 或 service worker 中取到同一个值。

iframe = document.createElement('iframe'); iframe.src = String(window.location); document.body.appendChild(iframe); iframe.contentWindow.Symbol.for('foo') === Symbol.for('foo') // true 上面代码中，iframe 窗口生成的 Symbol 值，可以在主页面得到。 6. 模块的Singleton 模式 Singleton 模式指的是调用一个类，任何时候返回的都是同一个实例。 对于 Node 来说，模块文件可以看成是一个类。怎么保证每次执行这个模块文件，返回的都是同一个实例呢？ 很容易想到，可以把实例放到顶层对象global。

// mod.jsfunction A() { this.foo = 'hello'; } if (!global._foo) { global._foo = new A(); } module.exports = global._foo; 然后，加载上面的mod.js。

const a = require('./mod.js'); console.log(a.foo); 上面代码中，变量a任何时候加载的都是A的同一个实例。 但是，这里有一个问题，全局变量global._foo是可写的，任何文件都可以修改。

global._foo = { foo: 'world' }; const a = require('./mod.js'); console.log(a.foo); 上面的代码，会使得加载mod.js的脚本都失真。 为了防止这种情况出现，我们就可以使用 Symbol。

// mod.jsconst FOO_KEY = Symbol.for('foo'); function A() { this.foo = 'hello'; } if (!global[FOO_KEY]) { global[FOO_KEY] = new A(); } module.exports = global[FOO_KEY];

上面代码中，可以保证global[FOO_KEY]不会被无意间覆盖，但还是可以被改写。

global[Symbol.for('foo')] = { foo: 'world' }; const a = require('./mod.js'); 如果键名使用Symbol方法生成，那么外部将无法引用这个值，当然也就无法改写。

// mod.jsconst FOO_KEY = Symbol('foo'); // 后面代码相同 …… 上面代码将导致其他脚本都无法引用FOO_KEY。但这样也有一个问题，就是如果多次执行这个脚本，每次得到的FOO_KEY都是不一样的。 虽然 Node 会将脚本的执行结果缓存，一般情况下，不会多次执行同一个脚本，但是用户可以手动清除缓存，所以也不是绝对可靠。 7.内置的 Symbol值

除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法

　Symbol.hasInstance

　对象的`Symbol.hasInstance`属性，指向一个内部方法。当其他对象使用`instanceof`运算符，判断是否为该对象的实例时，会调用这个方法。

　比如，foo instanceof Foo

　　　　在语言内部，实际调用的是Foo[Symbol.hasInstance](foo)。　　　

　　　　class MyClass {  　　　　[Symbol.hasInstance](foo) { 　　　　return foo instanceof Array; 　　　　} 　　　　} 　　　　[1, 2, 3] instanceof new MyClass() // true 上面代码中，MyClass是一个类，new MyClass()会返回一个实例。该实例的Symbol.hasInstance方法，会在进行instanceof运算时自动调用，判断左侧的运算子是否为Array的实例。 下面是另一个例子。

class Even {  static [Symbol.hasInstance](obj) { return Number(obj) % 2 === 0; } }

// 等同于const Even = {  [Symbol.hasInstance](obj) { return Number(obj) % 2 === 0; } };

1 instanceof Even // false 2 instanceof Even // true 12345 instanceof Even // false

Symbol.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默认等于undefined。该属性等于true时，也有展开的效果。 类似数组的对象正好相反，默认不展开。它的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.isConcatSpreadable属性也可以定义在类里面

class A1 extends Array {  constructor(args) { super(args); this[Symbol.isConcatSpreadable] = true; } } class A2 extends Array { constructor(args) { super(args); } get [Symbol.isConcatSpreadable] () { return false; } } let a1 = new A1(); a1[0] = 3; a1[1] = 4; let a2 = new A2(); a2[0] = 5; a2[1] = 6; [1, 2].concat(a1).concat(a2) // [1, 2, 3, 4, [5, 6]]

上面代码中，类A1是可展开的，类A2是不可展开的，所以使用concat时有不一样的结果。

注意，Symbol.isConcatSpreadable的位置差异，A1是定义在实例上，A2是定义在类本身，效果相同。

.......