js高级知识汇总一

news2025/1/15 12:42:33

目录

1.怎么理解闭包?

2.闭包的作用?

3.闭包可能引起的问题?

4.变量提升

5.函数动态参数

 6.剩余参数 ...(实际开发中提倡使用)

7.展开运算符

8.箭头函数

9.解构赋值(数组、对象)

10 创建对象的三种方式

11.实例成员和静态成员

12.内置构造函数

13.Object 静态方法

14 .Array 的实例方法

 15.数组常见方法

16.伪数组转换为真数组 Array.from(伪数组)

17.string相关实例属性和方法


1.怎么理解闭包?

        内层函数+外层函数的变量

2.闭包的作用?

        实现数据私有化,外部也可以访问函数内部的变量

3.闭包可能引起的问题?

        内存泄漏

4.变量提升

仅存在于var声明的变量

1.把所有var声明的变量提升到 当前作用域的最前面

2.只提升声明,不提升赋值

注:

1.变量在未声明即访问的情况下,会报语法错误

2.使用变量在声明前,变量的值为undefined

3.let const 没有变量提升

4.变量提升出现在相同作用域当中

5.实际开发中推荐先声明在访问变量

5.函数提升

函数在声明之前就可以调用

    test()
    function test() {
      console.log('函数被调用了')
    }

1.会把函数声明提升到当前作用域的最前面

2.只提升函数声明,不提升函数调用

3.函数表达式必须先声明和赋值,后调用,否则会报错


    fun()  //-闭包.html:41 Uncaught TypeError: fun is not a function

    var fun = function (){
      console.log('函数表达式')
    }

   // fun() 先声明赋值后调用

5.函数动态参数

1)argument是有一个伪数组,只存在于函数中,无法用pop,push等数组方法

2)arguments的作用是动态获取函数的实参

3)可以通过for循环依次得到传递过来的实参

    // 动态参数求和

    function sum (){
      let sum = 0
      for(let i = 0;i< arguments.length;i++){
        sum+=arguments[i]
      }
      console.log(sum); //10
    }
    sum(1,2,3,4)

 6.剩余参数 ...(实际开发中提倡使用

允许将一个不定数量的参数表示为一个数组,是真数组

function getSum(...other) {
      console.log(other); //[3, 4, 5, 6, 7, 8]
    }
getSum(3,4,5,6,7,8)


 // 剩余参数
    function getSum(a,b,...other) {
      console.log(a,b,other); //3 4 (4) [5, 6, 7, 8]
    }
    getSum(3,4,5,6,7,8)

7.展开运算符

使用场景:求数组最大值(最小值),合并数组

    // 展开运算符
    const arr = [1,2,3,4]
    console.log(...arr) //1 2 3 4
    // 1求数组最大/小值
    console.log(Math.max(...arr)) //4
    console.log(Math.min(...arr)) //1
    // 2合并数组
    const arr2 = [5,6,7]
    console.log([...arr, ...arr2]) //[1, 2, 3, 4, 5, 6, 7]

8.箭头函数

目的:引入箭头函数的目的是更简短的函数写法并且不绑定this,箭头函数的语法比函数表达式更简洁

使用场景:箭头函数更使用于那些本来需要匿名函数的地方

箭头函数没有arguments 动态函数,但是有剩余参数 ...args

    // 箭头函数
    const fuc = (a,b) => {
      console.log(a,b) //哈哈 呼呼
    }
    fuc('哈哈','呼呼')

 // 省略括号
    const fuc = a => console.log(a) //哈哈
    fuc('哈哈')

 // 省略return
    const add = x => x+x
    console.log(add(1) ); //2

  // 箭头函数可以直接返回一个对象
    const objFn = (uname) => ({name:uname}) 
    console.log( objFn('张三')); //{name: '张三'}

9.解构赋值(数组、对象)

    // 数组结构
    const [a, b, c] = [1, 2, 3]
    console.log(a, b, c);

    const [a1, b1, ...c1] = [1, 2, 3, 4, 5]
    console.log(a1, b1, c1);  //1 2 (3) [3, 4, 5]

  // 设置默认值
    const [a2, b2, c2, d2='444'] = [1, 2, 3]
    console.log(a2, b2, c2, d2); //1 2 3 '444'
    // 对象解构
    const { uname, age } = { uname:'zs', age:18 } 
    console.log(uname, age); //zs 18

    // 可以将变量名重新更改
    const { uname:username, age:uage } = { uname:'ls', age:18 } 
    console.log(username, uage); //zs 18

 // 解构数组对象
    const pig = [
      {
        weight:200,
        height:50
      }
    ] 
    const [{weight, height}] = pig
    console.log(weight, height); //200 50

// 解构对象多级嵌套
    const animal = {
      name:'猫咪',
      family:{
        name1:'小小'
      }
    }
  const {name, family:{name1}} = animal
  console.log(name, name1); //猫咪 小小

10 创建对象的三种方式

1.利用对象字面量

const o = {
    name=''zs
}

2.利用new Object 创建对象

const o = new Object({ name: 'zs' })
console.log(o)  //{name: 'zs'}

3.利用构造函数创建对象

        构造函数:是一种特殊的函数,主要用来初始化对象

        使用场景:常规的{...} 语法允许创建一个对象。比如我们创建了zs的对象,继续创建ls的对象还需要重新写一遍,此时可以通过构造函数来快速创建多个类似的对象。

 // 构造函数创建对象

  function Person (name, age, gender){
    this.name = name
    this.age = age
    this.gender = gender
  }
  const Zs = new Person ('zs', 8, '男')

约定:命名以大写字母开头;只能由 “new” 操作符来执行

说明:

1.使用new关键字调用函数的行为被称为实例化

2.实例化构造函数时没有参数时可以省略()

3.构造函数内部无需写return, 返回值即为新创建的对象、、

4.构造函数内部的return返回的值无效,所以不要写return

5.new Object()  new Date() 也是实例化构造函数

11.实例成员和静态成员

通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员(实例属性和实例方法)

说明:1)为构造函数传入参数,创建结构相同但值不同的对象 2)构造函数创建的实例对象彼此独立互不影响

