JavaScript 数组及数组的常用方法

在平时的工作中，经常会用到数组及数组的各种方法，今天就以我们常用的各种方法进行整理。
首先我们要明白一个概念，什么是数组？

JavaScript 数组用于在单一变量中存储多个值。
数组是一种特殊的变量，它能够一次存放一个以上的值。
数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访
问这些值。
数组就是有序的数据集合。

1.数组的创建

1.1使用数组文本是创建 JavaScript 数组最简单的方法

var cars = ["Saab", "Volvo", "BMW"];

1.2使用 JavaScript 关键词 new

var cars = new Array("Saab", "Volvo", "BMW");

2.数组的操作方法

2.1 push() 在数组的后面添加(单个或多个) 新元素，返回数组新的长度,改变原数组

var arr = ['a', 'b', 'c'];
var temp = arr.push('x');
console.log(arr); //  ["a", "b", "c", "x"]
console.log(temp); // 4

2.2 pop() 删除数组的最后一个元素，返回被删除的元素,改变原数组

var arr = ['a', 'b', 'c'];
var temp = arr.pop();
console.log(arr); //  ["a", "b"]
 console.log(temp); // 'c'

2.3 unshift() 在数组的前面添加(单个或多个) 新元素,返回数组新的长度,改变原数组

var arr = ['a', 'b', 'c'];
var temp = arr.unshift('x');
console.log(arr); //   ["x", "a", "b", "c"]
console.log(temp); // 4

2.4 shift() 删除数组的第一个元素,返回被删除的元素,改变原数组

var arr = ['a', 'b', 'c'];
var temp = arr.shift();
console.log(arr); //   ["b", "c"]
console.log(temp); // '4'

2.5 splice() 可以对数组进行增、删、改，返回被删除元素组成的数组,改变原数组
2.5.1 删除所有项 : arr.splice(0)

var arr = ['a', 'b', 'c'];
var temp = arr.splice(0);
console.log(arr);   // []
console.log(temp);  // ["a", "b", "c"]

2.5.2 arr.splice(start,length) 删除从开始位置指定length个元素，返回删除的元素，如果不加length，则删除start位置及后面所有的元素。

var arr = ['a', 'b', 'c'];
var temp = arr.splice(0,1);
console.log(arr);   // ["b", "c"]
console.log(temp);  // ["a"]

2.5.3 增加元素： arr.splice(start,length,num1,num2...)
如果length是0，在start位置处添加num数据，(删除0个元素)，返回空数组

var arr = ['a', 'b', 'c'];
var temp = arr.splice(0,0,1,2,3);
console.log(arr);   // [1, 2, 3, "a", "b", "c"]
console.log(temp);  // []

2.5.4 修改元素： arr.splice(start,length,num1,num2...)
如果length是大于0，在start位置开始删除length个数据，再添加num数据，返回删除的元素

var arr = ['a', 'b', 'c','d'];
var temp = arr.splice(0, 2, 'x', 'y');
console.log(arr);   // ["x", "y", "c", "d"]
console.log(temp);  //["a", "b"]

2.6 reverse() 将数组进行倒转,修改原数组

var arr = ['a', 'b', 'c','d'];
var temp = arr.reverse();
console.log(arr);   // ["d", "c", "b", "a"]
console.log(temp);  // ["d", "c", "b", "a"]

2.7 sort() 将数组按照字符编码进行排序，返回排序后的数组，修改原数组

var arr = [1,2,3,10,20,30];
var temp = arr.sort();
console.log(arr);  // [1, 10, 2, 20, 3, 30]
console.log(temp); // [1, 10, 2, 20, 3, 30]

注意：以上7种方法都将修改原数组！！！

2.8 arr.slice(start,end)
2.8.1.截取从start位置到end位置的元素,返回截取元素组成的新数组

var arr = ['a', 'b', 'c','d'];
var temp = arr.slice(1,2);
console.log(arr);  // ["a", "b", "c", "d"]
console.log(temp); // ["b"]

2.8.2.如果参数只有start,.截取从start位置到数组最后返回截取元素组成的新数组

var arr = ['a', 'b', 'c','d'];
var temp = arr.slice(2);
console.log(arr);  // ["a", "b", "c", "d"]
console.log(temp); // ["c", "d"]

2.9 arr.join("-") 使用“-”将数组元素连接起来返回一个字符串

var arr = ['a', 'b', 'c','d'];
var temp = arr.join('-');
console.log(arr);  // ["a", "b", "c", "d"]
console.log(temp); // 'a-b-c-d'

2.10 arr.concat(brr,crr,...)将一个或多个数组所有元素拼接到arr后面，返回拼接后的新数组

var arr = ['a', 'b', 'c'];
var brr = [1, 2, 3];
var crr = ['Tom','Jerry'];
var drr = arr.concat(brr,crr)
console.log(drr);  // ["a", "b", "c", 1, 2, 3, "Tom", "Jerry"]

注意：上面3种方法执行完毕后都不会改变原数组！！！

3.数组迭代方法

3.1 indexOf() 判断一个数是否存在于数组，如果存在则返回这个数在数组中的下标，如果不存在就返回-1

var arr = ['a', 'b', 'c','d'];
var temp1 = arr.indexOf('a');
var temp2 = arr.indexOf('e');
console.log(temp1,temp2); //0 -1

3.2 forEach(匿名函数) 遍历数组没有返回值

    arr.forEach(function(item,index,array){
        item:数组的元素
        index:数组的下标
        array:遍历的数组
    })

3.3 filter()：过滤方法,根据过滤条件返回新的数组，不修改原数组

var arr = [1,2,3,4,5,6];
var brr = arr.filter(function (item, index, array) { //参数没用到可以不传
       return item % 2; //返回余数不为0的数
})
console.log(arr); //[1, 2, 3, 4, 5, 6]
console.log(brr); //[1, 3, 5]

4.map() 映射遍历数组--修改数组--返回数组

var arr = [1, 2, 3, 4, 5, 6];
var brr = arr.map(function (item, index, array) { //参数没用到可以不传
     return item * 10; //每个值乘以10
})
console.log(arr); //[1, 2, 3, 4, 5, 6]
console.log(brr); //[10, 20, 30, 40, 50, 60]

5.其他方法还有如every()、some()、reduce()

后记：

未完待续，有任何疏漏或建议请留言评论。
[参考资料]https://www.w3school.com.cn/js/js_arrays.asp