js的几个小技巧和陷阱

作者: 前端_周瑾 | 来源:发表于2020-04-02 17:27 被阅读0次

这里有一些 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();
    });
  }

总结

如果还有什么我应该提到的,请告诉我!

相关文章

  • js的几个小技巧和陷阱

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

  • 好程序员web前端培训分享js技巧和js中一些常见的陷阱

    好程序员web前端培训分享js技巧和js中一些常见的陷阱。 1.你是否尝试过对数组元素进行排序? JavaScri...

  • 提高代码执行效率的几个小技巧

    提高代码执行效率的几个小技巧 提高代码执行效率的几个小技巧

  • 备考小技巧!数学备考注意这几个小陷阱!

    备考基础夯实阶段,进行基础知识学习的同时也要做题巩固所学! 今天我们就来复习集合及简易逻辑部分的基础内容~ 集合及...

  • Word使用大全-1

    继续介绍几个Word中的几个实用的小技巧 希望以上的几个小技巧能帮助到大家!

  • 2018-05-02

    八大最容易“中招”的旅游陷阱 并提供了一些避开陷阱、提高自我保护能力的小技巧 有了它,各位老铁可放心出行 陷阱一:...

  • js 利用||和&&赋值小技巧

    [转载]https://blog.csdn.net/nayi_224/article/details/804373...

  • js的小技巧

    1.使用对象为函数参数,这时候可以传入多个参数 2.使用函数的arguments来确定函数参数的个数 应用:传入参...

  • js 小技巧

    #23 - 转换数值的快速方法 将字符串转换为数字是非常常见的。最简单和最快的方式来实现,将使用+(加)算法。 你...

  • JS小技巧

    Alert() 切断加载;innerHTML :获取双闭合标签里面的内容。(识别标签)innerHTML :获取双...

网友评论

    本文标题:js的几个小技巧和陷阱

    本文链接:https://www.haomeiwen.com/subject/mlzwuhtx.html