JavaScript之数组对象

Array类型是ECMAScript中最常用的类型了。

一、声明方式

1.使用Array构造函数

var arr1 = new Array();

如果预先知道要保存数组的数量, 也可以给构造函数传递该数量,该数量会自动变成length属性值。

var str = new Array(10);
console.log(str.length) // 10

也可以向数组中传递包含的值。

var arr = new Array(‘hello‘, ‘world‘, ‘js‘);
console.log(arr);  // [‘hello‘, ‘world‘, ‘js‘]

在使用Array的时候也可以省略new操作符。

var str = Array(3);
console.log(str.length); // 3

2. 数组字面量表示法

var name = [‘mike‘, ‘john‘, ‘kaer‘];

注释:不要想这样声明数组,  var arr = [1, 2, ]; ,在IE8及之前的版本中, arr会成为一个包含3个项且每项值为1,2,undefined的数组。而在其他浏览器中会包含项目值分别为1,2的数组。

设置和获取数组的值都可以通过索引的方式。

二、length属性

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

var name = [‘mike‘, ‘john‘, ‘kaer‘];
name.length = 2;
console.log(name[2]);  // undefined

如果将length属性设置为大于数组项的值,则新增的每一项都会取得undefined值。

var names = [‘mike‘, ‘john‘, ‘kaer‘];
names.length = 4;
console.log(names[3]); //undefined

每当在数组末尾添加一项后,起length属性都会自动更新反应这一变化。当把一个值放在超出当前数组大小的位置时,数组就会重新计算其长度, 即长度值等于最后一项索引加1。

var names =[];
names[99] = ‘mike‘;
console.log(names.length); // 100

三、数组方法

1. toString(): 返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。

var arr = [1,2,3]
arr.toString() //"1,2,3"

实际上,为了创建这个字符串会调用数组每一项的toString()方法。

var str1 = {
    toString: function() {
        return ‘hello‘;
    }
};

var str2 = {
    toString: function() {
        return ‘world‘;
    }
};

var arr = [str1, str2];
console.log(arr.toString());  // hello, world

同样可以使用join方法来拼接数组, 可以通过传递不同的分隔符来拼接字符串。若不传参数或者参数为undefined,则使用逗号作为分隔符。但是IE7及更早的版本会认为使用undefined作为分隔符。

2. valueOf(): 该方法返回的还是数组

var ar = [1,2,3];
arr.valueOf(); //[1,2,3]

3.pop(), push(param1[,param2,.....,param...])

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

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

var names = [‘mike‘, ‘john‘, ‘kaer‘];
var count = names.push[‘barret‘];
console.log(count); // 4
console.log(names.length); //4
var item = names.pop();
console.log(item); // ‘barret‘
console.log(names.length) // 3

4. shift(), unshift()

unshift()方法可以接受任意数量参数, 把它们逐个添加到数组的前端,并返回修改后数组的长度。

shift()方法则从数组末尾移除最后一项, 减少数组的length值,然后返回移除的项。

5. reverse(), sort()

reverse()方法会反转数组项的顺序,改变是的原数组。

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

sort()方法按升序排列组项,即最小值位于最前面,最大值排在最后面。sort()方法会调用每个数组项的toString()方法,然后比较得到的字符串。

var  nums = [1,2,4,10,5];
nums.sort();
console.log(nums);  // [1, 10, 2, 4, 5]

sort()方法会根据测试字符串的结果改变原来的顺序,  虽然10大于2,4,5,但在进行字符串比较时, ‘10‘位于‘2‘, ‘4‘, ‘5‘的前面。sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值在前。比较函数接收两个参数, 如果第一个参数应该位于第二个之前,则返回一个负数,如果两个参数相等,则返回0如果第一个参数应该位于第二个之后则返回一个整数。

function compare(value1, value2) {
    return value1 < value2 ? -1 : 1;
}

这个比较函数适用大多数据类型,只要将其作为参数传给sort即可。

