初学JavaScript要掌握的知识有哪些呢?

1.表达式和语句

表达式: 一个式子,它具有表达某些信息的能力。比如1+2表达式的值为3。需要注意的地方,console.log表达式的值为函数本身,但是console.log(1)表达式的值为undefined,只是在控制台中显示的内容为1。

语句: 描述一段内容的句子。比如var a = 1

它们两者的区别在于:

  • 表达式一般都有值,语句可能有也可能没有。
  • 语句一般会改变环境,比如声明或者赋值。

但这些都不绝对,特殊情况特殊看待。

2. 标识符的规则

在对变量名等标识符命名的时候并非随心所欲随便命名的,要遵守一定的约定规则。首先JavaScript是对大小写敏感的,aA会被严格区分,所以有时候在函数命名上要小心避免上下文名称不同造成的意外错误。

标识符第一个字符命名规则:

  • 不能是数字;
  • 可以是Unicode字符或$、_和中文;

标识符第二个及以后的字符命名规则:

  • 可以为任意字符;

注:标识符的命名要好认、好记通俗易懂。不要写很多个_或是使用.这种比较特殊的字符。标识符要写时好写,后面review时要好懂才行。

3.条件判断语句

“if…else…” 是常用条件判断语句

  1. // 伪代码
  2. if(表达式){
  3. 语句1
  4. ...
  5. }else {
  6. 语句2
  7. ...
  8. }

在if的块中的语句如果只有一句,则可以省略外面的花括号,只写这条语句,但是不推荐这么做,这样会容易造成阅读时看错代码流程。在if…else代码块中还可以继续继续嵌套if…else代码块来处理复杂的条件判断逻辑。

  1. // 伪代码
  2. if(表达式){
  3. if(表达式){
  4. 语句1
  5. ...
  6. }else{
  7. 语句2
  8. ...
  9. }
  10. 语句3
  11. ...
  12. }else {
  13. 语句4
  14. ...
  15. }

多个条件判断可以使用if...else if ... else语法

  1. if(表达式){
  2. 语句1
  3. ...
  4. }else if(表达式){
  5. 语句2
  6. ...
  7. }else {
  8. 语句3
  9. ...
  10. }

有时候条件判断并不多的时候没必要使用if…else,可以使用 &&来简化条件判断的代码。
例如有这些需求:一个函数a的参数接收一个函数并在这个a函数体内调用传入的函数,为了确保调用时不会发生错误,我们通常可以这样写代码。

  1. function a(fn){
  2. fn && fn()
  3. }
  4. // fn && fn() 等同于
  5. if(fn)
  6. fn()

另外一个短路运算符||则可以用来进行一些保底赋值操作。

  1. a = a || 100
  2. // 等同于
  3. if(!a)
  4. a = 100

4.循环

循环操作可以使用while或者for,while是表达式内的值为真时则执行块内语句。for语法可以看做是while的一个语法糖,因为我们在使用while是需要在while外部确定循环初始值,表达式内要有循环退出条件,循环体内有执行语句。但是这些都可以简化一下,现在我们来看看使用for如何做循环:

  1. for(var i = 0; i < 5; i++){
  2. console.log(i)
  3. }

延伸:由于变量提升,在for的代码块内使用定时器函数setTimeout()函数时,会由于var定义的i变量从而使通过定时器函数输出的值为i循环完后最后的值。如果需要避免这种情况的发生,在声明并定义i时要使用let关键字去声明变量,这样就可以将变量i的作用域限定在当前的for代码块内。

5、break、continue

有时候我们并不想让循环完全执行,希望循环在执行带某个条件时可以跳出循环,此时可以使用到break和continue了。

  • break:跳出本层循环
  • continue:跳过本次循环

在有两层循环的时候,在内部的第二层循环体内使用break可以跳出这层循环,但是不影响外部循环的执行。

  1. for(let i = 0; i < 5 ; i++){
  2. for(let j = 0; j < 5; j++){
  3. if(j > 2)
  4. // 只跳出变量为 j 的这层循环
  5. break
  6. }
  7. console.log(i)
  8. }

6.label语句

用的很少,仅做了解。

  1. {
  2. a:1
  3. }

以上代码乍看还会以为是一个对象,但其实是一个label,它是一个正常代码块内包含一些内容(上面的代码在Chrome中使用需要在a:1后面加上;,否则会被Chrome修改成一个对象)。有时候面试会问上面这个代码是什么,所以要了解一下。

label语法:

  1. foo: {
  2. console.log(1);
  3. break foo;
  4. console.log('这行不会输出!')
  5. }
  6. console.log(2)

这种写法其实就是标记某个代码块,从而通过continue、break等影响代码执行流程。