JavaScript Array (数组) 对象 基本属性和方法

耗尽温柔 提交于 2020-08-12 02:58:42

Array (数组)对象

数组对象的作用是:使用单独的变量名来存储一系列的值。


创建Array对象的语法

new Array(); 
new Array(size); 
new Array(element0, element1, ..., elementn); 

参数

参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。

参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时,新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

返回值

返回新创建并被初始化了的数组。

如果调用构造函数 Array() 时没有使用参数,那么返回的数组为空,length 字段为 0。

当调用构造函数时只传递给它一个数字参数,该构造函数将返回具有指定个数、元素为 undefined 的数组。

当其他参数调用 Array() 时,该构造函数将用参数指定的值初始化数组。

当把构造函数作为函数调用,不使用 new 运算符时,它的行为与使用 new 运算符调用它时的行为完全一样。


定义数组

数组对象用来在单独的变量名中存储一系列的值。

var myArray = new Array()

这里定义一个名为myArray的数组对象 赋值的两种方法(可以添加任意多的值): 1.

var myname=new Array() 
myname[0]="xu"
myname[1]="xiang"
myname[2]="yu"

也可以使用一个整数自变量来控制数组的容量:

var myname=new Array(3)
myname[0]="xu" 
myname[1]="xiang" 
myname[2]="yu" 
var myname=new Array("xu","xiang","yu") 

注意:如果你需要在数组内指定数值或者逻辑值,那么变量类型应该是数值变量或者布尔变量,而不是字符变量。


访问数组

通过指定数组名以及索引号码,你可以访问某个特定的元素。

document.write(myname[0]);

输出:

xu

修改已有数组中的值

如需修改已有数组中的值,在指定标号下添加一个新值即可

myname[0] = "shuai"; 
document.write(myname[0]); 

输出: shuai


Array对象属性

属性 描述
constructor(构造函数) 返回对创建此对象的数组函数的引用
length (返回字符串长度) 设置或返回数组中元素的数目
prototype (原型) 使您有能力向对象添加属性和方法

Array()对象方法

方法 描述
concat() 连接两个或更多的数组,并返回结果
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素,并返回新的长度
reverse() 颠倒数组中元素的顺序
shift() 删除并返回数组的第一个元素
unshift() 向数组的开头添加一个或更多元素,并返回新的长度
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序
splice() 删除元素,并向数组添加新元素
indexOf() 查找起点位置的索引,从数组开头向后查找
lastIndexOf() 查找起点位置的索引,从数组末尾向前查找
forEach() 对数组进行遍历循环,对数组中的每一项运行给定函数
map() 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
filter() 返回满足过滤条件组成的数组
every() 判断数组中每一项都是否满足条件
some() 判断数组中是否存在满足条件的项
toSource() 返回该对象的源代码
toString() 把数组转换为字符串,并返回结果
toLocaleString() 把数组转换为本地数组,并返回结果
valueOf() 返回数组对象的原始值

方法的基本功能


concat()

可以将参数添加到原数组中。这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。

   var arr = [1,2,3,4,5];
   var arrCopy = arr.concat(6,[7,8]);
   document.write(arr); //显示[1,2,3,4,5]
   document.write(arrCopy);//显示[1,2,3,4,5,6,7,8]

通过上述代码发现传入的不是数组,而是直接把参数添加到了数组后面,如果传入的是数组,则将数组中的各个项添加到数组中。

但要是传入一个二维数组呢?

   var arr = [1,2,3,4,5];
   var arrCopy = arr.concat(6,[7,8]);
   var arrCopy2 = arr.concat([9,[10,11]]);
   document.write(arr); //显示[1,2,3,4,5]
   document.write(arrCopy);//显示[1,2,3,4,5,6,7,8]
   document.write(arrCopy2);//显示[1,2,3,4,5,9,Array[2]]

上述代码中,arrCopy2数组的第六项是一个包含两项的数组,也就是concat()方法只能传入数组中的每一项到数组中,如果传入数组中有些项是数组,那么也会把这一数组项当做一项添加到arrCopy2中。


join()

join(separator): 将数组的元素组起一个字符串,以separator为分隔符,如果省略该参数,则使用逗号作为分隔符。该方法只接收一个参数:即分隔符。

   var arr = [1,2,3];
    document.write(arr.join());
    document.write(arr.join('+'));
    document.write(arr);

通过join()方法可以实现重复字符串,只需传入字符串以及重复的次数,就能返回重复后的字符串,函数如下:

  function repeatString(str, n) {
      return new Array(n + 1).join(str);
    }
    console.log(repeatString("苹果", 3)); // abcabcabc
    console.log(repeatString("菠萝", 5)); // HiHiHiHiHiv

pop()和push()

pop():数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。

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

var arr = ["苹果","香蕉","奶瓶"];
var count = arr.push("榴莲","草莓");
document.write(count);//5
document.write(arr);//苹果,香蕉,奶瓶,榴莲,草莓
var item = arr.pop();
console.log(item);//草莓
console.log(arr);//(4) ["苹果", "香蕉", "奶瓶", "榴莲"]

reverse()

颠倒数组中元素的顺序

var arr = [a,b,c];
console.log(arr.reverse()); //[c,b,a]
console.log(arr); //[a,b,c](原数组改变)

