JS数组详解-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangshenglu1/article/details/80315868

JS数组类型

一、 javaScript数组基本概述

1、创建数组的基本方式有两种。第一种是使用Array构造函数。如下面的示例代码：

var fruits = new Array();

事先知道数组的长度，也可以直接将该数量传递给构造函数，如下

var fruits = new Array(6);

2、创建数组的第二种表示方式是使用数组字面量的表示法，多个数据项之间用逗号隔开。如下所示：

var fruits =[“apople”,”banana”,”mango”];

3、数组的length属性很有特点 ——它不是只读的。因此可以通过设置这个属性，数组的末尾移除项或者想数组中添加新项。如下面的例子：

var fruits =[“apople”,”banana”,”mango”]; //创建一个包含3个字符串的数组

fruits.length = 2;

alter(fruits[2]); // undifined

利用length属性也可以方便地在数组末尾添加新项

var fruits =[“apople”,”banana”,”mango”];

fruits[fruits.length] =“Orange”; // 在位置3上添加一种水果

fruits[fruits.length] =“Peach”; // 在位置4上添加一种水果

二、检测数组

我们可以通过instanceof 操作符来进行判断。如：

if（value instanceof Array）{
// doing something

}。但是此处的判断会有一个问题，那就是他假定的是只有一个全局的执行环境。如果包含有多个框架实际上就存在有多个全局执行环境。此时需要采用ES5定义的Array.isArray()方法。Array.isArray()方法的最终目的是确定这个值到底是不是数组，而不管他是在哪个全局执行环境中创建的。用法如下：

if(Array.isArray(value)){

// doing something

}

三、转换方法

所有的对象都有toLocalString()、toString()和valueof()方法。其中，调用valueof()返回数组本身，而调用toString()方法会返回数组中每一个值的字符串表现形式拼接而成的一个以逗号分隔的字符串。如

var fruits =[“apople”,”banana”,”mango”];

var fruits =["appople","banana","mango"];

console.log(fruits.toLocaleString()); // appople,banana,mango

console.log(fruits.toString()); //appople,banana,mango

console.log(fruits.valueOf()); //["appople","banana", "mango"]

数组继承的toString()方法默认是采用逗号分隔的。而如果采用join()方法，则可以使用不同的分隔符来构建这个字符串。如：

varfruits = ["appople","banana","mango"];
console.log(fruits.join(" || ")) // appople || banana || mango
console.log(fruits.join()); // appople,banana,mango
console.log(fruits.join(" and ")) // appople and banana and mango

从示例可以看出，join()方法默认也是采用逗号进行分隔的。

四、栈方法

ES为数组专门提供push()和pop()方法，来实现类似栈(LIFO)的行为。请看下面的示例：

var fruits = ["appople","banana","mango"];  // 创建一个数组

var count = fruits.push("Orange","peach");   // 推入两项  count 返回的是当前数组的长度

console.log(fruits); //  ["appople", "banana", "mango", "Orange", "peach"]

console.log(count); // 5



var item = fruits.pop();  // 取得最后一项，即栈顶的那一项

console.log(item);  // peach

console.log(fruits);  //  ["appople", "banana", "mango", "Orange"]

五、队列方法

栈结构的访问规则是后进先出(LIFO)，而队列结构的访问规则是FIFO（先进先出）。队列在列表的末端添加项，从列表的前端移除项。上节所述的push()方法已经实现向数组末端添加项的方法。因此只需要模拟出一个从数组前端删除项的方法。实现这一操作的数组方法是shift()。它能移除数组中第一项并返回该项，同时将数组的长度减1。

var fruits = ["appople","banana","mango"];  // 创建一个数组

var count = fruits.push("Orange","peach");   // 推入两项  count 返回的是当前数组的长度

console.log(fruits); //  ["appople", "banana", "mango", "Orange", "peach"]

console.log(count); // 5



var item = fruits.shift();  // 取得第一项

console.log(item);  // appople

console.log(fruits);  //  ["banana", "mango", "Orange", "peach"]

六、重排序

数组中已经存在两个可以直接用来重排序的方法：reverse()和sort()。

var numbers = [2,993,9823,341,323,432,13,55];

numbers.reverse();  // 反转数组项的顺序

console.log(numbers);//  [55, 13, 432, 323, 341, 9823, 993, 2]

sort()方法默认是调用每个数组项的toString方法，然后比较所得到的字符串，以确定如何如何排序。

var numbers = [2,993,09823,341,323,432,13,55];

numbers.sort();  // 反转数组项的顺序

console.log(numbers);//  [13, 2, 323, 341, 432, 55, 9823, 993]

上述的排序方式在大多数的情况都不是最佳的方案，因此sort方法可以接受一个比较函数作为参考，以便我们指定哪个值位于哪个值的前面。如下：

var numbers = [2,993,09823,341,323,432,13,55];

numbers.sort(compare);  // 反转数组项的顺序

console.log(numbers);//  [2, 13, 55, 323, 341, 432, 993, 9823]

function  compare(v1,v2) {

    return v1-v2;

}

七、          操作方法

1、   concat()方法可以用来基于当前数组创建一个新的数组。如下：

var fruits = ["appople","banana","mango"];  // 创建一个数组

var newFruits =  fruits.concat("appople",["Orange","peach"]); //

