关注前端 | 前端博客
当前位置: JavaScript > JS-Array

JS-Array

2018-07-02 分类：JavaScript 作者：管理员 阅读（340）

整理出javascript数组常用的一些方法

数组的创建
数组的清空
数组的首位之前追加
数组的末尾之后追加
数组的首位删除
数组的末位删除
数组的替换|插入|删除
数组的截取
数组的合并
数组的排序
数组转字符串
数组随机排序
数组的遍历
找出第一个符合条件的数组成员索引值
数组值的"过滤"功能
数组值的累加
数组检测
检查数组中是否存在某个值
找出第一个符合条件的数组成员
找出第一个符合条件的数组成员的位置(索引值)
数组相关

数组的创建

数组的创建方式一
1
2
var arr=[];
console.log(arr)//[]
数组的创建方式二
1
2
3
4
5
var arr=new Array();
console.log(arr)//[]

var arr1=new Array(1);可以接收一个参数，参数表示这个数组的长度，没有值就是empty占位
console.log(arr1)//[empty]

数组的清空

1
2
3
var arr =[1,2,3,7,8,33,55]
arr.length=0;//清空数组的方法一，让length等于0；
console.log(arr)//[]
1
2
3
var arr =[1,2,3,7,8,33,55]
arr=[];//清空数组的方法二，给arr赋值为空数组即可
console.log(arr)//[]

数组的首位之前追加

1
2
3
4
//unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度,直接修改原有的数组
var arr =[1,2,3,7,8,33,55]
console.log(arr.unshift(99,88))//9
console.log(arr)// [99, 88, 1, 2, 3, 7, 8, 33, 55]

数组的末尾之后追加

1
2
3
4
//push() 方法可向数组的末尾添加一个或更多元素，并返回新的长度,直接修改原有的数组
var arr =[1,2,3,7,8,33,55]
console.log(arr.push(88))//8
console.log(arr)//[1, 2, 3, 7, 8, 33, 55, 88]

数组的首位删除

1
2
3
4
//shift() 方法用于把数组的第一个元素从其中删除，并返回被删除的值,直接修改原有的数组
var arr =[1,2,3,7,8,33,55]
console.log(arr.shift())//1
console.log(arr)//[2, 3, 7, 8, 33, 55]

数组的末位删除

1
2
3
4
//pop() 方法用于删除数组的最后一个元素,并返回被删除的值,直接修改原有的数组
var arr =[1,2,3,7,8,33,55]
console.log(arr.pop())//55
console.log(arr)//[1,2, 3, 7, 8, 33]

数组的替换 | 插入 | 删除

数组的替换
1
2
3
4
//替换 比push和unshift方法更灵活,并且可以在数组中的其他位置添加删除替换
var arr =[1,2,3,7,8,33,55]
console.log(arr.splice(1,1,'sanrenbiji'))//'sanrenbiji'替换掉数组索引值为1的值，直接修改原有的数组
console.log(arr)//[1, "sanrenbiji", 3, 7, 8, 33, 55]
数组的插入
1
2
3
4
//插入 比push和unshift方法更灵活,并且可以在数组中的其他位置添加删除替换
var arr =[1,2,3,7,8,33,55]
arr.splice(1,0,'sanrenbiji')//'sanrenbiji'插入到索引值为1的值前面,原有索引值为1的往后排变成2，直接修改原有的数组
console.log(arr)//[1, "sanrenbiji", 2, 3, 7, 8, 33, 55]
数组的删除
1
2
3
4
//删除 比push和unshift方法更灵活,并且可以在数组中的其他位置添加删除替换
var arr =[1,2,3,7,8,33,55]
console.log(arr.splice(1,1))// [2] 从数组索引值为1开始删除1个，返回被删除的值，直接修改原有的数组
console.log(arr)//[1, 3, 7, 8, 33, 55]
1
2
3
4
5
6
//delete 也可以删除数组的值,删除数组的值后被empty代替
var arr=[1,2,3,4]
delete arr[1]
console.log(arr)//[1, empty, 3, 4]
console.log(arr.length)//4
//只删除值长度不改变

