操作数组的一些常用方法及示例

常用数组方法

push()

• 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
  - 可以将要添加的元素作为方法的参数传递，
  - 这样这些元素将会自动添加到数组的末尾
  - 该方法会将数组新的长度作为返回值返回

var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
arr.push("蜘蛛精")
console.log(arr)   //["孙悟空","猪八戒","沙和尚","唐僧","蜘蛛精"]

pop()

pop() 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回

var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
arr.pop()
console.log(arr)  //["孙悟空","猪八戒","沙和尚"]

unshift()

unshift()
- 向数组开头添加一个或多个元素，并返回新的数组长度
- 向前边插入元素以后，其他的元素索引会依次调整

var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
arr.unshift("白龙马","蜘蛛精");
console.log(arr) 
//["白龙马","蜘蛛精","孙悟空","猪八戒","沙和尚","唐僧"]

shift()

shift() 可以删除数组的第一个元素，并将被删除的元素作为返回值返回

var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
arr.shift();
console.log(arr)   //["猪八戒", "沙和尚", "唐僧"]

---

这里建议只要记住unshift()为头部添加，shift() push() pop()就不容易混淆了

---

slice()

比如数据过多，只提取其中前15条即可用此方法 arr.slice(0,16)

slice()
可以用来从数组提取指定元素
该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
参数：
1）截取开始的位置的索引,包含开始索引
2）截取结束的位置的索引,不包含结束索引
第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
索引可以传递一个负值，如果传递一个负值，则从后往前计算
-1 代表倒数第一个
-2 代表倒数第二个

var arr = ["孙悟空","猪八戒","沙和尚","蜘蛛精","玉兔精","王八精","牛魔王","红孩儿"];
var result1 = arr.slice(0,4);
result2 = arr.slice(3);
result3 = arr.slice(1,-2);
result4 = arr.slice(-2);
console.log(result1,result2,result3,result4)  
//result1：["孙悟空","猪八戒", "沙和尚", "蜘蛛精"]
//result2：["蜘蛛精", "玉兔精", "王八精", "牛魔王", "红孩儿"]
//result3：["猪八戒", "沙和尚", "蜘蛛精", "玉兔精", "王八精"]
//result4：["牛魔王", "红孩儿"]

splice()

语法

array.splice(start[, deleteCount[, item1[, item2[, …]]]])

参数

start​
表示开始位置的索引（从0计数）。
如果超出了数组的长度，则从数组末尾开始添加内容；
如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；
如果负数的绝对值大于数组的长度，则表示开始位置为第0位。

deleteCount 可选
整数，表示要删除的数量。
如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。
如果 deleteCount 被省略了，或者它的值大于等于 array.length - start
(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。
如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。

item1, item2, ... N 可选
要添加进数组的新元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

const fruits = ['香蕉', '苹果', '梨', '橘子'];
fruits.splice(1);
console.log(fruits);// ["香蕉"]

const hobbies = ['唱歌', '跳舞', '旅行', '吃'];
hobbies.splice(1,1);
console.log(hobbies);// ['唱歌', '旅行', '吃']

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months); // ["Jan", "Feb", "March", "April", "June"]

const letter = ['a', 'b', 'c', 'd','e'];
letter.splice(4, 1, 'f');
console.log(letter);//['a', 'b', 'c', 'd','f']

map()

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

语法

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])

参数

callback
生成新数组元素的函数，使用三个参数：
	currentValue
	callback 数组中正在处理的当前元素。
	index可选
	callback 数组中正在处理的当前元素的索引。
	array可选
	map 方法调用的数组。
thisArg可选
执行 callback 函数时值被用作this。

返回值

一个由原数组每个元素执行回调函数的结果组成的新数组。

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
console.log(roots,numbers)
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

const arr = [1, 2, 3, 4];
const newArr = arr.map(x => x * 2);
console.log(newArr);//[2, 4, 6, 8]
console.log(arr);//[1, 2, 3, 4]

filter()

方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
常用于筛选过滤

语法

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

参数

callback
用来测试数组的每个元素的函数。
返回 true 表示该元素通过测试，保留该元素，false 则不保留。
它接受以下三个参数：
	element
	数组中当前正在处理的元素。
	index可选
	正在处理的元素在数组中的索引。
	array可选
	调用了 filter 的数组本身。
thisArg可选
执行 callback 时，用于 this 的值。

返回值

一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

//筛选字母长度大于6的字母
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);// ["exuberant", "destruction", "present"]

//筛选排除所有较小的值
function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

forEach()

这个方法只支持IE8以上的浏览器，IE8及以下的浏览器均不支持该方法，所以如果考虑兼容性，则不要使用forEach，使用for循环来遍历

语法：

arr.forEach( callback ( currentValue [, index [, array] ] )[, thisArg])

参数：

callback
为数组中每个元素执行的函数，像这种由我们创建但是不由我们调用的函数，
我们称为回调函数。该函数接收一至三个参数：
	currentValue
	数组中正在处理的当前元素。
	index 可选
	数组中正在处理的当前元素的索引。
	array 可选
	forEach() 方法正在操作的数组。
thisArg 可选
可选参数。当执行回调函数 callback 时，用作 this 的值。

返回值：undefined

var arr = ["a","b","c"];	
		 
arr.forEach(function(value , index , array){
console.log('value = '+value, 'index = ' +index,'array = '+array)
}); 

将 for 循环转换为 forEach

const items = ['item1', 'item2', 'item3'];
const copy = [];

// before
for (let i=0; i<items.length; i++) {
  copy.push(items[i]);
}

// after
items.forEach(function(item){
  copy.push(item);
});

find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

语法

arr.find(callback[, thisArg])

参数

callback
在数组每一项上执行的函数，接收 3 个参数：
	element
	当前遍历到的元素。
	index可选
	当前遍历到的索引。
	array可选
	数组本身。
thisArg可选
执行回调时用作this 的对象。

返回值

数组中第一个满足所提供测试函数的元素的值，否则返回 undefined。

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// expected output: 12

//用对象的属性查找数组里的对象
var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

function findCherries(fruit) {
    return fruit.name === 'cherries';
}

console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

方法	作用	是否影响原数组
push()	向数组的末尾添加一个或多个元素，并返回数组新的长度	是
pop()	删除数组的最后一个元素，并将删除的元素作为返回值返回	是
unshift()	向数组开头添加一个或多个元素，并返回新的数组长度；向前边插入元素以后，其他的元素索引会依次调整	是
shift	删除数组的第一个元素，并将被删除的元素作为返回值返回	是
splice()	将指定元素从原数组中删除，并将被删除的元素作为返回值返回	是
reverse()	用来反转数组（前面的到后面，后面的来前面）	是
sort()	用来对数组中的元素进行排序；也会影响原数组，默认会按照Unicode编码进行排序	是
join()	将数组转换为一个字符串	否
concat()	链接两个或多个数组，并将新的数组返回	否
slice()	用来从数组提取指定元素，不会改变原数组，而是将截取到的元素封装到一个新的数组中返回	否