要点

数组类型的检测

1.png

方法

Array.isArray()【判断对象是否为数组】

参数 描述
obj 必需，要判断的对象。

Array.isArray(obj)
如果obj是数组，则返回true，反之为false。

数组的头尾操作

1.png

Array.push()【尾部添加一个元素或更多，并返回新的长度】

参数 描述
item1, item2, …, itemX 必需。要添加到数组的元素。

Array.push(item1, item2, …, itemX)
2.png
演示：

  1. 简化代码
  2. <body> 
  3.     <p id="demo">单击按钮给数组添加新的元素。</p>
  4.     <button onclick="myFunction()">点我</button>
  5.     <script>
  6.     var fruits = ["Banana", "Orange", "Apple", "Mango"];
  7.     function myFunction(){
  8.       fruits.push("Kiwi")
  9.       var x=document.getElementById("demo");
  10.       x.innerHTML=fruits;
  11.     }
  12.     </script>
  13. </body>

1.gif
返回值

类型 描述
Number 数组新长度

Array.unshift()【为头部添加】

3.png

Array.pop()【删除尾部最后一个元素，并返回删除的元素。】

无需参数
1.png
返回值

类型 描述
所有类型 返回删除的元素。

演示：

简化代码
<body> 
    <p id="demo">单击按钮删除数组的最后一个元素。</p>
    <button onclick="myFunction()">点我</button>
    <script>
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    function myFunction(){
      fruits.pop();
      var x=document.getElementById("demo");
      x.innerHTML=fruits;
    }
    </script>
</body>

1.gif

Array.shift()【删除头部】

4.png

Array.splice()【在指定位置添加或删除数组中的元素】

Array.splice(index,howmany,item1,…..,itemX)

参数 描述
index 必需。规定从何处添加/删除元素。
该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany 可选。规定应该删除多少元素。必须是数字，但可以是 “0”。
如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX 可选。要添加到数组的新元素

返回值

Type(类型) 描述
Array 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

指定位置替换

1.png

指定位置插入

2.png

指定位置删除

3.png

Array.slice()【从已有的数组中返回选定的元素】

Array.slice(start, end)

参数 描述
start 可选。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

返回值

Type 描述
Array 返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

4.png
5.png

———————————————————————

Array.join()和String.split()【数组和字符串的互转】

1.png
因为特性正好相反所以放一块


Array.join(separator)

参数 描述
separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

返回值

类型 描述
String 返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。

如：
1.png

2.png
数据类型转换
3.png

Array.concat()【连接两个或多个数组】

Array1.concat(array2,array3,…,arrayX)

参数 描述
array2, array3, …, arrayX 必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

返回值

Type(类型) 描述
Array 对象 返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

7.png

Array.reverse()【颠倒数组中元素的顺序】

1.png

———————————————————————

Array.indexOf()【搜索数组中的元素，并返回它所在的位置】

2.png
Array.indexOf(item,start)

参数 描述
item 必须。查找的元素。
start 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

返回值

类型 描述
Number 元素在数组中的位置，如果没有搜索到则返回 -1。

3.png

指定从第几个下标位开始检索。列如从下标4开始
5.png

Array.includes()【判断一个数组是否包含一个指定的值】

Array.includes(searchElement)
Array.includes(searchElement, fromIndex)

参数 描述
searchElement 必须。需要查找的元素值。
fromIndex 可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
返回值： 布尔值。如果找到指定值返回 true，否则返回 false。

4.png
fromIndex 大于等于数组长度
如果fromIndex 大于等于数组长度 ，则返回 false 。该数组不会被搜索:
6.png
计算出的索引小于 0
如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。
列如我们定义var arr = ['a', 'b', 'c'];

// 数组长度是3
// fromIndex 是 -100
// computed index 是 3 + (-100) = -97

所以：
7.png

———————————————————————

Array.sort()【对数组的元素进行排序】

sort() 方法用于对数组的元素进行排序。
排序顺序可以是字母或数字，并按升序或降序。
默认排序顺序为按字母升序。

Array.sort(sortfunction)

参数 描述
sortfunction 可选。规定排序顺序。必须是函数。

返回值

Type 描述
Array 对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

Array对象 - 图26
Array对象 - 图27
也可写作这样的形式，更简洁

简化代码
<body> 
    <script>
        var arr = [33,22,11,55];
        arr.sort(function(a,b){
            return a-b; // 从小到大a-b，从大到小b-a
        })
        console.log(arr);
    </script>
</body>

Array对象 - 图28

ES6新增

includes()【判断一个数组是否包含一个指定的值】

语法

arr.includes(searchElement)
arr.includes(searchElement, fromIndex)
参数 描述
searchElement 必须。需要查找的元素值。
fromIndex 可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
Type 描述
Boolean 如果找到指定值返回 true，否则返回 false。

例：

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

fromIndex 大于等于数组长度
如果fromIndex 大于等于数组长度 ，则返回 false 。该数组不会被搜索:

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

arr.includes('c', 3);   //false
arr.includes('c', 100); // false

计算出的索引小于 0
如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。

// 数组长度是3
// fromIndex 是 -100
// computed index 是 3 + (-100) = -97

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

arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true

from()【将其他数据类型转换为数组】

可用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。
语法
Array.from(object, mapFunction, thisValue)

参数 描述
object 必需，要转换为数组的对象。
mapFunction 可选，数组中每个元素要调用的函数。
thisValue 可选，映射函数(mapFunction)中的 this 对象。

返回值：一个新的数组

例：
从string生成数组

Array.from('foo');
// [ "f", "o", "o" ]

从Set生成数组

const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// [ "foo", "bar", "baz" ]

从Map生成数组

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

从类数组对象生成数组

function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

// [ 1, 2, 3 ]

找值或索引

find()【找值】
语法
_arr_.find(_callback_[, _thisArg_])

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

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

描述：
find方法对数组中的每一项元素执行一次 callback 函数，直至有一个 callback 返回 true。当找到了这样一个元素后，该方法会立即返回这个元素的值，否则返回 undefined。注意 callback 函数会为数组中的每个索引调用即从 0 到 length - 1，而不仅仅是那些被赋值的索引，这意味着对于稀疏数组来说，该方法的效率要低于那些只遍历有值的索引的方法。
callback函数带有3个参数：当前元素的值、当前元素的索引，以及数组本身。
如果提供了 thisArg参数，那么它将作为每次 callback函数执行时的this ，如果未提供，则使用 undefined。
find方法不会改变数组。
在第一次调用 callback函数时会确定元素的索引范围，因此在 find方法开始执行之后添加到数组的新元素将不会被 callback函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到，但是其值已经是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 }

findindex()就是返回索引了