数组截取 - 截取数组的值，以数组形式返回，不影响原始数组

1
2
3
var arr =[1,2,3,7,8,33,55]
console.log(arr.slice(1,3))//[2,3]  截取从arr数组的索引值2开始，到索引值3结束，包含开始索引值的值，不包含结束索引值的值
console.log(arr)//[1,2,3,7,8,33,55]

数组合并

1
2
3
4
var arr =[1,2,3]
var arr1=[4,5,6]
var arr2=[7,8,9]
console.log(arr.concat(arr1,arr2)) //[1, 2, 3, 4, 5, 6, 7, 8, 9]

数组排序

1
2
3
arr.sort();//数组排序，默认以字符串大小编码排序
arr.sort(function( a , b ){ return a – b });//标准排序传入比较函数，
arr.reverse();//数组前后调换位置(倒置)

数组转换成字符串

1
2
3
var arr =['我','可','劲','学'];
console.log(arr.join(''))//我可劲学
//把数组变成字符串

数组随机排序

1
2
3
arr.sort(function{
  return Math.random() > 0.5 ? -1 : 1;
});

数组的遍历

1
2
3
4
5
var arr =[1,2,3,7,8,33,55]
for(var i=0;i<arr.length;i++){
    console.log(arr[i])
    console.log(i)
}
1
2
3
4
5
var arr =[1,2,3,7,8,33,55]
arr.forEach(function(e,i){
    console.log(e)
    console.log(i)
})
1
2
3
4
5
var arr =[1,2,3,7,8,33,55]
arr.map(function(e,i){
    console.log(e)
    console.log(i)
})
1
2
3
4
5
//for in 遍历数组可以输出数组的索引值和对应的值
var arr =[1,2,3,7,8,33,55]
for(var i in arr){
    console.log('索引值'+i+'的值是:'+arr[i])
}
1
2
3
4
5
//for of 是ES6的方法,只返回每一项的值
var arr =[1,2,3,7,8,33,55]
for(var v of arr){
    console.log(v)
}

数组中值的索引值查找

1
2
3
4
5
//从数组第一项往后查找给出的值,找到第一个就立即返回该值在数组里的索引值,如果查到最后都没有找到就返回-1
var arr =[1,2,3,7,8,33,55]
console.log(arr.indexOf(3))//2
console.log(arr.indexOf(1000))//-1
PS:应用场景之一:检查是否包含某个值;ES7的includes()也可以检查是否包含某个值
1
2
3
4
//从数组最后一项往前查找给出的值,找到第一个就立即返回该值在数组里的索引值,如果查到最后都没有找到就返回-1
var arr =[1,2,3,7,8,33,55]
console.log(arr.lastIndexOf(3))//2
console.log(arr.lastIndexOf(1000))//-1

数组值的'过滤'功能

1
2
3
4
5
6
7
//filter():过滤功能,数组中的每一项运行给定函数,返回满足条件组成的数组
var arr =[1,2,3,-1,-2,-3]
var filterRes=arr.filter(function(item,index){
    return item<0
})
console.log(filterRes)//[-1, -2, -3]
console.log(arr)//[1, 2, 3, -1, -2, -3]

数组值的累加(做一个累加器)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*
语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
total:       必需。初始值, 或者计算结束后的返回值。
currentValue:必需。当前元素
currentIndex:可选。当前元素的索引
arr:         可选。当前元素所属的数组对象。
initialValue:可选。传递给函数的初始值

