数组方法的总结

目录

1.删除添加数组元素

2.获取数组元素索引

3.数组排序

1.翻转数组

2.数组排序

<1>升序的顺序排列

<2>降序的排列顺序

4.数组转换为字符串

 toString()

join(分隔符)

concat

 slice

splice

删除数组元素

删除并插入元素

只插入数组,不删除元素

5.valueOf()返回数组的原始值

使用:获取日期的总毫秒数

6.数组遍历

forEach()

 使用:求和

map

filter

7.确认数组元素是否满足某种条件

some

every

8..reduce

使用:

1、累加和累乘

 2.数组去重

9.ES7新特性includes

10.find

11.fill();

12.数组方法扩展flat和flatMap

flat(参数)

flatMap


1.删除添加数组元素

 push

1.push可以给数组追加新的元素

2.push(参数直接写数组元素就可以了)

3.push完毕后,返回的结果是新数组的长度

4.原数组也会发生变化

        var arr = [1,2,3]
        console.log(arr.push(4,'pink'));

pop

1.pop是可以删除数组的最后一个元素 记住一次只能删除一个元素

2.pop()没有参数

3.pop完毕之后,返回的结果是删除的那个元素

4.原数组也会发生变化

        console.log(arr.pop());
        console.log(arr);

unshift

1.unshift是可以给数组前面追加新的元素

2.unshift()参数直接写 数组元素就可以了

3.unshift完毕之后,返回的结果是新数组的长度

4.原数组也会发生变化

        console.log(arr.unshift(0));
        console.log(arr);

shift

1.shift是可以删除数组的第一个元素 记住一次只能删除一个元素

2.shift()没有参数

3.shift完毕之后,返回的结果是删除的那个元素

4.原数组也会发生变化

        console.log(arr.shift());
        console.log(arr);

2.获取数组元素索引

  • 返回数组元素索引号方法 indexOf(数组元素)作用就是返回该数组元素的索引号 从前面开始查找它只返回满足一个条件的索引号,它如果在该数组里面找不到元素,则返回的是-1
        var arr = ['red','green','blue'];
        console.log(arr.indexOf('pink'));//-1
  • 返回数组元素索引号方法 lastIndexOf(数组元素)作用是返回该数组元素的索引号 从后面开始查找
        var arr = ['red','green','blue','pink','blue'];
        console.log(arr.lastIndexOf('blue'));//4

3.数组排序

1.翻转数组

        var arr = [1,2,3,4,5,6,7];
        arr.reverse();
        console.log(arr);

2.数组排序

sort()是针对数组的一种数组排序的简介方法,默认为升序,但是可以传入参数使其变为降序

let arr = [1,3,5,2,4]
arr.sort()    
console.log(arr)   //[1,2,3,4,5]

<1>升序的顺序排列

        var arr1 = [2,3,1,44,23,55];
        arr1.sort(function(a,b) {
            return a - b;
        })

<2>降序的排列顺序

        var arr2 = [2,3,1,44,23,55];
        arr2.sort(function(a,b) {
            return b - a;
        })
        console.log(arr2);

把旧数组里面不重复的元素选取出来放到新数组里面,重复的元素只保留一个,放到新数组中去重。

遍历旧数组,然后拿着旧数组元素去查询新数组,如果该元素在新数组里面没有出现过,我们就添加,否则不添加

