JavaScript权威指南读书笔记(第7版)

595 阅读5分钟

蜡笔小新语录: 认为自己一个人就够强大的傢伙,没有强大的资格!
笔者希冀: 阅读经典的书籍和大牛沟通,读书才能深知自己的不足!

 JavaScript权威指南读书笔记(第7版)‘犀牛书’在工程师心中有着至高无上的地位。
 尽管市面上讲解javaScript语言和技术的著作很多,但像这本书能够贴近ECMAScript和W3C
 规范的著作并不多。完全值得CV工程师深耕一波。本文仅是记录阅读笔记以供复习使用以及和大家分享
 读书心得。

读书笔记

第一章 词法结构

词法结构是一门语言最低级的语法,规定了变量如何命名、注释的定届符,以及分割程序语句,等等

1.1 JavaScript的程序文本

1. JavaScript是区分大小写的
2. JavaScript忽略程序记号之间的空格
3. JavaScript也忽略换行符
4. 除了常规的空格(\u0020),JavaScript也将制表符(\t)、各种ASCII控制符和Unicode间格识
   别为空格。JavaScript将换行符、回车符和回车/换行序列识别为行为终止符。

1.2 注释

1. // 单行注释
2. /* 这也是一种注释 */ 而这是另一种注释
3. /*
    * 这个是多行注释
    * 每行开头的*字符不死必需的,单纯是为了美观
    */

1.3 字面量

字面量是一种直接出现在程序中的数据值
12        // 数值12
'geely'   // 字符串geely
true      // 布尔值
null.     // 无对象

1.4 标识符和保留字

标识符:简单来说就是一个名字,用于代码中常量、变量、属性、函数和类以及某些循环提供标记。
       必须是以 字母、下划线(_)或美元符号($)开头,后续字符可以是 字母、下划线(_)或美元符号($)和数字
保留字:与其他的语言一样,javaScrip为语言保留了某些标识,这些保留字不能作为常规的标识符使用
以下都是合法变量
i
my_varbile_num
v13
_demo
$str
1.4.1 常见的保留字
abstract        delete             goto             null              throws 
as              do                 if               package        transient 
boolean         double             implements       private             true 
break           else               import           protected           try 
byte            enum               in               public            typeof 
case            export             instanceof       return              use 
catch           extends            int              short               var 
char            false              interface        static              void 
class           final              is               super           volatile 
continue        finally            long             switch             while 
const           float              namespace        synchronized        with 
debugger        for                native           this             default 
function        new                throw   

第二章 类型、值和变量

计算机程序通过操作值(如数值3.14)或文本(如"hello world")来工作
编程语言中可以表示和操作的值被称为类型,而一门语言支持的类型集也是这门语言的基本特征
javascript类型可以分为两类:原始类型和对象类型
原始类型:number boolean string null undefined symbol
对象类型:除了基本的对象(Object)和数组(Array) javascript还定义了一些其他有用的对象类型如:
        1.  Set对象: 表示一组值的集合
        2.  Map对象: 标识键和值的映射
        3.  RegExp对象:表示文本模式,可以实现对字符串的复杂匹配、搜索和替换操作
        4.  Date对象:表示日期和时间支持日期计算
        5.  Error以及子类型表示javscript代码运行时可能发生的错误

2.1 数值(Number)

javascript的主要数值类型Number 用于表示整数和近似整数。javascript使用IEEE754标准定义
的64位浮点格式表示数值。这就意味着 js可以表示的最大整数是 正负1.7976931348623157乘以10
的308次方最小整数是正负5乘以10的负324次方
js 支持 十进制、十六进制,ES6中添加了二进制和八进制
2.1.1 数值的计算
1. +(加法)、 -(减法)、 *(乘法)、 /(除法)、 %(取余) ,ES6新增 ** (取幂)
2. js还通过Math对象的属性提供了一组函数和常量以支持更复杂的计算 常用的比如:
   Math.pow(2,2)    // 4 2的平方
   Math.round(.6)   // 1 舍入到最接近的整数
   Math.ceil(.6)    // 1 向上取整
   Math.floor(.6)   // 0 向下取整
   Math.abs(-5)     // 5 取绝对值
   Math.max(1,3,2)  // 3 返回最大值
   Math.min(2,3,4)  // 2 返回最小值
   Math.random()    // 伪随机数
   ...
   ES6 新增了一些
   ... 具体使用时可以自行百度

