javascript 对象初探 (四)--- 内建对象之旅之Array

时间:2022-02-16 16:20:13

 我们不要去纠结神马是内建对象,神马是內建构造器。到后来你们便会发现其实她们都是对象。

Array()是一个构建数组的內建构造器函数:

var arr = new Array(); 

与下面的是等效的:

var arr = []; //数组文本表识法

无论数组是以神马方式创建的,我们都可以照常向里面添加元素。

arr[0] = 1;
arr[1] = 2;
console.log(arr) // [1, 2]

当我们使用构造器函数Array()创建数组时,也可以通过传值的方式为其添加元素:

var arr = new Array(1,2,3,true);
console.log(arr); // [1,2,3,true] 

如果我们向构造器函数传递单个数字,她就会出现一个异常情况:

var arr = new Array(5);
console.log(arr); // [undefinedX5]

既然数组是有构造函数创建出来的,那她是不是一个对象呢,答案是肯定的!yes那就是一个对象!!!我们可以验证一下:

console.log(typeof arr); // Object

既然它是一个对象,那么他就继承了Object的所有属性和方法。

例如:constructor, prototype等等等等。。。。

当然数组还是有一些独特之处的:

  1. 数组的属性名是从0开始递增,并自动生成数值。

  2. 数组拥有一个记录元素数量的length属性。

   3. 数组在其父级对象的基础上创建了许多额外的內建方法。

我们来验证一下数组与对象的区别:

首先定义数组的时候会自动生成length属性,而一般对象是没有length属性的。

var a = [], b = {};
a.length;
b.length  // undefined

在为数组和对象添加以数字或非数字为键明的属性操作上两者没有神马区别:

a[0] = 1;
b[0] = 1;
a.child = 2;
b.child = 2;

length属性会随着数字键名的数量而更新,而忽略非数字键名。

我们也可以手动设置数组length属性,如果设置的数字大于数组元素的数量,剩余的部分会被空(undefined)所填充,相反如果设置的length属性小于当前数组元素的数量那么超出的元素会被自动删除。

数组的內建方法:

concat() 方法:

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

var a = [1,2,3];
document.write(a.concat(4,5)); // [1,2,3,4,5]
var arr = new Array(3)
arr[0] = "1"
arr[1] = "2"
arr[2] = "3"

var arr2 = new Array(3)
arr2[0] = "4"
arr2[1] = "5"
arr2[2] = "6"

document.write(arr.concat(arr2)) // [1,2,3,4,5,6]
var arr = new Array(3)
arr[0] = "1"
arr[1] = "2"
arr[2] = "3"

var arr2 = new Array(3)
arr2[0] = "4"
arr2[1] = "5"
arr2[2] = "6"

var arr3 = new Array(2)
arr3[0] = "7"
arr3[1] = "8"

console.log(arr.concat(arr2,arr3)); // [1,2,3,4,5,6,7,8]

join() 方法:

join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的(默认为逗号,)。

var arr = new Array(3)
arr[0] = "1"
arr[1] = "2"
arr[2] = "3"

document.write(arr.join()); // '1,2,3'
var arr = new Array(3)
arr[0] = "1"
arr[1] = "2"
arr[2] = "3"

document.write(arr.join(".")); // '1.2.3'

push() 方法:

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度(注意是长度length,而不是返回新的数组)。

var arr = new Array(3)
arr[0] = "1"
arr[1] = "2"
arr[2] = "3"
console.log(arr.push(4)); 

pop() 方法:

pop() 方法用于删除并返回数组的最后一个元素。

var arr = new Array(3)
arr[0] = "1a"
arr[1] = "2a"
arr[2] = "3a"
console.log(arr.pop()); // 3a

reverse() 方法:

reverse() 方法用于颠倒数组中元素的顺序。

var arr = new Array(3)
arr[0] = "1"
arr[1] = "2"
arr[2] = "3"
console.log(arr.reverse()); // [3,2,1]

unshift() 方法:

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

var arr = new Array()
arr[0] = "1"
arr[1] = "2"
arr[2] = "3"
console.log(arr.unshift(4)); // [4,1,2,3]

shift() 方法:

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

var arr = new Array(3)
arr[0] = "1"
arr[1] = "2"
arr[2] = "3"
console.log(arr.shift()); 

slice() 方法:

slice() 方法可从已有的数组中返回选定的元素。

请注意,该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()。

var arr = new Array(3)
arr[0] = "1"
arr[1] = "2"
arr[2] = "3"
console.log(arr.slice(1)); // [2,3]
var arr = new Array(6)
arr[0] = "1"
arr[1] = "2"
arr[2] = "3"
arr[3] = "4"
arr[4] = "5"
arr[5] = "6"
console.log(arr.slide(2,5)); // [3,4,5]

splice() 方法:

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

请注意,splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。

var arr = new Array(6)
arr[0] = "1"
arr[1] = "2"
arr[2] = "3"
arr[3] = "4"
arr[4] = "5"
arr[5] = "6"
console.log(arr.split(2,0,111)); [1,2,111,4,5,6]
var arr = new Array(6)
arr[0] = "1"
arr[1] = "2"
arr[2] = "3"
arr[3] = "4"
arr[4] = "5"
arr[5] = "6"
console.log(arr.split(2,3,888)); //[1,2,888,6]

sort() 方法:

sort() 方法用于对数组的元素进行排序。对数组的引用。请注意,数组在原数组上进行排序,不生成新的数组。

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
console.log(arr); // [1,10,1000,25,40,5]

上面的代码没有按照数值的大小对数字进行排序,要实现这一点,就必须使用一个排序函数:

function sortNumber(a,b){
  return a - b;
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
console.log(arr.sort(sortNumber)); //[1,5,10,25,40,1000] 

javascript 对象初探 (四)--- 内建对象之旅之Array