ES6数组的方法及伪数组转数组方法

forEach () 用来遍历数组的每一项 

 forEach循环的回调函数中,不可以return出一个值,但是可以使用return去终止函数的执行

 forEach循环,循环结束没有返回值返回值为undefined

 item (第一个)表示数组的每一项, index(第二个) 表示数组的下标

<script>
        // forEach  用来遍历数组的每一项
        let arr = [{
            name: "张三",
            age: 30
        },
        {
            name: "李四",
            age: 40
        },
        {
            name: "王五",
            age: 50
        }]
        // item (第一个)表示数组的每一项, index(第二个) 表示数组的下标
        // forEach循环的回调函数中,不可以return出一个值,但是可以使用return去终止函数的执行
        // forEach循环,循环结束没有返回值返回值为undefined
        // 会改变原数组
        arr.forEach(function (item, index) {
            // console.log(item.name + "--" + index);
            // if (item.age > 30) {
            //     return
            // }
            // console.log(item.name);

            item.name = item.name + 123
        });
        console.log(arr);
            // 返回 [{…}, {…}, {…}]
            // 0: {name: '张三123', age: 30}
            // 1: {name: '李四123', age: 40}
            // 2: {name: '王五123', age: 50}
            // length: 3
            // [[Prototype]]: Array(0)
    </script>

map()方法 循环 根据回调函数return的值返回一个新的数组

 <script>
        let arr = [{
            name: "张三",
            age: 30
        },
        {
            name: "李四",
            age: 40
        },
        {
            name: "王五",
            age: 50
        }]
        // map 循环 根据回调函数return的值返回一个新的数组
        let narr = arr.map(function (item) {
            return item.name
        })
        console.log(narr); // ['张三', '李四', '王五']
    </script>

filter() 过滤筛选  通过return的判断条件去判断,把判断条件为true的组成一个新数组返回去

<script>
        let arr = [{
            name: "张三",
            age: 30
        },
        {
            name: "李四",
            age: 40
        },
        {
            name: "王五",
            age: 50
        }]

        // filter 过滤筛选  通过return的判断条件去判断,把判断条件为true的组成一个新数组返回去
        let arr2 = arr.filter(function (item) {
            return item.age > 30
        })
        console.log(arr2);
        // 返回值  (2) [{…}, {…}]
        // 0: {name: '李四', age: 40}
        // 1: {name: '王五', age: 50}
        // length: 2
        // [[Prototype]]: Array(0)

 reduce() 高阶函数 可以实现数组的累加求和等等

第一个参数表示累计器:初始值 或者计算结束后的返回值,第二个参数表示当前元素

 <script>
        let arr = [2, 3, 4, 5, 6];
        let s = arr.reduce(function (sum, num) {
            console.log(sum, num);
            return sum + num
        })
        console.log(s); // 20
        // 高阶函数 可以实现数组的累加求和等等
        // function reduceFn() {
        //     var sum = 0;
        //     for (var i = 0; i < arr.length; i++) {
        //         sum += arr[i]
        //     }
        //     return sum
        // }

        // console.log(reduceFn()); // 20
    </script>

find() 循环数组,通过return的条件,返回一个新的对象

  <script>
        let arr = [{
            name: "张三",
            age: 30
        },
        {
            name: "李四",
            age: 40
        },
        {
            name: "王五",
            age: 50
        }]

        // find 循环数组,通过return的条件,返回一个新的对象
        // let arr2 = arr.find(function (item, index) {
        //     return item.name == "张三"
        // })
        // console.log(arr2);  // {name: '张三', age: 30}
        function findFn() {
            var obj = {};
            arr.forEach(function (item) {
                if (item.name == "张三") {
                    obj = item
                }
            })
            return obj
        }
        let arr3 = findFn();
        // console.log(JSON.string(obj));
        console.log(arr3);

findIndex()循环数组 返回第一个匹配条件元素的索引,如果一个都不匹配就返回-1

 <script>
        let arr = [{
            name: "张三",
            age: 10
        },
        {
            name: "李四",
            age: 20
        },
        {
            name: "王五",
            age: 40
        }]
        // 循环数组 返回第一个匹配条件元素的索引,如果一个都不匹配就返回-1
        let i = arr.findIndex(function (item, index) {
            return item.age > 20
        })
        console.log(i);  // 2
        // 同以下方法
        Array.prototype.findIndexFn = function () {
            for (var i = 0; i < this.length; i++) {
                if (this[i].age > 20) {
                    return i
                }
            }
            return -1
        }
        console.log(arr.findIndexFn()); // 2

