继续创作,加速生长!这是我参与「日新计划 10 月更文应战」的第4天,点击查看活动概况

前言

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

作业这么多年,到现在为止对这本书都没有一个体系的知识点记载,这次想从头读一遍这一本JavaScript高档程序设计【第4版】,并把重要的知识点记载下来,同时加上自己的见解,这也是我第一次在上记载共享读书笔记,共勉之!

重视专栏,一起学习吧~

操作符

一元操作符

概念:只操作一个值。

递增(++)/递减(–)

前缀版

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 = 90 //0
9/2 = 41 //1
4/2=20 //0
2/2=10 //0
1/2=01 //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中的根本数据包括:UndefinedNullBooleanNumberStringSymbolBigInt
  • ECMAScript不区别整数与浮点数,都用Number
  • Object是一个复杂数据类型,是ECMAScript中所有目标的基类。
  • ECMAScript中的函数不需求拟定函数回来值,默认为undefined

下次见~ 我的朋友,我是HoMeTown‍‍,➕我VX,你进群,这是一个我们一起生长、一起学习的社群!在这里你能够:讨论技术问题、了解前端资讯、打听应聘公司、获得内推时机、聊点有的没的。

vx: hometown-468【单独拉你】

‍‍ 公众号:秃头开发头秃了 【重视回复“进群”】

Blog:HoMeTown’Blog【点开看看】

高赞好文

  • 羊了个羊 一夜爆火,我却开始悄悄抹眼泪…

  • 共享 11 张巨美观的PC端界面!!!

  • 敢在我工位装摄像头?吃我一套JS ➕ CSS组合拳!!

  • 前端老司机 70+ 实用工具网站共享(建议收藏!)

  • 【Git】 什么!?都快2023年了还搞不清楚 git rebase 与 git merge!?

  • 我用前端【最新】技术栈完成了一个出产规范的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】

系列文章

  • 1 《JavaScript高档程序设计》__ 什么是JavaScript?

  • 2 《JavaScript高档程序设计》__ HTML中的JavaScript

  • 3 《JavaScript高档程序设计》__ 言语基础(上)

  • 3 《JavaScript高档程序设计》__ 言语基础(下)

  • …继续更新…