JavaScript数组及方法总结

发布时间 2023-10-31 22:57:51作者: 向阳花7

数组的创建方法

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()