shift()和unshift()

shift():删除并返回原数组的第一个元素。如果数组为空则返回undefined

unshift():在数组的开头添加一个或更多元素,并返回新的长度

var arr = ["苹果","香蕉","奶瓶"];
var count = arr.unshift("西瓜","樱桃");
consloe.log(count);//5
console.log(arr);// ["西瓜","樱桃","苹果","香蕉","奶瓶"]
var item =arr.shift();
console.log(item);//西瓜
console.log(arr);//["樱桃","苹果","香蕉","奶瓶"]

slice()

返回原数组中指定的位置的项之间的元素组成的新数组。slice()方法可以接受一个或两个参数,即要返回项的起始和结束位置。

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

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

    var arr = [1,2,3,4,5,6,7];
    var arrCopy = arr.slice();
    console.log(arrCopy);//(7) [1, 2, 3, 4, 5, 6, 7](原数组不变)
    var arrCopy = arr.slice(3);
    var arrCopy2 = arr.slice(1,4);
    var arrCopy3 =arr.slice(1,-2);
    var arrCopy4 = arr.slice(-5,-1);
    console.log(arrCopy);//[4,5,6,7]
    console.log(arrCopy2);//[2,3,4]
    console.log(arrCopy3);//[2,3,4,5]
    console.log(arrCopy4);//[3,4,5,6]

若两个参数都为负数,用负数加上数组长度的值来替换该位置的数,转为正数


sort()

按升序排列数组项----即最小的值位于最前面,最大的值排在最后面。

var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort()); // ["a", "b", "c", "d"]
var arr2 = [3, 1, 24,21];
console.log(arr2.sort()); //[1, 21, 24, 3](元数组被改变)
console.log(arr2); // [1, 21, 24, 3]

为了解决上述问题,sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回 0,如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数:

function compare(value1, value2){
        if (value1 < value2){
            return -1;
        }
        else if (value1 > value2){
            return 1;
        }
        else{
            return 0;
        }
    }
    var arr = [14,8,16,34];
    document.write(arr.sort(compare));

需要通过比较函数产生降序排序的结果时,只需交换比较函数返回的值即可

function compare(value1, value2){
        if (value1 < value2){
            return 1;
        }
        else if (value1 > value2){
            return -1;
        }
        else{
            return 0;
        }
    }
    var arr = [14,8,16,34];
    document.write(arr.sort(compare));

splice()

可以实现删除,插入和替换。

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

插入:可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、 0(要删除的项数)和要插入的项。例如,splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。

替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如,splice (2,1,4,6)会删除当前数组位置 2 的项,然后再从位置 2 开始插入4和6。

splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项,如果没有删除任何项,则返回一个空数组。

    var arr = [1,3,5,7,9,11];
    var arrRemoved = arr.splice(0,2);
    console.log(arrRemoved); //[1, 3]
    console.log(arr); //[5, 7, 9, 11]
    var arrRemoved2 = arr.splice(2,0,3,8);
    console.log(arrRemoved2);//[]空数组
    console.log(arr);//[5, 7, 3, 8, 9, 11]
    var arrRemoved3 = arr.splice(1,1,2,4)
    console.log(arrRemoved3);//[7]
    console.log(arr);//[5, 2, 4, 3, 8, 9, 11]

indexOf()和lastIndexOf()

indexOf():接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。

lastIndexOf:接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的末尾开始向前查找。

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

    var arr = [1,3,5,7,7,5,3,1];
    console.log(arr.indexOf(5));//2
    console.log(arr.lastIndexOf(5));//5
    console.log(arr.indexOf(5,2));//2
    console.log(arr.lastIndexOf(5,4));//2
    console.log(arr.indexOf("5")); //-1

forEach()

对数组进行遍历循环,对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型,默认有传参,参数分别为:遍历的数组内容;对应的数组索引,数组本身。

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为:
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

map()

map():指“映射”,对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

利用map方法实现数组中每个数求平方。


filter()

“过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。

   let newArr = [1,2,3,4,5].filter(function(item){
       return item>2&&item<5;
   });//[3,4]

every()

判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3); // false

some()

判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3); // false

toSource

toSource() 方法表示对象的源代码。该原始值由 Array 对象派生的所有对象继承。

function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);

document.write(bill.toSource());//

注:只有 Gecko 核心的浏览器(比如 Firefox)支持该方法,也就是说 IE、Safari、Chrome、Opera 等浏览器均不支持该方法。


toString()

toString() 方法可把数组转换为字符串,并返回结果。(数组中的元素之间用逗号分隔)

var arr = new Array(3)
arr[0] = "a"
arr[1] = "b"
arr[2] = "c"
document.write(arr.toString());//a,b,c

toLocaleString()

首先调用每个数组元素的 toLocaleString() 方法,然后使用地区特定的分隔符把生成的字符串连接起来,形成一个字符串。


var arr = new Array(3)
arr[0] = "a"
arr[1] = "b"
arr[2] = "c"
document.write(arr.toLocaleString());//a,b,c

valueOf()

valueOf() 方法返回 Array 对象的原始值。

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

valueOf() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中。

语法:arrObject.valueOf()

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!