前端必刷系列之红宝书——第 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 版)

相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
SRY122404193 小时前
javaSE面试题
java·开发语言·面试
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
不二人生5 小时前
SQL面试题——连续出现次数
hive·sql·面试
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui