你对JavaScript的Array对象了解有多少？
前言
工作中，数组应用非常广泛，菜单、列表、banner图等等都会应用到数组，所以必须对数组的属性和方法非常熟练才OK，下面一起来了解一下。
定义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 运算符调用它时的行为完全一样。
Array的属性
属性 | 描述 |
|---|---|
constructor | 返回对创建此对象的数组函数的引用。 |
length | 设置或返回数组中元素的数目。 |
prototype | 使您有能力向对象添加属性和方法。 |
constructor
返回对创建此对象的数组函数的引用。
var test=new Array();
if (test.constructor==Array){
console.log("This is an Array");
}
if (test.constructor==Boolean){
console.log("This is a Boolean");
}
if (test.constructor==Date){
console.log("This is a Date");
}
if (test.constructor==String){
console.log("This is a String");
}
// print
// This is an Arraylength
设置或返回数组中元素的数目。
var arr = new Array(3);
arr[0] = "HTML5";
arr[1] = "Vue";
arr[2] = "CSS";
console.log("arr length: " + arr.length);
arr.length = 5;
console.log("New arr length: " + arr.length);
// print
// arr length: 3
// New arr length: 5prototype
使您有能力向对象添加属性和方法。
function employee(name, job, age){
this.name= name;
this.job = job;
this.age = age;
}
var bill = new employee('Javan', 'web前端工程师', 25);
employee.prototype.salary = null;
bill.salary = 20000;
console.log(bill.salary);
// print
// 20000Array方法
方法 | 描述 |
|---|---|
concat() | 连接两个或更多的数组，并返回结果。 |
join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
pop() | 删除并返回数组的最后一个元素 |
push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
reverse() | 颠倒数组中元素的顺序。 |
shift() | 删除并返回数组的第一个元素 |
slice() | 从某个已有的数组返回选定的元素 |
sort() | 对数组的元素进行排序 |
splice() | 删除元素，并向数组添加新元素。 |
toSource() | 返回该对象的源代码。 |
toString() | 把数组转换为字符串，并返回结果。 |
toLocaleString() | 把数组转换为本地数组，并返回结果。 |
unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 |
valueOf() | 返回数组对象的原始值 |
concat()
arrayObject.concat(arrayX,arrayX,......,arrayX)
返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。
// 示例一
var a = [1, 2, 3];
console.log(a.concat(4, 5));
// print
// 1,2,3,4,5
// 这里是字符串
// 示例二
var arr = new Array(3);
arr[0] = "Javan";
arr[1] = "Web";
arr[2] = "25";
var arr2 = new Array(3);
arr2[0] = "James";
arr2[1] = "Java";
arr2[2] = "35";
console.log(arr.concat(arr2));
// print
// Javan,Web,25,James,Java,35join()
var a = [1,2,3,4];
console.log(a.join('-'));
// print
// 1-2-3-4pop()
var arr = new Array(3);
arr[0] = "Javan";
arr[1] = "John";
arr[2] = "James";
console.log(arr);
console.log(arr.pop());
console.log(arr);
// print
// [Javan, John, James]
// James
// [Javan, John]push()
arrayObject.push(newelement1,newelement2,....,newelementX)
第一个参数必填， 把指定的值添加到数组后的新长度。
var arr = new Array(3);
arr[0] = "Javan";
arr[1] = "John";
arr[2] = "James";
console.log(arr);
console.log(arr.push("Jesse"));
console.log(arr);
// print
// [Javan, John, James]
// 4
// [Javan, John, James, Jesse]reverse()
var arr = new Array(3);
arr[0] = "Javan";
arr[1] = "John";
arr[2] = "James";
console.log(arr);
console.log(arr.reverse());
// print
// [Javan, John, James]
// [James, John, Javan]shift()
var arr = new Array(3);
arr[0] = "Javan";
arr[1] = "John";
arr[2] = "James";
console.log(arr);
console.log(arr.shift());
console.log(arr);
// print
// [Javan, John, James]
// [John, James]slice()
该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
var arr = new Array(3);
arr[0] = "Javan";
arr[1] = "John";
arr[2] = "James";
console.log(arr);
console.log(arr.slice(1));
console.log(arr);
// print
// [Javan, John, James]
// [John, James]
// [Javan, John, James]splice()
arrayObject.splice(index,howmany,item1,.....,itemX)
index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX 可选。向数组添加的新项目。
var arr = new Array(3);
arr[0] = "Javan";
arr[1] = "John";
arr[2] = "James";
console.log(arr);
arr.splice(2, 0, "Owen");
console.log(arr);
// print
// [Javan, John, James]
// [Javan, John, Owen, James]toSource()
toSource() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。
toString()
var arr = new Array(3);
arr[0] = "Javan";
arr[1] = "John";
arr[2] = "James";
console.log(arr.toString());
// print
// Javan, John, JamestoLocaleString()
var arr = new Array(3);
arr[0] = "Javan";
arr[1] = "John";
arr[2] = "James";
console.log(arr.toLocaleString());
// print
// Javan, John, JamestoString和toLocaleString的区别
请看下面的例子
var a = 1234;
console.log(a.toString());
console.log(a.toLocaleString());
// print
// 1234
// 1,234unshift()
arrayObject.unshift(newelement1,newelement2,....,newelementX)
unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。
var arr = new Array(3);
arr[0] = "Javan";
arr[1] = "John";
arr[2] = "James";
console.log(arr);
console.log(arr.unshift("Owen"));
console.log(arr);
// print
// [Javan, John, James]
// 4
// [Owen, Javan, John, James]