《JavaScript 权威指南》犀牛书阅读详解

news2024/11/15 8:31:51

前言:

        《JavaScript 权威指南》(JavaScript:The Definitive Guide)是一本由David Flanagan所著的JavaScript领域的经典书籍,它是学习和开发JavaScript应用不可或缺的参考书之一。该书分为两个部分,第一部分讲解了JavaScript语言的核心概念、基础语法、数据类型、函数、对象、数组等内容。第二部分则介绍了JavaScript在Web浏览器中的应用,包括DOM操作、事件处理、表单验证、Ajax等内容。《JavaScript 权威指南》凝结了Flanagan多年在JavaScript领域的经验和教学经历,内容深入浅出地讲解了JavaScript的各种特性和用法,既适合初学者入门,也适合进阶开发者深入学习。书中还提供了大量的示例代码、练习题和答案,有助于读者更好地理解和掌握JavaScript的知识点,同时也方便读者自行实践和深入探索。

        此外,该书也会不断更新,跟随JavaScript的最新发展并加入新特性,使得它始终保持着权威性和实用性,成为了JavaScript领域的经典之作。

1️⃣内容:

  • JS 基础API
  • 浏览器 API
  • Node.js API

2️⃣特点(全面)

  • JavaScript 简介
  • 前端工程化 (ESLint、Prettier)

3️⃣适用人群:

  • JavaScript 初学者
  • 有一定经验的开发者


第一章: JavaScript 简介

1.JavaScript 与 ECMAScript 的关系

ECMAScript 是JavaScript 的语言标准。

  • ES5 对应 ECMAScript 第五版
  • ES6 对应 ES2015
  • ES7 对应 ES2016

2.JavaScript的宿主环境都有什么

  1. 游览器:最常见的 JavaScript 宿主环境,支持通过 HTML、CSS 和 JavaScript 创建和运行 Web 应用程序,如 Chrome、Firefox、Safari、Edge 等。
  2. node:一个基于 Chrome V8 引擎的 JavaScript 运行环境,主要用于构建高性能、可伸缩性的网络应用程序,如服务器端应用程序、命令行工具等。

3.在哪里书写 JavaScript

 ①浏览器控制台

②编辑器


 第二章: 词法结构

1.注释的三种方式

①单行注释    //注释

②多行注释

/*
多行注释
*/


/**
* 注释内容
*/

 第二种注释方式标记在方法上时,在调用方法时会有相对应的提示。

 2.省略分号的潜在问题

1️⃣ ; 分号不是必须的

const name ='张三'

console.log(name)

2️⃣防御性分号

let x = 0;
[x, x + 1, x + 2].forEach()
//初始代码

let x = (0)[(x,x + 1,x + 2)].forEach()
//编译时
//Uncaught ReferenceError: x is not defined at <anonymous>:1:14

第三章: 类型、值和变量

类型 -> 表达式 -> 语句 -> 对象/数组 -> 函数 -> 类 -> 模块

1.基本数据类型

 (1)数值:

         1️⃣分类:

  • 整数
  • 浮点数 (小数)

        2️⃣问题:

  1. 大数字问题通过 BigInt 处理
  2. 精度问题三种处理方案

(2)null、undefined

  • null: 空值
  • undefined: 没有值

(3)Symbol 

console.log(Symbol('hello') == Symbol('hello')); // false


2.原始值与引用类型

1️⃣原始值 -> 基本数据类型

2️⃣引用类型 -> 复杂数据类型

引用类型(也叫对象类型)包括对象、数组、函数等。

引用类型的值是由多个值组成的对象,可以拥有属性和方法,其值在内存中以引用存储。这意味着当一个变量被赋予引用类型的值时,实际上是把该值在内存中的地址赋值给变量,而不是在变量中直接存储该值的副本。

(1) 对象(Object):表示一组无序的属性的集合,每个属性包含一个名称和一个值

(2)数组(Array):表示一组有序的值的集合,可以通过索引访问每个值

(3)函数(Function):表示一段可执行的代码,可以重复利用

(4)还有日期(Date)、正则表达式(RegExp)等引用类型。这些引用类型都可以使用“new”关键字来创建一个新的实例


 3.类型转换

 1️⃣隐式转换

// 利用加号 (+),进行字符串隐式转换
console.log('a 的值为: '+ 1); // 数字 1 转化为字符串

