前端js进阶，ES6语法，包详细

进阶ES6

作用域的概念加深对js理解

let、const申明的变量，在花括号中会生成块作用域，而var就不会生成块作用域

作用域链本质上就是底层的变量查找机制

作用域链查找的规则是:优先查找当前作用域先把的变量，再依次逐级找父级作用域直到全局作用域。

垃圾回收机制GC

全局变量一般不会回收除非关闭页面，一般情况下局部变量的值，不用了，会被自动回收掉

内存泄漏：程序中分配的内存由于某种原因程序未释放或者无法释放叫做内存泄漏

js垃圾回收—算法说明

在这里插入图片描述

缺点：嵌套引用，如果两个对象相互引用，尽管他们已不再使用，垃圾回收器不会进行回收，导致内存泄漏

在这里插入图片描述

在这里插入图片描述

闭包

  • 简单理解：闭包 = 内层函数 + 外层函数的变量

代码演示：

function outer(){const a = 1function f(){console.log(a)}f()
}
outer()

  • 闭包的作用: 外部也可以访问函数内部的变量

  • 闭包的应用，记录函数被调用的次数

let i = 0
function fn() {i++console.log(`函数被调用了${i}次`)
}
  • 全局变量容易被修改，有风险,修改成闭包的形式
// 统计函数被调用的次数----闭包形式
function count(){let i = 0function fn() {i++console.log(`函数被调用了${i}次`)}return fn
}
const fun = count()

变量提升（只提升声明，不提升赋值）

// 1. 把所有var声明的变量提升到当前作用域的最前面
// 2. 只提升变量名， 不提升赋值
// var num
console.log(num + '件')
var num = 10
// 打印结果为 undefined件

函数进阶

函数提升（只提升声明，不提升赋值）

// 1. 会把所有函数声明提升到当前作用域的最前面
// 2. 只提升函数声明， 不提升函数调用
fn()
function fn(){console.log('函数提升')
}

函数参数

  • 动态参数（箭头函数中没有）
// 计算所有参数的和
function sum(){let s = 0for (let i = 0; i < arguments.length; i++){s += arguments[1]}console.log(s)
}// 调用求和函数
sum(5, 10) // 两个参数
sum(1, 2, 4) // 三个参数

总结：

  1. arguments 是一个伪数组， 只存在于函数中
  2. arguments 的作用是动态的获取函数的实参
  3. 可以通过for 循环依次得到传过来的实参
  • 剩余参数(在函数中使用的时候，不需要加…)

在这里插入图片描述

  1. …是语法符号，置于最末函数形参之前， 用于获取多余的实参
  2. 借助…获取的剩余实参，是个真数组
  • 展开运算符（不会修改原数组）
  1. 典型的使用场景：求数组的最大值
const arr = [1, 2, 3]
console.log(Math.max(...arr)) // 3
  1. 用于合并数组
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = [...arr1, ...arr2]
console.log(arr3) // 1, 2, 3, 4, 5, 6

箭头函数

const fn = () =>{console.log(123)
}
fn()
// 只有一个形参的时候可以省略小括号
const fn = x => {console.log(x)
}
fn(1)
// 只有一行代码的时候， 我们可以省略大括号
const fn = x => console.log(x)
fn(1)
// 只有一行代码，可以省略return
const fn = (x, y) => x + y
console.log(fn(1, 2)) // 3
// 箭头函数可以直接返回一个对象
const fn = (uname) => ({uname: uname})
fn('刘德华')
  • 箭头函数+剩余参数
const getSum = (...arr) =>{let sum = 0for (let i = 0; i < arr.length; i++){sum += arr[i]}return sum
}
const result = getSum(2, 3, 4)
console.log(result) // 9

解构赋值

  • 数组解构
  1. 数组解构是将数组中的单元值，快速的赋值给一系列变量的简洁语法
const arr = [100, 60, 80]
// 数组结构 赋值
const [max, min, avg] = arr
// const max = arr[0]
// const min = arr[1]
// const avg = arr[2]
console.log(max) // 100
console.log(avg) // 80
  1. 可以用于交换变量