注意:如果是空数组会报错,翻译大概就是空数组没有有效值
*/
var arr =[1,2,3]
var sum=arr.reduce(function(total, currentValue, currentIndex, arr){
    return total+=currentValue
})
console.log(sum)//6
console.log(arr)//[1,2,3]
1
2
3
4
5
6
var arr =[1,2,3]
var sum=arr.reduce(function(total, currentValue, currentIndex, arr){
    return total+=currentValue
},10)
console.log(sum)//16
console.log(arr)//[1,2,3]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*
reduceRight:从数组的最后一项开始,向前遍历到第一项 ,其他和reduce一样
语法:array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
total:必需。初始值, 或者计算结束后的返回值。
currentValue:必需。当前元素
currentIndex:可选。当前元素的索引
arr:可选。当前元素所属的数组对象。
initialValue:可选。传递给函数的初始值
注意:如果是空数组会报错,翻译大概就是空数组没有有效值
*/
var arr =[1,2,3]
var sum=arr.reduceRight(function(total, currentValue, currentIndex, arr){
    return total+=currentValue
})
console.log(sum)//6
console.log(arr)//[1,2,3]

数组检测 (检测数组所有元素是否都符合指定条件（通过函数提供）)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*
every()方法测试数组中的所有元素是否都通过了由提供的函数实现的测试。
every() 方法使用指定函数检测数组中的所有元素：
    如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
    如果所有元素都满足条件，则返回 true。
every() 不会对空数组进行检测。
every() 不会改变原始数组。
对于空数组，它返回true
语法   :array.every(function(currentValue,index,arr), thisValue)
currentValue:必须。当前元素的值
index:可选。当前元素的索引值
arr:可选。当前元素属于的数组对象
thisValue:可选的。this执行时使用的值callback。
*/
var arr =[1,2,3]
var checkResult=arr.every(function(currentValue,index,arr){
    if(currentValue<0){
        return false
    }else{
        return true
    }
})
console.log(checkResult)//true
console.log(arr)//[1,2,3]
//PS:常应用与全选和全不选,例如购物车案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*
some()方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。
语法:array.some(function(currentValue,index,arr),thisValue)
currentValue:   必须。当前元素的值
index:可选。当前元素的索引值
arr:可选。当前元素属于的数组对象
thisValue:this执行时使用的值callback。
空数组返回false
*/
var arr =[1,2,3]
var checkResult=arr.some(function(currentValue,index,arr){
    return currentValue>2
})
console.log(checkResult)//true
console.log(arr)//[1,2,3]

检查数组中是否存在某个值

1
2
3
4
5
6
7
8
var fruits = ['apple', 'banana', 'mango', 'guava'];
function checkAvailability(arr, val) {
  return arr.some(function(arrVal) {
    return val === arrVal;
  });
}
console.log(checkAvailability(fruits, 'kela'))    // false
console.log(checkAvailability(fruits, 'banana'))  // true
1
2
3
var fruits = ['apple', 'banana', 'mango', 'guava'];
console.log(fruits.includes('kela'))    // false
console.log(fruits.includes('banana'))  // true

找出第一个符合条件的数组成员

1
2
3
4
5
6
7
8
9
10
11
/*
find方法用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。
如果没有符合条件的成员，则返回undefined。如果需要查找元素的位置或元素是否存在于数组中，请使用indexOf()或includes()。
*/
var value=[1, 4, -5, 10].find(function(item){
    return item<0
})
console.log(value)    // -5
/*find方法比较好理解，这里的参数item代表数组里的每一项，然后find方法内部通过遍历数组里的每一项，找到＜0的这一项( - 5 )。*/
 
返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1
1
2
3
4
5
var index = [1, 4, -5, 10].findIndex(function(value,index,arr){
    return value < 0
})
console.log(index)  // 2
/*在这个例子当中，value代表这个数组的每一项，1，4，-5，10。index代表每一项的索引值，arr代表这个数组[1, 4, -5, 10]，然后我们需要返回的是＜0的这一项的索引值，即是2了。*/