// booLean 隐式转换
console.log(0 == false); // true (不判断类型)
console.log(0 === false); // false (判断类型)

// 数字的隐式转换
console.log('1'-0 ); // 1 (数值)
console.Log('1'- 0 +1); // 2 (数值)

2️⃣显示转换

console.log(parseInt('18'));// 显示转化为整数
console.log(parseFloat('3.1415')); // 显示转化为小数

第四章: 表达式与操作符

1.表达式

//主表达式
3.1415926
//函数表达式
fn()
//属性访问表达式
user.name

JS中任何一行代码都是一个表达式


2.复杂操作符

1️⃣ in  :判断某个属性是否为指定对象的属性名

const user = {
    name:'张三'
}
// 属性 in 对象
console.log('name' in user); // true
console.log('age'  in user); // false

2️⃣ instanceof : 判断某个对象是否为另一个类的实例

const d = new Date()
// 实例对象 instanceof 类
console.log(d instanceof Date); // true
console.log(d instanceof Object); //true
console.log(d instanceof Array); //false

3️⃣ typeof : 返回一个任意值的结果

(1)固定的九类结果: 

xtypeof x
undefined"undefined"
null"object"
true 或 false"boolean"
任意数值或NaN"number"
任意BigInt"bigint"
任意字符串"symbol"
任意函数"function"
任意非函数对象"object"

(2) 语法:

// typeof 任意值
console.log(typeof  ' ');//string
console.log(typeof 3.14); // number
console.Log(typeof {}); // object
console.log(typeof []);// object

 


📜对比

(1)in  和  instanceof

  • 相同点:都会返回 boolean 的值
  • 不同点:in 属性是否属于对象;instanceof 对象是否属于类

(2)typeof :返回 string 类型的结果  ⭕注意: 针对和返回的结果都是 object 

4️⃣ ? 条件式访问

(1)存在的问题:

const user = null
console.log(user.name); / TypeError

处理方法:

const user = null
if (user){
    console.log(user.name);
} else {
    console.log(undefined);
}

 (2)作用:

const user = null
console.log(user?.name); // undefined

如果 ? 前的表达式为空值 (null ll undefined) 则会返回 undefined

5️⃣ ??先定义

(1)知识储备:

①假值

  • undefined
  • null
  • 0
  • false
  • NaN

 ②逻辑或

//   || 逻辑或: 假值 都会被认为假
console.log(0 || 1); // 1

所有的假值都会被判定为 假 (但0可能因为有意义的值)

 (2)??先定义操作符:

// ?? 先定义操作符: 只有 undefined 和 null 会被认为假
console.log(0 ? 1); // 0
console.log(undefined ?? 1); // 1
console.log(null ?? 1): // 1

 只有 undefined 和 null 会被认定为 假

6️⃣ eval()

本质是一个函数,可以接收一个参数。(实际上是用来执行动态拼接的方法)

// 得到结果
console.log(eval(2 + 3)); // 5
// 声明了函数 fn
console.log(eval(" function fn () [ console.log('我是 fn') }"));
fn() // 我是 fn

7️⃣ delete

删除指定的对象属性或数组元素

const user = {
    name: '张三'
}
// 从对象中删除 name 属性
delete user.name
console.log('name' in user); // false

const arr = [张三','李四',"王五']
// 从数组中删除 0 下标元素
delete arr[0]
console.log(arr[0]); // undefined

 


第五章: 语句

1.条件语句

  • if 语句
  • switch 语句

2.循环语句

  • while 循环
  • do/while 循环
  • for 循环
  • for/of 循环
  • for/in 循环
const arr =['张三' ,'李四','王五']
const user = {
    name:'张三'
}
// 正常循环,拿到 下标
for (const index in arr) {
    console.log(index);
}
// 正常循环,拿到 vaLue 元素
for (const value of arr) {
    console.log(value);
}
// 正常循环,拿到 key
for (const key in user) {
    console.Log(key);
}
// TypeError: user is not iterable
for (const key of user) {
    console.log(key);
}

'for/in’ 可以循环任意可枚举对象,而  'for/of'  只能循环可迭代对象