常见面试1 : 为什么js运算0.3-0.2 !=0.1 点击查看 👉🏿 picOne.png

1. js 使用IEEE-754浮点表示法是一种二进制表示法,这种表示法可以准确表示1/2、1/4、1/1024等分数。
   然而我们最常用的分数是(特别是在进行财务计算时)十进制分数 1/10、1/100,等等,二进制无法精确
   的表示哪怕是0.1这么简单的数
2. 简单的解决方法: 转为整数处理

2.2 文本(String)

1. 转义字符 '\ud83d\udc99' 👉🏿 💙
2. 字符串的使用
   let s ='hello,world'
   // 取得字符串的一部分
   s.substring(2,4)     // "ell" :第2-4个字符
   s.slice(1,4)         // 同上
   s.slice(-3)          // "rld": 最后3个字符
   s.split(",")         // ["hello","world"]
   // 搜索字符串
   s.indexOf("l")       // 2 :第一个字母l的位置
   s.indexOf("l",3)     // 3 :位置3后面 第一个字母l的位置
   s.indexOf("ll")      // -1:不存在对应的字符
   s.indexOf("ll")      // 10:最后一个字母l的位置
   
   // ES6及之后的版本中的布尔值搜索函数
   s.startsWith("hello")   // true :字符串是以这些字符开头的
   s.endsWith("!")         // false :s字符串不是以!结束的
   s.includes("or")        // true :s字符串中包括子串"or"
   
   // 创建字符串的修改版本
   s.replace("llo","ya")        // "HeYa,world": 替换
   s.toLowerCase()              // "hello, world": 小写
   s.toUpperCase()              // " HELLO,WORLD": 大写

   // 访问字符串中的个别字符
   s.charAt(0)                  // "H": 第一个字符
   s.charAt(s.length-1)         // "d": 最后一个字符
   
   // ES2017 新增的字符串填充函数
   "x.padStart(3)"          // "  x" :在X的左侧添加空格,让字符串的长度变为3
   "x.padEnd(3)"            // "x  " :在X的右侧添加空格,让字符串的长度变为3
   "x.padstart(3,"*")"        // "**x" :在X的左侧添加空格,让字符串的长度变为3
   "x.padEnd(3,"*")"        // "x--" :在X的右侧添加空格,让字符串的长度变为3
   
   // 删除空格函数。 trim()是ES5就有的其他的事ES2019增加的
   “ test ”.trim()            // "test": 删除开头和末尾的空格
   “ test ”.trimStart()       // "test ": 删除开头的空格 也叫trimLeft
   “ test ”.trimEnd()        // " test":  删除结尾的空格 也叫trimRight
JavaScript的字符串是不可修改的,像replace()和toUpperCase()这样的方法都是返回新字符串,他们并不是修改原先的字符串
字符串也可以被当成只读数组,使用方括号而非chartAt()方法访问字符串中个别的字符
let s =" hello,world"
s[0]             // => "h"
s[s.length-1]    // "d"
2.2.1 模版字符串
//1.  模版字符串可以换行 2. 可以插入变量
let  age  ='24'
let  name ='gy'
let s =`my name is ${name} I'am ${age} year old` // my name is gy I'am 24  year old

2.3 布尔值(Boolean)

常见面试2 : null 和 undefined

1. null 是一个语言关键字, 求值为一个特殊值,通常用于表示某个值不存在
2. typeOf null 返回的事Object ,表明可以将null表示为没有对象

3. undefined 也表示某个值不存在,但undefined 表示一种深层次的不存在。
   具体来说:
           变量的值未初始化的时候就是undefined
           查询不存在的对象属性或数组的元素的时候也会得倒undefined
           没有明确返回值的函数返回的事undefined
           没有传值的函数参数也是undefined

