当前位置：首页 > news >正文

JavaScript Es6 _1 笔记

news 2025/8/19 3:17:20

JavaScript Es6 _1 笔记

学习作用域、变量提升、闭包等语言特征，加深对 JavaScript 的理解，掌握变量赋值、函数声明的简洁语法，降低代码的冗余度。

理解作用域对程序执行的影响
能够分析程序执行的作用域范围
理解闭包本质，利用闭包创建隔离作用域
了解什么变量提升及函数提升
掌握箭头函数、解析剩余参数等简洁语法

作用域

了解作用域对程序执行的影响及作用域链的查找机制，使用闭包函数创建隔离作用域避免全局变量污染。

作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域分为全局作用域和局部作用域。

局部作用域

局部作用域分为函数作用域和块作用域。

函数作用域

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

<script>// 声明 counter 函数function counter(x, y) {// 函数内部声明的变量const s = x + yconsole.log(s) // 18}// 设用 counter 函数counter(10, 8)// 访问变量 sconsole.log(s)// 报错
</script>

总结：

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

块作用域

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

<script>{// age 只能在该代码块中被访问let age = 18;console.log(age); // 正常}// 超出了 age 的作用域console.log(age) // 报错let flag = true;if(flag) {// str 只能在该代码块中被访问let str = 'hello world!'console.log(str); // 正常}// 超出了 age 的作用域console.log(str); // 报错for(let t = 1; t <= 6; t++) {// t 只能在该代码块中被访问console.log(t); // 正常}// 超出了 t 的作用域console.log(t); // 报错
</script>

JavaScript 中除了变量外还有常量，常量与变量本质的区别是【常量必须要有值且不允许被重新赋值】，常量值为对象时其属性和方法允许重新赋值。

<script>// 必须要有值const version = '1.0.0';// 不能重新赋值// version = '1.0.1';// 常量值为对象类型const user = {name: '小明',age: 18}// 不能重新赋值user = {};// 属性和方法允许被修改user.name = '小小明';user.gender = '男';
</script>

总结：

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

注：开发中 let 和 const 经常不加区分的使用，如果担心某个值会不小被修改时，则只能使用 const 声明成常量。

全局作用域

<script> 标签和 .js 文件的【最外层】就是所谓的全局作用域，在此声明的变量在函数内部也可以被访问。

<script>// 此处是全局function sayHi() {// 此处为局部}// 此处为全局
</script>

全局作用域中声明的变量，任何其它作用域都可以被访问，如下代码所示：

<script>// 全局变量 nameconst name = '小明'// 函数作用域中访问全局function sayHi() {// 此处为局部console.log('你好' + name)}// 全局变量 flag 和 xconst flag = truelet x = 10// 块作用域中访问全局if(flag) {let y = 5console.log(x + y) // x 是全局的}
</script>

总结：

为 window 对象动态添加的属性默认也是全局的，不推荐！
函数中未使用任何关键字声明的变量为全局变量，不推荐！！！
尽可能少的声明全局变量，防止全局变量被污染

JavaScript 中的作用域是程序被执行时的底层机制，了解这一机制有助于规范代码书写习惯，避免因作用域导致的语法错误。

作用域链

在解释什么是作用域链前先来看一段代码：

<script>// 全局作用域let a = 1let b = 2// 局部作用域function f() {let c// 局部作用域function g() {let d = 'yo'}}
</script>

函数内部允许创建新的函数，f 函数内部创建的新函数 g，会产生新的函数作用域，由此可知作用域产生了嵌套的关系。

如下图所示，父子关系的作用域关联在一起形成了链状的结构，作用域链的名字也由此而来。

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

<script>// 全局作用域let a = 1let b = 2// 局部作用域function f() {let c// let a = 10;console.log(a) // 1 或 10console.log(d) // 报错// 局部作用域function g() {let d = 'yo'// let b = 20;console.log(b) // 2 或 20}// 调用 g 函数g()}console.log(c) // 报错console.log(d) // 报错f();
</script>

总结：

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

闭包

闭包是一种比较特殊和函数，使用闭包能够访问函数作用域中的变量。从代码形式上看闭包是一个做为返回值的函数，如下代码所示：

<body><script>// 1. 闭包 : 内层函数 + 外层函数变量// function outer() {//   const a = 1//   function f() {//     console.log(a)//   }//   f()// }// outer()// 2. 闭包的应用： 实现数据的私有。统计函数的调用次数// let count = 1// function fn() {//   count++//   console.log(`函数被调用${count}次`)// }// 3. 闭包的写法  统计函数的调用次数function outer() {let count = 1function fn() {count++console.log(`函数被调用${count}次`)}return fn}const re = outer()// const re = function fn() {//   count++//   console.log(`函数被调用${count}次`)// }re()re()// const fn = function() { }  函数表达式// 4. 闭包存在的问题： 可能会造成内存泄漏</script>
</body>

总结：

1.怎么理解闭包？

闭包 = 内层函数 + 外层函数的变量

2.闭包的作用？

封闭数据，实现数据私有，外部也可以访问函数内部的变量
闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来

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

内存泄漏

变量提升

变量提升是 JavaScript 中比较“奇怪”的现象，它允许在变量声明之前即被访问，

<script>// 访问变量 strconsole.log(str + 'world!');// 声明变量 strvar str = 'hello ';
</script>

总结：

变量在未声明即被访问时会报语法错误
变量在声明之前即被访问，变量的值为 undefined
let 声明的变量不存在变量提升，推荐使用 let
变量提升出现在相同作用域当中
实际开发中推荐先声明再访问变量

注：关于变量提升的原理分析会涉及较为复杂的词法分析等知识，而开发中使用 let 可以轻松规避变量的提升，因此在此不做过多的探讨，有兴趣可查阅资料。

函数

知道函数参数默认值、动态参数、剩余参数的使用细节，提升函数应用的灵活度，知道箭头函数的语法及与普通函数的差异。

函数提升

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

<script>// 调用函数foo()// 声明函数function foo() {console.log('声明之前即被调用...')}// 不存在提升现象bar()  // 错误var bar = function () {console.log('函数表达式不存在提升现象...')}
</script>

总结：

函数提升能够使函数的声明调用更灵活
函数表达式不存在提升的现象
函数提升出现在相同作用域当中

函数参数

函数参数的使用细节，能够提升函数应用的灵活度。

默认值

<script>// 设置参数默认值function sayHi(name="小明", age=18) {document.write(`<p>大家好，我叫${name}，我今年${age}岁了。</p>`);}// 调用函数sayHi();sayHi('小红');sayHi('小刚', 21);
</script>

总结：

声明函数时为形参赋值即为参数的默认值
如果参数未自定义默认值时，参数的默认值为 undefined
调用函数时没有传入对应实参时，参数的默认值被当做实参传入

动态参数

arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。

<script>// 求生函数，计算所有参数的和function sum() {// console.log(arguments)let s = 0for(let i = 0; i < arguments.length; i++) {s += arguments[i]}console.log(s)}// 调用求和函数sum(5, 10)// 两个参数sum(1, 2, 4) // 两个参数
</script>

总结：

arguments 是一个伪数组
arguments 的作用是动态获取函数的实参

剩余参数

<script>function config(baseURL, ...other) {console.log(baseURL) // 得到 'http://baidu.com'console.log(other)  // other  得到 ['get', 'json']}// 调用函数config('http://baidu.com', 'get', 'json');
</script>

总结：

... 是语法符号，置于最末函数形参之前，用于获取多余的实参
借助 ... 获取的剩余实参，是个真数组

箭头函数

箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。

<body><script>// const fn = function () {//   console.log(123)// }// 1. 箭头函数 基本语法// const fn = () => {//   console.log(123)// }// fn()// const fn = (x) => {//   console.log(x)// }// fn(1)// 2. 只有一个形参的时候，可以省略小括号// const fn = x => {//   console.log(x)// }// fn(1)// // 3. 只有一行代码的时候，我们可以省略大括号// const fn = x => console.log(x)// fn(1)// 4. 只有一行代码的时候，可以省略return// const fn = x => x + x// console.log(fn(1))// 5. 箭头函数可以直接返回一个对象// const fn = (uname) => ({ uname: uname })// console.log(fn('刘德华'))</script>
</body>

总结：

箭头函数属于表达式函数，因此不存在函数提升
箭头函数只有一个参数时可以省略圆括号 ()
箭头函数函数体只有一行代码时可以省略花括号 {}，并自动做为返回值被返回

箭头函数参数

箭头函数中没有 arguments，只能使用 ... 动态获取实参

<body><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

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用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//   }// }// obj.sayHi()const obj = {uname: 'pink老师',sayHi: function () {console.log(this)  // objlet i = 10const count = () => {console.log(this)  // obj }count()}}obj.sayHi()</script>

解构赋值

知道解构的语法及分类，使用解构简洁语法快速为变量赋值。

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值，分为数组解构、对象解构两大类型。

数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法，如下代码所示：

<script>// 普通的数组let arr = [1, 2, 3]// 批量声明变量 a b c // 同时将数组单元值 1 2 3 依次赋值给变量 a b clet [a, b, c] = arrconsole.log(a); // 1console.log(b); // 2console.log(c); // 3
</script>

总结：

赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
变量的顺序对应数组单元值的位置依次进行赋值操作
变量的数量大于单元值数量时，多余的变量将被赋值为 undefined
变量的数量小于单元值数量时，可以通过 ... 获取剩余单元值，但只能置于最末位
允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效

注：支持多维解构赋值，比较复杂后续有应用需求时再进一步分析

对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法，如下代码所示：

<script>// 普通对象const user = {name: '小明',age: 18};// 批量声明变量 name age// 同时将数组单元值 小明  18 依次赋值给变量 name  ageconst {name, age} = userconsole.log(name) // 小明console.log(age) // 18
</script>

总结：

赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
对象属性的值将被赋值给与属性名相同的变量
对象中找不到与变量名一致的属性时变量值为 undefined
允许初始化变量的默认值，属性不存在或单元值为 undefined 时默认值才会生效

注：支持多维解构赋值

<body><script>// 1. 这是后台传递过来的数据const msg = {"code": 200,"msg": "获取新闻列表成功","data": [{"id": 1,"title": "5G商用自己，三大运用商收入下降","count": 58},{"id": 2,"title": "国际媒体头条速览","count": 56},{"id": 3,"title": "乌克兰和俄罗斯持续冲突","count": 1669},]}// 需求1： 请将以上msg对象  采用对象解构的方式 只选出  data 方面后面使用渲染页面// const { data } = msg// console.log(data)// 需求2： 上面msg是后台传递过来的数据，我们需要把data选出当做参数传递给 函数// const { data } = msg// msg 虽然很多属性，但是我们利用解构只要 data值function render({ data }) {// const { data } = arr// 我们只要 data 数据// 内部处理console.log(data)}render(msg)// 需求3， 为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myDatafunction render({ data: myData }) {// 要求将 获取过来的 data数据 更名为 myData// 内部处理console.log(myData)}render(msg)</script>

综合案例

forEach遍历数组

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数

注意：

1.forEach 主要是遍历数组

2.参数当前数组元素是必须要写的，索引号可选。

<body><script>// forEach 就是遍历  加强版的for循环  适合于遍历数组对象const arr = ['red', 'green', 'pink']const result = arr.forEach(function (item, index) {console.log(item)  // 数组元素 red  green pinkconsole.log(index) // 索引号})// console.log(result)</script>
</body>

filter筛选数组

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

主要使用场景：筛选数组符合条件的元素，并返回筛选之后元素的新数组

<body><script>const arr = [10, 20, 30]// const newArr = arr.filter(function (item, index) {//   // console.log(item)//   // console.log(index)//   return item >= 20// })// 返回的符合条件的新数组const newArr = arr.filter(item => item >= 20)console.log(newArr)</script>
</body>

笔记学习

pink老师讲的js高级语法Es6非常好，大家可以去学习学习。这个博客笔记主要是为了方便自己随处复习。大家一起加油哦！

JavaScript Es6 _1 笔记

JavaScript Es6 _1 笔记学习作用域、变量提升、闭包等语言特征，加深对 JavaScript 的理解，掌握变量赋值、函数声明的简洁语法，降低代码的冗余度。理解作用域对程序执行的影响能够分析程序执行的作用域范围理解闭包本质，利用闭包…...

编程日记 2023/8/4 23:31:07

结构体和 Json 相互转换（序列化反序列化）

关于 JSON 数据 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。RESTfull Api 接口中返回的数据都是 json 数据。 Json 的基本格式如下： { "a": "Hello", "b": "…...

编程日记 2023/8/4 23:30:06

【力扣刷题 | 第二十四天】

目录前言： 416. 分割等和子集 - 力扣（LeetCode） 总结前言： 今晚我们爆刷动态规划类型的题目。 416. 分割等和子集 - 力扣（LeetCode） 给你一个只包含正整数的非空数组 nums 。请你判断是否可以将这…...

编程日记 2023/8/4 23:29:05

PyTorch使用（一）(常用库)

1.各大模型库 hub：简单来说就是专门为PyTorch集成的算法模型库网站：GitHub - pytorch/hub: Submission to https://pytorch.org/hub/ Model Zoo：这个平台上提供预训练模型，在每个模型上，会标注出这个模型在GitHub的标…...

编程日记 2023/8/4 23:28:04

React ~ React Router 6

React Router 6 VS React Router 5.x 内置组件的变化; 移除<Switch /> , 新增<Routes />语法的变化; component { About } 变为 element { <About /> }新增多个hook官方明确推荐函数式组件了! 一级路由(变化) 安装路由 npm i react-router-dom (默认是最…...

编程日记 2023/8/4 23:26:59

【LeetCode每日一题】——304.二维区域和检索-矩阵不可变

文章目录一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】一【题目类别】矩阵二【题目难度】中等三【题目编号】 304.二维区域和检索-矩阵不可变四【题目描述】 …...

编程日记 2023/8/4 23:25:58

硬件串口通信协议学习(UART、IIC、SPI、CAN)

0.前言学习资料：江协科技的个人空间-江协科技个人主页-哔哩哔哩视频通信的目的：将一个设备的数据传送到另一个设备，扩展硬件系统通信协议：制定通信的规则，通信双方按照协议规则进行数据收发全双工：通信…...

编程日记 2023/8/4 23:24:56

第一章-JavaScript基础进阶part2：事件

文章目录概念一、注册事件（绑定事件）1.1 addEventListener事件监听二、删除事件（解绑）三、DOM事件流四、事件对象event4.1 e.target与this与e.currentTarget的区别4.2 事件对象的常见属性五、阻止事件默认行为及冒泡六、事件委…...

编程日记 2023/8/4 23:23:54

如何优雅的使用后端接口

优雅的后端接口一个后端接口大致分为四个部分：接口地址(url)、接口请求方式(get、post等)、请求数据(request)、响应数据(response)。一、URL & Method Rest 设计风格》 Restful API 简单理解： URI 是用来唯一标志一个互联网资源；Me…...

编程日记 2023/8/4 23:22:53

QEMU源码全解析25 —— QOM介绍（14）

接前一篇文章：QEMU源码全解析24 —— QOM介绍（13） 本文内容参考： 《趣谈Linux操作系统》 —— 刘超，极客时间《QEMU/KVM》源码解析与应用 —— 李强，机械工业出版社特此致谢！ 本文开始对于…...

编程日记 2023/8/4 23:21:51

TopK问题

topK问题： N个数找最大或者最小的前k个。例子： 优质筛选（店面的排名） 10000个数，找出最大的前10个数解决思路：建立大堆，然后pop9次但是有些场景，上面的思路…...

编程日记 2023/8/4 23:20:50

接口自动化测试-Postman+Newman+Git+Jenkins实战集成（详细）

目录：导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结（尾部小惊喜） 前言 1、Postman 创建…...

编程日记 2023/8/4 23:19:48

CMake 学习笔记（Generator Expressions）

CMake 学习笔记 （Generator Expressions） Generator Expressions 可以认为是一种特殊的变量，它会在编译阶段求值。通常用在 target_link_libraries(), target_include_directories(), target_compile_definitions() 上。用 Generator Expr…...

编程日记 2023/8/4 23:18:46

提高测试用例质量的6大注意事项

在软件测试中，经常会遇到测试用例设计不完整，用例没有完全覆盖需求等问题，这样往往容易造成测试工作效率低下，不能及时发现项目问题，无形中增加了项目风险。因此提高测试用例质量，就显得尤为重要。一般来说…...

编程日记 2023/8/4 23:17:45

2023牛客暑期多校训练营6 A-Tree (kruskal重构树))

文章目录题目大意题解参考代码题目大意 ( 0 ≤ a i ≤ 1 ) , ( 1 ≤ c o s t i ≤ 1 0 9 ) (0\leq a_i\leq 1),(1 \leq cost_i\leq 10^9) (0≤ai≤1),(1≤costi≤109) 题解提供一种新的算法，kruskal重构树。该算法重新构树，按边权排序每一条边…...

编程日记 2023/8/4 23:16:44

软件测试—支付功能测试

有人问过我这样一个问题：作为一个支付平台，接入了快钱、易宝或直连银行等多家的渠道，内在的产品流程是自己的。业内有什么比较好的测试办法，来测试各渠道及其支持的银行通道呢？ 回答：对支付平台而言&#…...

编程日记 2023/8/4 23:15:42

自动化测试的统筹规划

背景回顾以前自动化测试编写的经历，主要是以开发者自驱动的方式进行，测试的编写随心而动，没有规划，也没有章法，这样就面临如下的一些问题： 测试用例设计不到位，覆盖不全，或者不够…...

编程日记 2023/8/4 23:14:41

外键字段的增删改查、多表查询(子查询和连表查询、正反向、聚合查询、分组查询、 F与Q查询)、django中如何开启事务

一、外键字段的增删改查 1.多对多的外键增删改查图书和作者是多对多，借助于第三张表实现的，如果想绑定图书和作者的关系，本质上就是在操作第三方表2.如何操作第三张表问题：让你给图书添加一个作者，他俩的关系可是多对…...

编程日记 2023/8/4 23:13:40

【学习笔记】生成式AI（ChatGPT原理，大型语言模型）

ChatGPT原理剖析语言模型文字接龙 ChatGPT在测试阶段是不联网的。 ChatGPT背后的关键技术：预训练（Pre-train） 又叫自监督式学习（Self-supervised Learning），得到的模型叫做基石模型（Founda…...

编程日记 2023/8/4 23:12:37

【Opencv入门到项目实战】（三）：图像腐蚀与膨胀操作

文章目录 1.腐蚀操作2.膨胀操作3.开运算和闭运算4.礼帽与黑帽5.梯度运算 1.腐蚀操作腐蚀操作是图像处理中常用的一种形态学操作，我们通常用于去除图像中的噪声、分割连通区域、减小目标物体的尺寸等。腐蚀操作的原理是，在给定的结构元素下，…...

编程日记 2023/8/4 23:11:36

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令范围操作示例指定行范围处理复合命令示例实用技…...

编程新知 2025/7/5 18:14:39

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接，私钥连接和常规默认连接任务一开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务任务二修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/8/2 7:29:58