let a = 1
let b = 2;   // 这个地方一定要加；不加就报错
[b, a] = [a, b]
console.log(a, b) // 2, 1// 1. 立即执行函数要加
(function () { })();
(function () { })();
// 2. 使用数组的时候
const str = 'pink';
[1, 2, 3].map(function (item) {console.log(item)
})
const [a, b, ...c] = [1, 2, 3, 4]
console.log(a) // 1
console.log(b) // 2
console.log(c) // [3, 4]// 防止undefined 传递
const [a = 0, b = 0] = []
cosnole.log(a) // 0
console.log(b) // 0// 按需求导入，忽略某些值
const [a, b, ,c] = [1, 2, 3, 4]
console.log(a) // 1
cosnole.log(b) // 2
console.log(c) // 4
  • 多维数组的解构

在这里插入图片描述

对象解构

// 对象解构语法(要求声明的变量，必须和属性名相同，并且不能与外部变量名冲突)
const { uname, age } = { uname: 'hello', age: 18}
console.log(uname) // hello
console.log(age) // 18// 修改变量名
const { uname: name1, age } = { uname: 'hello', age: 18}
console.log(name1) // hello
console.log(age) // 18
  • 多级对象解构

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

forEach方法

在这里插入图片描述

深入对象

创建对象的三种方式

在这里插入图片描述

  1. 构造函数来创建对象(用来创建多个类似的对象)
function Pig(name, age, gender) {this.name = namethis.age = agethis.gener = gender
}
// 创建佩奇对象
const Peppa = new Pig('佩奇', 6, '女')
// 创建乔治对象
const George = new Pig('乔治', 3, '男')
  • 构造函数的约定
  1. 他们的命名以大写字母开头
  2. 他们只能用new来操作执行
  • new 实例化执行过程
  1. 创建新对象
  2. 构造函数this指向新对象
  3. 执行构造函数代码，修改this, 添加新的属性
  4. 返回新对象

实例成员&静态成员

实例成员：通过够着函数创建对象称为实例对象，实例对象中的属性和方法称为实例成员（实例属性和实例方法）

静态成员：构造函数的属性和方法被称为静态成员（静态属性和静态方法）

基本包装类型

在这里插入图片描述

内置构造函数

const o = { uname : 'kwh', age : 18}
// 获取所有的属性名
console.log(Object.keys(o))
// 获取所有的属性值
console.log(Object.values(o))const oo = {}
Object.assign(oo, o) // 对象的拷贝

// 数组reduce方法 
// arr.reduce(function(上一次值， 当前值){}, 初始值)
const arr = [1, 5, 8]// 1. 没有初始值
const total = arr.reduce(function (prev, current){return pre + current 
})
console.log(total) // 14// 2. 有初始值(在有初始值的情况下，累加后需要将初始值也一并加上)
const total = arr.reduce(function (prev, current){return prev + current
}, 10)
console.log(total) // 24// 3. 箭头函数的写法
const total = arr.reduce((prev, current) => prev + current, 10)
console.log(total)

在这里插入图片描述

如果遇到对象累加，一定要给初始值，不然prev就是对象中的第一个元素

在这里插入图片描述

在这里插入图片描述

find方法最常用的场景

const arr = [{name: '小米',price: 1999},{name: '华为',price: 3999}
]
// 找出小米这个对象，并且返回这个对象
arr.find(function(item){return item.name === '小米'
})

小案例

const spec = { size: '40cm*40cm', color: '黑色'}
//1. 所有的属性值取过来
console.log(Object.values(spec))
//2. 转换为字符串 join('/')
console.log(Object.values(spec).join('/'))
//3. 展示在页面上
document.querySelector('div').innerHTML = Object.values(spec).join('/')

在这里插入图片描述

在这里插入图片描述

// 判断是不是以某个字符开头
const str = 'pink老师上课中'
console.log(str.startsWith('pink'))

在这里插入图片描述

<body><div></div><script>const gift = '50g的茶叶, 清洗球'// 1. 把字符串拆分为数组// console.log(gift.split(','))// 2. 根据数组元素的个数， 生成 对应 span标签const str = gift.split(',').map(function (item){return `<span>【赠品】${item}</span><br>`}).join('')// console.log(str)document.querySelector('div').innerHTML = str</script>
</body>

