Home> System Tutorial> LINUX> body text

Javascript is not easy for beginners either

WBOY
Release: 2024-08-20 07:32:07
Original
867 people have browsed it

Here are some tips and pitfalls that Javascript beginners should know. If you're already an expert, brush up on this.

对于初学者来说 Javascript 也并不简单

Javascript is just a programming language. How could it possibly go wrong?

1. Have you ever tried to sort a set of numbers?

Javascript'ssort()function sorts using alphanumeric (String Unicode code points) by default.

So[1,2,5,10].sort()will output[1, 10, 2, 5].

To sort an array correctly, you can use[1,2,5,10].sort((a, b) => a — b)

Very simple solution, the premise is that you have to know that there is such a pit

2. new Date() is great

new Date()Acceptable:

  • No parameters: Return the current time
  • One parameterx: Returns January 1, 1970 + x milliseconds. Those who know Unix know why.
  • new Date(1, 1, 1) returns 1901, February, 1st/. Because, the first parameter represents 1900 plus 1 year, the second parameter represents the second month of this year (so February) — People with normal brain circuits will start indexing from 1 — , and the third parameter is very Obviously it's the first day of the month, so 1 — sometimes the index does start at 1 — .
  • new Date(2016, 1, 1) will not add 2016 to 1900. It only represents 2016.

对于初学者来说 Javascript 也并不简单

3. Replace does not "replace"
let s = "bob" const replaced = s.replace('b', 'l') replaced === "lob" s === "bob"
Copy after login

I think this is a good thing because I don't like functions changing their inputs. You should also know thatreplacewill only replace the first matching string:

If you want to replace all matching strings, you can use a regular expression with the/gflag:

"bob".replace(/b/g, 'l') === 'lol' // 替换所有匹配的字符串
Copy after login
4. Pay attention when comparing
// 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
Copy after login

Reason: [1,2,3] and [1,2,3] are two independent arrays. They just happen to contain the same value. They have different references and cannot be compared with===.

5. Array is not a primitive data type
typeof {} === 'object' // true typeof 'a' === 'string' // true typeof 1 === number // true // But.... typeof [] === 'object' // true
Copy after login

If you want to know if your variable is an array, you can still useArray.isArray(myVar)

6. Closure

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

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
Copy after login

你是不是认为它会输出 0, 1, 2… ? 你知道它为什么不是这样输出的吗? 你会怎样修改让它输出 0, 1, 2… ?

这里有两种可能的解决方法:

let替代var. Boom. 解决了.

letvar的不同在于作用域。var的作用域是最近的函数块,let的作用域是最近的封闭块,封闭块可以小于函数块(如果不在任何块中,则letvar都是全局的)。(来源)

替代方法: 用bind:

Greeters.push(console.log.bind(null, i))
Copy after login

还有很多其他方法。这只是我的两个首选

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()
Copy after login

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

原因:greet没有在正确的上下文中运行。同样,这个问题依然有很多解决方案。

我个人喜欢

asyncGreet () { this.someThingAsync() .then(this.greet.bind(this)) }
Copy after login

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

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

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

你还应该知道箭头函数(=> )可以用来保留上下文。这个方法也可以:

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

尽管我认为最后一种方法并不优雅。

对于初学者来说 Javascript 也并不简单

我很高兴我们解决了这个问题。

总结

祝贺你,你现在可以放心地把你的程序放在互联网上了。甚至运行起来可能都不会出岔子(但是通常会)Cheers \o/

The above is the detailed content of Javascript is not easy for beginners either. For more information, please follow other related articles on the PHP Chinese website!

source:linuxprobe.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!