js ES6 part1

听了介绍感觉就是把js在oop的使用

作用域

作用域(scope)规定了变量能够被访问的“范围”,离开了这个“范围”变量便不能被访问,

作用域分为: 局部作用域、 全局作用域

1. 函数作用域:

在函数内部声明的变量只能在函数内部被访问,外部无法直接访问。

1. 函数内部声明的变量,在函数外部无法被访问
2. 函数的参数也是函数内部的局部变量
3. 不同函数内部声明的变量无法互相访问
4. 函数执行完毕后,函数内部的变量实际被清空了

2. 块作用域:

在JavaScript中使用{ }包裹的代码称为代码块,代码块内部声明的变量外部将 有可能 无法被访问。

1. let 声明的变量会产生块作用域,var 不会产生块作用域
2. const 声明的常量也会产生块作用域
3. 不同代码块之间的变量无法互相访问
4. 推荐使用 let 或 const

1.2 全局作用域

<script> 标签  和 .js 文件 的【最外层】就是全局作用域,在此声明的变量在函数内部也可以被访问。 全局作用域中声明的变量,任何其它作用域都可以被访问。 
注意:
1. 为 window 对象动态添加的属性默认也是全局的,不推荐!
2. 函数中未使用任何关键字声明的变量为全局变量,不推荐!!!
3. 尽可能少的声明全局变量,防止全局变量被污染
JavaScript 中的作用域是程序被执行时的底层机制,了解这一机制有助于规范代码书写习惯,避免因作用域导致的语法错误。

1.3 作用域链

作用域链本质上是底层的 变量查找机制 。
在函数被执行时,会 优先查找当前 函数作用域中查找变量。如果当前作用域查找不到则会依次 逐级查找父级作用域 直到全局作用域。

1. 嵌套关系的作用域串联起来形成了作用域链
2. 相同作用域链中按着 从小到大 的规则查找变量
3. 子作用域能够访问父作用域,父级作用域无法访问子级作用域

垃圾回收机制

2.内存的生命周期
JS环境中分配的内存, 一般有如下生命周期:
1. 内存分配 :当我们声明变量、函数、对象的时候,系统会自动为他们分配内存
2. 内存使用 :即读写内存,也就是使用变量、函数等
3. 内存回收 :使用完毕,由垃圾回收自动回收不再使用的内存
 说明:全局变量一般不会回收(关闭页面回收); 一般情况下局部变量的值不用了, 会被自动回收
————————————————

但如果不了解JS的内存管理机制,我们同样非常容易成内存泄漏(内存无法被回收)的情况。
不再用到的内存,没有及时释放, 就叫做 内存泄漏。

和c/cpp相同,栈和堆

浅拷贝和深拷贝

引用计数
标记清除

闭包closure

概念:一个函数对周围状态的引用捆绑在一起,内层函数中访问到其外层函数的作用域
简单理解: 闭包 =  内层函数 + 外层函数的变量
闭包作用: 封闭数据,提供操作,外部也可以访问函数内部的变量

    // 简单的写法function outer() {let a = 10function fn() {console.log(a)}fn()}outer()===fn===function fn(){}

 是外部需要调用内部的函数,而不是获取这个函数的值

 实现数据的私有,非常好闭包,class private:

 内存泄漏的可能

变量提升

变量提升是 JavaScript 中比较“奇怪”的现象,它允许在变量声明之前即被访问(仅存在于  var  声明变量)
注意:
1. 变量在未声明即被访问时会报语法错误
2. 变量在var声明之前即被访问,变量的值为 undefined
3. let/const 声明的变量不存在变量提升
4. 变量提升出现在相同作用域当中
5. 实际开发中推荐先声明再访问变量
说明:
JS初学者经常花很多时间才能习惯变量提升,还经常出现一些意想不到的bug,正因为如此,ES6 引入了块级作用域,用let 或者 const声明变量,让代码写法更加规范和人性化。
变量提升的流程:
1. 先把var 变量提升到当前作用域于最前面
2. 只提升变量声明, 不提升变量赋值
3. 然后依次执行代码
不建议使用var声明

 

 underfinedworld!

