JavaScript常用知识点

1-包装数据类型

一个基本数据类型当你使用的时候会自动转换成复杂数据类型，当你使用完毕，会自动转换为基本数据类型

比如 字符串 string是基本数据类型，但是它可以使用 length这个方法 ，就是因为字符串也是一个包装数据类型，当使用 legnth方法时，会自动转化为复杂数据类型，当使用完毕后，会自动转换为基本数据类型就像 对象 可以使用 点语法一样， 因为对象本身就是一个复杂数据类型所以可以使用

      const obj = {}
      // 因为obj 是一个对象 ，也就是一个复杂数据类型 可以使用 点语法
      obj.name = 'hello world'
  
      const str = 'hello world'
      // str 是一个基本数据类型 可以使用 点语法 是因为 它也是一个包装数据类型 
      str.length

2-Number类型

toString()

• 可以将一个数字类型转换为字符串类型

• 也可以进行进制转换

      const num = 100
      console.log(num.toString()) // 100
  
      console.log(num.toString(2)) // 1100100

toFixed()

保留小数点

      const num = 12
      console.log(num.toFixed(2))  // 12.00

paresInt()

括号里面填写你要转换的数据，会把你要转换的内容一位一位的看，如果第一位就不能转换成数字，那么直接给NaN,如果第一位可以，就看第二位，第一位保留，以此类推

• 可以传入number类型 和 string类型

  
  parseInt(10.11)  // 10
  parseInt("10.11") // 10
  

### parseFloat()
和parseInt的解析规则一模一样，只不过parseFloat认识小数点

*   可以传入number类型 和 string类型
    
  ```js
        parseFloat(10.11)  // 10.11
    		parseFloat("10.11") // 10.11

Math对象

Math.floor()向下取整

Math.ceil()向上取整

Math.round()四舍五入

Math.random() 生成 0 -1 随机数 不包括1

  var random =Math.floor(Math.random()*(max-min+1))+min

Math.pow(x,y) 返回x的次幂

3-理解闭包

我的理解是：JavaScript中一个函数，如果访问了外层作用域的变量，那它就是一个闭包

闭包的作用：

1. 保护变量私有化

定义在函数内部的变量就是私有变量

2. 在函数外部访问函数内部的私有变量

利用闭包函数访问

闭包的特点：

1. 保护变量私有化

优点：不会污染全局

缺点：外部不能访问，需要闭包函数

2. 可以在函数外部访问函数内部的变量

优点：不局限于私有变量

缺点：外部访问需要闭包

最大的缺点：一个不会被销毁的函数空间 （内存泄漏）

4-对象增强

Object.defineProperty

语法：

Object.defineProperty(obj, prop, descriptor)

参数

obj

要定义属性的对象。

prop

要定义或修改的属性的名称或 Symbol 。

descriptor

要定义或修改的属性描述符。

Object.defineProperties

语法：

Object.defineProperties(obj, props)

参数

obj

在其上定义或修改属性的对象。

props

要定义其可枚举属性或修改的属性描述符的对象。对象中存在的属性描述符主要有两种：数据描述符和访问器描述符。

5-对象和函数原型

对象原型

获取对象原型语法：

1. 对象.__proto__

2. Object.getPrototypeOf(对象)

原型的作用：

当我们通过[[get]] 方式去获取一个属性对应的value时，它会优先在自己的对象中查找，如果找到直接返回，没有就会去这个对象的原型查找，这一个过程被称作原型链

函数原型

函数天生自带一个显示原型 prototype属性,只要是一个函数都有

函数也属于对象，所以函数也有隐式原型对象 __proto__

---

---

6-ES6到ES13的新特性

6- 1.模板字符串

      const str = "World"
      const str2 = `Hello ${str}` // Hello World

还可以调用函数

      function foo(name, age, ...arg) {
        console.log(name)  // abc def
        console.log(age)   // 123
        console.log(arg)   // 456
      }
  
      foo`abc${123}def${456}`

6-2.ES6函数的增强用法

函数的默认参数

      function foo(a = 10, b = 20) {
        console.log(a) // 10
        console.log(b) // 20
      }
      foo()

6-3.展开运算符的使用

展开语法是一个浅拷贝

数组：

  const arr = [10, 20, 30, 40, 50]
  const newArr = [...arr]
  console.log(newArr)

创建对象字面量

      const infos = {
        age: 20
      }
      const obj = {
        ...infos,
        name: "code"
      }

6-4.Symbol类型用法

Symbol是基本数据类型，表示独一无二的的值

      const username = Symbol()
      const username2 = Symbol()
      const obj = {
        [username]: "code",
        [username2]: "code2"
      }
      console.log(Object.getOwnPropertySymbols(obj))

6-5.数据结构-set和map

set和map是ES6新增的一种数据结构

解决的痛点：

由于JavaScript对象的key只能是字符串，所以新增了set和map，set和map可以让对象的key是多种类型，而不是单单限制为string类型，也就是说set和map让对象的key可以是任意类型。

set

Set是新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复

创建Set我们需要通过Set构造函数(暂时没有字面量创建方式）

可以存储任意类型的唯一值，set里面的元素不会重复

Weakset

和set数据结构相似

区别：

• WeakSet中只能存储对象类型，不能存放基本数据类型

• WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收

:::
这也意味着 WeakSet 中没有存储当前对象的列表。正因为这样，WeakSet 是不可枚举的。
:::

map

映射的意思，表示键到值的映射，Map保存的是键值对

语法：

new Map()

实例化的时候里面接受一个二维数组

里层数组的[0]作为key

里层数组的[1]作为value

    const m  = new Map([ ["name","xiaoluo"] ])

Map常见属性：size：返回Map中元素的个数

Map常见的方法

1. set(key,value):在Map中添加key、value，并且返回整个Map对象

   
     const map = new Map()
     map.set("age",18)
     // 也可以设置复杂数据类型为key
     map.set([1, 2, 3],[4, 5, 6])
     console.log(map)
   

![image](https://img-blog.csdnimg.cn/img_convert/6a5e2bf67db840417689c44fe5043514.png)

2.  get(key):根据key获取Map中的value
      ```js

    console.log(map.get("age")) //18

