页面载入中...

阿奇娱乐网(www.aqiziyuan.cn)提供免费资源分享平台,做最绿色安全的免费辅助、软件、QQ技术、网络技术等精神而建立的网站

JavaScript之技巧与陷阱

发布:十月2018-10-24 13:59分类: 技术学习 这篇文章木有标签 浏览:27字数:2175 去评论(0)

这里有一些JavaScript初者应该知道技巧和陷阱。 如果你已经是一个专家,那就随意阅读。

你尝试过给一组数字排序吗?

Javascriptsort()方法默认用来给数字排序

所以[1,2,5,10].sort()将会输出[1, 10, 2, 5].

要正确对数组进行排序话,你可以使用[1,2,5,10].sort((a, b) => a — b)

只要你一始就知道这个坑话,解决起来就很容易.

new Date()很奇妙

new Date()可以接受:

  • 没有参数就返回当前时间

  • 一个参数x就返回当前时间1970年1月1日,+ x,Unix人知道为什么

  • new Date(1,1,1)返回1901年,2月1日.因为你知道,第一个1意思是1900年后1年,第二个1是这一年第二个月(因此二月) —— 二月正确索引在索引表中为1 ,第三个1显然是这个月第一天,所以是1 —— 因为有时索引确实从1始。

  • 哦,还有new Date(2016年,1,1)不会从2016年追加到1900年。它仅仅表示2016年。

Replace不替代

我觉得这是件好事,因为我不喜欢函数去改变他输入值,你应该也知道replace只会替换他第一个匹配:

let s = "bob"
const replaced = s.replace('b', 'l')
replaced === "lob" // first match only
s === "bob" // original string is remained unchanged

如果你想替换所有,你可以使用带有/ g正则表达式:

"bob".replace(/b/g, 'l') === 'lol' // replace all occurences

当心比较

// These are ok
'abc' === 'abc' // true
1 === 1         // true
// These are not
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1}   // false
{} === {}           // false

理由:[1,2,3][1,2,3]是两个单独数组。它们恰好包含相同值,但是它们有不同引用,不能用全===比较

数组不是原始数据类型

typeof {} === 'object'  // true
typeof 'a' === 'string' // true
typeof 1 === number     // true
// But....
typeof [] === 'object'  // true

想知道你是不是数组,  你仍然可以使用Array.isArray(myVar)来判断

闭包

这是一道有名JavaScript面试题:

const Greeters = []
for (var i = 0 ; i < 10 ; i++) {
  Greeters.push(function () { return console.log(i) })
}

Greeters[0]() // 10
Greeters[1]() // 10
Greeters[2]() // 10

你是不是期望它输出0,1,2 ...? 你知道为什么它却没有输出吗? 你会如何修改它?

我们提出两个可能解决方案:

使用let 来替换var。 立马解决。

"在letvar之间差异是作用域,var i作用域是最近函数块,而let作用域是最近封闭块,封闭块可以小于函数块。(如果在任何块之外使用话,letvar它们都是全局

其他方法:使用 bind:

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

其实有很多种方法去解决,这是我推荐2种方法.

聊聊绑定

你认为这个将会输出什么?

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()

理由:greet没有在正确上下文运行,同样,是有很多方法可以解决。

个人比较喜欢

asyncGreet () {
  this.someThingAsync()
  .then(this.greet.bind(this))
}

这样做可以确保greet可以被作为上下文实例调用。

如果你不希望greet在实例上下文外运行,你还可以在类constructor函数中绑定它.

class Foo {
  constructor (name) {
    this.name = name
    this.greet = this.greet.bind(this)
  }
}

你还应该知道箭头函数(=>)可以被用于保留上下文。它也可以这样使用:

asyncGreet () {
  this.someThingAsync()
  .then(() => {
    this.greet()
  })
}

正文到此结束

阿奇资源网

1  除非特别注明,文章均为提供免费资源分享平台 - 阿奇资源网原创,转载时请注明来源

2 <本站资源来自互联网搜集,如有侵权请联系我们删除>

[点击提交]

3  本文标题:【JavaScript之技巧与陷阱】
4  本文衔接:http://www.aqiziyuan.cn/?post=1390  [点击加站长交流群]
 
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注