JavaScript 常用的数组方法

Posted liyunlonggg

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 常用的数组方法相关的知识,希望对你有一定的参考价值。

javascript 常用的数组方法

es4

toString 把数组转换为数组值(逗号分隔)的字符串。
var fruits = ["1", "2", "3", "4"];
console.log(fruits.toString()); //输出结果  1,2,3,4
join 方法也可将所有数组元素结合为一个字符串。
var fruits = ["1", "2", "3", "4"];
console.log(fruits.join(*)); //输出结果  1*2*3*4
pop 方法从数组中删除最后一个元素:
var fruits = ["1", "2", "3", "4"];
fruits.pop();   // 从 fruits 删除最后一个元素("4")
var x = fruits.pop();      //返回值: x 的值是 "4"
push() 方法(在数组结尾处)向数组添加一个新的元素:
var fruits = ["1", "2", "3", "4"];
fruits.push("5");       //  向 fruits 添加一个新元素
var x =  fruits.push("Kiwi");   // 返回值: x 的值是 5 
shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引。
var fruits = ["1", "2", "3", "4"];
fruits.shift();            // 从 fruits 删除第一个元素 "1"
var x =  fruits.shift();             // 返回值:  "Banana"
toString 把数组转换为数组值(逗号分隔)的字符串。
var fruits = ["1", "2", "3", "4"];
console.log(fruits.toString()); //输出结果  1,2,3,4
unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素:
var fruits = ["1", "2", "3", "4"];
fruits.unshift("0");    // 向 fruits 添加新元素 "0"
unshift() //方法返回新数组的长度。
splice() 方法可用于向数组添加新项:

第一个参数(2)定义了应添加新元素的位置(拼接)。
第二个参数(0)定义应删除多少元素。
其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组:
使用 splice() 来删除元素
fruits.splice(0, 1); 第一个参数是 下标 第二个参数是从第几个开始

var fruits = ["1", "2", "3", "4"];
fruits.splice(2, 0, "0", "5");
concat() 方法通过合并(连接)现有数组来创建一个新数组:

方法不会更改现有数组。它总是返回一个新数组。
方法可以使用任意数量的数组参数

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys); 
//方法也可以将值作为参数:
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]); 

slice() 方法用数组的某个片段切出新数组。

方法创建新数组。它不会从原数组中删除任何元素。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1); 
//该方法会从开始参数选取元素,直到结束参数(不包括)为止。
var citrus = fruits.slice(1, 3); 
//如果结束参数被省略,比如第一个例子,则 slice() 会切出数组的剩余部分。
var citrus = fruits.slice(2); 
**reverse()**数组翻转。
var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr);  
**sort()**将数组里的项从小到大排序
arr.sort(function (a, b) {
        return a - b; //从小到大排序
        return b - a; //从大到小排序
    }); 
isArray() 判断是否是数组。
function isArray(array) {
return (typeof array === 'object' && typeof array.length === 'number')
}
join() 把数组的元素用指定的符号拼接成一个大的字符串,不传参数默认以逗号连接
var arr2 = [-10, 20, 34, 22];
var res2 = arr2.join(); // '-10,20,34,22'
var res3 = arr2.join("-"); // '-10-20-34-22'
console.log(res2, res3);

ES5

indexOf()

从前往后遍历,返回item在数组中的索引位,如果没有返回-1;通常用来判断数组中有没有某个元素。可以接收两个参数,第一个参数是要查找的项,第二个参数是查找起点位置的索引。

var arr2 = [-2,34,0,-5,6];
var index = arr2.indexOf(34);
var index2 = arr2.indexOf(134);
console.log(index,index2); // 1 -1

// 练习 数组去重  [10,23,10,34,23,11] 返回 [10,23,34,11]
var arr = [10,23,10,34,23,11];
var res = [];
arr.forEach(function(item, index, arr) {
    if(res.indexOf(item) === -1) {
        res.push(item);
    }
});
console.log(res);

forEach()

forEach方法与map方法很相似,也是对数组的所有成员依次执行参数函数。但是,forEach方法不返回值,只用来操作数据。这就是说,如果数组遍历的目的是为了得到返回值,那么使用map方法,否则使用forEach方法;forEach的用法与map方法一致,参数是一个函数,该函数同样接受三个参数:当前值、当前位置、整个数组。

var arr = [10,30,50,70];
arr.forEach(function(item,index,arr) {
    //item表示元素、index表示下标、arr为数组
    //console.log(item,index); // 10 0
    //console.log(arr);  
    if(item >= 20) {
        console.log(item);    
    }
});
// 找数组中最小值
var arr2 = [-2,34,0,-5,6];
var min = arr2[0];
arr2.forEach(function(item,index,arr) {
    if(item < min) {
        min = item;
    }
});
alert(min);

map()

将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回;map方法接受一个函数作为参数。该函数调用时,map方法向它传入三个参数:当前成员、当前位置和数组本身。

const array1 = [1, 4, 9, 16];
	const map1 = array1.map(x => x * 2); // [2, 8, 18, 32] 

filter()

用于过滤数组成员,满足条件的成员组成一个新数组返回;它的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组;可以接受三个参数:当前成员,当前位置和整个数组。

