JavaScript常用知识点

最新推荐文章于 2024-04-29 17:54:33 发布

不是很菜

最新推荐文章于 2024-04-29 17:54:33 发布

阅读量289

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_62336865/article/details/129861776

版权

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

闭包的作用：

保护变量私有化

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

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

利用闭包函数访问

闭包的特点：

保护变量私有化

优点：不会污染全局

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

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

优点：不局限于私有变量

缺点：外部访问需要闭包

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

4-对象增强

Object.defineProperty

语法：

Object.defineProperty(obj, prop, descriptor)

参数

obj

要定义属性的对象。

prop

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

descriptor

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

Object.defineProperties

语法：

Object.defineProperties(obj, props)

参数

obj

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

props

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

5-对象和函数原型

对象原型

获取对象原型语法：

对象.__proto__
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常见的方法

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

对象的属性，而Proxy监听的是对象本身
使用Object.definProperty需要遍历对象的每个属性，而Proxy则直接代理对象，不需要遍历操作
Proxy对新增属性也可以监听，Object.defineProperty不可以(只能对设置和访问监听)
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）

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

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

创建正则表达式

字面量形式创建

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

内置构造函数创建

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

正则表达式方法

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

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

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

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

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

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

元字符-基础元字符

组成正则的基本符号

\s 表示一个空格
\S 表示一个非空格
\t 表示一个制表符
\d 表示一个数字
\D 表示一个非数字
\w 表示需要一个数字或字母或者下划线
\W 表示除了一个数字或字母或者下划线以外的字符
. 点表示非换行

元字符-边界元字符

^ 表示字符串开始
$ 表示字符串结束

元字符-限定符

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

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

* 星号表示出现 0 —— 多次
- 加号表示出现 1 ——多次
? 问号表示出现0 —— 1 次
{n} 指定出现 n 次
{n,} 指定出现 n 到多次
{n,m} 指定出现 n 到 m 次

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

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

元字符-特殊字符

() 表示一个整体
| 表示左边或者右边的都行
[]表示符合里面的一个就行
[^] 非里面的任意一个就行
- 中划线使用在 [] 里面的一个符号表示从那到那

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

正则表达式-标识符

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

i 作用：忽略大小写
g 作用：全局
y 作用：粘性全局

10-事件轮询

宏任务开始到宏任务结束

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

不是很菜

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript常用知识点

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

扫一扫