JS arguments arguments转成array 箭头函数不绑定arguments

最新推荐文章于 2022-11-21 14:10:51 发布

NAUR.

最新推荐文章于 2022-11-21 14:10:51 发布

阅读量470

点赞数

分类专栏： html javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46622106/article/details/122015077

版权

html 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

【arguments】
arguments 是一个对应于传递给函数的参数的类数组(array-like)对象。

array-like 意味着它看起来是一个数组，本质上是一个对象
    但是它却拥有数组的一些特性，比如说 length，比如可以通过 index 索引来访问；
    但是它却没有数组的一些方法，比如 forEach、map 等；

【arguments 转成 array】
way 1: 手动遍历，循环
way 2: 通过显式绑定 arguments 为数组的 slice 方法中
// Array.prototype.slice( start,[end] )
// 内部原理依旧是通过遍历进行操作的
// 空值合并操作符（??）,逻辑操作符
// 当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。
// end = end ?? arr.length;
way 3: 通过 Array 的原型上获取，当然也可以从 Array 的实例上获取
// [].slice.call(arguments)
way 4：通过ES6的from方式
// Array.from()
way 5：通过扩展运算符
// …

【箭头函数不绑定arguments】
箭头函数是不绑定 arguments 的，所以我们在箭头函数中使用 arguments 会去上层作用域查找
在浏览器中全局是没有 arguments，但是在 node 中是有 arguments 的

arguments 算是早期 JavaScript 的东西，ES6 之前会用到 arguments
但是在 ES6 之后基本上会使用剩余参数来替代 arguments

【来看看示例代码】

<!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>arguments</title>
</head>
<body>
    
    <script>
        // 【arguments】 https://itsandy.gitee.io/sandy.gitee.io/#/ 

        // 1 了解 arguments
        function test(){
            // console.log("test_arguments",arguments.length);
            if(arguments.length == 1){
                let a = () => {
                    console.log(`object`, arguments[0])     // 10
                }
                a()
            }else if( arguments.length == 2){
                let b = () => {
                    console.log("arguments.html",arguments[1]); // test
                }
                b()
            }
        }
        // test(10)
        // test(10,'test')

        // 2 arguments 转数组
        
        // way 1: 手动遍历

        // way 2: 通过显式绑定 arguments 为数组的 slice 方法中
            // Array.prototype.slice.call( start,[end] )  
            // 内部原理依旧是通过遍历进行操作的
            // 空值合并操作符（??）,逻辑操作符
            // 当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。
        Array.prototype.slice = function (start = 0, end) {
            let arr = this;
            end = end ?? arr.length;    // 空值合并操作符（??）
            let newArr = [];
            for (let i = start; i < end; i++) {
                newArr.push(arr[i]);
            }
            return newArr;
        };
        let arr = [1, 11, 111];
        console.log( arr.slice(0) );

        // way 3: 通过 Array 的原型上获取，当然也可以从 Array 的实例上获取
            // [].slice.call(arguments)
        function sliceCall() {
            let arr2 = [].slice.call(arguments);
            console.log('arr2_arguments_changeTo_array',arr2);
        }
        sliceCall(10, 20);

        // way 4：通过ES6的from方式 Array.from()
        function esFrom(){
            let arr = Array.from(arguments)
            console.log("esFrom:",arr);
        }
        esFrom('esfrom',1111)

        // way 5：通过扩展运算符 ...
        function dianDianDian(){
            let arr = [...arguments]
            console.log("...arguments",arr);
        }
        dianDianDian('...','arguments',123456)

        // 箭头函数不绑定arguments
        // 浏览器全局中没有arguments，但是node有arguments
        let arrowFoo = () => {
            console.log("arrowFoo:",arguments);
        }
        arrowFoo()  // arguments is not defined at arrowFoo

    </script>
</body>
</html>

NAUR.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS arguments arguments转成array 箭头函数不绑定arguments

array-like 意味着它看起来是一个数组，本质上是一个对象，但是它却拥有数组的一些特性，比如说 length，比如可以通过 index 索引来访问；但是它却没有数组的一些方法，比如 forEach、map 等；
复制链接

扫一扫