总结: 可以用undefined表示一种系统级别、意料之外或类似错误的没有值
     可以用null表示程序级别、正常或意料之中的没有值

常见面试3: var 、let 、const 的区别

1. var 定义变量是不具有块级作用域 letconst 定义变量是具有块级作用域
2. var 可以重复命名变量  letconst不可以重复命名变量
3. var 定义变量是会作用域提升但是 letconst必须先命名再使用
4. const 一般只定义常量

2.4 解构赋值

1. let [x,y]=[3.,4]        // 相当于 let x=3 ,y=4
// 对应位置赋值
2. let [,x,,y ]=[1,2,3,4]  // let x=2,y=4
// 剩余参数
let [x,...y ]=[1,2,3,4]    //  let y=[2,3,4]
// 解构赋值不仅仅可以解构数组实际上等号右边可以是任意的可迭代对象
let { r,g,b,a }={ r:0.0,g:0.0,b:0.0,d:0.0 }   // let a=0.0,b=0.0,c=0.0,d=0.0,

常见面试4: 数据类型的判断(4种方式)

1. typeof 
   对于基本数据类型判断是没有问题的,但是遇到引用数据类型(如:array object) 
   是不起作用 其中对 array object null 返回的结果都是object 以下是具体的代码实例
    var test1=null
    var test2=23
    var test3=false
    var test4='gri'
    var test5=[1,2,3]
    var test6={
      name: 'zs',
      age: 23
    }
     var test7=undefined
    console.log('test1的数据类型是' + typeof test1 ); // object
    console.log('test2的数据类型是' + typeof test2 ); // number
    console.log('test3的数据类型是' + typeof test3);  // boolean
    console.log('test4的数据类型是' + typeof test4 ); // string
    console.log('test5的数据类型是' + typeof test5 ); // object
    console.log('test6的数据类型是' + typeof test6 ); // object
    console.log('test7的数据类型是' + typeof test7 ); // undefined
   
2. instanceof
   可以检测array,object但是不能检测基本类型的数据也包括null也不可以instanceof 运算符
   用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
      var arr=new Array();
      var obj= {
        name:'zs',
        age:23
      }
      console.log(arr instanceof Array); //true
      console.log(arr instanceof Object); //true
      console.log(obj instanceof Object); //true
      注意如果需要判断数据类型存在数组和对象应该向判断数组如果先判断对象的话数组
      也是对象两者是没办法分开的
3. constructor 
   不能判断undefinednull,并且使用它是不安全的,因为contructor的指向是可以改变的
      var bool= false
      var num= 123
      var str='zs' 
      var arr=[1,2,4]
      var obj={
        name:'gy',
        age:12
      }
      function fun() {}
      function Student(name,age,grades) {
        this.age=age
        this.name=name
        this.grades=grades
      }
      function Person(name,age) {
        this.age=age
        this.name=name
      }
      var gy=new Person('gy',23)
      console.log(bool.constructor === Boolean); // true
      console.log(num.constructor === Number);// true
      console.log(str.constructor === String);// true
      console.log(arr.constructor === Array);// true
      console.log(obj.constructor === Object);// true
      console.log(fun.constructor === Function);// true
      console.log(gy.constructor === Student);// false
      console.log(gy.constructor === Person);// true
4. 判断数据的最终的完美解决方案(Object.prototype.toString.call())
    function foo() {}
    console.log(Object.prototype.toString.call(1));   //'[object Number]'
    console.log(Object.prototype.toString.call(NaN));  //'[object Number]'
    console.log(Object.prototype.toString.call('1'));  //'[object String]'
    console.log(Object.prototype.toString.call(true));  //'[object Boolean]'
    console.log(Object.prototype.toString.call(undefined)); //'[object Undefined]'
    console.log(Object.prototype.toString.call(null));  //'[object Null]'
    console.log(Object.prototype.toString.call(Symbol())); //'[object Symbol]'
    console.log(Object.prototype.toString.call(foo));   //'[object Function]'
    console.log(Object.prototype.toString.call([1,2,3]));  //'[object Array]'
    console.log(Object.prototype.toString.call({})); //'[object Object]

待更新中...