理解javascript中的Array类型

Posted 2020-06-19

引子：

　　从事前端开发有段时间了，个人观点：想在前端开发这条路上走的更远，不仅要学好html&HTML5、CSS&CSS3，最重要的就是要学好javascript了。所以打好javascript基础是非常有必要，今天就平时所用的javascript中的数组Array类型做个整理。本人前端初学者，如果以下内容对您有帮助的话本人也非常欣慰，如果写的不好，请提出您的见解，共享下您在学习js中的宝贵经验，谢谢！

　　Array类型是js中非常常用的数据类型了，这里就不脑补了，至于什么是数组类型，请绕道w3school进行查阅。

 

一、创建Array

　　js中创建数组有两种方式，一种是通过Array构造函数进行创建，另一种是通过数组字面量进行创建，下面就两种方式创建数组提供对应Demo:

　　1、通过Array构造函数进行创建：　

// 创建一个空数组
var arr = new Array();

// 指定数组长度
var arr2 = new Array(10);

// 创建并指定数组项
var arr3 = new Array("a", "b", "c");

 

　　2、通过数组字面量进行创建：

// 创建一个空数组
var arr = [];

// 创建包含数组项的数组
var colors = ["red", "blue", "yellow"];

 

 

二、检测数组

　　ES3中规定，如果页面中只有一个全局执行环境，可以通过instanceof操作符判断。如果页面中包含多个框架，就会出现问题。为了解决这个问题，ES5中引入了Array.isArray()方法，这个方法可以确定某个值到底是不是数组。但是支持Array.isArray()方法的浏览器有IE9+、Firefox 4+、Safari 5+、Opera 10.5+和Chrome。对于老版本的浏览器中，可以通过功能检测来实现isArray()方法。具体实现代码如下：

if( Array.isArray !== "function"){
    Array.isArray = function(candidate){
        return Object.prototype.toString.call(candidate) === "[object Array]";
    };  
}

 

 

三、栈方法

　　栈的概念：栈是一种LIFO（Last-In-First-Out，后进先出）的数据结构。

　　1、push()：push()方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。

　　2、pop()：pop()方法不接收参数，从数组的末尾移除最后一项，减少数组的length值，然后返回移除的项。Demo如下：

var colors = ["red", "blue"];
colors.push("brown");    // 添加另一项
colors[3] = "black";    // 添加一项
console.log(colors);    // red,blue,brown,black
console.log(colors.length);    // 4    

var item = colors.pop();    // 移除colors的最后一项
console.log(item);    // “black”
console.log(colors);    // red,blue,brown

 

 

四、队列方法

　　队列的概念：队列是一种FIFO（First-In-First-Out，先进先出）的数据结构。

　　1、shift():shift()方法不接收参数，从数组的前端移除第一个项并返回该项，同时将数组的长度减1。

　　2、unshift():unshift()方法与shift()用途相反，它能在数组的前端添加任意个项并返回新数组的长度。Demo如下：

var colors = [];
var count = colors.unshift("red", "green");
console.log(count);    // 2
console.log(colors);    // red,green

count = colors.unshift("black");
console.log(count);    // 3
console.log(colors);    // black,red,green

var item = console.pop();
console.log(item);    // "green"
console.log(colors.length);    // 2

 

 

五、重排序方法

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

　　1、reverse() 方法会将反转数组项的顺序，如下所示：

var arr = [5, 4, 3, 2, 1];
arr.reverse();
console.log(arr);    // 1,2,3,4,5

 

　　2、sort() 方法按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。为了实现排序，sort() 方法会调用每个数组项的 toString() 转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort() 方法比较的也是字符串，如下所示：

var arr = [0, 1, 5, 10, 15];
arr.sort();
console.log(arr);    // 0,1,10,15,5

 

　　上面的例子中，可以看出，虽然数值5小于数值10，但是在进行字符串比较时，”10“则位于”5“的前面，于是数组的顺序就被修改了。显然，这种排序方式存在问题。因此，sort()方法引入了可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。