静态成员:构造函数的属性和方法被称为静态成员(静态属性和静态方法)

functionn Person (){
    //省略实例成员
}

//静态成员
Person.eyes = 2 

//静态方法
Person.sayHi = function () {
    //this 指向Person
    console.log(this.eyes)
}

12.内置构造函数

引用类型:Object Array RegExp Date

包装类型:Sting Number Boolean

13.Object 静态方法

// Object方法
  const cat ={ name:'花花', age:3 }
  // 获取所有的属性名
  console.log(Object.keys(cat))  // ['name', 'age']
  // 获得所有的属性值
  console.log(Object.values(cat)); // ['花花', 3]
  // 对象拷贝 使用场景 给对象添加属性
  const obj= {}
  Object.assign(obj, cat)
  console.log(obj); //{name: '花花', age: 3}

14 .Array 的实例方法

// Array 实例化方法 reduce
  const testArr = [1,2,3,4]
  // 1没有初始值
  // const total = testArr.reduce(function(prev, current){
  //   return prev+current
  // })
  // console.log(total) //10
  // 2有初始值
  // const total = testArr.reduce(function(prev, current){
  //   return prev+current
  // },10)
  // console.log(total) //20
  // 3箭头函数
  // const total = testArr.reduce((prev,current) => prev+current)
  const total = testArr.reduce((prev,current) => prev+current,10)
  console.log(total) //10  ----20

 15.数组常见方法

 

16.伪数组转换为真数组 Array.from(伪数组)

17.string相关实例属性和方法

 // 将字符串转换为数组
  const sstr = '我爱,中国'
  const arrStr = sstr.split(',')
  console.log(arrStr); //['我爱', '中国']
 // 字符串截取
  const r = '今天是下雨天'
  // substring(开始索引号,结束索引号)
  // 如果省略了结束索引号,默认取到最后
  console.log(r.substring(2,5)); //是下雨
  console.log(r.substring(1)); //天是下雨天

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一文总结动态规划