// 代码优化
document.querySelecter('div').innerHTML = gift.split(',').map(item => `<span>【赠品】 ${item}</span> <br>`).join('')

Number

toFixed()方法

// 当toFixed方法中不再传递参数的时候，就相当于四舍五入
const num = 10.923
console.log(num.toFixed()) // 11// 当toFixed方法传入参数的时候，小括号内即为限制小数点保留几位
console.log(num.toFixed(2)) // 10.92

深入面相对象

面向过程：分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现

面向对象：把事务分解为一个个对象，然后由对象之间分工与合作

  • 面向对象的特征：
  1. 封装性
  2. 继承性
  3. 多态性

在这里插入图片描述

  • 构造函数

公共的属性和方法封装到Star 构造函数里面了

function Star(uname, age){this.uname = unamethis.age = agethis.sing = function() {console.log('唱歌')}
}
const ldh = new Star('刘德华', 55)
const zxy = new Star('张学友', 58)
  1. js实现面向对象需要借助于谁来实现？
    1. 构造函数
  2. 构造函数存在什么问题？
    1. 在存储复杂数据类型的时候，会出现浪费内存

原型

  • 构造函数通过原型分配的函数是所有对象所共享的。
  • javaScript规定， 每一个构造函数都有一个prototype属性，指向另一个对象，所以我们也称为原型对象
  • 这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存
  • 我们可以把那些不变的方法，直接定义在prootype对象上，这样所有对象的实例就可以共享这些方法
  • 构造函数和原型对象中的this都指向实例化的对象
// 1. 公共的属性卸载构造函数中
function Star(uname, age){this.uname = unamethis.age = age
}
// 2. 公共的方法卸载原型对象身上
Star.prototype.sing = function(){console.log('唱歌')
}
const ldh = new Star('刘德华', 55)
const zxy = new Star('张学友', 58)
console.log(ldh.sing === zxy.sing) // true
  • 构造函数和原型对象中的this都指向实例化的对象

自定义 数组扩展方法 求和 和 最大值

  1. 定义的这个歌方法， 要在任何一个数组实例对象都可以使用
  2. 自定义的方法写到 数组.prototype身上
  3. 求数组中的最大值
const arr = [1, 2, 3]
Array.prototype.max = function () {// 展开运算符return Math.max(...this)// 原型函数里面的this 指向实例对象 arr
}
console.log(arr.max()) // 3
console.log([1, 5, 9].max()) // 9// 求和
Array.prototype.sum = function() {return this.reduce( (prev, item) => prev + item, 0)
}
console.log([1, 2, 3].sum()) // 6

constructor属性

  1. constructor 这个单词的意思就是：构造函数
  2. 每个原型对象里都有个constructor属性
  3. 作用：指向该原型对象的构造函数
console.log(Star.prototype.constructor === Star) // trueStar.prototype = {// 重新指回创造这个原型对象的 构造函数constructor: Star,sing: function(){console.log('唱歌')},dance: function () {console.log('跳舞')}
}
console.log(Star.prototype)

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

IDEA通过Maven使用JBLJavaToWeb插件创建Web项目

IDEA通过Maven使用JBLJavaToWeb插件创建Web项目

第一步&#xff1a;IDEA下载JBLJavaToWeb插件 File--->Settings--->Plugins--->Marketplace搜索: JBLJavaToWeb 第二步&#xff1a;创建普通Maven工程 第三步&#xff1a; 将普通Maven项目转换为Web项目
阅读更多...
在VSCode中接入deepseek

在VSCode中接入deepseek

注册就送14元2000万tokens。 https://cloud.siliconflow.cn/i/rnbA6i6U各种大模型 下面介绍我是如如接入vscode的 左边生成一个key&#xff0c;呆会vscode要用&#xff0c;不然401. 打开vscod&#xff0c;电脑能上网。下插件。 下好要配置 点它一下。 要配置&#xff0c;全…
阅读更多...
Mac端homebrew安装配置

Mac端homebrew安装配置