every() 循环数组,通过return来判断条件,如果数组所有的满足条件返回true,有一个不满足的话就返回

<script>
        let arr = [{
            name: "张三",
            age: 30
        },
        {
            name: "李四",
            age: 40
        },
        {
            name: "王五",
            age: 50
        }]
        // 循环数组,通过return来判断条件,如果数组所有的满足条件返回true,有一个不满足的话就返回false

        // let flag = arr.every(function (item) {
        //     return item.age > 20
        // })
        // console.log(flag); // true
        // 相当于下面的写法
        Array.prototype.everyFn = function () {
            for (var i in this) {
                if (this[i].age <= 30) {
                    return false
                }
            }
            return true
        }
        var flag = arr.everyFn();
        console.log(flag); // false
    </script>

some() 循环数组,通过return条件判断,只要有一个满足条件,就返回true,所有的都不满足返回

<script>
        let arr = [{
            name: "张三",
            age: 10
        },
        {
            name: "李四",
            age: 20
        },
        {
            name: "王五",
            age: 40
        }]
        // some 循环数组,通过return条件判断,只要有一个满足条件,就返回true,所有的都不满足返回false
        // let flag = arr.every(function (item) {
        //     return item.age > 20
        // })
        // console.log(flag); // true
        // 相当于下面的写法
        Array.prototype.someFn = function () {
            for (var i in this) {
                if (this[i].age > 30) {
                    return true
                }

            }
            return false
        }
        var flag = arr.someFn();
        console.log(flag);// true
    </script>

数组、字符串和数字都有toString()方法,把他们都变成字符串,数组是去掉左右括号,再变成字符串

数字使用toString()需要使用变量的方式

 <script>
        // 数组、字符串和数字都有toString()方法,把他们都变成字符串,数组是去掉左右括号,再变成字符串
        //数字使用toString()需要使用变量的方式
        var num = 15;
        var n = num.toString();
        console.log(n); 15
    </script>

类数组转成真正的数组

   有哪些类数组

    例:arguments 方法中的关键字,用于存储传过来的实际参数

      类数组用不了数组的方法,所以必须要转成真正的数组

   类数组用不了数组的方法,所以必须要转成真正的数组

  ES6之前使用的方法

      let arr = Array.prototype.slice.call(arguments)

    ES6使用的方法

       第一中方式

            let arr = Array.from(arguments)

        第二种方式 利用拓展运算符 ...实现

            let arr1 = [...arguments]

    如何判断一个数组是真正的数组

           es6之前会使用instanceof

            console.log(arr instanceof Array);

            比instanceof更好用的一种方式

            console.log(Object.prototype.toString.call(arr).indexOf("Array") > -1)//===>true;

           console.log(Object.prototype.toString.call(arr)) ===>[object Array]

            es6提供的方法,Array.isArray(),如果返回一个true表示真正的数组,反之则不是

            console.log(Array.isArray(arr)); // true

<script>
        // 类数组转成真正的数组
        // 有哪些类数组
        //arguments 方法中的关键字,用于存储传过来的实际参数
        function fn() {
            // 关键字 arguments
            console.log(arguments);
            // 类数组用不了数组的方法,所以必须要转成真正的数组
            // ES6之前使用的方法
            // let arr = Array.prototype.slice.call(arguments)

            // ES6使用的方法
            // 第一中方式
            let arr = Array.from(arguments)
            // 第二种方式 利用拓展运算符 ...实现
            let arr1 = [...arguments]
            console.log(arr); // [1, 2, 3, 4, 5]
            console.log(arr1); // [1, 2, 3, 4, 5]
            // 如何判断一个数组是真正的数组
            // es6之前会使用instanceof
            console.log(arr instanceof Array);
            // 比instanceof更好用的一种方式
            console.log(Object.prototype.toString.call(arr).indexOf("Array") > -1)//===>true;//console.log(Object.prototype.toString.call(arr)) ===>[object Array]
            // es6提供的方法,Array.isArray(),如果返回一个true表示真正的数组,反之则不是
            console.log(Array.isArray(arr)); // true
        }

        fn(1, 2, 3, 4, 5)
    </script>
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值