前端必刷系列之红宝书——第 3 章

"红宝书" 通常指的是《JavaScript 高级程序设计》,这是一本由 Nicholas C. Zakas(尼古拉斯·扎卡斯)编写的 JavaScript 书籍,是一本广受欢迎的经典之作。这本书是一部翔实的工具书,满满的都是 JavaScript 知识和实用技术。

不管你有没有刷过红宝书,如果现在还没掌握好,那就一起来刷红宝书吧,go!go!go!

系列文章:

  1. 前端必刷系列之红宝书------1、2 章
  2. 前端必刷系列之红宝书------第 3 章

第 3 章 语言基础

语法

所谓标识符,就是变量、函数、属性或函数参数的名称。

  • 第一个字符必须是一个字母、下划线或美元符号
  • 剩下的其他字符可以是字母、下划线、美元符号或数字

推荐驼峰大小写形式。

JS 使用分号(;) 分割语句。推荐加分号。

  • 避免输入内容不完整
  • 便于开发者通过删除空行来压缩代码
  • 有助于在某些情况下提升性能,因为解析器会尝试在合适的位置补上分号来纠正语法错误。
js 复制代码
// 不推荐
if(test)
    console.log(test)

// 推荐   
if(test){
    console.log(test)
}

关键字与保留字

保留的关键字不能用作标识符或属性名。

变量

var

  • 声明作用域(函数作用域)
  • 声明提升

let

  • 块作用域
  • 暂时性死区(let 声明的变量不会在作用域中被提升)
  • 全局声明(let 声明的变量不会成为 window 对象属性)
  • 不允许重复声明
  • for 循环中的 let 声明

const

  • 和 let 的区别就是 const 是常量

推荐使用:const 优先,let 次之,不使用 var

数据类型

原始类型:Undefined、Null、Boolean、Number、String、Symbol

引用类型:Object、Array、Date、RegExp、Error

typeof: typeof value === 'object', 则 value 值为对象(非函数)或 null,因为特殊值 null 被认为是一个对空对象的引用。null 值表示一个空对象的引用。

JS 复制代码
null == undefined // true

科学计数法:可以表示非常大或非常小的数值、浮点值。

js 复制代码
3.125e7 // 31250000
3e-17 // 0.000 000 000 000 000 03
3e-7 // 0.000 000 7
  • 最小值:Number.MIN_VALUE
  • 最大值:Number.MAX_VALUE
  • 无穷大:Infinity
  • 无穷小:-Infinity

NaN 特性:

  • 任何涉及 NaN 的操作始终返回 NaN(如 NaN/10)
  • NaN 不等于包括 NaN 在内的任何值(NaN == NaN // false

isNaN()

数值转换:Number()、parseInt()、parseFloat()

Number():

  • 布尔值,true 转换为 1,false 转换为 0
  • 数值,直接返回
  • null,返回 0
  • undefined, 返回 NaN
  • 字符串,
    • 包含数值,返回数值
    • 包含浮点值,返回对应的浮点值
    • 包含 16 进制,转换为 10 进制
    • 空字符串,返回 0
    • 其他情况,返回 NaN
  • 对象,调用 valueOf() 返回值

parseInt(): 优先于 Number() 使用。

  • 解析字符串,并返回整数。它从字符串的开头开始解析,直到遇到非数字字符为止。
  • 第二个参数是基数,表示要解析的数字的进制。如果不提供基数,默认是 10。基数范围是 2 到 36。
  • parseInt() 返回的是整数部分,忽略小数部分。

parseFloat():

  • parseFloat() 用于解析字符串,并返回浮点数。它从字符串的开头开始解析,直到遇到非数字字符为止。
  • 如果字符串包含多个小数点,只解析第一个小数点。
  • parseFloat() 会返回小数部分。

toString():

  • 几乎所有值都有 toString() 方法。
  • null 和 undefined 没有 toString() 方法。

String(): 优先于 toString()

  • 如果有 toString() 方法,则调用该方法返回结果
  • 如果是 null,返回 'null'
  • 如果是 undefined,返回 'undefined'

Symbol(符号): 是原始值,且实例是唯一、不可变的。

  • 用途:确保对象属性使用唯一标识符,不会发生属性冲突的危险。
  • Symbol() 函数不能与 new 关键字一起作为构造函数使用。

Symbol.for() 对每一个字符串键都执行幂等操作。

JS 复制代码
let fooGlobalSymbol = Symbol.for('foo') // 创建新符号
let otherFooGlobalSymbol = Symbol.for('foo') // 重用已有符号

fooGlobalSymbol === otherFooGlobalSymbol // true

Symbol.keyFor():

JS 复制代码
// 创建全局符号
let s = Symbil.for('foo')
Symbol.keyFor(s) // foo

// 创建普通符号
let s2 = Symbol('bar')
Symbol.keyFor(s2) // undefined

Symbol.keyFor(123) // TypeError

object 实例都有如下属性和方法:

  • constructor: 用于创建当前对象的函数
  • hasOwnProperty():用于判断当前对象实例上存在给定的属性。
  • isPrototypeOf():用于判断当前对象是否为另一个对象的原型。
  • propertyIsEnumerable():用于判断给定的属性是否可以使用 for-in 语句枚举。
  • toLocaleString():返回对象的字符串表示,反应对象所在的本地化执行环境。
  • toString():返回对象的字符串表示。
  • valueOf():返回对象对应的字符串、数值、布尔值的表示。
js 复制代码
const array = [1, 2, 3]; 
console.log(array.toLocaleString()); // "1, 2, 3" 

const date = new Date(); 
console.log(date.toLocaleString()); // 根据本地化规则格式化日期

操作符

按位非: 波浪符(~)表示,作用是返回数值的一补救。最终效果是对数值取反并减 1。

按位与: 和号(&)表示,有两个操作数。

按位或: 管道符(|)表示,同样有两个操作数。

按位异或: 拖字符(^)表示,同样有两个操作数。

左移: 两个小于号(<<)表示,会按照指定的位数将数值的所有位向左移动。

有符号右移: 两个大于号(>>)表示,会将数值的所有 32 位都向右移,同时保留正负。实际上是左移的逆运算。

无符号右移: 三个大于号(>>>)表示,会将数值的所有 32 位都向右移。负数操作差异大。

逻辑非: 叹号(!)表示。

逻辑与: 两个和号(&&)表示,应用到 2 个值。

逻辑或: 两个管道符(||)表示。

乘法: 星号(*)表示。

除法: 斜杠(/)表示。

取模: 取余数,百分比(%)表示。

指数操作符: 两个星号(**)表示。等同 Math.pow()。

语句

js 复制代码
if() {
    // ...
}else if() {
    // ...
}else{
    // ...
}


do{
    // ...
}while()


while(){
    // ...
}


for(let i=0; i<arr.length; i++){
    // ...
}


for(const key in obj){
    // ...
}


for(const item of arr){
    // ...
}


// 不推荐
with(location){
    let qs = search.substring(1)
    let hostName = hostname
    let url = href
}


switch(){
    case value1:
        // ...
        break;
    case value2:
        // ...
        break;
    default:
        // ...
}

函数

  • 函数是JavaScript中的一等公民,可以作为值进行传递。
  • 使用 function 关键字声明函数,可以有参数和返回值。
  • 函数表达式和函数声明的区别。

未完待续...

参考资料

《JavaScript 高级程序设计》(第 4 版)

相关推荐
醉の虾16 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧24 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm34 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王1 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒1 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰2 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter