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中一个函数,如果访问了外层作用域的变量,那它就是一个闭包

image

image

闭包的作用:

  1. 保护变量私有化

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

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

利用闭包函数访问

闭包的特点:

  1. 保护变量私有化

优点:不会污染全局

缺点:外部不能访问,需要闭包函数

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

优点:不局限于私有变量

缺点:外部访问需要闭包

最大的缺点:一个不会被销毁的函数空间 (内存泄漏)

4-对象增强

Object.defineProperty

语法:

Object.defineProperty(obj, prop, descriptor)

参数

obj

要定义属性的对象。

prop

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

descriptor

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

image

image

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"] ])

image

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/
:::

  1. 内置构造函数创建

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

image

正则表达式方法

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

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

    const reg = /abc/
    console.log(reg.test("abc123"))  // true
  1. 捕获:从字符串里面获取正则规则的那一部分片段

语法:正则.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 —— 多次

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

  3. {n} 指定出现 n 次

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

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

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

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

元字符-特殊字符

  1. () 表示一个整体

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

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

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

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

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

正则表达式-标识符

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

  1. i 作用:忽略大小写

  2. g 作用:全局

  3. y 作用:粘性全局

10-事件轮询

image

宏任务开始到宏任务结束

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

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小寻己

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值