需要利用新数组.indexOf(数组元素)如果返回时-1就说明新数组里面没有改元素

        function unique(arr) {
            var newArr = [];
            for(var i = 0; i < arr.length;i++) {
                if(newArr.indexOf(arr[i])===-1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        var demo = unique(['blue','pink','pink','black','blue']);
        console.log(demo);

4.数组转换为字符串

 toString()

        console.log(str);
        var arr = [1,2,3];
        console.log(arr.toString());//输出结果1,2,3

join(分隔符)

        var arr1 = ['green','blue','pink']
        console.log(arr1);//['green', 'blue', 'pink']
        console.log(arr1.join());//green,blue,pink
        console.log(arr1.join('-'));//green-blue-pink
        console.log(arr1.join('&'));//green&blue&pink

concat

    const str1 = 'aa'
    const str2 = str1.concat('bb')
    console.log(str2) // aabb

 slice

let arr = [1, 2, 3, 4, 5];
arr.slice(1, 3);//[2, 3]

splice

删除数组元素

let arr = [1, 2, 3, 4, 5]
arr.splice(1, 2)
// [2,3]
// 原数组改变为:[1, 4, 5]

删除并插入元素

let arr = [1, 2, 3, 4, 5]
arr.splice(1, 2, 3, 4, 5)
// 从下标为 1 的下标开始,依次向后删除 2 个元素,并将3,4,5 添加到倍删除的元素位置。
// 返回倍删除的数组:[2, 3], 原数组改变为:[1, 3, 4, 5, 4, 5]

只插入数组,不删除元素

let arr = [1, 2, 3, 4, 5]
arr.splice(1, 0, 3, 4, 5)
// 从下标为 1 的下标开始,不删除元素,并将3,4,5 添加到倍删除的元素位置。
// 返回倍删除的数组:[], 原数组改变为:[1, 3, 4, 5, 2, 3, 4, 5]

5.valueOf()返回数组的原始值

   var arr = [1, 2, 3, 4];
   var rel = arr.valueOf();
   console.log(arr); // [1, 2, 3, 4]
   console.log(rel); // [1, 2, 3, 4]

使用:获取日期的总毫秒数

        var date = new Date();
        console.log(date.valueOf());//就是我们现在的时间 距离1970.1.1总的毫秒数

6.数组遍历

forEach()

遍历数组,每次循环中执行传入的回调函数 。(注意: forEach() 对于空数组是不会执行回调函数的。) 没有返回值,或理解为返回值为undefined,不改变原数组。

参数: item:每次循环的当前元素, index:当前项的索引, array:原始数组;

数组中有几项,那么传递进去的匿名回调函数就需要执行几次;

        var arr = [1,22,3,44,5,66];
        var res = arr.forEach(function (item, index, array) {
            console.log(item, index, array);
        });
        console.log(res);

 使用:求和

        var arr = [1,2,3,4,5,6];
        var sum = 0;
        arr.forEach(function (item) {
            sum += item;
        });
        console.log(sum);

map

map:返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组,会分配内存空间存储新数组并返回

注:

(1)map()方法不会对空数组进行检测

(2)map()方法不会改变原始数组

使用:全场八折

        const arr = [10, 20, 30, 120, 50]
        const res = arr.map(item => item * 0.5)
        console.log(res);

filter

filter()方法是对原数组进行过滤筛选,产生一个新的数组对象

注:

(1)filter()不会对空数组进行检测(如果对空数组进行筛选,返回值位undefined)

(2)filter()不会改变原始数组

(3)返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组

        let arr = [1, 2, 3, 4, 5];
        let res = arr.filter((item, index, arr) => {
            return item % 2 === 0;
        });
        console.log(res);// 2,4
        // 第一个参数为:当前正在遍历的元素
        // 第二个参数为:当前元素索引
        // 第三个参数为:原数组本身

7.确认数组元素是否满足某种条件

some

遍历数组,查找数组当中是否有元素满足条件,如果有至少一个元素满足条件,则返回true,否则返回false。

        let arr = [1, 2, 3, 4, 5];
        let res = arr.some(function (item, index, arr) {
            return item > 6; // false
        });
        console.log(res);
        res = arr.some(function (item) {
            return item > 1; // true
        });
        console.log(res);
        // 第一个参数为:当前正在遍历的元素(一般只用这个参数就可以了。)
        // 第二个参数为:当前元素索引
        // 第三个参数为:原数组本身

every

遍历数组,如果数组的每个元素都满足条件,则返回true,否则返回false。

        let arr = [1, 2, 3, 4, 5];
        let res = arr.every(function (item, index, arr) {
            return item > 0; // true
        });
        res = arr.every(function (item) {
            return item > 4; // flase
        });
        // 第一个参数为:当前正在遍历的元素(一般只用这个参数就可以了。)
        // 第二个参数为:当前元素索引
        // 第三个参数为:原数组本身

8..reduce

遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中, 返回最终操作的结果;

        var arr = [2, 3, 4, 5];
        var sum = arr.reduce(function (prev, item, index, array) {
            console.log(prev, item, index, array);
            return prev + item;
        });
        console.log(arr, sum);
        // prev 初始值(类似求和是 sum = 0) 可以设置初始值(参数), 
        //如果不设置初始值默认是数组中的第一个元素, 遍历时从第二个元素开始遍历
        // item 每次循环的当前元素
        // index 每次循环的当前下标
        // array 原数组

 可以看出当没有设置初始值的时候,prev取值是arr[0](即数组下标为0的数值默认成初始值)

        var arr = [2, 3, 4, 5];
        var sum = arr.reduce(function (prev, item, index, array) {
            console.log(prev, item, index, array);
            return prev + item;
        },10);
        console.log(arr, sum);

 可以看出当设置初始值的时候,从数组下标为0的开始遍历。

使用:

1、累加和累乘

    let arr = [1,3,5,7,9];
    let sum = arr.reduce((a,b)=> a+b)
    let num = arr.reduce((a,b) => a*b)
    console.log(sum) // 21
    console.log(num) // 504

 2.数组去重

        let arr = [1,1,22,34,55,34];
        let newArr = arr.reduce((a,b) => {
            if (!a.includes(b)) {
                return a.concat(b)
            } else {
                return a
            }
        }, []);
        console.log(newArr, '数组去重') // [1, 3, 2, 5, 7, 8] 

9.ES7新特性includes

includes方法用来检测数组中是否包含某个元素,返回布尔类型值
indexof返回的是一个下标,如果没有返回结果是一个-1
        const mingzhu = ['西游记','水浒传','三国演义','红楼梦'];
        // 判断
        console.log(mingzhu.includes('西游记'));//true
        console.log(mingzhu.includes('呐喊'));//false

10.find

遍历数组 每次循环 执行回调函数,回调函数接受一个条件 返回满足条件的第一个元素,不存在则返回undefined

        var list = [55, 66, 77, 88, 99, 100];
        var res = list.find(function (item, index, array) {
            return item > 60;
        });
        console.log(res); //66
        // item: 必须, 循环当前元素
        // index: 可选, 循环当前下标
        // array: 可选, 当前元素所属的数组对象

11.fill();

用给定值填充一个数组

        var arr = [1, 2, 3];
        var arr1 = arr.fill('4',2);
        console.log(arr1);
        // value 必需。填充的值。
        // start 可选。开始填充位置。
        // end 可选。停止填充位置(默认为 array.length)

 

12.数组方法扩展flat和flatMap

flat(参数)

将多维数组转化为低位数组,参数为深度 是一个数字

        // 将多维数组转化为低位数组
        const arr = [1,2,3,4,[5,6,[7,8,9]]];
        // 参数为深度 是一个数字
        console.log(arr.flat(1));
        console.log(arr.flat(2));

flatMap

flat()和map()的组合版 , 先通过map()返回一个新数组,再将数组拉平( 只能拉平一次 )

        const arr = [1,2,3,4]
        const result = arr.flatMap(item => [item * 10]);
        // 可以使用flatMap将结果变为一维
        console.log(result);

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值