数组

1.数组的四个基本方法

方法	描述	备注
push()	向数组的最后面插入一个或多个元素，返回结果为该数组新的长度	会改变原数组
pop()	删除数组中的最后一个元素，返回结果为被删除的元素	会改变原数组
unshift()	在数组最前面插入一个或多个元素，返回结果为该数组新的长度	会改变原数组
shift()	删除数组中的第一个元素，返回结果为被删除的元素	会改变原数组

1.1 push()

push()：向数组的最后面插入一个或多个元素，返回结果为该数组新的长度。

语法：

数组的新长度 = 数组.push(元素);

例1.1：

var arr = ["张三", "李四", "王五"];
var result1 = arr.push("老刘"); // 末尾插入一个元素
var result2 = arr.push("老齐", "小八"); // 末尾插入多个元素

console.log(result1); // 4
console.log(result2); // 6
console.log(JSON.stringify(arr)); // 打印结果：["张三","李四","王五","老刘","老齐","小八"]

1.2 pop()

pop()：删除数组中的最后一个元素，返回结果为被删除的元素。

语法：

被删除的元素 = 数组.pop();

例1.2：

var arr = ["张三", "李四", "王五"];
var result1 = arr.pop();

console.log(result1); // 张三
console.log(JSON.stringify(arr)); // ["李四","王五"]

1.3 unshift()

unshift()：在数组最前面插入一个或多个元素，返回结果为该数组新的长度。插入元素后，其他元素的索引会依次调整。

语法：

数组的新长度 = 数组.unshift(元素);

例1.3：

var arr = ["张三", "李四", "王五"];

var result1 = arr.unshift("李一"); // 最前面插入一个元素
var result2 = arr.unshift("周二", "周三"); // 最前面插入多个元素

console.log(result1); // 4
console.log(result2); // 6
console.log(JSON.stringify(arr)); // 打印结果：["周二","周三","李一","张三","李四","王五"]

1.4 shift()

shift()：删除数组中的第一个元素，返回结果为被删除的元素。

语法：

被删除的元素 = 数组.shift();

例 1.4：

var arr = ["张三", "李四", "王五"];
var result1 = arr.shift();

console.log(result1); // 张三
console.log(JSON.stringify(arr)); // ["李四","王五"]

2. 数组的遍历

遍历数组即：获取并操作数组中的每一个元素。

数组迭代方法包括：every()、filter()、forEach()、map()、some()

这几个方法不会修改原数组。

2.1 for循环 遍历

例2.1：

var arr = ["11","22","33"];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);  // arr[i]代表的是数组中的每一个元素i
}
console.log(arr);

结果：

11
22
33
["11", "22", "33"]

2.2 forEach() 遍历

forEach() 这种遍历方法只支持IE8以上的浏览器。IE8及以下的浏览器均不支持该方法。所以如果需要兼容IE8，则不要使用forEach，改为使用for循环来遍历即可。

forEach()方法需要一个函数作为参数。这种函数，是由我们创建但是不由我们调用的，我们称为回调函数。

数组中有几个元素，该回调函数就会执行几次。执行完毕后，浏览器会将遍历到的元素。

回调函数中传递三个参数：

• 第一个参数，就是当前正在遍历的元素

• 第二个参数，就是当前正在遍历的元素的索引

• 第三个参数，就是正在遍历的数组

例2.2：

var arr = ["11","22","33"];
arr.forEach(function(item, index, array) {
  console.log("item:" + item);
  console.log("index:" + array);
  console.log("obj:" + array);
  console.log("----------");
});

结果：

item:11
index:0
array:11,22,33
----------
item:22
index:1
array:11,22,33
----------
item:33
index:2
array:11,22,33
----------

2.3 map()方法

解释：对数组中每一项运行回调函数，返回该函数的结果，组成的新数组（返回的是加工之后的新数组）。

比如说，有一个已知的数组arr，我要求让arr中的每个素加10，这里就可以用到map方法。
例2.3：

var arr = [1, 3, 6, 2, 5, 6];

var arr2 = arr.map(function (item, index, array) {
    return item + 10;  // 让arr1中的每个元素加10
})
console.log(arr2);

结果：

[11, 13, 16, 12, 15, 16]

2.4 filter

语法：

Array.prototype.filter(function(item, index, array){})

解释：对数组中每一项运行回调函数，该函数返回结果是true的项，将组成新的数组（返回值就是这个新的数组）。

例2.4：
找出数组 arr1 中大于4的元素，返回一个新的数组。代码如下：

var arr1 = [1, 3, 4, 2, 5, 6];

