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

宏任务开始到宏任务结束

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/4651.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring整合

Spring整合6,Spring整合6.1 Spring整合Mybatis思路分析6.1.1 环境准备步骤1:准备数据库表步骤2:创建项目导入jar包步骤3:根据表创建模型类步骤4:创建Dao接口步骤5:创建Service接口和实现类步骤6:添加jdbc.properties文件步骤7:添加Mybatis核心配置文件步骤8:编写应用…

Canny 边缘检测算法-python实现(附代码)

文章目录1、调用opencv进行canny边缘检测2、图像灰度化3、高斯模糊处理4、图像梯度、梯度幅值、梯度方向计算5、NMS(非极大值抑制)6、双阈值的边界选取摘要 : Canny 边缘检测算法由计算机科学家 John F. Canny 于 1986 年提出的。其不仅提供了算法&#…

【Python】更精美的俄罗斯方块开发指南(步骤已写)

文章目录前言一、游戏介绍二、源码剖析1.引入库2.读入数据总结前言 最近想找一些Python相关的游戏开发例子,正好在itch.io上闲逛看到这个俄罗斯方块项目,瞬间被惊艳到了。作者是 Mikhail ,项目(tetris_for_two)地址是: https://g…

数据库原理及应用(四)——SQL语句(2)SQL基础查询以及常见运算符

一、SELECT语句基础 数据库查询是数据库的核心操作&#xff0c;SELECT 语句用于从数据库中选取数据。 SELECT [ALL/DISTINCT] <列名>,<列名>...FROM <表名或视图名>,<表名或视图名>[WHERE <条件表达式>][GROUP BY <列名1> [HAVING <条…

Jetpack compose:炫酷的按钮点击效果

Jetpack compose&#xff1a;炫酷的按钮点击效果 屏幕的每个组件在与用户交互时都有其给用户反馈的方式。例如&#xff0c;当用户触摸 Toggle 按钮时&#xff0c;它会更改其状态以响应交互。这种交互给用户一种感觉。 在此博客中&#xff0c;我们将实现一些自定义点击效果&…

Air700E开发板|移芯EC618|4G Cat.1模组:概述及PinOut

文章目录基础资料概述主要功能外设分布PinOut&#xff08;管脚定义&#xff09;管脚功能说明固件升级正常开机模式&#xff1a;下载模式&#xff1a;IO 电平选择基础资料 Air700E文档中心 概述 EVB-Air700E 开发板是合宙通信推出的基于 Air700E 模组所开发的&#xff0c;包含…

AI遮天传 NLP-词表示

本文重点在第三部分“词嵌入”及对Word2vec的介绍&#xff0c;前面的知识主要用于小白对词表示和一些定义、名称的理解&#xff0c;和对一些方法不足的思考。一、词表示1.1 词表示的定义词表示是一种将自然语言中的词转换为机器可理解含义的过程其中意思&#xff08;meaning&am…

Docker之安装Docker

安装Docker1. Docker 基本组成2. 安装Docker3. 阿里云镜像加速4. 底层原理1. Docker 基本组成 镜像&#xff08;image&#xff09; docker 镜像就好比是一个模板&#xff0c;可以同通过这个模板来创建容器服务&#xff0c;如&#xff1a;tomcat 镜像 > run > tomcat1 容器…

网络技术这十个术语你知道吗?

你好&#xff0c;这里是网络技术联盟站。 网络技术术语是指在计算机网络领域中所使用的专业术语。由于计算机技术的快速发展&#xff0c;网络技术术语也在不断地更新和发展。本文将对网络技术术语进行一些介绍和解释&#xff0c;以帮助读者更好地了解和掌握网络技术。 一、协…

内网Nexus代理yum、epel 源私有仓库 + 内网设备配置(centos)

一、准备 一些常用的镜像开源站 yum: 阿里开源镜像源&#xff1a;http://mirrors.aliyun.com/centos 网易开源镜像站&#xff1a;http://mirrors.163.com/ Centos社区镜像站&#xff1a;http://mirror.centos.org/centos/ 中科大开源镜像站&#xff1a;http://centos.ustc.edu…