　　比较函数接收两个参数，如果第一个参数应该位于第二个参数之前就返回一个负数，如果两个参数相等则返回0，如果第一个参数应该位于第二个参数之后则返回一个正数。以下就是一个简单的比较函数：

function compare(num1, num2){
    if(num1 < num2){
        return -1;
    } else if(num1 > num2){
        return 1;
    } else {
        return 0;
    } 
}

 

　　这个比较函数可以适用于大多数数据类型，只要将其作为参数传递给 sort() 方法即可，如下面这个例子所示。　　

var val = [0, 15, 10, 1, 5];
val.sort(compare);
console.log(val);    // 0, 1, 5, 10, 15

 

　　在将比较函数传递到 sort() 方法之后，数值仍然保持了正确的升序。当然，也可以通过比较函数产生降序排序的结果，只要交换比较函数返回的值即可。　　

function compare(num1, num2){
    if(num1 < num2){
        return 1;
    } else if(num1 > num2){
        return -1;
    } else {
        return 0;
    }
}

var val = [0, 1, 5, 10, 15];
val.sort(compare);
console.log(val);    // 15, 10, 5, 1, 0

 

　　对于数值类型或者其valueOf() 方法会返回数值类型的对象类型，可以使用一个更简单的比较函数。这个函数只要用第二个值减第一个值即可。

function compare(num1, num2){
    return num2 - num1;
}

 

 

六、操作方法

　　1、concat()：基于当前数组中的所有项创建一个新的数组。

　　利用这个方法连接数组项一般会经过三个过程，第一步创建当前数组的一个副本，第二步将接收到的参数添加到这个副本的末尾，第三步返回新构建的数组。

　　在没有给concat() 方法传递参数的情况下，它只是复制当前数组并返回副本。如果传递给concat() 方法的是一或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中。如果传递的不是数组，这些值就会被简单地添加到结果数组的末尾。下面来看一个例子：

var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);

console.log(colors);    // red, green, blue
console.log(colors2);    // red, green, blue, yellow, black, brown

 

 

　　2、slice()：基于当前数组的一个或多个项创建一个新数组。

　　slice() 方法可以接收一个或两个参数，即要返回项的起始位置和结束位置。

　　a) 当只有一个参数的情况下，slice() 方法返回从该参数指定位置开始到当前数组末尾的所有项。

　　b) 如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。

　　注意：slice() 方法不会影响原始数组。下面看一下slice() 的例子：

var colors = ["red", "green", "blue", "yellow", "purple"];

var colors2 = colors.slice(1);
var colors3 = colors.slice(1, 4);

console.log(colors);      // red, green, blue, yellow, purple  
console.log(colors2);    // green, blue, yellow, purple
console.log(colors3);    // green, blue, yellow

　　如果 slice() 方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。例如，在一个包含5项的数组上调用 slice(-2, -1) 与调用 slice(3, 4) 得到的结果相同。如果结束位置小于其实位置，则返回空数组。

　　

　　3、splice()：该方法可以用来对数组项进行删除、插入或替换。但是主要用途还是用于向数组的中部插入项。下面分别介绍这三种用途：

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

　　b)【插入】可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的项数）和要插入的项数。如果要插入多个项，可以再传入第四、第五，以至任意多个项。例如，splice(2, 0, "red", "green")会从当前数组的位置2开始插入字符串"red"和"green"。

　　c)【替换】可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice(2, 1, "red", "green")会删除当前数组位置2的项，然后再从位置2开始插入字符串"red"和"green"。

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

var colors = ["red", "green", "blue"];
var removed = colors.splice(0, 1);    // 删除第一项
console.log(colors);    // green, blue
console.log(removed);    // red

removed = colors.splice(1, 0, "yellow", "orange");    // 从位置1开始插入两项
console.log(colors);    // green, yellow, orange, blue
console.log(removed);    // 返回的是一个空数组

