JSCORE05

JSCORE部分的知识点 已经整理到一起: 只包含必会的精华部分.

到 FTP 下载 /12_JSCORE/JSCORE_ALL

两种格式, 内容一样 svg小 png大

复习

• 正则对象

  正则表达式: 是一套独立的体系, 是利用一些特定的字符组合 来对字符串进行模糊匹配

  • 核心: 一套元字符
  • 修饰符: i 忽略大小写 g 全局匹配

  正则表达式 不是 JS的语法, JS要想使用正则表达式 就必须用正则对象进行封装

  正则对象有两种声明方式:

  1. 字面量: /正则表达式/修饰符

     效率更高, 适合正则不变, 字符串变化的场景

  2. 构造方式: new RegExp('正则表达式', '修饰符')

     效率比字面量低, 适合 需要实时声明正则表达式的场景

     • 注意: 此处的正则表达式是放在 字符串中的, 必须考虑 JS转义符 的问题. '\d' 实际上是 d , 必须写 '\\d' 才是 '\d'

  几个正则表达式的方法:

  • 字符串.match(正则): 查找
  • 字符串.replace(正则, 新内容): 替换
    • 额外扩展: ()捕获组 , 利用 $1 $2...使用捕获组捕捉的值
  • 正则.test(字符串): 验证
    • 正则必须用^ 和 $ 代表开头结尾
  • 正则.exec(字符串)
    • 所有正则方法的根, 适合在封装自己的正则函数中使用!
    • 通常配合 do...while... 循环使用

• 函数

  • 参数:

    • 无参数: function 函数名(){}

    • 单参数: function 函数名(参数){}

      • 函数声明时的参数, 叫做形式参数 - 形参
      • 函数调用时传入的参数 函数名(值), 此处的值 称为 实际参数 - 实参

    • 多参数: function 函数名(参数1, 参数2, 参数3...){}

      • 传参: 函数名(11,22,33) 参数按照顺序一一对应 传入形参

    • 不固定数量参数: arguments

      每个函数内部都具备一个 arguments 关键词, 其中保存了所有传入的参数,

      是一个 类数组 类型, 类似数组 但是不具备数组的相关方法

      Math.max(1,3)
      Math.max(1,4,3,5,5,5)
      

  • 声明方式:

    1. 字面量

       function 函数名(参数名, 参数名...){ 方法体 }
       

    2. 构造方式

       var 函数名 = new Function('参数名', '参数名',..., '方法体')
       

  • 声明提升

    原理: JS编译器有 预编译功能, 在执行JS代码之前, 会先编译一次-- 把var声明的 和 函数都找出来

    • 变量提升: var声明的变量会提升到JS代码的顶部
    • 函数声明提升: 函数的声明会提升到JS代码的顶部

  • 函数重载

    概念来自于C语言: 一个函数可以传递不同数量 不同类型的参数, 函数体内利用 if 判断, 根据数量/类型 的不同, 执行不同的逻辑操作.

    优点: 减少同类型函数的声明, 减少内存消耗

    JS中通过 if 判断 arguments 变量中的数据 来决定执行的代码逻辑!

  • 作用域有3种:

    在 HTML 中, 带有一个window对象, 所有JS的相关属性都存储在 window 对象中, 这个window对象就称为全局作用域

    1. 全局作用域

    2. 局部作用域

       函数的 {} 内就是局部作用域

       局部作用域可以使用全局作用域的属性, 全局作用域不能使用局部作用域的属性

       • 作用域链

         函数中使用一个变量时, 遵循就近原则: 先从自身作用域查找, 找不到再到上层作用域查找, 直到全局作用域为止!

         本质: 函数声明时, 会保存自身的词法环境!

         var name = '1231'
         
         function 函数(){
             var name = '123'
             
             console.log(name)
         }
         

    3. 块级作用域(未讲)

  • 闭包

    本质上: 每个函数都一个闭包–封闭的包围

    作用: 利用函数制作一个局部作用域, 来保存一些变量.

    这些变量独立于 全局作用域之外, 可以防止全局变量污染

    全局变量污染: var声明的变量都会存储在 window 对象中, 重名的变量会覆盖!

    // 匿名函数自调用不是必备写法, 只是更加简单而已
    // function 名称(){}    
    // 名称();
    
    // 匿名函数是为了制造一个 封闭的独立的作用域--闭包
    (function (){
        // 这里的 name 就出现在闭包的中
        var name = '111'
        
        // 必须把使用闭包中变量的函数保存到window中
        // 这样才能在后期 调用 ashow 函数
        window.ashow = function (){
            console.log(name)
        }
    })()
    

