美文网首页
JavaScript之Array类型

JavaScript之Array类型

作者: Julian1009 | 来源:发表于2017-12-01 01:54 被阅读0次

定义数组的方法:
构造函数

var arr = new Array();  // []
var arr1 = new Array(20);  // (10) [empty × 10]
var arr2 = new Array("red", "blue", "green");  // ["red", "blue", "green"]

数组字面量表示法

var arr3 = Array();  // []
var arr4 = Array(3);  // (3) [empty × 3]
var arr5 = [1,2,];  // 不要这样!这样会创建一个包含2或3项的数组
var arr6 = [,,,,,];  // 不要这样!这样会创建一个包含5或6项的数组

由于IE的实现与其他浏览器不一致,arr6可能会创建包含5项的数组(在IE9+、Firefox、Opera、Safari和Chrome中),也可能会创建包含6项的数组(在IE8及更早版本中)。

还有:
Array.from(arrayLike, mapFn, thisArg)
Array.of(element0[, element1[, ...[, elementN]]])
copyWithin(目标索引, [源开始索引], [结束源索引]) // 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,而不修改其大小。


var colors = ["red", "blue", "green"];    // 定义一个字符串数组

数组的length属性很有特点——它不是只读的。因此,通过设置这个属性,可以从数组的末尾移除项或向数组中添加新项。

var colors = ["red", "blue", "green"];     // 创建一个包含3个字符串的数组
colors.length = 2;
alert(colors[2]);                 //undefined

这个例子中的数组colors一开始有3个值。将其length属性设置为2会移除最后一项(位置为2的那一项),结果再访问colors[2]就会显示undefined了。如果将其length属性设置为大于数组项数的值,则新增的每一项都会取得undefined值,如下所示:

var colors = ["red", "blue", "green"];    // 创建一个包含3个字符串的数组
colors.length = 4;
alert(colors[3]);                 //undefined

当把一个值放在超出当前数组大小的位置上时,数组就会重新计算其长度值,即长度值等于最后一项的索引加1,如下面的例子所示:

var colors = ["red", "blue", "green"];         // 创建一个包含3个字符串的数组
colors[99] = "black";                          // (在位置99)添加一种颜色
alert(colors.length);  // 100

在这个例子中,我们向colors数组的位置99插入了一个值,结果数组新长度(length)就是100(99+1)。而位置3到位置98实际上都是不存在的,所以访问它们都将返回undefined

检测数组

instanceof用于判断对象是不是数组

if (value instanceof Array){ 
    //对数组执行某些操作
}

instanceof操作符的问题在于,它假定只有一个全局执行环境。如果网页中包含多个框架,那实际上就存在两个以上不同的全局执行环境,从而存在两个以上不同版本的Array构造函数。如果你从一个框架向另一个框架传入一个数组,那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。
为了解决这个问题,ECMAScript 5新增了Array.isArray()方法。这个方法的目的是最终确定某个值到底是不是数组,而不管它是在哪个全局执行环境中创建的。这个方法的用法如下。

if (Array.isArray(value)){
    //对数组执行某些操作
}

转换方法

所有对象都具有toLocaleString()、toString()和valueOf() 方法

toLocaleString()
toString()
valueOf()
join()

栈方法

ECMAScript为数组专门提供了push()pop()方法,以便实现类似栈的行为。

队列方法

结合使用shift()push()方法,可以像使用队列一样使用数组。

ECMAScript还为数组提供了一个unshift()方法。

重排序方法

reverse()sort()

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

var values = [0, 1, 5, 10, 15];
values.sort();
alert(values);     //0,1,10,15,5

即使例子中值的顺序没有问题,但sort()方法也会根据测试字符串的结果改变原来的顺序。因为数值5虽然小于10,但在进行字符串比较时,"10"则位于"5"的前面,于是数组的顺序就被修改了。不用说,这种排序方式在很多情况下都不是最佳方案。因此sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。

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

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

var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);   //0,1,5,10,15

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

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

var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);    // 15,10,5,1,0

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

function compare(value1, value2){
    return value2 - value1;
}

由于比较函数通过返回一个小于零、等于零或大于零的值来影响排序结果,因此减法操作就可以适当地处理所有这些情况。

操作方法

concat()slice()

位置方法

indexOf()lastIndexOf()

includes() 方法用来判断一个数组是否包含一个指定的值,如果是,酌情返回 true或 false。

let a = [1, 2, 3];
a.includes(2); // true 
a.includes(4); // false

基本语法

arr.includes(searchElement)
arr.includes(searchElement, fromIndex)

示例:

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false 当fromIndex大于Array.length则返回 false 。该数组不会被搜索。
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

如果 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

includes() 作为一个通用方法

includes() 方法有意设计为通用方法。它不要求this值是数组对象,所以它可以被用于其他类型的对象 (比如类数组对象)。下面的例子展示了 在函数的arguments对象上调用的includes() 方法。

(function() {
  console.log([].includes.call(arguments, 'a')); // true
  console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');

includes()在类数组对象应该怎么使用呢?

迭代方法

every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。
filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。
forEach():对数组中的每一项运行给定函数。这个方法没有返回值。
map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。

缩小方法

reduce()reduceRight()

这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。

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

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

reduceRight()的作用类似,只不过方向相反而已。

相关文章

网友评论

      本文标题:JavaScript之Array类型

      本文链接:https://www.haomeiwen.com/subject/bismbxtx.html