var nums = [1,3,10,9, 4];
nums.sort(compare);
console.log(nums); // [1, 3, 4, 9, 10]

6. concat(param1[,param2 ,... paramn]): 基于当前数组,接收参数添加到数组中。在没有给传递参数的情况下,只会复制当前数组的副本。

var names = [‘kaer‘, ‘jhon‘, ‘mike‘];
var names2 = names.concat(‘david‘, [‘smith‘, ‘snow‘]);
console.log(names2); // [‘kaer‘, ‘jhon‘, ‘mike‘, ‘david‘, ‘smith‘, ‘snow‘]

7. slice(start, end): 基于当前数组中的一个或者多个创建一个新数组。如果只有一个参数, slice返回该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项,但不包括结束位置的项。此方法并不会影响原始数组。如果参数是负数,则表示从数组末尾向前的位置,最后一位下标为-1. 如果起始位置大于结束位置,则返回空数组。

var nums = [1,2,3,4,5,6];
var nums2 = nums.slice(2);
console.log(nums2); // [3,4,5,6]
var nums3 = nums.slice(2, 5);
console.log(nums3); // [3, 4, 5]
var nums4 = nums.slice(2, -1);
console.log(nums4); //  //[3,4,5]

8. splice(): 最强大的一个数组方法,主要提供一下三种用法。此方法会改变原有的数组。

  1. 删除: 删除任意数量的项, 需要2个参数, 第一项的位置和要删除的项数。返回被删除的项。

    var nums = [1, 2, 3, 4, 5];
    nums.splice(0, 2); // [1, 2]
    console.log(nums); // [3, 4, 5]
  2. 插入: 可以向指定位置插入任意数量的项,需要3个参数:起始位置, 0和要插入的项。返回空数组。

    var nums = [1,2,3];
    nums.splice(1, 0, ‘hello‘, ‘world‘);
    console.log(nums); // [1,2, ‘hello‘, ‘world‘, 3]
  3. 替换:向指定位置插入任意数量的项, 同事删除任意数量的项,需要3个参数,起始位置, 要删除的项数和要插入的任意数量的项。返回被删除的项。

    var nums = [1,2,3];
    nums.splice(1, 1, ‘hello‘, ‘world‘); // 2
    console.log(nums); // [1, ‘hello‘, ‘world‘, 3]

 9.  indexOf()和lastIndexOf():接收两个参数, 要查找的项和表示查找七点位置的索引。indexOf从数组的开头开始查找, lastIndexOf则从数组的末尾开始向前查找。返回查找项         在数组中的位置, 或者没找到情况下返回-1。

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

 10. every(), filter(), forEach(), map(), some()

这些方法都不会修改原数组本身。它们都可以传入两个参数,第一个是对数组项操作的回调函数callback,第二个参数是this值。

1. every(): 对数组中的每一项运行给定函数, 如果该函数每一项都返回true,则返回true。

2. filter(): 对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

3. forEach(): 对数组中的每一项运行给定的函数。无返回值。

4. map():对数组中的每一项运行给定函数, 返回每次调用结果组成的数组。callback 函数只会在有值的索引上被调用。并且在执行第一个回调时就已经确定了数组元素范围,在map执行过程中,新增加的元素不会被callback访问到。

5. some(): 对数组中的每一项运行给定函数,如果任一项返回true, 则返回true。

var nums = [1, 2, 3, 4, 5];
var everyResult = nums.every(function(item, index, array) {
      return (item > 2);
});

console.log(everyResult); // false

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

console.log(someResult); // true

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

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

var thisArg = { num: 1 };
var mapResult = nums.map(function(item, index, array) {
      return (item * 2 + this.num);
}, thisArg);

console.log(mapResult);  // [3, 5, 7, 9, 11]

var nullArr = [];
var mapResultNull = nullArr.map(function(item, index, array) {
      return (item * 2);
});

console.log(mapResultNull); // []

11. reduce() , reduceRight():  迭代数组的所有项, 然后构建一个最终返回值。都可以传两个参数, 一个在每一项上调用的函数和递归基础的初始值。回调函数可以接收4个参数: 前一个值, 当前值, 项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。

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