函数进阶

函数提升与变量提升比较类似,是指函数在声明之前即可被调用。

动态参数 

  <script>function getSum() {// arguments 动态参数 只存在于 函数里面// 是伪数组 里面存储的是传递过来的实参// console.log(arguments)  [2,3,4][1, 2, 3, 4, 2, 2, 3, 4]let sum = 0for (let i = 0; i < arguments.length; i++) {sum += arguments[i]}console.log(sum)}getSum(2, 3, 4)getSum(1, 2, 3, 4, 2, 2, 3, 4)</script>

1. arguments 是一个 伪数组 ,只存在于函数中
2. arguments 的作用是 动态获取函数的实参

剩余参数

剩余参数允许我们将一个不定数量的参数表示为一个数组

剩余参数主要的使用场景: 用于获取多余的实参

  <script>function getSum(...arr) {console.log(arr)  // 使用的时候不需要写 ...}getSum(2, 3)  // [2,3]getSum(1, 2, 3, 4, 5)  // [1,2,3,4,5]</script>
  <script>function getSum(a, b, ...arr) {console.log(arr)  // 使用的时候不需要写 ...}getSum(2, 3)  // []getSum(1, 2, 3, 4, 5)  // [3,4,5]</script>

1. ... 是语法符号,置于最末函数形参之前,用于获取 多余 的实参
2. 借助 ... 获取的剩余实参,是个 真数组
剩余参数和动态参数区别: 动态参数是伪数组,剩余参数是真数组
开发中,还是提倡多使用 剩余参数

展开运算符

展开运算符(…),将一个数组进行展开,不会修改原数组

典型运用场景: 求数组最大值(最小值)、合并数组等

对于求最大值,有Math.max()这一方法,但是只是用于string求max,对于数组无法识别,因此用展开运算符

const arr=[1,2,1,5,1,1,2,6,5,9]
console.log(...arr)
console.log(Math.max(...arr))//9console.log(Math.min(...arr))//1

log括号内可以打印多个参数,用逗号隔开,打印结果就是多个参数是在控制台用空格隔开 

对于合并数组,

const arr1=[1,2,3]
const arr2 = [4, 5]const arr = [...arr1, ...arr2]console.log(arr)    // [1,2,3,4,5]

箭头函数

引入箭头函数的目的是更简短的函数和不用this,更实用于需要匿名函数的地方

基本语法
const fn=()=>{console.log(123)
}
fn()
//123const fn=(x)=>{console.log(x)
}
fn(1)
只有一个形参可以省略小括号
const fn= x =>{console.log(x)
}
fn(1)只要一行代码可以省略大括号
const fn = x => console.log(x)
fn(1)只有一行代码可以省略return
const fn=x=>x+x
console.log(fn(1))const fn=(x,y)=>x+y
console.log(fn(1,2))加括号的函数体返回对象字面量,加:
const fn =(uname)=>({name:uname})
console.log(fn('kobe'))
直接返回对象

箭头函数属于表达式函数,因此不存在函数提升 

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

  <script>// 1. 利用箭头函数来求和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</script>
this指向问题
  <script>// 以前this的指向:  谁调用的这个函数,this 就指向谁// console.log(this)  // window// // 普通函数// function fn() {//   console.log(this)  // window// }// window.fn()// // 对象方法里面的this// const obj = {//   name: 'andy',//   sayHi: function () {//     console.log(this)  // obj//   }// }// obj.sayHi()// 2. 箭头函数的this  是上一层作用域的this 指向// const fn = () => {//   console.log(this)  // window// }// fn()// 对象方法箭头函数 this// const obj = {//   uname: 'pink老师',//   sayHi: () => {//     console.log(this)  // this 指向谁? window
//因为箭头函数没有this 是从当前作用域的上一层作用域this 的指向 sayHi的上一层是obj 
//obj的谁调用 this就指向谁 是window调用 所以是window//   }// }// obj.sayHi()const obj = {uname: 'pink老师',sayHi: function () {console.log(this)  // objlet i = 10const count = () => {console.log(this)  // obj }count()}}obj.sayHi()实在看不出箭头函数内的this指向谁,就把它换成普通函数试一下,
找到普通函数的this后再往上找一级就好了</script>

箭头函数不会创建自己的this,他只会从自己的作用域链上一级沿用this

在开发中使用箭头函数要考虑函数的this的值,事件回调函数使用箭头函数,this是全局的window,因此DOM回调函数为了简便,不是很推荐箭头函数

解构赋值

 

数组解构

将数组的单元值快速批量赋值给一系列变量的简介语法

const arr=[100,60,80]
const [max,min,avg]=[100,60,80]
交换变量
let a=1
let b=2;[b,a]=[a,b]

 

 1.立即执行函数要加(function ( })() //(function ( })()  2、使用数组的时候const arr = [1, 2, 3] const str ='pink';
[1, 2, 3].map(function (item){ console.log(item)
])let a =1
let b=2
;[b, a] = [a, b] console.log(a, b) 
const [a,b,c,d]=[1,2,3]
console.log(a) //1
console.log(b) //2
console.log(c) //3
console.log(d) //underfined
const [a,b...c]=[1,2,3,4]
console.log(a)//1
console.log(b)//2
console.log(c)//[3,4]
const [a='手机',b='华为']=['小米']
console.log(a)//小米
console.log(b)//华为
const[a,b,,d]=[1,2,3,4]
console.log(a)//1
console.log(b)//2
console.log(d)//4

多维数组解构 

对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法。

1. 基本语法:
1. 赋值运算符 = 左侧的 {} 用于批量声明变量,右侧对象的属性值将被赋值给左侧的变量
2. 对象属性的值将被赋值给与属性名 相同的 变量
3. 注意 解构的变量名不要和外面的变量名冲突 否则报错
4.对象中找不到与变量名一致的属性时变量值为 undefined

  <script>// 对象解构const obj = {uname: 'pink老师',age: 18}//  解构的语法const { uname, age } = {age: 18, uname: 'pink老师' }// 等价于 const uname =  obj.uname// 要求属性名和变量名必须一直才可以console.log(uname)console.log(age)</script>
  <script>// 1. 对象解构的变量名 可以重新改名  旧变量名: 新变量名const { uname: username, age } = { uname: 'pink老师', age: 18 }console.log(username)console.log(age)</script>
  <script>// 2. 解构数组对象const pig = [{uname: '佩奇',age: 6}]const [{ uname, age }] = pigconsole.log(uname)console.log(age)</script>
  <script>const pig = {name: '佩奇',family: {mother: '猪妈妈',father: '猪爸爸',sister: '乔治'},age: 6}// 多级对象解构const { name, family: { mother, father, sister } } = pigconsole.log(name)console.log(mother)console.log(father)console.log(sister)const person = [{name: '佩奇',family: {mother: '猪妈妈',father: '猪爸爸',sister: '乔治'},age: 6}]const [{ name, family: { mother, father, sister } }] = personconsole.log(name)console.log(mother)console.log(father)console.log(sister)</script>

侧面反映出数组是有序的,对象是无序的 

159对象解构20.00-32.38

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

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

相关文章

《梦醒蝶飞:释放Excel函数与公式的力量》10.1.1函数简介

10.1.1函数简介 BIN2DEC函数是Excel中用于将二进制数转换为十进制数的函数。它在处理二进制数时非常有用&#xff0c;尤其是在电子工程、计算机科学等领域。 10.1.2函数语法&#xff1a; BIN2DEC(number) number&#xff1a;这是要转换的二进制数&#xff0c;必须是以字符串…

智慧之旅不止步!凌恩生物6月客户文章累计IF>531!

2024年6月&#xff0c;凌恩生物助力客户发表文章75篇&#xff0c;累计影响因子531.8分&#xff0c;其中包括Nature Microbiology、Nature Communications、Microbiome、Chemical Engineering Journal、Journal of Hazardous Materials、Water Research等期刊文章。此次收录的文…

激光干涉仪可以完成哪些测量:全面应用解析

在高端制造领域&#xff0c;精度是衡量产品质量的关键指标之一。激光干涉仪作为一项高精度测量技术&#xff0c;其应用广泛&#xff0c;对于提升产品制造精度具有重要意义。 线性测量&#xff1a;精确定位的基础 激光干涉仪采用迈克尔逊干涉原理&#xff0c;实现线性测量。该…

Spark SQL中的正则表达式应用

正则表达式是一种强大的文本处理工具,在Spark SQL中也得到了广泛支持。本文将介绍Spark SQL中使用正则表达式的主要方法和常见场景。 目录 1. 正则表达式函数1.1 regexp_extract1.2 regexp_replace1.3 regexp_like 2. 在WHERE子句中使用正则表达式3. 在GROUP BY中使用正则表达…

【光伏仿真系统】光伏设计的基本步骤

随着全球对可再生能源需求的不断增长&#xff0c;光伏发电作为一种清洁、可再生的能源形式&#xff0c;正日益受到重视。光伏设计是确保光伏系统高效、安全、经济运行的关键环节&#xff0c;它涉及从选址评估到系统安装与维护的全过程。本文将详细介绍光伏设计的基本步骤&#…

【STM32/HAL】嵌入式课程设计:简单的温室环境监测系统|DS18B20 、DHT11

前言 板子上的外设有限&#xff0c;加上想法也很局限&#xff0c;就用几个传感器实现了非常简单的监测&#xff0c;显示和效应也没用太复杂的效果。虽说很简单&#xff0c;但传感器驱动还是琢磨了不久&#xff0c;加上串口线坏了&#xff0c;调试了半天才发现不是代码错了而是…

【持续集成_03课_Linux部署Sonar+Gogs+Jenkins】

一、通过虚拟机搭建Linux环境-CnetOS 1、安装virtualbox&#xff0c;和Vmware是一样的&#xff0c;只是box更轻量级 1&#xff09;需要注意内存选择&#xff0c;4G 2、启动完成后&#xff0c;需要获取服务器IP地址 命令 ip add 服务器IP地址 通过本地的工具&#xff0c;进…

苍穹外卖--启用和禁用员工

实现 package com.sky.controller.admin;import com.sky.constant.JwtClaimsConstant; import com.sky.dto.EmployeeDTO; import com.sky.dto.EmployeeLoginDTO; import com.sky.dto.EmployeePageQueryDTO; import com.sky.entity.Employee; import com.sky.properties.JwtPro…

Debezium报错处理系列之第114篇:No TableMapEventData has been found for table id:256.

Debezium报错处理系列之第114篇:Caused by: com.github.shyiko.mysql.binlog.event.deserialization.MissingTableMapEventException: No TableMapEventData has been found for table id:256. Usually that means that you have started reading binary log within the logic…

救生拉网的使用方法及注意事项_鼎跃安全

水域救援在夏季尤为重要&#xff0c;随着气温的升高&#xff0c;人们更倾向于参与水上活动&#xff0c;如游泳、划船、垂钓等&#xff0c;这些活动虽然带来了乐趣和清凉&#xff0c;但同时也增加了水域安全事故的风险。救生拉网作为水域安全的重要工具之一&#xff0c;其重要性…

咱迈出了模仿的第一大步!快进来看看~

微信公众号&#xff1a;牛奶Yoka的小屋 有任何问题。欢迎来撩~ 最近更新&#xff1a;2024/06/28 [大家好&#xff0c;我是牛奶。] 这是第一篇模仿文章。咱决定先模仿样式&#xff0c;从外至里&#xff0c;层层递进。于是找了几个大V的公众号&#xff0c;看来看去&#xff0c;发…

swing图书管理系统+源码+讲解+ 报告

本次实训要求使用Java面向对象、MySQL数据库和Swing图形组件简单实现xxxx系统的增删改查操作&#xff08;比如学生信息管理系统&#xff09;。 实训目标 掌握面向对象编程的基本概念&#xff1a;类、对象、继承、封装和多态。学习使用Java进行数据库操作。熟悉MySQL数据库的使…

Instruct-GS2GS:通过用户指令编辑 GS 三维场景

Paper: Instruct-GS2GS: Editing 3D Gaussian Splats with Instructions Introduction: https://instruct-gs2gs.github.io/ Code: https://github.com/cvachha/instruct-gs2gs Instruct-GS2GS 复用了 Instruct-NeRF2NeRF 1 的架构&#xff0c;将基于 NeRF 的三维场景编辑方法迁…

VS Code配置Graphviz和DOT语言环境

目录 Graphviz介绍 下载并安装Graphviz 安装插件 效果展示 Graphviz介绍 Graphviz 是一款开源图形可视化软件。图形可视化是一种将结构信息表示为抽象图形和网络图的方法。它在网络、生物信息学、软件工程、数据库和网页设计、机器学习以及其他技术领域的可视化界面中有着…

展开说说:Android服务之实现AIDL跨应用通信

前面几篇总结了Service的使用和源码执行流程&#xff0c;这里再简单分析一下如果需要Service跨进程通信该怎样做。AIDL&#xff08;Android Interface Definition Language&#xff09;Android接口定义语言&#xff0c;用于实现 Android 两个进程之间进行进程间通信&#xff08…

TensorFlow系列:第二讲:准备工作

1.创建项目&#xff0c;选择虚拟环境 项目结构如下&#xff1a; data中的数据集需要提前准备好&#xff0c;数据分为测试集&#xff0c;训练集和验证集。以下是数据集的下载平台&#xff1a;kaggle 2.随便选择一个和水果相关的数据集&#xff0c;下载到本地&#xff0c;导入的项…

C# Bitmap类型与Byte[]类型相互转化详解与示例

文章目录 一、Bitmap类型转Byte[]类型使用Bitmap类的Save方法使用Bitmap类的GetBytes方法 二、Byte[]类型转Bitmap类型使用MemoryStream将Byte[]数组转换为Bitmap对象使用System.Drawing.Imaging.BitmapImage类 总结 在C#编程中&#xff0c;Bitmap类型和Byte[]类型之间的相互转…

产品原型设计:从概念到实现的完整指南

如果你是一位产品经理&#xff0c;那么你一定会和原型图打交道&#xff0c;产品原型是产品设计方案和底层逻辑的可视化表达&#xff0c;需要完整清晰地表达出产品目的及需求&#xff0c;在整个产品创造的过程中发挥着不可或缺的作用。而对于一些刚入行的产品经理来说&#xff0…

【Linux】多线程_1

文章目录 九、多线程1. 线程概念2. 线程的控制 未完待续 九、多线程 1. 线程概念 我们知道&#xff1a;进程 内核数据结构 进程代码和数据 。那什么是线程呢&#xff1f;线程是进程内部的一个执行分支。一个进程内部可以有多个执行流&#xff08;内核数据结构&#xff09;&…

量产工具一一UI系统(四)

目录 前言 一、按钮数据结构抽象 1.ui.h 二、按键处理 1.button.c 2.disp_manager.c 3.disp_manager.h 三、单元测试 1.ui_test.c 2.上机测试 前言 前面我们实现了显示系统框架&#xff0c;输入系统框架和文字系统框架&#xff0c;链接&#xff1a; 量产工具一一显…