javaScript 11 作用域·箭头函数·数组解构进阶

简介: 作用域的范围与判定、箭头函数的写法与数组解构的常见用法

一、作用域

就是变量它能够被获取到的范围

  • 作用域:全局+局部 -->
  • 局部作用域:函数+块级作用域 -->
  • 局部作用域:只在当前作用域生效 -->
  • 块级作用域:由const/let定义的变量+大括号(if+for)

1.局部:

d50406188a2d426ea58c52222c167362.png

控制台查看:显示count找不到

a6b5ee39bce64306bf8804292ad9ff06.png

2. 全局:就是在任何地方都弄可以获取到变量的值

a8a58eb070f241f095abfca903b9905d.png

3. 作用链域

由内到外,就近原则的找它想要找到的变量

9820d6b43a5a441ba1b8b904e6e83e67.png

二、函数进阶

1.闭包

就是函数 (内层函数访问了外层函数的变量,外层函数就叫做闭包)

afc166fafa384d3783a8aabc269dce8c.png

416e453682f1457289735beb38a2ddd1.png

2.闭包的特点

可以在函数外面,访问函数里面的变量(不是直接访问,而是通过函数调用访问)

8d4b7bfae1f24b38bf495a50ab7b4459.png

d5c3942ff2084ac2ad8522c5ede40dc4.png

注意点:本质是将闭包函数整体调用

闭包使用场景:变量私有化的时候

举下面这个例子。函数fn调用完毕后,并不会销毁,会一直存在直到浏览器关闭/内存泄漏

982293080a554d80a0d8d84415fa79a2.png

31dd9d75638a4908a767783dbf52a0e4.png

3.函数的动态参数

知道这个arguments是伪数组即可,可使用数组length的属性

cd84f0e6e0044084a2f1b30adb62b220.png

966a97fae0744282acb0dc7972fc65c0.png

4.剩余函数

   剩余参数:函数所有参数的集合,真数组

   语法:...

14ef55e8adc849f59b1bc332db686897.png

剩余函数的拓展

08661997c1dc485da3aba9f9be60f661.png

就是说...的部分被转换成了数组

总结剩余参数与动态参数区别

       真伪数组的区别

      剩余参数遇到了就转剩下的成数组,动态参数是全部转伪数

5.箭头函数

定义箭头函数加上=>就可以了

f5c7687584c84ec8b2b6924520b77baa.png

0fb416a382864866a4443ae42e4e4dba.png

箭头函数求和

箭头函数没有动态函数,使用arguments会报错,提示未定义,只能用剩余参数

2f2b735dca9d41449fae650951c88e98.png

b38a7226079242a7996b527425e73528.png

三、数组进阶

1.展开运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    ...在函数参数里面叫剩余参数
    ...在数组参数里面叫展开运算符
    const arr =[ 1,2,3]
<script>
        const arr =[ 1,2,3,4,5]
        // 去除了括号与逗号
        console.log(...arr);
        // 使用场景:求最大最小值,合并参数
        // 学习函数关注:1.函数的参数 2.函数的返回值
        console.log(Math.max([1,22,33,44,55]));//NaN,不能写数组
        console.log(Math.max(1,22,33,44,55));
        console.log(Math.max(...arr));//...在arr前面可解析逗号与方括号
        const res = arr.push(10)//push()返回值是新数组的长度
        console.log(res);//6
        // 数组合并,两个数组之间用,隔开即可
        const arr1=[6,7,8,9,10]
        const arr3=[...arr,...arr1]
        console.log(arr3);
</script>
</body>
</html>

e94c46f3adf2f00d96cbe5060666256.png

2.数组的解构

   解构:批量给变量赋值的语法

3f394a6212e84aa19f496989602e2a0f.png

来个好玩的例子,可利用解构完成快速的交换元素不用定义中间值

ed71981cd55540e58d1d16de275c1a0d.png




相关文章
|
6月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
268 19
|
JavaScript 前端开发
js的作用域作用域链
【10月更文挑战第29天】理解JavaScript的作用域和作用域链对于正确理解变量的访问和生命周期、避免变量命名冲突以及编写高质量的JavaScript代码都具有重要意义。在实际开发中,需要合理地利用作用域和作用域链来组织代码结构,提高代码的可读性和可维护性。
|
8月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
10月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
213 32
|
9月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
JavaScript 前端开发 网络架构
ES6解构赋值详解;全面掌握:JavaScript解构赋值的终极指南
解构赋值是一个强大且灵活的工具,它使得从数组和对象中提取数据变得更加简单和直观。通过掌握解构赋值的基本语法和实践,你可以写出更加简洁、可读性更强的代码。在实际项目中,解构赋值广泛应用于函数参数处理、变量交换、嵌套结构操作等场景,极大地提升了代码的灵活性和简洁度。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
9月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
208 11
|
JavaScript 前端开发
javascript的作用域
【10月更文挑战第19天javascript的作用域

热门文章

最新文章