js数组常用方法合集(方便查阅 一看就会 持续补充中)

超宝最帅
104 阅读8分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第五天，点击查看活动详情

检测是否为数组

instanceof 和  Array.isArray()

instanceof运算符,判断一个对象(广义的对象)是否属于某种类型

Array.isArray()用于判断一个对象是否为数组

var arr = [1,23];
var obj = {};
console.log(arr instanceof Array) //true;
console.log(obj instanceof Array) //false;
console.log(Array.isArray(arr)) //true;
console.log(Array.isArray(obj)) //false;

 

 

数组方法

增删

push()

push() 在我们数组的末尾 添加一个或者多个数组元素

(1) push 是可以给数组追加新的元素

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

    arr.push(4);

        // (3) push完毕之后，返回的结果是 新数组的长度

    console.log(arr.push(4)); //输出的是4 即新数组的长度

        // (4) 原数组也会发生变化

举例：


var arr = [1,2,3];
arr.push(4);
console.log(arr) //[1,2,3,4]
console.log(arr.push(4)); //输出的是4 即新数组的长度

 

unshift() 用法类比push即可

  1. unshift 在我们数组的开头 添加一个或者多个数组元素

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

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

        // (3) unshift完毕之后，返回的结果是新数组的长度

        // (4) 原数组也会发生变化 例如

var arr = [1,2,3,4];
arr.unshift(0);
console.log(arr) // [0,1,2,3,4]
console.log(arr.unshift(0))  //5   即新数组的长度

 

pop()

 3. pop() 它可以删除数组的最后一个元素  

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

        // (2) pop() 没有参数!!!!

    arr.pop();

        // (3) pop完毕之后，返回的结果是 删除的那个元素

    console.log(arr.pop()) 结果：2 pop完毕之后，返回的结果是 删除的那个元素

        // (4) 原数组也会发生变化

举例

var arr2 = [1,2,3];
arr.pop();
console.log(arr2);//[1,2]
console.log(arr.pop()) 结果：2 pop完毕之后，返回的结果是 删除的那个元素

 

shift()  类比pop()

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

        // (2) shift() 没有参数

        // (3) shift完毕之后，返回的结果是 删除的那个元素

        // (4) 原数组也会发生变化 */

var arr3 = [1,2,3];
arr3.shift();
console.log(arr3); //[2,3]
console.log(arr3.shift());// 1

 

数组排序

reverse

翻转数组

        var arr = ['pink', 'red', 'blue'];

        arr.reverse();

        console.log(arr);

 

sort(重点)


语法：arr.sort([compareFunction])
参数
compareFunction 可选
用来指定按某种顺序进行排列的函数。（如果省略，元素按照默认方式进行排序--）
firstEl
第一个用于比较的元素。
secondEl
第二个用于比较的元素。

compareFunction 可选

用来指定按某种顺序进行排列的函数。（如果省略，元素按照默认方式进行排序--）例如:

image.png

数组排序（冒泡排序）


