UDN-企业互联网技术人气社区

板块导航

浏览  : 348
回复  : 3

[原生js] 谁说JavaScript容易

[复制链接]
cat77的头像 楼主
发表于 2017-1-3 15:02:35 | 显示全部楼层 |阅读模式
  这里有一些JavaScript初学者应该知道的技巧和陷阱。 如果你已经是一个专家,那就随意阅读。

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

  JavaScript的 sort() 方法默认用来给数字排序

  所以 [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 只会替换他第一个匹配:
  1. let s = "bob"
  2. const replaced = s.replace('b', 'l')
  3. replaced === "lob" // first match only
  4. s === "bob" // original string is remained unchanged
复制代码

  如果你想替换所有,你可以使用带有/ g的正则表达式:
  1. "bob".replace(/b/g, 'l') === 'lol' // replace all occurences
复制代码

  当心比较
  1. // These are ok
  2. 'abc' === 'abc' // true
  3. 1 === 1         // true
  4. // These are not
  5. [1,2,3] === [1,2,3] // false
  6. {a: 1} === {a: 1}   // false
  7. {} === {}           // false
复制代码

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

  数组不是原始数据类型
  1. typeof {} === 'object'  // true
  2. typeof 'a' === 'string' // true
  3. typeof 1 === number     // true
  4. // But....
  5. typeof [] === 'object'  // true
复制代码

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

  闭包

  这是一道有名的JavaScript面试题:
  1. const Greeters = []
  2. for (var i = 0 ; i < 10 ; i++) {
  3.   Greeters.push(function () { return console.log(i) })
  4. }

  5. Greeters[0]() // 10
  6. Greeters[1]() // 10
  7. Greeters[2]() // 10
复制代码

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

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

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

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

  其他方法:使用 bind :
  1. Greeters.push(console.log.bind(null, i))
复制代码

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

  聊聊绑定

  你认为这个将会输出什么?
  1. class Foo {
  2.   constructor (name) {
  3.     this.name = name
  4.   }
  5.   greet () {
  6.     console.log('hello, this is ', this.name)
  7.   }
  8.   someThingAsync () {
  9.     return Promise.resolve()
  10.   }
  11.   asyncGreet () {
  12.     this.someThingAsync()
  13.     .then(this.greet)
  14.   }
  15. }
  16. new Foo('dog').asyncGreet()
复制代码

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

  我个人比较喜欢
  1. asyncGreet () {
  2.   this.someThingAsync()
  3.   .then(this.greet.bind(this))
  4. }
复制代码

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

  如果你不希望 greet 在实例上下文外运行,你还可以在类的 constructor 函数中绑定它.
  1. class Foo {
  2.   constructor (name) {
  3.     this.name = name
  4.     this.greet = this.greet.bind(this)
  5.   }
  6. }
复制代码

  你还应该知道箭头函数 (=>) 可以被用于保留上下文。它也可以这样使用:
  1. asyncGreet () {
  2.   this.someThingAsync()
  3.   .then(() => {
  4.     this.greet()
  5.   })
  6. }
复制代码

相关帖子

发表于 2017-1-3 15:03:05 | 显示全部楼层
有空一起交流一下
使用道具 举报

回复

发表于 2017-1-3 15:03:06 来自手机 | 显示全部楼层
纯粹路过,没任何兴趣,仅仅是看在老会员的份上回复一下
使用道具 举报

回复

发表于 2017-1-3 15:03:07 | 显示全部楼层
JavaScript依赖于浏览器本身,与操作环境无关,只要计算机能运行浏览器,并支持JavaScript的浏览器,就可正确执行,从而实现了“编写一次,走遍天下”的梦想。
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部