• 面向对象

  数据类型共有8种

  • 7种基础: number string boolean null undefined + bigint symbol

  • 对象

    • 引用类型

      • 基础数据类型的大小是固定的

      • 对象类型的大小是不固定的, 可以人为定制

        这种大小会变化的类型存储在 堆中

        变量	值	类型
        a	12	number
        a	true	boolean
        a	‘小明’	字符串
        a	0x12a3af3	对象(是地址)

      ---

      地址	对象
      0x12a3af3	{name:‘222’, age:33, phone:“…”}

      使用时:

      var a  = {name:'亚楠', age:33}
      
      // 本质上:
      内存地址0x12131 = {name:'亚楠', age:33}
      var a = 0x12131
      
      var b = a;
      b.age = 19
      
      则 a的age 也会变成19
      
      
      // 不是复制的关系, 而是单纯的指向关系
      小新的电动车 = '小牛电动车'
      亚楠的电动车 = 小新的电动车
      亚楠的电动车.颜色 = 改成红色..
      小新的车 也不变成红色
      

  • 浅克隆

    如何得到一个新的对象

    需要声明一个 空对象, 然后利用遍历的方法把就对象的属性 赋值一份给空对象即可

  • 函数的this关键词

    函数中的this, 代表其执行时所在的对象

    var name = '全局'
    
    var obj = {
        name:"亚楠",
        desc: function (){
            console.log(this.name)
        }
    }
    
    obj.desc() // 亚楠
    
    var desc = obj.desc
    desc() // window.desc()   全局
    

  • 构造函数

    • 通过new 运算符触发, 可以生成一个固定解构的对象

    • 构造函数都是 大驼峰命名法, 以示区分

      function FunctionName(name, age){
          // 构造函数中的this 代表其正在生成的对象
          this.name = name;
          this.age = age;
      }
      
      let fn = new FunctionName(11,22)
      

    • 原型对象 prototype 或 __proto__

      • 每个对象类型都有一个 __proto__属性, 此属性中保存了对象的一些基础属性

    • 原型链 prototype chain

      原型的作用?

      当使用对象的一个属性时, 如果对象没有这个属性, 则到其原型对象中查找

      如果原型对象没有此属性, 则到 原型对象的原型对象中查找, 直到最终找不到为止

      最根本的原型: Object.prototype

    • 两个关键词, 同一个变量, 位置不同 名称不同!

      • prototype: 构造函数的属性, 在构造对象的时候, 会自动注入给对象的 __proto__ 属性

        即: 对象.__proto__ == 构造函数.prototype

      • __proto__: 对象的属性

    • 原型的作用

      1. 把构造函数中的函数声明, 放在原型中书写, 可以减少内存消耗, 每次new 构造的时候 就不需要反复声明函数

         构造函数.prototype.方法 = function(){}
         

      2. 为系统构造函数进行方法的扩展

         Date.prototype.format = function(){}
         

    • 操作原型的一些方法

      • 为对象指定原型: Object.setPrototypeOf(对象,原型)
      • 为构造函数指定原型: 构造函数.prototype = 原型

    • for…in…: 会遍历原型链中所有的属性

      • Object.keys(): 可以只读取当前对象中的属性, 不含原型链

• 严格模式: 让系统自动识别代码中的错误, 保证代码的质量

  • 在JS代码的开头书写 :'use strict'
  • 变量必须声明后才能使用
  • 函数在window中使用, 函数中的this指向 undefined
  • callee 被禁用: arguments.callee 代表当前函数的名称, 在早期JS中 匿名函数递归调用时使用, 效率偏低. 后来提供了命名函数递归自调用写法, 更好用
  • 静默失败 改为 明确的失败提示

• 精确配置对象属性:

  • 对象属性默认带有更多的可配置项: 可写 可遍历 可重新配置 默认值 getter setter
  • 默认设定: 在对象中直接声明属性, 则默认此属性是 可写 可遍历 可重新配置
  • 利用 defineProperty(对象, '属性名', {配置项}) 可以对属性进行精确配置
  • getter: 当读取一个属性时触发, 可以制作计算属性
  • setter: 当为一个属性赋值时触发, 可以做赋值检测

• 函数的方法

  面试时:

  1. 执行函数的时候, 能不能替换this指向?
  2. 三个方法有什么区别?
  3. 箭头函数能不能替换this? 不能, 因为箭头函数自身没有this

  • call: 在触发函数的同时, 替换函数中的this为指定对象

    • 剩余参数 依次填写, 例如函数.call(新对象, 11,22,33)

  • apply: 在触发函数的同时, 替换函数中的this为指定对象

    • 剩余参数 用数组填写, 例如函数.apply(新对象, [11,22,33])

  • bind: 生成新的函数, 并且绑定了指定的 this对象, 和 其他参数; 需要手动触发!

    var 新函数 = 旧函数.bind(对象, 11,22,33..)
    新函数()
    

推荐

数组方法

参数为回调函数

• every: 数组中所有内容 都满足 回调函数的测试, 返回值才为true, 否则false
• some: 数组中 内容存在任意一个满足 回调函数的测试的, 返回值为true, 否则false
• forEach: 遍历数组, 每个数组元素都被 回调函数 处理
• map: 创建新数组, 新数组由 回调函数的返回值组成
• filter: 创建新数组, 满足回调函数中的条件的元素, 会加入到新数组
• reduce: 合并数组中的元素的内容, 形成最终的结果.

模板字符串

`模板字符串${}`

• 简化字符串拼接
• 支持回车换行
• ${} 可以书写js代码
• 利用 \** 转义符, 在模板字符串中输出 **\

声明变量的方式

• var: 变量提升 并赋值为 undefined; 全局污染

• let: 变量提升 并 处于 暂存死区 状态, 无法使用.

  配合 {} 可以实现 块级作用域

  不能在用一个作用域中 , 重复声明同名变量

• const: 常量, 声明时必须同时赋值, 后期无法修改

for…of

快速遍历数组

for (let value of 数组){
    value 是数组的元素
}

箭头函数

实现匿名函数的简化

() =>{ 函数体 }

语法糖1: 如果只有1个参数 () 可以省略
name => { }

语法糖2: 函数体只有一行代码, 可以省略 return 和 {}
() => new Date()

相当于 
() => { return new Date() }

: 变量提升 并 处于 暂存死区 状态, 无法使用.

配合 {} 可以实现 块级作用域

不能在用一个作用域中 , 重复声明同名变量

• const: 常量, 声明时必须同时赋值, 后期无法修改

for…of

快速遍历数组

for (let value of 数组){
    value 是数组的元素
}

箭头函数

实现匿名函数的简化

() =>{ 函数体 }

语法糖1: 如果只有1个参数 () 可以省略
name => { }

语法糖2: 函数体只有一行代码, 可以省略 return 和 {}
() => new Date()

相当于 
() => { return new Date() }