Array.from方法将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Array.form</title>
</head>
<style>
body,ul,li{margin: 0;padding: 0;}
ul{width: 250px;height: 50px;display: flex;margin: 50px auto;}
ul li{background: pink;width: 25%;text-align: center;line-height: 50px;list-style: none;border: 1px solid #666}
</style>
<body>
<ul>
    <li class="li-1">li-1</li>
    <li class="li-2">li-2</li>
    <li class="li-3">li-2</li>
    <li class="li-4">li-4</li>
    <li class="li-5">li-5</li>
</ul>
<button id="btrn">按钮</button>
</body>
<script>
    /*Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。*/
    let aLi=document.querySelectorAll('ul li');
    var filterLi=Array.from(aLi).filter(function(e){
        return e.textContent=='li-2'
    })
    console.log(filterLi)//[li.li-2, li.li-3]
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
1
2
3
4
5
6
7
8
9
10
11
12
/*实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。*/
// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p =>{
  return p.textContent.length >100;
});

// arguments对象
function foo() {
  var args = Array.from(arguments);
  // ...
}

只要是部署了 Iterator 接口的数据结构，Array.from都能将其转为数组。

1
2
3
4
5
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

上面代码中，字符串和 Set 结构都具有 Iterator 接口，因此可以被Array.from转为真正的数组。
如果参数是一个真正的数组，Array.from会返回一个一模一样的新数组。

1
Array.from([1, 2, 3])// [1, 2, 3]

值得提醒的是，扩展运算符（...）也可以将某些数据结构转为数组。

1
2
3
4
5
6
7
// arguments对象
function foo() {
  const args = [...arguments];
}

// NodeList对象
[...document.querySelectorAll('div')]

拍平多维数组

1
2
3
4
5
6
7
var arr1=[1,[2,[3,[4,[5]]]],6,[7]]
var arr2=[8,[9,[10],11],12]
var ary1=arr1.toString().split(',');//arr1降成一维数组
var ary2=arr2.toString().split(',');//arr2降成一维数组
console.log(ary1)//["1", "2", "3", "4", "5", "6", "7"]
console.log(ary2)//["8", "9", "10", "11", "12"]
console.log(ary1.concat(ary2))//["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]

多维数组降维

1
2
3
var arr22=[1,[2,[3,[4,[5]]]],6,7]
console.log(arr22.flat())
//arr.flat()里可以传个参数:传Infinity表示直接降成一维,arr22有5维,传参数2,则降成(5-2)3维数组

生成0到count范围内的随机不重复的数 以数组形式返回

1
2
3
4
5
6
7
8
9
function tmp(count){
    var _arr=[];
    for(var i=0;i<count;i++){
        var randomNum=Math.floor(count*Math.random());
        _arr.indexOf(randomNum)==-1&&_arr.push(randomNum)
    }
    return _arr
}
console.log(tmp(20))
1
2
3
4
5
6
7
8
9
function tmp(count){
    var _arr=[];
    for(var i=0;i<count;i++){
        _arr.push(Math.floor(count*Math.random()))
        _arr=[...new Set(_arr)]
    }
    return _arr
}
console.log(tmp(20))

生成0到count范围内的随机不重复的数 以数组形式返回 数组长度为n

1
2
3
4
5
6
7
8
9
10
11
12
13
function tmp(count,n){
    var _arr=[];
    for(var i=0;i<count;i++){
        var randomNum=Math.floor(count*Math.random());
        _arr.indexOf(randomNum)==-1&&_arr.push(randomNum)
    }
    if(_arr.length==n){
        return _arr
    }else{
        return tmp(count,n)
    }
}
console.log(tmp(20,5))

指定数字范围，个数，生成随机不重复的数字，以数组形式返回

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*
count : 0-count范围 (确定生成随机数的起始范围，默认从0开始)
n     : 生成的个数
ps    : 随机不重复
*/
function tmp(count,n){
    var arr=[]
    while(arr.length<n){
        var randomNum=Math.floor(Math.random()*count);
        if(arr.length===0){
            arr.push(randomNum)
        }else{
           
            if(arr.indexOf(randomNum)==-1){
                arr.push(randomNum)
            }
           
        }
    }
    return arr
}

数组去重