var array = [10,23,21,34,44,88];
var res = array.filter(function(item,index,arr) {
    console.log(item);
    return item%2 === 0; //控制返回的值,保留偶数,return 1 为全部保留,0为都不保留
});
console.log(res); // [ 10, 34, 44, 88 ]
console.log(array); // [ 10, 23, 21, 34, 44, 88 ]

some()

该方法对数组中的每一项运行给定函数,如果该函数对任何一项返回 true,则返回true。(some方法会在数组中任一项执行函数返回true之后,不在进行循环。)

const array = [1, 2, 3, 4, 5];
	let bool = array.some((element) => element % 2 === 0)
	console.log(bool) // true
	
	var arr = [ 1, 2, 3, 4, 5, 6 ];
arr.some( function( item, index, array ){
      console.log( 'item=' + item + ',index='+index+',array='+array );
       return item > 3;
}) //true

every()

该方法对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回true。

array.every(function(currentValue,index,arr), thisValue)
var heights = [15, 24, 33, 12];
function checkHeight(a) {
return a >= 25;
}
var result = heights.every(checkHeight);
console.log(result);//false

2个归并方法:reduce()、reduceRight();
reduce()

依次处理数组的每个成员,最终累计为一个值。reduce是从左到右处理(从第一个成员到最后一个成员)。参数是一个函数,该函数接受以下两个参数:1累积变量,默认为数组的第一个成员;2当前变量,默认为数组的第二个成员。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

reduceRight()
从右往左。

ES6新增的数组方法

Array.from()

用于类似数组的对象(即有length属性的对象)和可遍历对象转为真正的数组。

let json ={ 
    '0':'hello', 
    '1':'123', 
    '2':'panda', 
    length:3 
} 
let arr = Array.from(json); console.log(arr);
//打印:["hello", "123", "panda"]

Array.of()

将一组值转变为数组。

let arr1 = Array.of('你好','hello'); console.log(arr1);//["你好", "hello"]

find()和findIndex()

用于找出第一个符合条件的数组成员。参数是个回调函数,所有数组成员依次执行该回调函数,直到找到第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,就返回undefined;可以接收3个参数,依次为当前值、当前位置、原数组。

/ find() findIndex() es5 some/every
let res = [2,3,3].findIndex(item => item > 1 );   //找到第一个返回值为true的值的下标作为返回值。找不到返回-1
console.log(res); // 0
        
let res2 = [1,2,3].some(item=>item>12);
console.log(res2);   //某个值大于12就返回true
        
let res3 = [1,2,3].every(item=>{
       console.log(123);   
       return item<2;    //每个值小于2就返回true
});
console.log(res3);

fill()

使用fill()方法给定值填充数组。
如:new Array(3).fill(7);//[7,7,7]
可以接收第二个和第三个参数,用于指定填充的起始位置和结束位置(不包括结束位置)。

let arr3 = [0,1,2,3,4,5,6,7]; arr3.fill('error',2,3); 
console.log(arr3);
//[0,1,"error",3,4,5,6,7]

遍历数组的方法:
entries()、values()、keys()

这三个方法都是返回一个遍历器对象,可用for…of循环遍历,唯一区别:keys()是对键名的遍历、values()对键值的遍历、entries()是对键值对的遍历。

for(let item of ['a','b'].keys()){
    consloe.log(item);
    //0
    //1
}
for(let item of ['a','b'].values()){
    consloe.log(item);
    //'a'
    //'b'
}
let arr4 = [0,1];
for(let item of arr4.entries()){
    console.log(item);  
    //  [0, 0]
    //  [1, 1]
}

如果不用for…of进行遍历,可用使用next()方法手动跳到下一个值。

let arr5 =['a','b','c']
let entries = arr5.entries();
console.log(entries.next().value);
//[0, "a"]
console.log(entries.next().value);
//[1, "b"]
console.log(entries.next().value);
//[2, "c"]
console.log(entries.next().value);
//undefined
copyWithin()

在数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),改变原数组。

该函数有三个参数。target:目的起始位置。start:复制源的起始位置(从0开始),可以省略,可以是负数。end:复制源的结束位置,可以省略,可以是负数,实际结束位置是end-1。

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
arr1.copyWithin(1, 3, 6);
//
把第3个元素(从0开始)到第5个元素,复制并覆盖到以第1个位置开始的地方。
console.log('%s', JSON.stringify(arr1))
//
[1,4,5,6,5,6,7,8,9,10,11]

start和end都是可以省略。start省略表示从0开始,end省略表示数组的长度值。目标的位置不够的,能覆盖多少就覆盖多少。

const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
arr2.copyWithin(3)
console.log('%s', JSON.stringify(arr2))
//[1,2,3,1,2,3,4,5,6,7,8]

start和end都可以是负数,负数表示从右边数过来第几个(从-1开始)。start小于end,两者为负数时也是。

const arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
arr3.copyWithin(3, -3, -2)
console.log('%s', JSON.stringify(arr3))

end永远大于end(取值必须是start右边的),end小于start(取start左边的值)时会返回原数组。

以上是关于JavaScript 常用的数组方法的主要内容,如果未能解决你的问题,请参考以下文章

18个常用的JavaScript片段分享

常用Javascript代码片段集锦

10个JavaScript代码片段,使你更加容易前端开发。

10个JavaScript代码片段,使你更加容易前端开发。

几个关于js数组方法reduce的经典片段

javascript JS-常用代码片段