动态规划 一、背包问题1 问题定义2 问题分类3 解题模板01背包最值问题剩余背包问题 4 例题分析LeetCode1049.最后一块石头的重量II 二、区间动态规划1 解题模板2 例题分析牛客.石子合并 总结与分析 一、背包问题 1 问题定义 如何确定一个题目是否可以用背包问题解决 背包问题…

给儿童使用护眼台灯怎么样选择更好?专家建议孩子买台灯

随着娃越长越大&#xff0c;虽然还在读幼儿园&#xff0c;但平时免不了要写写画画&#xff0c;之前一直在这个桌子上&#xff0c;台灯是一个赠送的LED货色&#xff0c;那个频闪啊&#xff0c;于是趁着当地商场活动先入了张学习桌椅&#xff0c;至于台灯嘛当然要选个好的了&…

21财经专访徐亚波博士:AI恒纪元时代,数说故事踏浪新征途

21世纪经济报道【创业投资】栏目&#xff0c;一直致力于寻找中国最有生命力和创造力的快速成长公司&#xff0c;探秘其背后的新兴资本推动力。为此&#xff0c;数说故事创始人兼CEO徐亚波博士接受了21世纪经济报道的专访。 近年来&#xff0c;大数据产业已经成为推动数字经济发…

【C语言】都玩过三子棋游戏把,但你知道怎么用C语言实现三子棋游戏吗?让我来手把手教你。

三子棋游戏 1.前言2.功能分析2.1主函数设计及菜单设计2.2打印棋盘与棋盘初始化2.3玩家下棋2.4电脑下棋2.5判断输赢 3.game.h头文件展示4.text.c源文件文件展示5.game.c源文件文件展示 所属专栏&#xff1a;C语言 博主首页&#xff1a;初阳785 代码托管&#xff1a;chuyang785 感…

Android 开发中高阶函数的 10 个实例

Android 开发中高阶函数的 10 个实例 Kotlin 是一种现代编程语言&#xff0c;由于其表现力、简洁性和多功能性而变得越来越流行。它的关键特性之一是支持高阶函数&#xff0c;这使您可以编写更简洁、更灵活的代码。高阶函数是一种将一个或多个函数作为参数或返回一个函数作为结…

python+java+nodejs基于vue的企业人事工资管理系统

根据系统功能需求分析&#xff0c;对系统功能的进行设计和分解。功能分解的过程就是一个由抽象到具体的过程。 作为人事数据库系统&#xff0c;其主要实现的功能应包括以下几个模块&#xff1a; 1.登录模块 登录模块是由管理员、员工2种不同身份进行登录。 2.系统管理模块 用户…

工具抓包Charles配置HTTPS步骤

charles抓取HTTPS设置&#xff0c;详细踩坑版 写这篇文章的背景就是&#xff0c;每次我在一台新电脑上用charles抓包时&#xff0c;总是因为各种原因无法抓到https请求&#xff0c;每个百度出来的回答又不是那么详细&#xff0c;需要通过几篇回答才能解决过程中的各种问题&…

C++程序员的职业前景怎么样?来谈谈我自己的想法

我之前提到了程序员在二线城市的大概待遇。今天&#xff0c;我要说一下普通程序员的职业前景。因为最初阶段的工资可能比较高&#xff0c;但如果没有可持续性&#xff0c;这就不是一个特别好的工作。 从我自身的经验来看&#xff0c;我们公司的程序员主要有两条路线。一条是纯…

【存储数据恢复】NetApp存储WAFL文件系统数据恢复案例

存储数据恢复环境&#xff1a; NetApp存储设备&#xff0c;WAFL文件系统&#xff0c;底层是由多块硬盘组建的raid磁盘阵列。 存储故障&#xff1a; 工作人员误操作导致NetApp存储内部分重要数据被删除。 存储数据恢复过程&#xff1a; 1、将存储设备的所有磁盘编号后取出&…

软考A计划-常用公式复习

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&am…

使用Nginx做反向代理