removed = colors.splice(1, 1, "red", "purple");    // 从位置1删除一项，然后在位置1处新增2项
console.log(colors);    // green, red, purple, orange, blue
console.log(removed);    // yellow

 

 

　　4、join()：接收一个参数，将数组中的每一项以传入的参数作为连接字符连接转换成一个字符串并返回，如下所示：

var colors = ["red", "green", "blue"];
var str = colors.join(‘-‘);
console.log(str);    // "red-green-blue"

 

 七、位置方法

　　ES5为数组实例添加了两个位置方法：indexOf() 和 lastIndexOf() 。这两个方法都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，indexOf() 方法从数组的开头（位置0）开始向后查找，lastIndexOf() 方法则从数组的末端开始向前查找。

　　这两个方法都返回要查找的项在数组中的位置，或者在没有找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符；也就是说，要求查找的项必须严格相等（就像使用===一样）。以下是几个例子：

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

console.log(numbers.indexOf(4));    // 3
console.log(numbers.lastIndexOf(4)); // 5

console.log(numbers.indexOf(4, 4));    // 5
console.log(numbers.lastIndexOf(4, 4));    // 3

var person = {name: "Michael"};
var people = [{name: "Michael"}];

var morePeople = [person];

console.log(people.indexOf(person));    // -1
console.log(morePeople.indexOf(person));    // 0

 

 

八、迭代方法

　　ES5为数组定义了5个迭代方法。每个方法都接收两个参数：要在每一项上运行的函数和（可选的）运行该函数的作用域对象——影响this的值。传入这些方法中的函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身。根据使用的方法不同，这个函数执行后的返回值可能会也可能不会影响方法的返回值。以下是这5个迭代方法的作用：

　　a) every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。

　　b) filter()：对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。

　　c) forEach()：对数组中的每一项运行给定函数，这个方法没有返回值。

　　d) map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

　　e) some()：对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。

　　以上方法都不会修改数组中的包含的值。

 

　　Demo for every() and some()：

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

var everyResult = numbers.every(function(item, index, array){
    return (item > 2);
});

console.log(everyResult);    // false

var someResult = numbers.some(function(item, index, array){
    return (item > 2);
});

console.log(someResult);    // true

 

 

　　Demo for filter()：

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

var filterResult = numbers.filter(function(item, index, array){
    return (item > 2);
});

console.log(filterResult);    // [3, 4, 5, 4, 3]

 

 

　　Demo for map()：

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

var mapResult = numbers.map(function(item, index, array){
    return item * 2;
});

console.log(mapResult);    // [2, 4, 6, 8, 10, 8, 6, 4, 2]

 

 

　　Demo for forEach()：

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

numbers.forEach(function(item, index, array){
    // 执行某些操作
});

 

 

九、归并方法

 　　先来说说什么事归并方法，所谓归并就是迭代一个数组中的所有项，从而进行每一项的累加或其它的操作。

　　 ES5中新增了reduce() 和 reduceRight() 两个归并方法，这两个方法都会迭代数组的所有项，然后构建一个最终的返回值。其中，reduce() 方法从数组的第一项开始，逐个遍历到最后。而 reduceRight() 则从数组的最后一项开始，向前遍历到第一项。

　　这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。传给reduce() 和 reduceRight() 的函数接收4个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

　　使用reduce() 方法可以执行求数组中所有值之和的操作，比如：

var values = [1, 2, 3, 4, 5];
var sum = values.reduce(function(prev, cur, index, array){
    return prev + cur;
});

console.log(sum);    // 15

 

 

十、常用示例

　　1、反转打印一段字符串（巧用Array的reverse方法）：

window.onload = function {

    if(typeof String.prototype.reverse !== ‘function‘){
        String.prototype.reverse = function(){
        return Array.prototype.reverse.apply(this.split(‘‘)).join(‘‘);
    };
    }
    
    var str = "hello world !";
    var str2 = str.reverse(str);
    console.log(str2);    // "! dlrow olleh"
};