has(key):判断是否包括某个key，返回Boolean类型

delete(key):根据key删除一个键值对，返回Boolean类型

clear():清空所有的元素

forEach()可以遍历Map

js面试题

      const obj = {}
      let a = { name: 'Jack' }
      let b = { age: 18 }
      obj[a] = 100
      obj[b] = 200
      console.log(obj[a]) // 200
      console.log(obj[b]) // 200

因为对象的key只能存储字符串，当把不是一个字符串的内容当作对象的key来使用，会自动转化为字符串 ,也就是

[object object]

      const obj = {}
      let a = { name: 'Jack' }
      let b = { age: 18 }
  		// 由于a是一个对象类型 ，不是字符串，所以会自动转换成 [object object],
  		// 所以 a 是[object object]，b也是[object object] 两个是一样的
      obj[a] = 100
      obj[b] = 200
      console.log(obj[a]) // 200
      console.log(obj[b]) // 200

6-6.ES7特性

    const obj = {
      name: " study",
      age: 19,
      height: 1.99,
      address: "广州市"
    }

    console.log(Object.keys(obj))

    console.log(Object.values(obj))

    const entries = Object.entries(obj)

    for (let item of entries) {
      const [key, value] = item
      console.log(key, value)
    }

6-7.ES8特性

Object.entries() 对象转数组

6-8.ES9特性

flat :

    const arr = [10, [20, 30], 40, [30, 40, 1, [20, 30]], 40, 50]
    console.log(arr.flat(Infinity));   

flatMap ： 先进行 map 方法 在进行 flat

6-9.ES10特性

formEntries：数组转对象

---

7-Proxy-Reflect

1. 对象的属性，而Proxy监听的是对象本身

2. 使用Object.definProperty需要遍历对象的每个属性，而Proxy则直接代理对象，不需要遍历操作

3. Proxy对新增属性也可以监听，Object.defineProperty不可以(只能对设置和访问监听)

4. Proxy可以监听数组和函数的变化

   const p1 = new Proxy(target,handler)
   

设置使用set监听

set有四个参数：

• target:目标对象(侦听的对象)