使用Nginx做反向代理 文章目录 使用Nginx做反向代理代理HTTP请求代理HTTPS请求举个大栗子 代理HTTP请求 按照以下步骤使用Nginx做反向代理&#xff1a; 编辑 Nginx 的配置文件。默认情况下&#xff0c;Nginx 的配置文件位于 /etc/nginx/nginx.conf。 sudo nano /etc/nginx/ngi…

1703_LibreOffice常用功能使用体验

全部学习汇总&#xff1a; GreyZhang/windows_skills: some skills when using windows system. (github.com) 首先需要说明的是我不是一个重度Office用户&#xff0c;甚至算不上一个重度的Office用户。我使用的Office软件最多的功能就是文档编辑&#xff0c;绝大多数时候还是文…

【什么是苹果推信?什么是苹果推?】通过苹果手机Imessage进行信息推送的方式;

如今不少人都在利用苹果手机&#xff0c;重要是装备高端&#xff0c;很少呈现卡机的征象&#xff0c;并且星移斗换快&#xff0c;紧跟互联网期间成长的脚步。苹果手机是火了&#xff0c;谁又能想到另有比它更火的事变出现呢&#xff0c;便是苹果推信。苹果推信主要上风是推信群…

晋商银行“沧海”数据资产管理系统

案例名称 晋商银行“沧海”数据资产管理系统 案例简介 晋商银行“沧海”数据资产管理系统&#xff0c;取自“海纳百川、沧海一粟”之意&#xff0c;即数据如茫茫大海&#xff0c;其价值不可估量。该系统贯穿数据的全生命周期&#xff0c;包括数据多维度描述、数据…

期末复习自用--python

前言 python的优点&#xff1a; 简洁&#xff0c;语法优美&#xff0c;简单易学&#xff0c;开源&#xff0c;可移植性好&#xff0c;拓展性好&#xff0c;类库丰富&#xff0c;通用灵活&#xff0c;模式多样&#xff0c;良好的中文支持。 python的缺点&#xff1a; 执行效率不…

1.信息的表示和处理

基础 进制转换 字数据大小 寻址和字节顺序&#xff08;大小端&#xff09; 01 23 45 67 大端法&#xff1a;最高有效字节&#xff08;01&#xff09;在最前面&#xff08;相当于正序&#xff09; 小端法&#xff1a;最低有效字节&#xff08;67&#xff09;在最前面&#xff0…

Ceph入门到精通-CrushMap算法概述

下面是伪代码object到osd的伪代码 locator =object_name obj_hash =hash(locator) pg =obj_hash %num_pg OSDs_for_pg =crush(pg) # returns a list of OSDs primary =osds_for_pg[0] replicas =osds_for_pg[1:] defcrush(pg): all_osds=[osd.0,osd.1,osd.2,...] resu…

【Linux内核解析-linux-5.14.10-内核源码注释】内核常用链表宏解释

1、list_for_each_entry_safe 这段代码是一个宏定义&#xff0c;用于遍历一个链表中所有的元素&#xff0c;并且在遍历过程中可以安全地删除元素。具体来说&#xff0c;这个宏定义的功能是&#xff1a; 遍历链表中所有的元素&#xff0c;从头节点开始&#xff0c;直到尾节点结束…

读SQL进阶教程笔记15_SQL编程思维

1. 还原论 1.1. 认为可以把高级现象还原为低级基本现象的学说 1.2. 将复杂的东西看成是由简单单元组合而成的 1.2.1. 以赋值、条件分支、循环等作为基本处理单元&#xff0c;并将系统整体分割成很多这样的单元的思维方式 1.2.2. 文件系统也是将大量的数据分割成记录这样的小…

DOM事件(中)

常见的事件分类&#xff08;了解&#xff09; ●我们在写页面的时候经常用到的一些事件 ●大致分为几类&#xff0c;浏览器事件 / 鼠标事件 / 键盘事件 / 表单事件 / 触摸事件 ●不需要都记住&#xff0c;但是大概要知道 鼠标事件 ●click &#xff1a;点击事件 ●dblclick &a…