JavaScript数组及方法总结

数组的创建方法

1、常规方式：

var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

2、简洁方式：

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

3、字面：

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

数组的属性

1、constructor ：返回对象的构造函数

  返回值：函数的引用，不是函数名：

    数组 constructor 属性返回 function Array() { [native code] }

    数字 constructor 属性返回 function Number() { [native code] }

    字符串 constructor 属性返回 function String() { [native code] }

  如果一个变量是数组你可以使用 constructor 属性来定义。

2、length ：设置或返回数组中元素的数目

3、prototype ：向对象添加属性和方法

  当构建一个属性，所有的数组将被设置属性，它是默认值。

    Array.prototype.name=value

  在构建一个方法时，所有的数组都可以使用该方法。

Array.prototype.myUcase=function()
{
    for (let i=0;i<this.length;i++)
    {
        this[i]=this[i].toUpperCase();                //小写转大写
    }
}
var fruits=["Banana","Orange","Apple","Mango"];
fruits.myUcase();                                    //数组输出值：BANANA,ORANGE,APPLE,MANGO

数组的对象方法

1、from() ：通过拥有 length 属性的对象或可迭代的对象来返回一个数组

    如果对象是数组返回 true，否则返回 false

boole = Array.from(object, mapFunction, thisValue);
<!--
object	必需，要转换为数组的对象。
mapFunction	可选，数组中每个元素要调用的函数。
thisValue	可选，映射函数(mapFunction)中的 this 对象。
-->

from() 的用处：

(1)、数组去重

let arr = Array.from(new Set([1, 2, 1, 2]))
console.log(arr) //[1, 2]

(2)、将一个伪数组转换为数组

let obj = {
    '0': 1,                                             // '0':1 中的'0'将转换为 key
    '1': 2,
    '2':3,
    'length': 4,                                        // length 规定了转换的数组有多长
}
let newObj= Array.from(obj, item => {return item});
console.log(newObj);                                    // 输出:[ 1, 2, 3, undefined ]

let obj = {
    'a': 1,
    'b': 2,
    'c':3,
    'length': 4,
}
let newObj = Array.from(obj, item => {return item})
console.log(newObj);                                     //key值为非数字所以无效，但规定了 length 所以输出: 四个 undefined

2、fill() ：将一个固定值替换数组的元素

array.fill(value, start, end);
<!--
value	必需。填充的值。
start	可选。开始填充位置。
end	可选。停止填充位置 (默认为 array.length)
-->

3、flat() 方法按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

  flat() 方法返回一个包含将数组与子数组中所有元素的新数组。

  flat() 方法会移除数组中的空项

newArray = array.flat(depth)
<!--
depth	指定要提取嵌套数组的结构深度，默认值为 1。
    -->

// 使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

4、flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。结构深度 depth 值为 1。

  与 map 连着深度值为 1 的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

// 箭头函数
flatMap((currentValue) => { /* … */ } )
flatMap((currentValue, index) => { /* … */ } )
flatMap((currentValue, index, array) => { /* … */ } )

// 回调函数
flatMap(callbackFn)
flatMap(callbackFn, thisArg)

// 行内回调函数
flatMap(function(currentValue) { /* … */ })
flatMap(function(currentValue, index) { /* … */ })
flatMap(function(currentValue, index, array){ /* … */ })
flatMap(function(currentValue, index, array) { /* … */ }, thisArg)

<!--
callback：可以生成一个新数组中的元素的函数，可以传入三个参数：
    currentValue：当前正在数组中处理的元素
    index：可选的。数组中正在处理的当前元素的索引。
    array：可选的。被调用的 map 数组
thisArg	可选的。执行 callback 函数时使用的this 值。
返回值:	数组。
-->

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

arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// only one level is flattened
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

let arr1 = ["it's Sunny in", "", "California"];

arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap(x => x.split(" "));

// ["it's","Sunny","in", "", "California"]

var arr = [1, 2, 3, 4];

arr.flatMap(x => [x, x * 2]);
// is equivalent to
arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
// [1, 2, 2, 4, 3, 6, 4, 8]

注意：这是低效的，并且应该避免大型阵列：在每次迭代中，它创建一个必须被垃圾收集的新临时数组，并且它将元素从当前的累加器数组复制到一个新的数组中，而不是将新的元素添加到现有的数组中。

5、concat()：连接两个或多个数组

newArray = array1.concat(array2, array3,..., arrayX)

6、isArray() ：判断一个对象是否为数组

boole = Array.isArray(obj)

7、sort() :对数组的元素进行排序。

  默认排序顺序为按字母升序。

  注意：当数字是按字母顺序排列时"40"将排在"5"前面。

    使用数字排序，你必须通过一个函数作为参数来调用。

    函数指定数字是按照升序还是降序排列。

    这种方法会改变原始数组！

newArray = array.sort(sortfunction)
<!--
sortfunction	可选。规定排序顺序。必须是函数。
    -->

数字排序（数字和升序）：

var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});

数字排序（数字和降序）：

var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});

数字排序 (字母和降序):

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();

8、copyWithin()：从数组的指定位置拷贝元素到数组的另一个指定位置

array.copyWithin(target, start, end);
<!--
    target	必需。复制到指定目标索引位置。
    start	可选。元素复制的起始位置。
    end	        可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。
-->

9、splice() ：添加或删除数组中的元素

  如果删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组。

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

10、entries() ：返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。

迭代对象中数组的索引值作为 key， 数组元素作为 value。

object = array.entries();
object.next().value;            //第一个数组键值对
object.next().value;            //第二个数组键值对
object.next().value;            //第三个数组键值对

[0, "Banana"]
[1, "Orange"]
[2, "Apple"]