• property:将被设置的属性 key

• value：新的属性值

• receiver：调用的代理对象

访问使用get监听

get有三个参数

• target:目标对象（侦听的对象）

• property:被捕获的属性key

• receiver：调用的代理对象

  const obj = {
    username: "code",
    age: 20,
    address: "重庆"
  }
  
  const p1 = new Proxy(obj, {
    set(target, property, value, receiver) {
      target[property] = value
    },
    get(target, property, receiver) {
      return target[property]
    }
  })
  

删除使用 deleteProperty 监听

handler.deleteProperty() 方法用于拦截对对象属性的 delete 操作

语法：

var p = new Proxy(target, {
  deleteProperty: function(target, property) {
  }
});

deleteProperty有两个参数：

• target:目标对象

• propety:待删除的属性名

  const obj = {
    username: "code",
    age: 20,
    address: "重庆"
  }
  
  const p1 = new Proxy(obj, {
    set(target, property, value, receiver) {
      target[property] = value
    },
    get(target, property, receiver) {
      return target[property]
    },
    deleteProperty(target, property) {
      console.log("删除成功")
      delete target[property]
    }
  })
  

Reflect

Reflect (反映) 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与 proxy handler (en-US) 的方法相同。Reflect 不是一个函数对象，因此它是不可构造的。

Reflect 的所有属性和方法都是静态的（就像 Math 对象）。

    const obj = {
      name: 'why',
      age: 18
    }

    const objProxy = new Proxy(obj, {
      set(target, prop, newvalue, receiver) {

        const isSuccess = Reflect.set(target, prop, newvalue, receiver)
        if (isSuccess) {
          console.log(prop, "修改成功")
        } else {
          console.log(prop, "修改失败")
        }
      },

      get(target, props, receiver) {
        return target[props]
      }

    })
    objProxy.name = 'kobe'
    console.log(objProxy)

8-Promise

9-正则表达式

RegExp （Regular Expression）

专门用来验证字符串是否符合规则

从字符串里面获取一部分符合规则的内容

创建正则表达式

1. 字面量形式创建

:::
const reg = /abcd/
:::

2. 内置构造函数创建

:::
const reg = new RegExp(“abcd”)
:::

正则表达式方法

1. 匹配：验证字符串是不是符合正则规则

语法：正则.test(你要检测的字符串)

    const reg = /abc/
    console.log(reg.test("abc123"))  // true

2. 捕获：从字符串里面获取正则规则的那一部分片段

语法：正则.exec(“字符串”)

    const reg = /abc/
    console.log(reg.exec("abc"))

元字符-基础元字符

组成正则的基本符号

1. \s 表示一个空格

2. \S 表示一个非空格

3. \t 表示一个制表符

4. \d 表示一个数字

5. \D 表示一个非数字

6. \w 表示需要一个数字或字母或者下划线

7. \W 表示除了一个数字或字母或者下划线 以外的字符

8. . 点 表示非换行

元字符-边界元字符

1. ^ 表示字符串开始

2. $ 表示字符串结束

元字符-限定符

写在普通元字符或者字母符号的后面

修饰前面一个符号的出现次数

1. * 星号 表示出现 0 —— 多次

2. • 加号 表示出现 1 ——多次

3. ? 问号 表示出现0 —— 1 次

4. {n} 指定出现 n 次

5. {n,} 指定出现 n 到多次

6. {n,m} 指定出现 n 到 m 次

正则表达式的贪婪和非贪婪

在限定符后面加上?就是非贪婪

元字符-特殊字符

1. () 表示一个整体

2. | 表示左边或者右边的都行

3. []表示符合里面的一个就行

4. [^] 非里面的任意一个就行

5. - 中划线 使用在 [] 里面的一个符号 表示 从 那 到 那

特殊说明：当点出现在 [] 或者 [^] 里面的时候 表示一个 点文本

正则表达式-标识符

标识符是写在正则表达式的外面

1. i 作用：忽略大小写

2. g 作用：全局

3. y 作用：粘性全局

10-事件轮询

宏任务开始到宏任务结束

宏任务是一次执行一个，微任务是到微任务就把微任务里面的所有执行完，才到宏任务