3.跳转语句

  • break
  • continue
  • return
  • yield
  • throw : 抛出异常
    function fn(n) {
        if (n <0){
            throw new Error('n的值不能小于 0')
        }
    }
    
    fn(-1)
  • try / catch / finally
    function fn() {
        try {
            // try 中的代码出现异常会被捕获
            JSON.parse('张三')
        } catch (err) {
            // 捕获异常之后,执行 catch
            console.log(err); // SyntaxError: Unexpected token '张',"张三" is not valid JSON
        } finally {
            // 无论是否捕获了异常,finally 总会执行
            console.log('finally');
        }
    }
    
    fn()

4.其他语句

  • with   混淆指定代码块的作用域指向
    const user = {
        name:'张三'
    }
    
    with (user) {
        // 使用 user 混淆作用域,这里的 name 会被理解为 
        user.nameconsole.Log(name);
    }
  • debugger
  • use strict

 


第六章:对象

1.测试属性

测试某一个名字是否是指定对象的一个属性名 

  • in 操作符  : 自有属性和继承属性
    const user = 
        name: '张三'
    }
    // 属性 in 对象
    console.log('name' in user); // true
    console.log('age' in user); //false
    console.log('toString' in user); // true
  • hasOwnProperty : 自由属性
    const user = 
        name:'张三'
    }
    // 0bject.prototype.hasOwnProperty()
    console.log(user.hasOwnProperty('name')); // true
    console.log(user.hasOwnProperty('toString')); // false
  • propertylsEnumerable : 自有属性 并且 enumerable (可枚举)特性为 true
    const user =
        name :"张三"
        age: 18
    }
    // 利用 Object.defineProperty 修改 age 的可枚举特性
    Object.defineProperty(user,'age',{
        enumerable: false
    })
    // 0bject.prototype.propertyIsEnumerable()
    console.log(user.propertyIsEnumerable('name')); // true
    console.log(user.propertyIsEnumerable('age')); // false
    console.log(user.propertyIsEnumerable('toString')); // false

 2.枚举属性

1️⃣可枚举性

  • 默认创建的属性都是可枚举的
  • 通过 Object.defineProperty 可以修改指定属性的可枚举性
  • 通过 propertylsEnumerable 方法,可以判断属性是否可枚举

 2️⃣枚举对于循环的影响

const user{
    name:'张三'
    age: 18
}

// 利用 Object.defineProperty 修改 age 的可枚举特性
Object.defineProperty(user,'age',{
    enumerable: false
})

for (const key in,user) {
    console.Log(key); // 只打印 name
}

当一个属性不可枚举时,"for/in"  循环会忽略掉该属性 

 3️⃣其他方法

Object.keys():指定对象的可枚举属性
Object.getOwnPropertyNames():指定对象的所有自有属性(无论是否可枚举)

const user = {
    name :'张三'
    age: 18
}

// 利用 Object.defineProperty 修改 age 的可枚举特性
Object .defineProperty(user,'age',{
    enumerable: false
}

console.log(Object.keys(user)); // ['name']
console.log(Object.getOwnPropertyNames(user)); // ['name','age']

 


3.扩展对象

1.作用:把一个对象的属性复制到另一个对象上

2.操作:

  • Object.assign
  • 扩展操作符
const user = {
    name: '张三'
}

const info = {
    token: 'xxx'
}

// 方式-: 0bject.assign 方法 (注意: Object.assign 返回的是第一个参数)
console.log(Object.assign(user, info)); //{name: '张三', token: 'xxx'}
console.log(user); // {name: 张三 ,token:xxx}
console.log(Object.assign(user,info) === user); // true
// 如果不想修改 user,可以使用这种方式合并
console.log(Object.assign({},user, info)); // {name:张三',token:'xxx'}
// 方式二: 扩展操作符 (推荐)
console.log(...user, ...info }); // {name :"张三", token: 'xxx'}

4.序列化对象

  • JSON.stringify()  把对象变为 JSON 格式字符串
  • JSON.parse()     把 JSON 格式字符串变为对象
// 对象 转化为 json
const user = 
    name:'张三'
}
console.log(JSON.stringify(user)); // {"name":"张三"}
// json 转化为 对象
const str ='{"name":"张三"}'
console.Log(JSON.parse(str)); // {name: '张三'}

第八章:函数

1.函数是JS中的一等公民
2.大纲:

如何定义函数 -> 如何调用函数 -> 函数的形参和实参 -> 命名空间 -> 闭包 -> 函数的属性、方法、构造函数 -> 函数式编程

3.闭包 

