带你读红宝书-第三章-语言基础

区分大小写#

js世界里的一切都需要区分大小写,无论是变量,函数,属性还是操作符都是需要评估大小写的,废话不多说,上代码更能激起共鸣

1
const test='1'
2
const Test='2'
3
console.log(test) //1

这里的test和Test是不同的变量~

标识符规则#

标识符是指变量,函数,属性,函数参数的名称,它遵循下边的规则:

• 第一个字符必须是字母,下划线,或者$
• 剩下的字符可以是字母,下划线,或者$

标识符中的字母可以是扩展 ASCII（Extended ASCII）中的字母，也可以是Unicode的字母字符，如 À 和 Æ（但不推荐使用）。

上面这句话是红宝书第四版的原文.基于此,我还测试了使用我们的中文来定义变量,发现也是可以正常运行的.

1
const 哈哈 = 123;
2
console.log(哈哈)//123

哈哈,如果这样,我们能把保留的关键字都替换为中文,那…这,就是易语言!🤪

在我们的日常工作中,标识符的最佳实践为驼峰命名,形如firstSecond,doSomethingImportant;虽然你可能觉得这是共识,自然而然的,不过这并不是强制性的.

注释#

这个就不用多说了吧,相信大家都已经熟练掌握了,上个代码就完事

1
// 单行注释
2
// console.log('hi')
3
// 多行注释
4
/* const run = () => {
5
  console.log('run run run~');
6
} */

严格模式#

严格模式是es5新增的一种运行模式,它可以将之前es3一些不规范的地方进行警告或者抛出错误,现在很多情况下,我们的工程都会默认开启这个模式来规避一些隐患

这个模式可以使用两种方式启用,局部和全局,下面展示一下用法

我们只需要在脚本顶部书写"use strict";,即可全局开启严格模式

1
// 全局
2
"use strict";

如果我们希望严格模式只在某个局部作用域内发挥作用,那么我们可以在函数体内的顶部书写"use strict";

1
// 局部
2
function run(){
3
  "use strict";
4
}

至于严格模式开启之后的一些限制,后续会介绍到的

语句#

js中的语句通常是以’;‘结束的,在js的世界里其实是可以没有分号的,比如Vue作者尤雨溪,他就是习惯不加分号的,这在社区中一直是一个讨论的话题~

红宝书里是推荐加上分号的,原文:

即使语句末尾的分号不是必需的，也应该加上。记着加分号有助于防止省略造成的问题，比如可以避免输入内容不完整。此外，加分号也便于开发者通过删除空行来压缩代码（如果没有结尾的分号，只删除空行，则会导致语法错误）。加分号也有助于在某些情况下提升性能，因为解析器会尝试在合适的位置补上分号以纠正语法错误。

注意,这里的语句不等于表达式哈~

关键字与保留字#

关键字是指具有特殊用途的字符,比如流程控制的if,while等;ECMA-262的第六版关键字如下:

1
break do in typeof
2
case else instanceof var
3
catch export new void
4
class extends return while
5
const finally super with
6
continue for switch yield
7
debugger function this
8
default if throw
9
delete import try

哪什么是保留字呢?保留字是未来关键字的预备军,和关键字一样不能作为标识符,这些保留字未来有可能会成为关键字,ECMA-262的第六版关键字如下:

1
始终保留:
2
enum
3
严格模式下保留:
4
implements package public
5
interface protected static
6
let private
7
模块代码中保留:
8
await

这些词汇虽然不能用作标识符,但是却可以作为对象的属性名,但最好不要这样干,以确保你的代码能够兼容过去和未来的es版本.

var#

虽然这种方式已经成为过去式,但是了解它更有助于我们了解js这门语言本身.

通常我们可以这样声明一个变量:

1
var a;

这样一个变量a就声明好了,如果声明时没有赋值,那么你它的值是undefined

由于动态语言的特性,我们可以这样用

1
var a=1
2
a="hello"

这样是完全合乎js语言本身的,但是不推荐这样做,变量的最佳实践之一就是其保存的数据类型从始至终不发生改变.

1
function f() {
2
  var a = 1
3
}
4
console.log(a); //a is not defined

1
function f() {
2
  console.log(a); //undefined
3
  var a = 1
4
}
5
f()

1
function f() {
2
  var a;
3
  console.log(a); //undefined
4
  a = 1;
5
}
6
f()