console.log(fruits);  // ["appople", "banana", "mango"]

console.log(newFruits); // ["appople", "banana", "mango", "appople", "Orange", "peach"]

2、   slice()方法能够基于当前数组中的一个或者多个项创建一个新的数组。

var fruits = ["appople","banana","mango","Orange","peach"];  // 创建一个数组

var fruits2 = fruits.slice(1);

 var fruits3 = fruits.slice(1,4);

console.log(fruits);  // ["appople", "banana", "mango", "Orange", "peach"]

console.log(fruits2);  // ["banana", "mango", "Orange", "peach"]

console.log(fruits3); // ["banana", "mango", "Orange"]

3、 splice()方法。这个方法可能时最强大的数组方法了，它有很多中用法，splice()的主要用途是向数组的中部插入项。

² 删除可以删除任意数量的项，只需要指定两个参数，要删除的第一项的位置和要删除的项数。例如：splice(0,2)会删除数组中的前两项。

²  插入 可以向指定的位置插入任意数量的项，只需要提供3个参数：起始位置、0（要删除的项数）、要插入的项。例如 splice(2,0,"Orange","peach")会从当前数组的位置2开始，插入字符串"Orange"和"peach"

² 替换可以向指定位置插入任意数量的项，且同时删除任意数量的项。只需要指定三个参数：起始位置、要删除的项数和要插入的任意项。插入的项数不一定要与删除的项数相等。例如：splice(2,1,"Orange","peach")会删除当前数组位置2的项，然后从位置2的地方开始插入字符串"Orange","peach"。

splice()方法始终返回一个数组，该数组包含从原始数组中删除的项，如果没有任何项，则返回一个控数组。下面代码展示上述3种使用splice()方法的方式：

var fruits = ["appople","banana","mango"];  // 创建一个数组

var removed = fruits.splice(0,1);  // 删除第一项

console.log(fruits);  // ["banana", "mango"]

console.log(removed);   //  ["appople"] 返回的数组中只包含一项



removed = fruits.splice(1,0,"Orange","peach"); // 从位置1开始添加两项

console.log(fruits);  //  ["banana", "Orange", "peach", "mango"]

console.log(removed);  //  []



removed = fruits.splice(1,1,"pear","plum");  // 删除位置1的项，并插入两项

console.log(fruits);  //   ["banana", "pear", "plum", "peach", "mango"]

console.log(removed);   // ["Orange"]

八、          操作方法

ES5为数组添加两个位置方法：indexOf()和LastIndexOf()。这两个方法都接收两个参数：要查找的项和查找的起始点。一个是由数组的开头向后查找，一个是由数组的末尾开始向前查找。

两个方法都返回了要查找项在数组中的位置，或者在没有找到的情况下返回-1.在比较第一个参数与数组中的每一项是，会使用全等操作符。

var fruits = ["appople","banana","mango"];  // 创建一个数组

console.log(fruits.indexOf("banana"));// 1

九、          迭代方法

ES5为数组定义5个迭代方法。分别为every()、some()、filter()、map()、forEach()。在以上方法中，

l  every()和some()函数最相似。都是用来查询数组中的项是否满足某个条件。对every()来说，传入的函数必须每一项都返回true,这个方法才返回true；否则，它就返回false。而some()只需要其中某项返回true，就会返回true.请看如下的示例。

varnumbers = [1,2,12,13,2,53,23,64];
var everyResult = numbers.every(function (item,index,Array) {
    return item > 2;
});
var someResult = numbers.some(function (item,index,Array) {
    return item > 2;
});
console.log(everyResult);    ///false
console.log(someResult);    // true

l filter()函数，它利用指定的函数确定是否在返回的数组中包含某一项。例如，要返回一个所有数组都大于2的数组，可以使用如下的代码：

varnumbers = [1,2,12,13,2,53,23,64];
var filterResult = numbers.filter(function (value, index, array){
return (value >2);
})
console.log(filterResult); // [12, 13, 53, 23, 64]

l map()函数也返回一个数组，而这个数组的每一项都是在原始的数组总的对应项上运行传入函数的结果。例如，给数组中的每一项乘以2，然后返回这些乘积所组成的数组。如下所示：

varnumbers = [1,2,12,13,2,53,23,64];
var filterResult = numbers.map(function (value, index, array){
return value*2;
})
console.log(filterResult); // [2, 4, 24, 26, 4, 106, 46, 128]

l 最后一个方法是forEach()方法，它只是对数组中的每一项运行传入的函数。这个方法没有返回值。本质上与使用for循环迭代数组一样。来看下面的例子：

varnumbers = [1,2,12,13,2,53,23,64];
numbers.forEach(function (value, index, array){
// 执行某些操作
});

十、          归并方法

l  reduce()

从数组的第一项开始，逐个遍历到最后。如下面的示例代码：

varnumbers = [1,2,12,13];
var sum = numbers.reduce(function (pre,cur,index,array){
return pre + cur ;
});
console.log(sum); // 28

l  reduceRight() 从数组的最后一项开始，逐个遍历到最后。如下面的示例代码：

varnumbers = [1,2,12,13];
var sum = numbers.reduceRight(function (pre,cur,index,array){
return pre + cur ;
});
console.log(sum); // 28