(1)定义:JavaScript函数对象的内部状态不仅要包括函数代码,还要包括对函数定义所在作用域的引用。这种函数对象与作用域(即一组变量绑定)组合起来解析函数变量的机制,在计算机科学文献中被称作闭包 (closure)。

 严格来讲,所有JavaScript函数都是闭包

(2)国内通俗解释:

可以访问其它函数作用域中变量的函数

(3)mdn:

闭包是一个函数以及其捆绑的周边环境状态的引用的组合。换而言之,闭包让开发者可以从内部函数访问外部函数的作用域。在JavaScript 中,闭包会随着函数的创建而被同时创建

(4)最终解释:

  1. 所有JavaScript 函数都是闭包
  2. 闭包可以访问外部函数作用域中才有的变量

4.函数对象

(1)函数本质上是一个对象

  • 方法 :apply、call、bind
  • 属性 :prototype

 (2)构造函数:

首字母大写的普通函数就是构造函数

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/697082.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C语言程序在内存中是怎样布局的

理论 我们假设在32位Linux下进行编程&#xff0c;首先要明确&#xff0c;我们的虚拟地址空间有4G&#xff0c;4G的地址空间的寻址范围就是 0x0000_0000 ~ 0xFFFF_FFFF&#xff0c;在Linux下&#xff0c;高地址的1G内存是给操作系统使用的&#xff0c;也就是 0xC000_0000 ~ 0xF…

复习javascript第1章

JavaScript 是全球最流行的编程语言。 JavaScript 是属于 Web 的编程语言。 JavaScript 很容易学习。 JavaScript 能够改变 HTML 内容 getElementById() 是多个 JavaScript HTML 方法之一。 本例使用该方法来“查找” id"demo" 的 HTML 元素&#xff0c;并把元素…

深入浅出设计模式 - 迭代器模式

博主介绍&#xff1a; ✌博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家✌ Java知识图谱点击链接&#xff1a;体系化学习Java&#xff08;Java面试专题&#xff09; &#x1f495;&#x1f495; 感兴趣的同学可以收…

ERR_SSL_VERSION_OR_CIPHER_MISMATCH

Firefox开启TLS 1.1支持 问题&#xff1a; 建立安全连接失败 连接到…时发生错误。对等端使用了不支持的安全协议版本。 错误代码&#xff1a;SSL_ERROR_UNSUPPORTED_VERSION 由于不能验证所收到的数据是否可信&#xff0c;无法显示您想要查看的页面。 建议向此网站的管理…

Ubuntu TensorRT安装

文章目录 1.1环境1.2下载地址1&#xff09;操作步骤2&#xff09;添加环境变量3&#xff09;检查是否安装成功 2.1其它环境 1.1环境 1&#xff09;Ubuntu20.04 2&#xff09;cuda111torch1.8.0py38 1.2下载地址 https://developer.nvidia.com/nvidia-tensorrt-download 1…

【Linux】线程同步(一)

概念 线程同步是指多个线程之间协调和管理彼此的执行顺序&#xff0c;以避免竞态条件和不确定的结果。线程同步的目的是确保共享资源的正确访问和保护临界区的完整性。 作用 避免竞态条件&#xff1a;当多个线程同时访问和修改共享资源时&#xff0c;可能会导致竞态条件的发生…

javaee session的创建

当访问服务器时&#xff0c;服务器就会创建一个session TestSession.java package com.yyy.servlet;import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import java…

String、反射、枚举、lambda表达式以及泛型进阶(数据结构系列16)

目录 前言&#xff1a; 1. String 1.1 字符串常量池 1.1.1 创建对象的思考 1.1.2 字符串常量池&#xff08;StringTable&#xff09; 1.1.3 再谈String对象创建 1.1.4 intern方法 2. 反射 2.1 反射的定义 2.2 反射的用途 2.3 反射的基本信息 2.4 反射相关的类 2.4.…

Android实现发送短信功能

Android发送短信 效果图代码实现先添加权限.java由用户输入手机号 自定义短信内容跳转系统发送短信页面 自定义手机号短信内容全部代码 .xml 效果图 代码实现 先添加权限 <!-- 允许程序发送SMS短信 --><uses-permission android:name"android.permission.SEND_S…

nodejs线上环境远程调试

将nodejs部署到线上环境之后&#xff0c;这个时候想要去调试还是有点困难的&#xff0c;但是好在nodejs提供了一个可以让你进行调试的开关&#xff1a;--inspect 我们可以使用这个开关来启动一个可以调试的服务&#xff0c;使用非常简单&#xff0c;在启动服务的时候加上这个指…

