3 📖 《JavaScript高级程序设计》__ 语言基础（下）

前言

大家好，我是HoMeTown，web领域有一本神书大家应该都有看过，这本书我看过两遍，但是每次看都是粗粗的略过一些重要的知识点，甚至一些面试过程中的问题，在这本书里都能找到答案。

关注专栏，一起学习吧~

操作符

一元操作符

概念：只操作一个值。

递增（++）/递减（--）

前缀版

let age = 29
++age
// 以上代码等价于：
let age = 29
age = age + 1

与后缀版不同的是：变量的值会在语句被求值之前改变！

let age = 32
let hisAge = ++age + 1
console.log(age) // 33
console.log(hisAge) // 34

后缀版

let age = 32
let hisAge = age++ + 1
console.log(age) // 33
console.log(hisAge) // 33

一元加（+）和减（-）

let age = +12
let num = -12
console.log(age) // 12
console.log(num) // -12

位操作符

位操作符用于数值的底层操作，ECMAScript底层以IEEE 754 64位格式存储，但是操作是将值转化为32位，再转成64位。

有符号整数值前31位表示数值，第32位表示数值的符号：1正，0负，其中正值以真正的2进制存储：

比如18的2进制：00000000000000000000000000010010，精简版：10010（5个有效位）。
18/2 = 9 余0 //0
9/2 = 4 余 1 //1
4/2=2 余0 //0
2/2=1 余0 //0
1/2=0 余1 //1
得：10010
反过来算：2**0*0 + 2**1*1 + 2**2*0 + 2**3*0 + 2**4*0 = 18
       ：0 + 2 + 0 + 0 + 16 = 18

而负数需要进行一个补码操作，一个数值的补码通过如下3个步骤：

1. 决定绝度值的二进制数。
2. 反码（也就是把每个0变成1，把每个1变成0）
3. 给结果+1。

比如-18的2进制：11111111111111111111111111101110。
1. 确定18的2进制：00000000000000000000000000010010
2. 反码：11111111111111111111111111101101
3. 结果+1：11111111111111111111111111101110

其实ECMAScript会帮我们记录这些值，把一个负数值转成一个2进制字符串时，会得到一个加了减号的绝对值：

let num = -18
num.toString(2) // -10010

按位非

~，返回数值的反码：

let num1 = 25 // 二进制 00000000000000000000000000011001
let num2 = ~num1 // 二进制数 11111111111111111111111111100110
console.log(num2) // -26

~按位非因为只取到了反码，所以会在结果上-1，如果需要得到对应的负数值，需要再+1.

~num1 + 1 // -25

按位与

&，将两个数的每一个位对其，基于与规则（1&1=1；1&0=0；0&1=0；0&0=0），对每一位执行相应的与操作（只要有一位是0，那么就返回0）：

let result = 25 & 3
console.log(result) // 1
---
25 // 11001
3 //  00011
1  // 00001

按位或

|，与按位与类似，但是你只要一个位是1，那么就返回1：

let result = 25 & 3
console.log(result) // 27
---
25 // 11001
3 //  00011
27  //  11011
2**0*1 + 2**1*1 + 2**2*0 + 2**3*1 + 2**4*1 = 27
  1   +   2   +  0  +   8  +  16 = 27

按位异或

^，只有一位是1，返回1，两位都是1或者两位都是0，返回0

let result = 25 & 3
console.log(result) // 27
---
25 // 11001
3 //  00011
26  //  11010
2**0*0 + 2**1*1 + 2**2*0 + 2**3*1 + 2**4*1 = 26
  0 + 2 + 0 + 8 + 16 = 26

左移

<<，把2进制数往左移动n位，空位补0：

let oldVal = 2 // 00010
let newVal = oldVal << 5 // 1000000
console.log(newVal) // 2*6*1 64

右移

>>，把2进制数往右移动n位，空位补0。

布尔操作符

逻辑与

&&

1 2 r
t t t
t f t
f t f
f f f

逻辑与是一种短路操作符，如果第一个操作数决定了结果，第二个就不再求值：

true && name // 报错
false && name // 不报错

逻辑或

||

1 2 r
t t t
t f t
f t t
f f f

逻辑或也是一种短路操作符，如果第一个操作数是true，第二个就不再求值：

true || obj // 不报错
false || obj // 报错

逻辑非

!

console.log(!false); // true 
console.log(!"blue"); // false 
console.log(!0); // true 
console.log(!NaN); // true 
console.log(!""); // true 
console.log(!12345); // false
------
console.log(!!"blue"); // true 
console.log(!!0); // false 
console.log(!!NaN); // false 
console.log(!!""); // false 
console.log(!!12345); // true

乘性操作符

乘法

*

除法

/

取余

%

指数操作符

**

2 ** 2 // 4
let num = 2
num **= 3 // 8

条件操作符

xx ? yyy : ddd

语句

if

流程控制语句

if (condition) statemert1 else statement2

do-while

后测试循环语句，循环体中的代码至少执行一次：

do { statement } while (expression)

let i = 0;
do {
  i += 1
} while( i < 10 )

while

先测试循环语句，循环体中的代码可能一次都不会执行：

while(expression) statement

let i = 0;
while(i<10){
  i += 2
}

for

先测试循环语句：

for( initialization; expression; post-loop-expression) statement

for(let i = 0; i < count; i++) {
  console.log(i)
}

执行的顺序为：initialization -- > expression？ statement : exit() ；post-loop-expression；expression？ statement : exit() ；post-loop-expression；.......

for-in

严格的迭代语句，用于枚举对象中的非符号（Symbol）键属性：

for(const propName in window) {
  console.log(propName)
}

ECMAScript中对象的属性是无序的，因此for-in语句不能保证返回对象属性的顺序（每个可枚举的属性都会返回，但是顺序可能会因浏览器而异）。

for-of

严格的迭代语句，用于遍历可迭代对象的元素：

for(const el of [2,4,5,6]) {
  console.log(el)
}

break和continue

break语句用于立即退出循环，强制执行循环后的下一条语句，也就是直接退出循环。

let num = 0
for (let i = 1; i < 10; i++) {
  if(i%5 === 0) {
    break;
  }
  num++
}
console.log(num) // 4

continue语句用于立即退出循环，再次从循环顶部开始执行。

let num = 0
for (let i = 1; i < 10; i++) {
  if(i%5 === 0) {
    continue;
  }
  num++
}
console.log(num) // 8

switch case

流程控制语句：

switch(expression){
  case value1:
    statement1
    break;
  case value2:
    statement2
    break;
  default:
    statement
}

函数

function functionName(arg0, arg1, ...argN) {
  statements
}
// -- -
function sayHi(name, word) {
  console.log(`Hello ${name}!${word}`)
}
sayHi('HoMeTown', 'Welcome!')

总结

• ECMAScript中的基本数据包括：Undefined、Null、Boolean、Number、String、Symbol、BigInt。
• ECMAScript不区分整数与浮点数，都用Number
• Object是一个复杂数据类型，是ECMAScript中所有对象的基类。
• ECMAScript中的函数不需要制定函数返回值，默认为undefined。

下次见~ 我的朋友，我是HoMeTown👨‍💻‍，➕我VX，💊你进群，这是一个大家共同成长、共同学习的社群！在这里你可以：讨论技术问题、了解前端资讯、打听应聘公司、获得内推机会、聊点有的没的。

👉 vx: hometown-468【单独拉你】

👨‍👩‍👧 公众号：秃头开发头秃了 【关注回复“进群”】

🤖 Blog：HoMeTown'Blog【点开看看】

高赞好文

系列文章