11、some() ：检测数组中的元素是否满足指定条件（函数提供）。

  some() 方法会依次执行数组的每个元素：

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
• 如果没有满足条件的元素，则返回false。

boole = array.some(function(currentValue,index,arr),thisValue)

12、every() ：用于检测数组所有元素是否都符合指定条件（通过函数提供）

• 检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
• 如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测。

boole = array.every(function(currentValue,index,arr){}, thisValue);
<!--
    currentValue	必须。当前元素的值
    index	        可选。当前元素的索引值
    arr	                可选。当前元素属于的数组对象
    thisValue	        可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
                        如果省略了 thisValue ，"this" 的值为 "undefined"
-->

13、forEach() ：用于调用数组的每个元素，并将元素传递给回调函数。

array.forEach(callbackFn(currentValue, index, arr), thisValue);           //返回值：undefined

forEach() 的 continue 和 break 

continue 实现 ：

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

arr.forEach(function (item) {
    if (item === 3) {
        return;                        //结束循环的这一次
    }
    console.log(item);
});

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

arr.some(function (item) {
    if (item === 2){
     return;                          // 返回false，结束循环的这一次，但不中断循环
   }
  console.log(item);
});

break 实现：

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

arr.every(function (item) {
  console.log(item);
  return item !== 3;                                       //返回false，中断循环
});

try {
    var array = ["first","second","third","fourth"];        // 执行到第3次，结束循环
    array.forEach(function(item,index){
        if (item == "third") {
            throw new Error("EndIterative");
        }
        alert(item);                                        // first,sencond
    });
} catch(e) {
    if(e.message!="EndIterative") throw e;
};

14、map() ：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

newArray = array.map(function(currentValue,index,arr), thisValue)

15、 includes() ：判断一个数组是否包含一个指定的值，如果是返回 true，否则false

boole = arr.includes(searchElement, fromIndex)
<!--
searchElement	必须。需要查找的元素值。
fromIndex	可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
-->

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

16、at() ：接收一个整数值并返回该索引对应的元素，允许正数和负数

  如果找不到指定的索引，则返回 undefined

  at() 方法是通用的。其仅期望 this 具有 length 属性和以整数为键的属性。

item = array.at(index)

  在非数组对象上调用 at()：at() 方法读取 this 的 length 属性并计算需要访问的索引。

const arrayLike = {
  length: 2,
  0: "a",
  1: "b",
};
console.log(Array.prototype.at.call(arrayLike, -1));     // "b"

17、slice() ：从已有的数组中返回选定的元素。

  slice() 可提取字符串的某个部分，并以新的字符串返回被提取的部分。

newArray = array.slice(start, end)

18、 filter() ：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

newArray = array.filter(function(currentValue,index,arr), thisValue);

19、find() ：返回通过测试（函数内判断）的数组的第一个元素的值，如果没有符合条件的元素返回 undefined。

firstFindedValue = array.find(function(currentValue, index, arr),thisValue);

20、findIndex() ：返回传入一个测试条件（函数）符合条件的第一个元素位置，如果没有符合条件的元素返回 -1。

firstFindedIndex = array.findIndex(function(currentValue, index, arr), thisValue);

21、 indexOf() ：可返回数组中某个指定的元素位置

如果找到一个 item，则返回 item 的第一次出现的位置。

如果在数组中没找到指定元素则返回 -1。

key = array.indexOf(item,start)
<!--
item	必须。查找的元素。
start	可选的整数参数。规定在数组中开始检索的位置。如省略该参数，则将从字符串的首字符开始检索。
    -->

22、lastIndexOf() ：返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。

  如果在数组中没找到指定元素则返回 -1。

key = array.lastIndexOf(item,start)

23、reduce() :接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

outcome = array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
<!--
total	必需。初始值, 或者计算结束后的返回值。
currentValue	必需。当前元素
currentIndex	可选。当前元素的索引
arr	可选。当前元素所属的数组对象。
initialValue	可选。传递给函数的初始值
outcome    计算结果
    -->

24、reduceRight() ：从数组的末尾向前将数组中的数组项做累加

outcome = array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

25、toString() ：把数组转换为字符串，并返回结果。

注意： 数组中的元素之间用逗号分隔。

string = array.toString()

26、valueOf() ：返回 Array 对象的原始值。

  该原始值由 Array 对象派生的所有对象继承。

values = array.valueOf()

27、join() ：把数组中的所有元素转换一个字符串。

string = array.join(separator)
<!--
separator	可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
    -->

28、of() ：将一组值转换为数组，不考虑参数的数量或类型。

  Array.of() 和 Array() 构造函数之间的区别在于对单个参数的处理：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个 length 为 7 的空数组。

  如果对象是数组返回 true，否则返回 false。

Array.of(element0)
Array.of(element0, element1, /* … ,*/ elementN)
<!--
element0	必需，要转换为数组的元素。
element1, /* … ,*/ elementN	可选，要转换为数组的元素。
    -->

29、keys() ：从数组创建一个包含数组键的可迭代对象

  如果对象是数组返回 true，否则返回 false。

object = array.keys()
object.next().value           //第一个键值
object.next().value           //第一个键值
... ...

30、pop() ：删除数组的最后一个元素并返回删除的元素。

注意：此方法改变数组的长度！

lastItem = array.pop()

31、shift() :把数组的第一个元素从其中删除，并返回第一个元素的值。

removeFirstItem = array.shift()

32、push() :向数组的末尾添加一个或多个元素，并返回新的长度。

arrNewLength = array.push(item1, item2, ..., itemX)

33、unshift() ：向数组的开头添加一个或更多元素，并返回新的长度

newArrLength = array.unshift(item1,item2, ..., itemX)

34、reverse() ：颠倒数组中元素的顺序。

newArray = array.reverse()