高性能计算怎么入门?

如果入门没有专业方向&#xff0c;自学摸索的话&#xff0c;不容易有自己的核心竞争力。国内目前生态尚不完善&#xff0c;学习资料也比较少~如果想要系统学习的话&#xff0c;一定不要错过国内首家专业做高性能计算的系统学习课程。 ~我们是国内首家做高性能计算人才培养和推…

微型逆变器会不会迎来CC2340时代

光伏领域的朋友对微型逆变器并不陌生。而CC2340&#xff0c;对大家而言则都是陌生的主。它是何方神仙&#xff1f;和微型逆变器能有什么关系&#xff1f;你还说它可能引领微型逆变器的下一个时代&#xff1f;不急&#xff0c;我们一起来看看。 在全球为双碳愿景努力以及俄乌战…

VR虚拟展会——打造商企展厅线上展示新模式

近期的大雨磅礴&#xff0c;不知道大家都感受过吗&#xff1f;就连在武汉展开的国际连锁加盟展产业博览会也都受到了一定的影响&#xff0c;为期三天的展会&#xff0c;接连下了三天的雨&#xff0c;导致很多客户无缘展会。这就是实体展会的限制之一&#xff0c;加上实体展会的…

vscode修改markdown侧边预览pdf字体等设置

文章目录 1.按CtrlShiftP打开命令窗口2.在命令窗口出输入Markdown Preview Enhanced: Customize Css&#xff0c;打开style.less文件 1.按CtrlShiftP打开命令窗口 2.在命令窗口出输入Markdown Preview Enhanced: Customize Css&#xff0c;打开style.less文件 然后在文件内加…

【网站维护】网络杂谈(7)之web网站的维护

涉及知识点 如何进行web网站的维护&#xff0c;如何进行web网站的更新与测试&#xff0c;搭建web网站后期如何管理维护。 原创于&#xff1a;CSDN博主-《拄杖盲学轻声码》&#xff0c;更多内容可去其主页关注下哈&#xff0c;不胜感激 文章目录 涉及知识点前言1&#xff0e;网…

仿牛客社区——7.19生成长图

采用异步方式&#xff0c;通过任务方式&#xff0c;将次命令丢到消息队列中进行执行 关于wkhtmltopdf的配置&#xff08;applaction.properties&#xff09; #关于wk的配置&#xff08;生成长图 wk.image.commandD:/wkhtmltopdf/bin/wkhtmltoimage wk.image.storageD:/wkData/w…

婴儿摇篮音乐芯片 N9300-S16:为宝宝带来高品质的音乐体验

​对于父母来说&#xff0c;给婴儿提供一个安稳舒适的睡眠环境是至关重要的。宝宝的睡眠品质对于其健康和发展至关重要。在成长过程中&#xff0c;音乐对婴儿的情绪、认知和智力发展都有积极的影响。因此&#xff0c;厂家在婴儿摇篮中选择一款合适的婴儿摇篮音乐芯片尤为重要。…

共见·价值成就|亚马逊云科技中国峰会宣布三大举措全面升级

2023年6月27日&#xff0c;亚马逊云科技举办一年一度的中国合作伙伴峰会。本届峰会以“共见价值成就”为主题&#xff0c;面向合作伙伴发布智荟出海计划、可持续发展伙伴计划、合作伙伴解决方案工厂以及获客激励计划等多项计划&#xff0c;以进一步强化合作伙伴“33战略”&…

ASEMI代理ST可控硅BTA16的工作原理与应用分析

编辑-Z 本文将对可控硅BTA16的工作原理与应用进行详细的分析。首先&#xff0c;我们将介绍可控硅BTA16的基本概念和工作原理&#xff0c;然后&#xff0c;我们将探讨其在电力电子设备中的应用&#xff0c;接着&#xff0c;我们将分析其在电力调节中的作用&#xff0c;最后&…

edge自带断网游戏

在没有网络时你会不会很无聊&#xff1f;博主告诉你一个edge浏览器自带的断网小游戏&#xff0c;让你在断网时也能玩游戏&#xff01; 网址&#xff1a; 打开edge://surf这个断网游戏网站即可游玩&#xff1a; 作弊码既隐藏模式&#xff1a; 输入microsoft&#xff08;意思就…