JS知识点总结（五）

JS知识点总结

一、功能强大的toLocaleString()

1. Number.prototype.toLocaleString
   style 表示格式化时使用的样式，默认值是 decimal 也就是纯数字，也可为 percent 百分比显示与 currency 货币显示。值为 currency 时必须同时指定 options 中的 currency 属性，否则报错。具体例子如下：

const num = 2333333;
num.toLocaleString('zh', { style: 'decimal' });   //2,333,333
num.toLocaleString('zh', { style: 'percent' });   //233,333,300%
num.toLocaleString('zh', { style: 'currency' });    //报错

const num = 2333333;
num.toLocaleString('zh', { style: 'currency', currency: 'CNY' });    //￥2,333,333.00
num.toLocaleString('zh', { style: 'currency', currency: 'cny', currencyDisplay: 'code' });      //CNY2,333,333.00
num.toLocaleString('zh', { style: 'currency', currency: 'cny', currencyDisplay: 'name' });      //2,333,333.00人民币

关于控制数字位数和小数位数的函数

let num = 2333.3;
num.toLocaleString('zh', { minimumIntegerDigits: 5 });        //02,333.3
//如果不想有分隔符，可以指定useGrouping为false
num.toLocaleString('zh', { minimumIntegerDigits: 5, useGrouping: false });        //02333.3
num.toLocaleString('zh', { minimumFractionDigits: 2, useGrouping: false });     //2333.30

num = 666.666
num.toLocaleString('zh', { maximumFractionDigits: 2, useGrouping: false });     //666.67

另一组是 minimumSignificantDigits 与 maximumSignificantDigits，用于控制有效数字位数，只要设置了这一组属性，第一组属性全部忽略不算，具体如下：

const num = 1234.5;
num.toLocaleString('zh', { minimumSignificantDigits: 6, useGrouping: false });      //1234.50
num.toLocaleString('zh', { maximumSignificantDigits: 4, useGrouping: false });      //1235

2. Date.prototype.toLocaleString

const date = new Date();
date.toLocaleString('zh', { hour12: true });        //2018/4/4 下午6:57:36
date.toLocaleString('zh', { hour12: false });       //2018/4/4 18:57:36

二、null和Object的关系

null是JS的一种基础数据类型，不继承与Object，但是使用typeof又会得到object。。。

console.log(typeof null); // object
console.log(null instanceof Object); // false

三、关于逗号操作符

逗号操作符可以使多个表达式在同一条语句中执行

function colon() {
    var a1 = 1,
        a2 = 2,
        a3 = 3;
    a4 = 4;
}
colon();
console.log('a4', a4);
console.log('a1', a1);
console.log('a2', a2);

这个例子说明，在colon函数中并没有生成全局变量

四、关于数组的属性

1.length属性

通常我们认为length属性肯定是只读的，其实不然。。。length属性是可以修改的，而且修改后会改变数组的内容。如：

let colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
colors.length = 2;
console.log(colors); // [ 'red', 'blue' ]
colors.length = 3;
console.log(colors[2]); // undefined

2.valueOf属性

数组的valueOf属性返回的是数组本身

let colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
console.log(colors.valueOf()); // [ 'red', 'blue', 'green' ]

五、WeakMap和Map的区别

1. WeakMap的键必须是引用类型值
2. WeakMap的键是弱引用，当外部没有引用指向该对象时，对应键值对会被清除掉，释放内存。

六、关于生成器

1.什么是生成器

生成器的形式是一个函数，函数名称前面加一个星号*表示它是一个生成器。只要是可以定义函数的地方，就可以定义生成器。

// 生成器函数声明
function* generatorFn() {}
// 生成器函数表达式
let generatorFn = function* () {}
// 作为对象字面量方法的生成器函数
let foo = {
 * generatorFn() {}
}
// 作为类实例方法的生成器函数
class Foo {
 * generatorFn() {}
}
// 作为类静态方法的生成器函数
class Bar {
 static * generatorFn() {}
} 

注意！箭头函数不能用来定义生成器函数。

与迭代器相似，生成器对象也实现了 Iterator 接口，因此具有 next()方法。调用这个方法会让生成器开始或恢复执行。

yield 关键字可以让生成器停止和开始执行，也是生成器最有用的地方。生成器函数在遇到 yield关键字之前会正常执行。遇到这个关键字后，执行会停止，函数作用域的状态会被保留。停止执行的生成器函数只能通过在生成器对象上调用 next()方法来恢复执行

2.不同生成器间互不影响

生成器函数内部的执行流程会针对每个生成器对象区分作用域。在一个生成器对象上调用 next()不会影响其他生成器：

function* generatorFn() {
 yield 'foo';
 yield 'bar';
 return 'baz';
}
let generatorObject1 = generatorFn();
let generatorObject2 = generatorFn();
console.log(generatorObject1.next()); // { done: false, value: 'foo' }
console.log(generatorObject2.next()); // { done: false, value: 'foo' }

