JavaScript 常用的数组方法

Posted 2021-05-26 liyunlonggg

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左边的值）时会返回原数组。