1
2
3
4
5
6
7
8
9
10
11
12
var arr=[1,2,3,3,2,1,5,6,7,5]
function uniq(arr){
    let ary=[]
    let i=0,len=arr.length
    for(;i<len;i++){
        if(ary.indexOf(arr[i])==-1){
            ary.push(arr[i])
        }
    }
    return ary
}
console.log(uniq(arr))//[1, 2, 3, 5, 6, 7]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var arr=[1,2,3,3,2,1,5,6,7,5]
function uniq(arr){
    for(var i=0; i<arr.length; i++){
        for(var j=i+1; j<arr.length; j++){
            if(arr[i]===arr[j]){
                arr.splice(j,1)
                j--
            }
        }
    }
    return arr
}

console.log(uniq(arr))//[1, 2, 3, 5, 6, 7]
1
2
3
4
//ES6
var arr=[1,2,3,3,2,1,5,6,7,5]
console.log([...new Set(arr)])//[1, 2, 3, 5, 6, 7]
console.log(Array.from(new Set(arr)))//[1, 2, 3, 5, 6, 7]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var arr=[1,2,3,3,2,1,5,6,7,5]

function uniq(arr){
   
    for(let i=0;i<arr.length;i++){

        if(arr.lastIndexOf(arr[i])!=-1 && i!=arr.lastIndexOf(arr[i])){

            arr.splice(arr.lastIndexOf(arr[i]),1)

        }
    }
    return arr
}
console.log(uniq(arr))//[1, 2, 3, 5, 6, 7]

判断给出的几个数组,是否值都一样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var arr=[1,2,3]
var arr1=[1,2,3]
var arr2=[1,2,3,4]
function arrIsEqual(){
    var array=[];
    for(var i=0;i<arguments.length;i++){
        array.push(JSON.stringify(arguments[i]))
    }
    return !array.some(function(value, index) {
        return value !== array[0];
    });
}
console.log(arrIsEqual(arr,arr1))//true
console.log(arrIsEqual(arr,arr2))//false

判断数组里的值是否全部相同

1
2
3
4
5
6
7
8
9
10
11
12
13
var arr=[1,2,3]
var arr1=[1,1,1]
function isAllEqual(array) {
    if (array.length >0) {
        return !array.some(function(value, index) {
            return value !== array[0];
        });
    } else {
        return true;
    }
}
console.log(isAllEqual(arr))//false
console.log(isAllEqual(arr1))//true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var arr=[1,2,3]
var arr1=[1,1,1]
function isAllEqual(array) {
    if (array.length> 0) {
        for(var i=1;i<array.length;i++){
            if(array[i]!==array[0]){
                return false
            }
        }
        return true
    } else {
        return true;
    }
}
console.log(isAllEqual(arr))//false
console.log(isAllEqual(arr1))//true

获取数组里重复的项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var arr=[1,2,3,4,5,4,1,2] //1,2,4

function getRepeatItem(arr){
    var ary0=[],ary1=[]
    for(var i=0;i<arr.length;i++){
        if(ary0.indexOf(arr[i])==-1){
            ary0.push(arr[i])
        }else{
            ary1.push(arr[i])
        }
    }
    return ary1
}
console.log(getRepeatItem(arr))//[4, 1, 2]

「两年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(1) 打赏

感谢您让我添加个鸡腿！

支付宝
微信
赏 1

感谢您让我添加个鸡腿！

支付宝
微信
标签：

上一篇：

下一篇：

共有 0 条评论 - JS-Array

博客简介

一位不知名的前端工程师，专注全栈技术，分享各种所遇问题与个人心得，梦想成为一位知名大神!

最近更新

随机文章

技术相关

阿里CDN CDN大全 百度统计 百度收录 关键词排名 经典Css片段 时间戳格式化 Js33个概念 vConsole DSBridge DOM元素进屏 Shareinstall Http接口测试

精彩评论

友情链接

都是网虫，共勉之！申请交换友链

服务热线：
 177****6038

 QQ在线交流

点击这里给我发消息
点击这里给我发消息

 旺旺在线

点击这里给我发消息
点击这里给我发消息