3.yield 关键字还可以作为函数的中间参数

上一次让生成器函数暂停的 yield 关键字会接收到传给 next()方法的第一个值。这里有个地方不太好理解——第一次调用 next()传入的值不会被使用，因为这一次调用是为了开始执行生成器函数：

function* generatorFn(initial) {
 console.log(initial);
 console.log(yield);
 console.log(yield);
}
let generatorObject = generatorFn('foo');
generatorObject.next('bar'); // foo
generatorObject.next('baz'); // baz
generatorObject.next('qux'); // qux 

4.使用星号*增强 yield

可以使用星号*增强 yield 的行为，让它能够迭代一个可迭代对象，从而一次产出一个值：

// 等价的 generatorFn：
function* generatorFn() {
 for (const x of [1, 2, 3]) {
 	yield x;
 }
}


function* generatorFn() {
 yield* [1, 2, 3];
}
let generatorObject = generatorFn();
for (const x of generatorFn()) {
 console.log(x);
}
// 1
// 2
// 3 

5.总结

把实现了正式的 Iterable 接口的称为“可迭代对象”（iterable），返回的是迭代器对象，而且可以通过迭代器 Iterator 消费。
任何实现 Iterable接口的对象都有一个Symbol.iterator 属性，这个属性引用默认迭代器。默认迭代器就像一个迭代器工厂，也就是一个函数，调用之后会产生一个实现 Iterator 接口的对象。迭代器必须通过连续调用 next()方法才能连续取得值，这个方法返回IteratorObject。这个对象包含一个 done 属性和一个 value 属性。前者是一个布尔值，表示是否还有更多值可以访问；后者包含迭代器返回的当前值。这个接口可以通过手动反复调用 next()方法来消费，也可以通过原生消费者，比如 for-of 循环来自动消费。

生成器是一种特殊的函数，调用之后会返回一个生成器对象。生成器对象实现了 Iterable 接口，因此可用在任何消费可迭代对象的地方。生成器的独特之处在于支持 yield 关键字，这个关键字能够暂停执行生成器函数。使用 yield 关键字还可以通过 next()方法接收输入和产生输出。在加上星号之后，yield 关键字可以将跟在它后面的可迭代对象序列化为一连串值。

七、关于class

1.class的本质还是一个特殊的函数

class Names {}

console.log(typeof Names); // function

因此，class可以使用extends关键字继承构造函数：

class Names extends Person {}

function Person() {}

const n1 = new Names();
console.log(n1 instanceof Person); // true

注意！不要在调用 super()之前引用 this，否则会抛出 ReferenceError

2.在使用super时需要注意的几个问题

（1）super只能在派生类（使用extends关键字）构造函数或静态方法中使用

（2）不能单独引用 super 关键字，要么用它调用构造函数，要么用它引用静态方法。

class Vehicle {}
class Bus extends Vehicle {
 constructor() {
 console.log(super);
 // SyntaxError: 'super' keyword unexpected here
 }
} 

（3）在类构造函数中，不能在调用 super()之前引用 this，或者定义了constructor但没有在return前调用super

class Vehicle {}
class Bus extends Vehicle {
    constructor() {
        console.log(this);
    }
}
new Bus();
// ReferenceError: Must call super constructor in derived class
// before accessing 'this' or returning from derived constructor

八、代理与反射

代理

代理是ES6新增的可以为基本操作（如获取，设置）添加额外行为的能力。具体来说，就是为目标对象关联一个代理对象，使用代理对象可以实现在对目标对象操作之前在代理对象内进行控制。

使用代理的主要目的是可以定义捕获器（trap）。捕获器就是在处理程序对象的“基本操作的拦截器。
如：

const target = {
 foo: 'bar'
};
const handler = {
 // 捕获器在处理程序对象中以方法名为键
 get() {
 return 'handler override';
 }
};
const proxy = new Proxy(target, handler);
console.log(target.foo); // bar
console.log(proxy.foo); // handler override
console.log(target['foo']); // bar
console.log(proxy['foo']); // handler override
console.log(Object.create(target)['foo']); // bar
console.log(Object.create(proxy)['foo']); // handler override

反射

所有的捕获器都可以基于自己的参数进行重建，但并不是每个捕获器都像get()这么简单，手动炮制代码是不现实的。因此，ES6提供了一个全局对象Reflect来轻松重建。

const target = {
 foo: 'bar'
};
const handler = {
 get() {
 return Reflect.get(...arguments);
 }
};
const proxy = new Proxy(target, handler);
console.log(proxy.foo); // bar
console.log(target.foo); // bar

const userList = [];
class User {
 constructor(name) {
 this.name_ = name;
 }
}
const proxy = new Proxy(User, {
 construct() {
 const newUser = Reflect.construct(...arguments);
 userList.push(newUser);
 return newUser;
 }
});
new proxy('John');
new proxy('Jacob');
new proxy('Jingleheimerschmidt');
console.log(userList); // [User {}, User {}, User{}]