var arr2 = arr1.filter(function (item, index) {
    return item > 4; // 将arr1中大于4的元素返回
    })
console.log(arr2);

结果：

 [5, 6]

2.5 every()方法

解释：对数组中每一项运行回调函数，如果都返回true，every就返回true；如果有一项返回false，则停止遍历，此方法返回false。

注意：every()方法的返回值是boolean值，参数是回调函数。

例2.5：

var arr1 = [1, 3, 4, 2, 5, 6];
var bool1 = arr1.every(function (item, index, array) {
    if (item> 5) {
        return false;
    }
    return true;
});
console.log(bool1);  // false。只要有一个元素大于5，就返回false

var arr2 = [1, 3, 4, 2, 5];
var bool2 = arr2.every(function (item, index, array) {
    if (item > 6) {
        return false;
    }
    return true;
});
console.log(bool2);  // true。因为每个元素都小于6。

2.6 some()方法

解释：对数组中每一项运行回调函数，只要有一项返回true，则停止遍历，此方法返回true。

3. 数组的常见方法

方法	描述	备注
slice()	从数组中提取指定的一个或多个元素，返回结果为新的数组	不会改变原数组
splice()	从数组中删除指定的一个或多个元素，返回结果为新的数组	会改变原数组
concat()	连接两个或多个数组，返回结果为新的数组	不会改变原数组
join()	将数组转换为字符串，返回结果为转换后的字符串	不会改变原数组
reverse()	反转数组，返回结果为反转后的数组	会改变原数组
sort()	对数组的元素,默认按照Unicode编码，从小到大进行排序	会改变原数组

3.1 slice()

slice()：从数组中提取指定的一个或者多个元素，返回结果为新的数组（不会改变原来的数组）。

备注：该方法不会改变原数组，而是将截取到的元素封装到一个新数组中返回。

语法：

新数组 = 原数组.slice(开始位置的索引, 结束位置的索引);    //注意：包含开始索引，不包含结束索引

例3.1：

var arr = ["a", "b", "c", "d", "e", "f"];

var result1 = arr.slice(2); // 从第二个值开始提取
var result2 = arr.slice(-2); // 提取最后两个元素
var result3 = arr.slice(2, 4); // 提取从第二个到第四个之间的值（不包括第四个值）
var result4 = arr.slice(4, 2); // 空

console.log("arr:" + JSON.stringify(arr));
console.log("result1:" + JSON.stringify(result1));
console.log("result2:" + JSON.stringify(result2));
console.log("result3:" + JSON.stringify(result3));
console.log("result4:" + JSON.stringify(result4));

结果：

arr:["a","b","c","d","e","f"]
result1:["c","d","e","f"]
result2:["e","f"]
result3:["c","d"]
result4:[]

补充：

很多前端开发人员会用 slice()将伪数组，转化为真数组。写法如下：

array = Array.prototye.slice.call(arrayLike)
或者
array = [].slice.call(arrayLike)

ES6 看不下去这种蹩脚的转化方法，于是出了一个新的 API：（专门用来将伪数组转化成真数组）

array = Array.from(arrayLike)

3.2 splice()

splice()：从数组中删除指定的一个或多个元素，返回结果为新的数组（会改变原来的数组，会将指定元素从原数组中删除）。

语法：

新数组 = 原数组.splice(起始索引index, 需要删除的个数, 第三个参数, 第四个参数...);

上方语法中，第三个及之后的参数，表示：向原数组中添加新的元素，这些元素将会自动插入到开始位置索引的前面。

例3.2.1：

var arr1 = ["a", "b", "c", "d", "e", "f"];
var result1 = arr1.splice(1); // 从第index为1的位置开始，删除元素

console.log("arr1：" + JSON.stringify(arr1));
console.log("result1：" + JSON.stringify(result1));

console.log("-----------------------");

var arr2 = ["a", "b", "c", "d", "e", "f"];
var result2 = arr2.splice(-2); // 从第一个位置开始，删除元素

console.log("arr2：" + JSON.stringify(arr2));
console.log("result2：" + JSON.stringify(result2));

console.log("-----------------------");

var arr3 = ["a", "b", "c", "d", "e", "f"];
var result3 = arr3.splice(1, 3); // 从第index为1的位置开始删除元素,一共删除三个元素

console.log("arr3：" + JSON.stringify(arr3));
console.log("result3：" + JSON.stringify(result3));

console.log("-----------------------");

结果：

arr1：["a"]
result1：["b","c","d","e","f"]
-----------------------
arr2：["a","b","c","d"]
result2：["e","f"]
-----------------------
arr3：["a","e","f"]
result3：["b","c","d"]
-----------------------

