javascript的几个小技巧和陷阱

这里有一些 JavaScript 初学者应该知道的技巧和陷阱，如果你已经是专家了，顺便可以温习一下

1.你有没有尝试给一组数字排序？

javascript的sort()函数在默认情况下使用字母数字(字符串Unicode码点)排序

const arr = [1, 2, 5, 10];

arr.sort(); // [ 1, 10, 2, 5 ]

arr.sort((a, b) => {

 return a - b;

});//[ 1, 10, 2, 5 ]

很简单的解决方案，前提是你要知道这个坑

2.new Date()

new Date() 可以接受：

没有参数： 返回当前事件

一个参数x： 返回1970年1月1日 + x 毫秒

new Date(1,1,1)：返回1901, 2月，1日，因为第一个参数表示1900加1年，第二个参数表示这一年的第二个月，第三个参数明显是这个月第一天

new Date(2020,1,1) 不会给1990 加上 2020， 它仅仅代表2020

3.replace 并不 "替代"

let s = "bob";

let replaced = s.replace("b", "l");

console.log(replaced); //  lob

let replacedOverall = s.replace(/b/g, "l");

console.log(replacedOverall); // lol

你应该知道 replace 只会替换第一个匹配的字符

如果你想替换所有的匹配字符，你可以使用带/g的正则

4.比较的时候要注意

console.log("abc" == "abc"); // true

console.log(1 == 1); // true

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

console.log({ a: 1 } == { a: 1 }); // false

console.log({} == {}); // false

引用类型的数据，具有不同的引用地址，无法用 == 比较

5.数组不是原始数据类型

console.log(typeof {} === "object"); // true

console.log(typeof "a" === "string"); // true

console.log(typeof 1 === "number"); // true

console.log(typeof [] === "object"); // true

如果你想知道你的变量是不是数组，你仍然可以用

const arr = [1, 2, 3];

console.log(Array.isArray(arr)); // true

6.闭包

const Greeters = [];

for (var i = 0; i < 10; i++) {

 Greeters.push(function() {

   return console.log(i);

 });

}

Greeters[0](); // 10

Greeters[1](); // 10

Greeters[5](); // 10

这是一道很有名的面试题:

你是不是以为它会输出0，1，2，3..  ? 你会怎样修改让它出入0，1，2，3.. ?

方法1:

用 let 代替 var

let 和 var的不同在于作用域，var的作用域是最近的函数块，let 的作用域是最近的封闭块，封闭块可以小雨函数块（如果不在任何块中，则let 和 var 都是全局的）

方法2：

用bind:

Greeters.push(console.log.bind(null, i))

其他方法还有很多，但是我首选这两个

7.谈到bind

class Foo {

 constructor(name) {

   this.name = name;

 }

 greet() {

   console.log("hello, this is ", this.name);

 }

 someThingAsync() {

   return Promise.resolve();

 }

 asyncGreet() {

   this.someThingAsync().then(this.greet);

 }

}

new Foo("dog").asyncGreet();

如果你认为这个程序会提示 TypeError: Cannot read property 'name' of undefined,给你一分

原因： greet没有正确的在上下文中运行，同样这个问题也有很多解决方案：

我个人喜欢：

 asyncGreet() {

   this.someThingAsync().then(this.greet.bind(this));

 }

如果你认为 greet 不应该在实例上下文之外的运行，你可以在类的constructor中绑定它：

 constructor(name) {

   this.name = name;

   this.greet = this.greet.bind(this);

 }

你还应该知道箭头函数可以用来保留上下文，这个方法也可以：

 asyncGreet() {

   this.someThingAsync().then(() => {

     this.greet();

   });

 }

总结

如果还有什么我应该提到的，请告诉我！

本文章由javascript技术分享原创和收集