javaScript 11 作用域·箭头函数·数组解构进阶-阿里云开发者社区

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

2023-02-20 121

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

一、作用域

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

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

1.局部：

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

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

3. 作用链域

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

二、函数进阶

1.闭包

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

2.闭包的特点

可以在函数外面，访问函数里面的变量（不是直接访问，而是通过函数调用访问）

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

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

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

3.函数的动态参数

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

4.剩余函数

剩余参数：函数所有参数的集合，真数组

语法：...

剩余函数的拓展

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

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

真伪数组的区别

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

5.箭头函数

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

箭头函数求和

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

三、数组进阶

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>

2.数组的解构

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

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

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