拷打了一下午o3-mini-high&#xff0c;不如这位博主的超强帖子&#xff0c;10分钟结束战斗 跟随该文章即可&#xff0c;2025/2/19亲测可行 mac 安装HomeBrew(100%成功)_mac安装homebrew-CSDN博客文章浏览阅读10w次&#xff0c;点赞258次&#xff0c;收藏837次。一直觉得自己写…
阅读更多...
安全启动(secure boot)怎么关闭_史上最全的各品牌机和组装机关闭安全启动教程

安全启动(secure boot)怎么关闭_史上最全的各品牌机和组装机关闭安全启动教程

很多网友发现电脑BIOS设置中都有一个secure boot(安全启动)选项&#xff0c;而且一些预装win10或win11改Win7的教程中也有提到要把安全启动关闭&#xff0c;那么我们该怎么关闭安全启动呢&#xff1f;下面教大家各品牌机和组装机关闭安全启动教程。 secure boot该关还是开&…
阅读更多...
C进阶 自定义类型

C进阶 自定义类型

目录 前言 一 结构体 二 结构体的存储 三 位段 四 枚举 五 联合体 总结 前言 我们之前学习的int char double ......都是内置类型&#xff0c;但是我们今天所学习的是自定义类型&#xff0c;比如联合体&#xff0c;结构体&#xff0c;枚举 一 结构体 结构体是一…
阅读更多...
STM32的HAL库开发---ADC采集内部温度传感器

STM32的HAL库开发---ADC采集内部温度传感器

一、STM32内部温度传感器简介 二、温度计算方法 F1系列&#xff1a; 从数据手册中可以找到V25和Avg_Slope F4、F7、H7系列只是标准值不同&#xff0c;自行查阅手册 三、实验简要 1、功能描述 通过ADC1通道16采集芯片内部温度传感器的电压&#xff0c;将电压值换算成温度后&…
阅读更多...
【PyQt5】python可视化开发：PyQt5介绍，开发环境搭建快速入门

【PyQt5】python可视化开发：PyQt5介绍，开发环境搭建快速入门

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…
阅读更多...
Android 串口通信

Android 串口通信

引言 在iot项目中&#xff0c;Android 端总会有和硬件通信。 通信这里&#xff1a;串口通信&#xff0c;蓝牙通信或者局域网通信。 这里讲一下串口通信。 什么是串口&#xff1f; “串口”&#xff08;Serial Port&#xff09;通常是指一种用于与外部设备进行串行通信的接口。…
阅读更多...
跟据spring boot版本，查看对应的tomcat，并查看可支持的tomcat的版本范围

跟据spring boot版本，查看对应的tomcat，并查看可支持的tomcat的版本范围

一 查看springboot自带的tomcat版本&#xff1a; 可直接在项目中找到Maven Dependencies中找到tomcat版本 二、查看SpringBoot内置tomcat版本的支持范围 我这边是跟据maven仓库查看的 首先跟据链接打开maven仓库&#xff1a;https://mvnrepository.com/ 然后搜索&#xff1a…
阅读更多...
磐维数据库双中心容灾流复制集群搭建

磐维数据库双中心容灾流复制集群搭建

1. 架构 磐维数据库PanWeiDB V2.0.0基于gs_sdr工具&#xff0c;在不借助额外存储介质的情况下实现跨Region的异地容灾。提供流式容灾搭建&#xff0c;容灾升主&#xff0c;计划内主备切换&#xff0c;容灾解除、容灾状态监控等功能。 2. 部署双中心磐维集群 2.1. 主集群 角色…
阅读更多...
Spring事务原理 二

Spring事务原理 二

在上一篇博文《Spring事务原理 一》中&#xff0c;我们熟悉了Spring声明式事务的AOP原理&#xff0c;以及事务执行的大体流程。 本文中&#xff0c;介绍了Spring事务的核心组件、传播行为的源码实现。下一篇中&#xff0c;我们将结合案例&#xff0c;来讲解实战中有关事务的易…
阅读更多...
【机器学习】【KMeans聚类分析实战】用户分群聚类详解——SSE、CH 指数、SC全解析，实战电信客户分群案例