例3.2.2：
（第三个参数的用法）

var arr4 = ["a", "b", "c", "d", "e", "f"];

//从第index为1的位置开始删除元素,一共删除三个元素。并且在 index=1 的前面追加两个元素
var result4 = arr4.splice(1, 3, "qwer", "vue");

console.log("arr4：" + JSON.stringify(arr4));
console.log("result4：" + JSON.stringify(result4));

结果：

arr4：["a","qwer","vue","e","f"]
result4：["b","c","d"]

3.3 concat()

concat()：连接两个或多个数组，返回结果为新的数组。（不会改变原数组）

语法：

新数组 = 数组1.concat(数组2, 数组3 ...);

例3.3：

var arr1 = [1, 2, 3];
var arr2 = ["a", "b", "c"];
var arr3 = ["qwer", "vue"];

var result1 = arr1.concat(arr2);

var result2 = arr2.concat(arr1, arr3);

console.log("arr1 =" + JSON.stringify(arr1));
console.log("arr2 =" + JSON.stringify(arr2));
console.log("arr3 =" + JSON.stringify(arr3));

console.log("result1 =" + JSON.stringify(result1));
console.log("result2 =" + JSON.stringify(result2));

打印结果：

arr1 =[1,2,3]
arr2 =["a","b","c"]
arr3 =["qwer","vue"]

result1 =[1,2,3,"a","b","c"]
result2 =["a","b","c",1,2,3,"qwer","vue"]

从结果中可以看到，原数组并没有被修改。

3.4 join()

join()：将数组转换为字符串，返回结果为转换后的字符串（不会改变原来的数组）。

补充：join()方法可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符；如果不指定连接符，则默认使用 , 作为连接符，此时和 toString()的效果是一致的。

语法：

新的字符串 = 原数组.join(参数); // 参数选填

例3.4：

var arr = ["a", "b", "c"];

var result1 = arr.join(); // 这里没有指定连接符，所以默认使用 , 作为连接符

var result2 = arr.join("-"); // 使用指定的字符串作为连接符

console.log(typeof arr);
console.log(typeof result1);
console.log("arr =" + JSON.stringify(arr));
console.log("result1 =" + JSON.stringify(result1));
console.log("result2 =" + JSON.stringify(result2));

结果：

object
string
arr =["a","b","c"]
result1 ="a,b,c"
result2 ="a-b-c"

3.5 reverse()

reverse()：反转数组，返回结果为反转后的数组（会改变原来的数组）。

语法：

反转后的数组  =  数组.reverse();

例3.5：

var arr = ["a", "b", "c", "d", "e", "f"];

var result = arr.reverse(); // 将数组 arr 进行反转

console.log("arr =" + JSON.stringify(arr));
console.log("result =" + JSON.stringify(result));

结果：

arr =["f","e","d","c","b","a"]
result =["f","e","d","c","b","a"]

从结果可以看出，原来的数组已经被改变了。

3.6 sort()方法

sort()方法要好好理解。所以，我们单独用一大段来讲。

sort()：对数组的元素进行从小到大来排序（会改变原来的数组）。

3.6.1 sort()方法：无参时

如果在使用 sort() 方法时不带参，则默认按照Unicode编码，从小到大进行排序。

例3.6.1.1：（当数组中的元素为字符串时）

var arr1 = ["e", "b", "d", "a", "f", "c"];

var result = arr1.sort(); // 将数组 arr1 进行排序

console.log("arr1 =" + JSON.stringify(arr1));
console.log("result =" + JSON.stringify(result));

结果：

arr1 =["a","b","c","d","e","f"]
result =["a","b","c","d","e","f"]

例3.6.1.2：（当数组中的元素为数字时）

var arr2 = [5, 2, 11, 3, 4, 1];

var result = arr2s.sort(); // 将数组 arr2 进行排序

console.log("arr2 =" + JSON.stringify(arr2));
console.log("result =" + JSON.stringify(result));

结果：

arr2 =[1,11,2,3,4,5]
result =[1,11,2,3,4,5]

结果中，你会发现，使用 sort() 排序后，数字11竟然在数字2的前面。这是为啥呢？因为上面讲到了，sort()方法是按照Unicode编码进行排序的。

那如果我想让 arr2 里的数字，完全按照从小到大排序，怎么操作呢？继续往下看。

3.6.2 sort()方法：带参时

如果在 sort()方法中带参，我们就可以自定义排序规则。具体做法如下：

我们可以在sort()添加一个回调函数，来指定排序规则。回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数

浏览器根据回调函数的返回值来决定元素的排序：（重要）