console.log(sum); // 10
时间: 2024-10-18 20:11:46

JavaScript之数组对象的相关文章

JavaScript 浅析数组对象与类数组对象

数组(Array对象) 数组的操作 创建数组方法 添加与修改数组元素 删除数组元素 使用数组元素 遍历数组元素 多维数组 数组相关的函数 concat() join() pop() push() shift() unshift() reverse() sort() slice() splice() 类数组对象 定义 举例 对比数组 转换 间接 直接 数组(Array对象) 数组就是一组数据. 在JavaScript中没有数组这种数据类型.数组时对象创建的. 键(下标): 用于区分数组中不同数值的

[Javascript]类数组对象为什么不能用for in进行遍历

上来说重点,再废话 类数组对象不能使用for(var key in  elements)进行遍历,这是因为类数组的最后一个哈希的键值对是length:n   n代表数组长度 在Javascript中,我们在DOM树上面获取页面的元素, 例如使用var emls=getElementsByTagName () var emls=querySelectedAll() 获得的elements包含多个dom元素,在学习的过程中,我没有使用for(var i=0;i<elements.length;i++

javascript 类数组对象

原文:https://segmentfault.com/a/1190000000415572 定义: 拥有length属性,其他属性(索引)为非负整数(对象中的所有会被当做字符串来处理,这里你可以当做是个非负整数串来理解) 不具有数组所具有的方法 类数组示例: var a = {'1':'gg','2':'love','4':'meimei',length:5}; Array.prototype.join.call(a,'+');//'+gg+love++meimei' 非类数组示例: var

Javascript类型系统[数组,对象,数据类型]

JavaScript类型系统 1.var a = [1,11,22,33];  //[]声明数组,数组有个天生的属性length a. 用var 声明的a--是变量,也是对象[既然是对象,它可被赋值任何对象,如数组]. b.运用数组非常灵活,可随时赋值[任何类型],数组长度[容量]自动扩充加长. c.数组索引从0开始. d.数组内元素,可以是其他数组对象.如再赋值 b = ["rty","ljh",123]; a[5]=b;    或a[6]=["rty&

JavaScript中数组对象详解

Array对象即数组对象用于在单个变量中存储多个值,JS的数组是弱类型的,所以允许数组中含有不同类型的元素,数组元素甚至可以是对象或者其他数组. 创建数组的语法 1.Array构造器 1.var list=new Array(); 2.var list=new Array(size); 3.var list=new Array(element0,element1,...elementn); 2.字面量的方式 var Array[element0,element1,...elementn]; 举例

JavaScript Array数组对象

<DOCTYPE html> <html> <head> <title>数组</title> </head> <body> <script type="text/javascript"> //1.无参构造函数,创建一空数组 // var a1=new Array(1,2,3,4); //document.write(a1) var a = new Array(); a[0] = "

JavaScript——Array 数组对象

数组方法: 关于slice: 关于sort: >arrayObject.sort(方法函数) 方法函数:可选,规定排序顺序,必须是函数. 如果不指定<方法函数>,则按unicode码顺序排列: 如果指定<方法函数>,则按<方法函数>所指定的排序方法排序. >方法函数: 该函数要比较两个值,然后返回一个用于说明这两个值相对顺序的数字. 比较函数应该具有两个参数a,b,其返回值如下: 若返回值<=-1,则表示A在排序后的序列中出现在B之前. 若返回值>

javascript删除数组/对象中的元素

一.数组: 代码: /* @desc:删除数组中的元素 @param arr 原数组 @param item 数组索引,只能是数字索引 @param len 要删除的长度 @return arr 删除元素后的数组 */ function unset(arr,item,len = 1){ arr.splice(item,len) return arr } 测试: var arr = new Array(1,2,3,4) var ret = unset(arr,1,2) console.log(re

JavaScript数组对象的声明与使用

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>数组对象的声明与使用</title> </head> <body> <script typ