1
var a=1;
2
var a="a";
3
var a=!!0;
4
console.log(a) //false

let#

let除了解决了上面var的问题,而且作用域变为了块级作用域!我们用一个典型的例子来说明它为我们带来的便利

1
for (var i = 0; i < 4; i++) {
2
  setTimeout(() => {
3
    console.log(i) // 3,3,3,3
4
  }, 1000)
5
}

在以前我们如果在一个for循环里延迟打印索引,你会发现索引打印出来永远时最大索引,这是因为我们异步打印的原因,setTimeout创建的宏任务会在我们主线代码执行完成之后再执行,等主线任务全部执行完延迟任务再去读取的时候,每次都是读取到的最大索引.那咋办?我们可以使用一个闭包来解决这个问题,我们把每次循环的索引保存进一个函数内,然后延迟函数引用函数内保存的变量,这样就可以解决这个问题了.

1
for (var i = 0; i < 4; i++) {
2
  ((i) => {
3
    setTimeout(() => {
4
      console.log(i) // 0,1,2,3
5
    }, 1000)
6
  })(i)
7
}

但是如果你使用let来解决这个问题,那这个巴适了,改动成本几乎为0

1
for (let i = 0; i < 4; i++) {
2
  setTimeout(() => {
3
    console.log(i) // 0,1,2,3
4
  }, 1000)
5
}

对了,还没说明什么是块级,可以这么理解:{}花括号内的作用域就是块级作用域

wow~这也太爽了!这是因为啥呢?因为let是块级作用域,每次循环执行时都会重新创建一个块.等价代码贴出来你可能会明白一切

1
for (let i = 0; i < 4; i++) {
2
  // let i;这是被隐藏在for()的作用域
3
  setTimeout(() => {
4
    console.log(i) // 0,1,2,3
5
  }, 1000)
6
}
7
// {let i = 0}
8
// {let i = 1}
9
// {let i = 2}
10
// {let i = 3}

1
var a = 1
2
console.log(window.a); // 1

1
let a = 1
2
console.log(window.a); // undefined

1
var a = 1
2
let a = 1
3

4
let b = 1
5
var b = 1

const#

由于大部分特性和let相同,我们这里只说一下区别吧.const声明的变量时必须赋予初值且后续无法重新赋值.看起来貌似const似乎声明后就无法改变,事实也是如此,但是如果你赋予的是一个引用类型,那么其內部的属性等是可以被改变的,而且也并没有范围const的原则.

那么如何区分let,const的使用场景呢?我的建议是能用const就用const,不行再用let.

typeof 检测数据类型的方式之一#

由于js的数据类型是一个动态的,那就需要有一种可以判断当前数据类型的手段,typeof 操作符就是其中之一,使用方式如下:

1
typeof variable

该操作符将返回以下类型:

• undefined 未定义
• boolean 布尔值
• string 字符串
• number 数值
• object 对象
• function 函数
• symbol 符号

特别说明<你可能也发现了>,返回值里为什么没有null呢?这是来自于js的一个远古bug.红宝书里也有解释到(但这其实是一个委婉的说法😀)<这是因为特殊值> null 被认为是一个对空对象的引用。

Undefined#

这个类型是一个特殊意义的值,只有一个值;如果你声明了一个变量,但是并没有赋值给它,那么它的值就是undefined.

书中还说到一种情况,就是如果你希望你的比那辆显式的声明一个undefined变量,使用形如下边的方式是不推荐的

1
let a=undefined;

其实我们一边编码中如果希望显式的声明,可以使用下边的方式,至少看上去不是那么别扭,而且更安全

1
let a=void 0;

Null#

同样是一个特殊类型的值,也只有一个值.null可以用来表示一个空指针对象,所以如果你对它使用typeof操作符,得到的结果会是一个object类型.(其实是一个bug 0.0)

如果你确信将来这个变量会是一个对象类型的值时,你就可以将你的变量初始化为一个null值.

1
let a=null;
2
a={}

Boolean#

这个没啥好说的吧,大家使用都很频繁.有true和false两个值.

Number#

ECMAScript 中最有意思的数据类型或许就是 Number 了。

红宝书开篇就说了这句话,换句话说就是number类型可能是js里最古怪行为的类型了,哈哈哈

严格意义来说js中是不分浮点和整数类型的

1
let a=1.1
2
let b=0.1
3
let c=.1 // 不推荐,应该添0 > 0.1