var arr1 = [12,3,44,5,6];
arr1.sort(function(a,b){
        return a-b;     //升序
        //retrun b-a;    //降序 }
        
        console.log(arr1) //[3,5,6,12,44]

   

获取数组元素索引

indexOf 从前面开始查找

 indexOf(数组元素)  作用就是返回该数组元素的索引号 从前面开始查找

        // 它只返回第一个满足条件的索引号

        // 它如果在该数组里面找不到元素，则返回的是 -1  (常用)

     

 var arr = ['red', 'green', 'blue', 'pink', 'blue'];
 console.log(arr.indexOf('blue'));
  输出：2

        其他用法参考lastIndexOf

lastIndexOf 从数组的后面向前查找

lastIndexOf() 方法返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

Try it

语法

arr.lastIndexOf(searchElement[, fromIndex])

参数

searchElement

被查找的元素。

fromIndex 可选

从此位置开始逆向查找。fromIndex的默认值为数组的长度减 1(arr.length-1)，即整个数组都被查找。如果该值大于或等于数组的长度，则整个数组会被查找。如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。如果该值为负时，其绝对值大于数组长度，则方法返回 ****-1，即数组不会被查找。

返回值

数组中该元素最后一次出现的索引，如未找到返回-1。

描述

lastIndexOf 使用严格相等（strict equality，即 ===）比较 searchElement 和数组中的元素。

 

例子：使用 lastIndexOf (重点看这个 就能看明白上面的解释了)

下例使用 lastIndexOf 定位数组中的值。

var array = [2, 5, 9, 2];从后开始往前查找，输出的是最后一个2的index
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);数组中没有该元素
// index is -1
index = array.lastIndexOf(2, 3);从索引号为3的元素开始往前查找，输出
的仍然是最后一个2的index
// index is 3
index = array.lastIndexOf(2, 2);从索引号为2的元素开始往前查找，输出
的是索引号为0的2
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3

数组转换为字符串

toString 

image.png

join(分隔符)

把数组转换为用指定分隔符分割的字符串


var arr = ['blue','green','pink'];
console.log(arr.join()); // blue,green,pink  不跟参数 默认是用逗号分割字符串
console.log(arr.join('-'));  //blue-green-pink
console.log(arr.join('$'); //blue$green$pink

数组迭代（遍历）方法(超级全)

arr.forEach() arr.map() 以及for

image.png

image.png

image.png

let arr = [1,2,3,4,5]
let arr1 = [9,8,7,6,5]
arr.forEach(function(item,index,arr){
    console.log(this[index])  //9 8 7 6 5   此处this[index]==arr1[index]
    },arr1)  //回调函数内部的this指向arr1,而不是arr

分别用for, forEach, map来遍历

var arr = ['a','b','c'];
for (var i=0;i<arr.length;i++){
    console.log(arr[i])
      };  //a b c

arr.forEach((item,index)=>{
     console.log(item)
     });  //a b c

arr.map((item,index)=>{
    console.log(item)
     });  //a b c



二者基本用法都一致
 map, forEach 方法都无法遍历对象，仅适用于数组的遍历
forEach() 不会改变原数组也没有返回值;map()有返回值返回的是一个新数组(不会改变原始数组);  
forEach无法使用 break，continue 跳出循环，使用 return 时，效果和在 for 循环中使用 continue 一致；

map支持链式调用
let arr = [1,2,3];
arr.map(item=>item+1).map(item=>item+1)  //[3,4,5]    

map 方法不会对空数组进行检测；

image.png

arr.forEach() arr.map()的参数是一个回调函数, 数组中的每个值都会调用回调函数

map的更多用例
//用例一
 var arr3 = [{ id: 1, name: 'a1' }, { id: 2, name: 'a2' }, { id: 3, name: 'a3' }];
     var c = arr3.map(function(item,index){   
         return item.id
     });
     console.log(c);    //[ 1, 2, 3 ]  !!是数组哦
 
 //用例二
  var arr3 = [{ id: 1, name: 'a1' }, { id: 2, name: 'a2' }, { id: 3, name: 'a3' }];
    var d = arr3.map(function(item, index) {
        return { name: item.name }
    });
    console.log(d); //[ { name: 'a1' }, { name: 'a2' }, { name: 'a3' } ];（拿到这组数据的方法不唯一）
    
    //还可以这样做(用for循环)
    var o = {}
    for (var i = 0; 0 < arr3.length; i++) {
        o.name = arr3[i].name
    }  //[ { name: 'a1' }, { name: 'a2' }, { name: 'a3' } ]

for v of arr

image.png

let arr = [
    {id:1,value:'hello'},
    {id:2,value:'world'},
    {id:3,value:'javascript'}
    ]
    
    for (let item of arr){
     console.log(item);
     }       
     
     // {id:1,value:'hello'}  {id:2,value:'world'} {id:3,value:'javascript'}

image.png

arr.filter()

image.png

image.png

arr.some() arr.every()

image.png

image.png

arr.reduce()

image.png

image.png

image.png 这个用法很复杂 先简单会用(如下)

用例一
//reduce()   累加器
    var arr5 = [15, 10, 15];
    var z2 = arr5.reduce(function(total, cur) { //total 每次累加后的结果  cur 当前元素
        return total + cur
    }, 5); //5初始值
    console.log(z2); //45

arr.reduceRight()

image.png

image.png

arr.find() arr.findIndex()

image.png

image.png

arr.keys() arr.values() arr.entries()

三个方法都返回一个数组的迭代对象，对象的内容不太相同：

  • keys() 返回数组的索引值(index)；
  • values() 返回数组的元素；
  • entries() 返回数组的键值对。
let arr = ['a','b','c']
const iterator1 = arr.keys();
const iterator2 = arr.values();
const iterator3 = arr.entries();
//分别遍历一下
for (let item of iterator1){
        console.log(item)} //0 1 2

for (let item of iterator2){
        console.log(item) }  //a b c
        
for (let item of iterator3){
        console.log(item) }  //[0,'a'] [1,'b'] [2,'c']

这个是控制台上console.log(arr.keys())的结果:

image.png


![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37d6f23525c94caf865488ba6642c2cc~tplv-k3u1fbpfcp-watermark.image?)
 var arr = ['a', 'b', 'c'];
    for (var i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    };
    arr.forEach(function(item, index) { //item = arr[i]
        console.log(item)
    });
    arr.map(function(item, index) { //item = arr[i]
        console.log(item)
    });

    //forEach()没有返回值   map()有返回值 返回的是一个数组  的区别
    var arr2 = [100, 200, 300];
    // var a = arr2.forEach(function(item,index){   //item = arr[i] 当前正在处理的那项 也就是数组的每一项
    //     return item+'kg'
    // });
    // console.log(a);   //undefined   forEach()没有返回值 

    var b = arr2.map(function(item, index) { //item = arr[i]
        return item + 'kg'
    });
    console.log(b); //[ '100kg', '200kg', '300kg' ]

    //
    var arr3 = [{ id: 1, name: 'a1' }, { id: 2, name: 'a2' }, { id: 3, name: 'a3' }];
    // var c = arr3.map(function(item,index){   
    //     return item.id
    // });
    // console.log(c);    //[ 1, 2, 3 ]
    //[{name:'a1'},{name:'a2'},{name:'a3'}];
    var d = arr3.map(function(item, index) {
        return { name: item.name }
    });
    console.log(d); //[ { name: 'a1' }, { name: 'a2' }, { name: 'a3' } ];（拿到这组数据的方法不唯一）
    //还可以这样做
    var o = {}
    for (var i = 0; 0 < arr3.length; i++) {
        o.name = arr3[i].name
    }

    //filter()   筛选  返回的满足条件的数组 原数组不会被改变
    //every()   检测 都满足条件返回true,只要有一个没有满足返回false
    //some()   检测 如果有一个满足，返回true,没有一个满足的，返回false

    //数组大于30的值
    var arr4 = [20, 30, 50, 15, 200];
    var x = arr4.filter(function(item, index) {
        return item > 30
    });
    console.log(x, arr4); //[ 50, 200 ] [ 20, 30, 50, 15, 200 ]

    var arr3 = [{ id: 1, name: 'a1' }, { id: 2, name: 'a2' }, { id: 3, name: 'a3' }];
    var x33 = arr3.filter(function(item) {
        return item.id > 1
    });
    console.log(x33); //[ { id: 2, name: 'a2' }, { id: 3, name: 'a3' } ]


    var arr4 = [20, 30, 50, 15, 200];
    var y = arr4.every(function(item, index) {
        return item > 10
    });
    console.log(y); //true


    var arr4 = [20, 30, 50, 15, 200];
    var z = arr4.some(function(item, index) { //item 元素  index 索引
        return item > 30
    });
    console.log(z); //true

    //reduce()   累加器
    var arr5 = [15, 10, 15];
    var z2 = arr5.reduce(function(total, cur) { //total 每次累加后的结果  cur 当前元素
        return total + cur
    }, 5); //5初始值
    console.log(z2); //45

    //用for循环累加
    var sum = 0;
    for (var i = 0; i < arr5.length; i++) {
        sum += arr5[i];
        console.log(sum);
    }




    var obj = {
        "name": 'fangfang',
        id: 1,
        age: 18,
        arr: [1, 2, 3],
        o2: { id: 2 },
        action: function() {

        }
    };


    var arr = [1, 2, 3];
    var arr2 = arr.concat();
    arr2.push(5);
    console.log(arr); //[ 1, 2, 3, 5 ] push方法会改变原数组


    //序列化  JSON.parse(JSON.stringify(obj))  对象转换为json字符串

    var obj = {
        name: 'fangfang',
        id: 1,
        age: 18,
        o2: { id: 2 },
        action: function() {}
    };
    var obj3 = JSON.parse(JSON.stringify(obj));
    obj.o2.id = 999;
    console.log(obj3); //{ name: 'fangfang', id: 1, age: 18, o2: { id: 2 } } 
    //修改原对象没有影响obj3,实现了深拷贝，但是会丢失掉原对象中的方法
    console.log(obj);
    //{ name: 'fangfang',
    // id: 1,
    // age: 18,
    // o2: { id: 999 },
    // action: [Function: action]
    //   }

总结

image.png

数组其他方法

concat

[1,2].concat([3,4])  //[1,2,3,4]

slice

image.png

 

splice

image.png

var arr= [5,6,7,8];
arr.splice(1,1);
arr.splice(1,0,9);
arr.splice(1,2,3);

Array.from

  • 作用一:把伪数组转换为真数组

image.png

image.png

  • 把set数据转化成真数组 image.png

image.png

    let arr = [1,1,2,97,56,56,56,56];
       let set = new Set(arr);
       console.log(set);
       let arr2 = Array.from(set);
       console.log(arr2);

image.png

  • 把map数据转化为真数组

image.png

  • 把字符串转化为数组 image.png

  • 浅克隆一个数组

image.png

  • 使用Array.from实现数组去重

image.png

Array.of()

image.png

copyWithin() 非重点


   [1, 2, 3, 4, 5].copyWithin(0, 3);
    //[4, 5, 3, 4, 5] 
    //将从3号位置到数组结束的成员（4和5），复制到从0号位开始的位置，结果覆盖了原来的1和2。
    [1, 2, 3, 4, 5].copyWithin(1, 3); //[1,4,5,4,5]  
    //把索引为1的数字开始进行替换，用索引3和4的进行替换 含头不含尾
    [1, 2, 3, 4, 5].copyWithin(0, 3, 4); //[4,2,3,4,5] 
    [1, 2, 3, 4, 5].copyWithin(0, -2, -1); //[4,2,3,4,5] 0开始替换的索引号 -2用于替换的开始索引号 -1用于替换的结束索引号
    [1, 2, 3, 4, 5].copyWithin(-1, 3) //从4开始  [1, 2, 3, 4, 4]

fill()

image.png

image.png image.png

includes()

image.png  

flat()

image.png

flatMap()

image.png

总结对比

    pop  从后面删掉数组元素

        shift 从前面删掉数组元素

        unshift 在数组前面追加

        splice  通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

        sort 给数组排序

        reverse: 反转数组

        以上这些数组的方法都会改变原数组 vue可以监测到

        filter不会改变原数组 vue无法 监测到 无法进行页面的更新  

 

avatar
文章
阅读
粉丝