【机器学习】【KMeans聚类分析实战】用户分群聚类详解——SSE、CH 指数、SC全解析，实战电信客户分群案例

1.引言 在实际数据分析中&#xff0c;聚类算法常用于客户分群、图像分割等场景。如何确定聚类数 k 是聚类分析中的关键问题之一。本文将以“用户分群”为例&#xff0c;展示如何通过 KMeans 聚类&#xff0c;利用 SSE&#xff08;误差平方和&#xff0c;也称 Inertia&#xff…
阅读更多...
20-R 绘图 - 饼图

20-R 绘图 - 饼图

R 绘图 - 饼图 R 语言提供来大量的库来实现绘图功能。 饼图&#xff0c;或称饼状图&#xff0c;是一个划分为几个扇形的圆形统计图表&#xff0c;用于描述量、频率或百分比之间的相对关系。 R 语言使用 pie() 函数来实现饼图&#xff0c;语法格式如下&#xff1a; pie(x, l…
阅读更多...
搭建 Hadoop 3.3.6 伪分布式

搭建 Hadoop 3.3.6 伪分布式

搭建 Hadoop 3.3.6 伪分布式 IP 192.168.157.132 初始化操作 更改yum源 # 1_1.安装Wget yum install wget# 1_2.备份CentOS-Base.repo文件 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo_bak# 2.下载阿里yum源配置 wget -O /etc/yum.repos.d/Cen…
阅读更多...
python电影数据分析及可视化系统建设

python电影数据分析及可视化系统建设

博主介绍&#xff1a;✌程序猿徐师兄、8年大厂程序员经历。全网粉丝15w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…
阅读更多...
手机壁纸设计中，金属质感字体可以为壁纸增添独特的视觉效果和高端感

手机壁纸设计中，金属质感字体可以为壁纸增添独特的视觉效果和高端感

在手机壁纸设计中&#xff0c;金属质感字体可以为壁纸增添独特的视觉效果和高端感。以下是一些关于金属质感字体在手机壁纸设计中的应用建议和案例分析&#xff1a; 1. 金属质感字体的特点 视觉冲击力强&#xff1a;金属质感字体具有独特的光泽和质感&#xff0c;能够在视觉上…
阅读更多...
使用ezuikit-js封装一个对接摄像头的组件

使用ezuikit-js封装一个对接摄像头的组件

ezuikit-js 是一个基于 JavaScript 的视频播放库&#xff0c;主要用于在网页中嵌入实时视频流播放功能。它通常用于与支持 RTSP、RTMP、HLS 等协议的摄像头或视频流服务器进行交互&#xff0c;提供流畅的视频播放体验。 主要功能 多协议支持&#xff1a;支持 RTSP、RTMP、HLS …
阅读更多...
PHP post 数据丢失问题

PHP post 数据丢失问题

max_input_vars是PHP配置选项之一&#xff0c;用于设置一个请求中允许的最大输入变量数。它指定了在处理POST请求或者通过URL传递的参数时&#xff0c;PHP脚本能够接收和处理的最大变量数量。 max_input_vars的默认值是1000&#xff0c;意味着一个请求中最多可以包含1000个输入…
阅读更多...
jenkins docker容器中安装python3.9环境

jenkins docker容器中安装python3.9环境

在运维过程中&#xff0c;不过避免的需要使用到python&#xff0c;在jenkins 的docker容器中&#xff0c;是没有python环境的&#xff0c;需要我们自己手动安装一下。 查看是否有工具apt-get 直接输入apt-get 然后回车&#xff0c;出现以下内容&#xff0c;表示支持apt-get命令…
阅读更多...
《Spring实战》(第6版) 保护Spring

《Spring实战》(第6版) 保护Spring

第1部分 Spring基础 第4章 使用非关系型数据 关系型数据库一直是首选&#xff0c;近年来"NoSQL"数据库提供了数据存储的不同概念和结构。 SpringData为很多NoSQL数据库提供了支持&#xff0c;包括MongoDB、Cassandra、Couchbase、Neo4j、Redis等&#xff0c;无论选…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023