• 如果返回一个大于0的值，则元素会交换位置

• 如果返回一个小于0的值，则元素位置不变

• 如果返回一个0，则认为两个元素相等，则不交换位置

例3.6.2：

var arr3 = [5, 2, 11, 3, 4, 1];
// 自定义排序规则
var result = arr3.sort(function(a, b) {
  if (a > b) { // 如果 a 大于 b，则交换 a 和 b 的位置
	return 1;
  } else if (a < b) { // 如果 a 小于 b，则位置不变
	return -1;
  } else { // 如果 a 等于 b，则位置不变
	return 0;
  }
});

console.log("arr3 =" + JSON.stringify(arr3));
console.log("result =" + JSON.stringify(result));

结果：

arr3 =[1,2,3,4,5,11]
result =[1,2,3,4,5,11]

简化写法：

代码优化：（冒泡排序）

var arr3 = [5, 2, 11, 3, 4, 1];

// 自定义排序规则
var result = arr3.sort(function(a, b) {
  return a - b; // 升序排列
  // return b - a; // 降序排列
});

console.log("arr3 =" + JSON.stringify(arr3));
console.log("result =" + JSON.stringify(result));

结果：

arr3 =[1,2,3,4,5,11]
result =[1,2,3,4,5,11]

4. 数组的其他方法

方法	描述
indexOf(value)	从前往后索引，获取 value 在数组中的第一个下标
lastIndexOf(value)	从后往前索引，获取 value 在数组中的最后一个下标
find(function())	找出第一个满足「指定条件返回true」的元素。
findIndex(function())	找出第一个满足「指定条件返回true」的元素的index
Array.from(arrayLike)	将伪数组转化为真数组
Array.of(value1, value2, value3)	将一系列值转换成数组。

4.1 indexOf() 和 lastIndexOf()

语法：

索引值 = 数组.indexOf(value);

索引值 = 数组.lastIndexOf(value);

例4.1：

var arr = ["a","b","c","d","e","d","c"];

console.log(arr.indexOf("c"));       // 从前往后，找第一个"c"在哪个位置  2
console.log(arr.lastIndexOf("d"));   // 从后往前，找第一个"d"在哪个位置  5

4.2 find()

语法：

find(function(item, index, arr){return true})

作用：找出第一个满足「指定条件返回true」的元素。

例4.2：

let arr = [2, 3, 2, 5, 7, 6];

let result = arr.find(function (item, index) {
  return item > 4; // 遍历数组arr，一旦发现有第一个元素大于4，就把这个元素返回
});
console.log(result);  // 5

4.3 findIndex()

语法：

findIndex(function(item, index, arr){return true})

作用：找出第一个满足「指定条件返回true」的元素的index。

例4.3：

我们直接把上面的代码中的find方法改成findIndex，来看看效果。

let arr = [2, 3, 2, 5, 7, 6];

let result = arr.findIndex(function (item, index) {
   return item > 4; // 遍历数组arr，一旦发现有第一个元素大于4，就把这个元素的index返回
});

console.log(result); // 3

4.4 Array.from()

语法：

array = Array.from(arrayLike)

作用：将伪数组或可遍历对象转换为真数组。

<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>

  <script>
    let btnArray = document.getElementsByTagName('button');
    console.log(btnArray);
    console.log(btnArray[0]);

  </script>
</body>

上面的布局中，有三个button标签，我们通过getElementsByTagName获取到的btnArray实际上是伪数组，并不是真实的数组：

既然btnArray是伪数组，它就不能使用数组的一般方法，否则会报错：

解决办法：采用Array.from方法将btnArray这个伪数组转换为真数组即可：

Array.from(btnArray);

然后就可以使用数组的一般方法了：

伪数组与真数组的区别：
伪数组的原型链中没有 Array.prototype，而真数组的原型链中有 Array.prototype。因此伪数组没有 pop、join等属性。

4.5 Array.of()

语法：

Array.of(value1, value2, value3)

作用：将一系列值转换成数组。

例4.5：

let arr = Array.of(1, 'abc', true);
console.log(arr); // [1, "abc", true]

4.6 isArray()：判断是否为数组

布尔值 = Array.isArray(被检测的值) ;

例4.6：

let arr = ["Banana", "Orange", "Apple", "Mango"];
console.log(Array.isArray(fruits)); // true

4.7 toString()：转换数组

字符串 = 数组.toString();

解释：把数组转换成字符串，每一项用,分割。

例4.7：

let arr = ["Banana", "Orange", "Apple", "Mango"];
console.log(arr.toString()); // Banana,Orange,Apple,Mango