Web3中文|World ID与GPT-4同时上线,OpenAI创始人的另一场探险?

这两天GPT-4的到来&#xff0c;再次成为朋友圈及媒体热议的话题。此次升级、更新让大家看到了AI给科技和社会带来的潜在挑战性甚至革命性。在赞叹AI迅速发展的同时&#xff0c;也让人再次聚焦关注其背后拥有超强开发和创新能力的OpenAI团队。 令人刮目相看的是&#xff0c;由A…

JMeter使用教程

作为一名开发工程师&#xff0c;当我们接到需求的时候&#xff0c;一般就是分析需要&#xff0c;确定思路&#xff0c;编码&#xff0c;自测&#xff0c;然后就可以让测试人员去测试了。在自测这一步&#xff0c;作为开发人员&#xff0c;很多时候就是测一下业务流程是否正确&a…

【JAVA程序设计】(C00125)基于Springboot的人事管理系统

基于Springboot的人事管理系统项目简介项目获取开发环境项目技术运行截图项目简介 基于Springboot框架开发的人事管理系统共分为四个角色&#xff1a;系统管理员、财务专员、人事专员、普通用户 管理员角色包含以下功能&#xff1a; 管理员拥有所有功能&#xff1a;绩效考核&a…

华为OD机试题,用 Java 解【叠放书籍】问题 | 含解题说明

华为Od必看系列 华为OD机试 全流程解析+经验分享,题型分享,防作弊指南华为od机试,独家整理 已参加机试人员的实战技巧华为od 2023 | 什么是华为od,od 薪资待遇,od机试题清单华为OD机试真题大全,用 Python 解华为机试题 | 机试宝典本篇题目:叠放书籍 题目 书籍的长宽都是…

RabbitMQ中死信队列和延迟队列

目录一、死信队列1.过期时间代码实现2.长度限制代码实现3.测试消息拒收4.死信队列小结二、延迟队列1.代码实现1.1 生产者1.2 生产者一、死信队列 死信队列&#xff0c;英文缩写&#xff1a;DLX 。Dead Letter Exchange&#xff08;死信交换机&#xff09;&#xff0c;当消息成…

Makefile第三课:C语言的编译

目录C语言的编译前言1.Fundamental Compiling2.Comiling C2.1 Preprocessing2.2 Generating Assembly Language2.3 Source File to Object File2.4 Single Source to Executable2.5 Multiple Sources to Executable3.Creating a Static Library4.Creating a Shared Library5.总…

贯穿设计模式第二话--开闭职责原则

&#x1f973;&#x1f973;&#x1f973; 茫茫人海千千万万&#xff0c;感谢这一刻你看到了我的文章&#xff0c;感谢观赏&#xff0c;大家好呀&#xff0c;我是最爱吃鱼罐头&#xff0c;大家可以叫鱼罐头呦~&#x1f973;&#x1f973;&#x1f973; 从今天开始&#xff0c;将…

java基础学习——字符流

1.为什么会出现字符流&#xff1a; 由于字节流 操作中文不是特别的方便&#xff0c;所以java就提供字符流 字符流字节流编码表 用字节流复制文本文件时&#xff0c;文本文件也会有中文&#xff0c;但是没有问题&#xff0c;原因是最终底层操作会自动进行字节拼接成中文&#xf…

摄影入门 | 相机的基本原理

一、获取图像——小孔成像实验 小孔成像实验中&#xff0c;点燃蜡烛&#xff0c;会在小孔另一面的白纸上看到一个倒立的烛焰。 此现象可以用来解释物理学原理&#xff1a;光在同种均匀介质中&#xff0c;在不受引力作用干扰的情况下沿直线传播。 这样&#xff0c;我们就用一种…

从零开始搭建游戏服务器 第一节 创建一个简单的服务器架构

目录引言技术选型正文创建基础架构IDEA创建项目添加Netty监听端口编写客户端进行测试总结引言 由于现在java web太卷了&#xff0c;所以各位同行可以考虑换一个赛道&#xff0c;做游戏还是很开心的。 本篇教程给新人用于学习游戏服务器的基本知识&#xff0c;给新人们一些学习…
最新文章