js数组属性和方法

发表于 2018-04-16 分类于技术

js中的数组实际上就是一个Array对象的实例，继承来自Array.prototype的属性和方法！

属性

length（Array.prototype.length）：返回数组的长度；注意只有数字索引或者能被转换为数字的索引才会被计入！

var arr = [];
arr[0] = 1;
arr[3] = "xxf";
arr["name"] = "xuefeng";

arr.length; // 4
arr[1]; // undefined
arr.name; // xuefeng

js数组的长度是根据索引中最大的数字决定的（？），且中间没有被赋值的索引被访问时的值默认为undefined！且其中的非数字索引或者对象属性不会被计入到length中的，但是可以强制转化为十进制数字的索引是有效的：

var arr = [];
arr["12"] = "cctv"; // 索引"12"可以强制转化为数字12！

arr.length; // 13

constructor（Array.prototype.constructor）：返回的就是Array本身！即所有数组实例的构造器都是继承自Array对象！

1 2	var arr = [1, 2, 3]; arr.constructor; // [Function: Array]

访问方法

所有的访问方法绝对不会改变调用它们的对象的值，只会返回一个新的数组或者返回一个其它的期望值。

concat方法：用于合并多个数组或多个元素，返回一个新的数组；

/*
接受一个或多个数组或元素
与原数组合并返回到一个新的数组！
*/
Array.prototype.concat(val1[, val2[, ...[, valN]]]);

join方法：连接数组内所有的元素并返回一个字符串；数组中元素值为null或undefined的，该元素则转化为空字符串！

/*
separator为连接字符，可以不填
当不填时separator参数时，默认为","
当连接字符为空字符串""时，元素之间没有连接字符，直接相连
*/
Array.prototype.join(separator);

//Example
var arr = [1, 2, 3];
arr.join(); // "1,2,3"
arr.join(""); // "123"
arr.join("-"); // "1-2-3"
arr.join(", "); // "1, 2, 3"  （最后一个空格自动去除？）

slice方法：返回一个从开始到结束（不包括结束索引的那个元素！）选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。

/*
begin和end参数分别为开始和结束索引，都是可选的
当两个参数都不填时，直接复制整个数组
当end参数不填时，复制从begin开始到最后一个的元素
begin和end的索引可以为负，代表倒数第几个元素！
*/
Array.prototype.slice([begin[, end]]);

//Example

var arr = [1, 2, 3];

arr.slice(); // [1, 2, 3]
arr.slice(1); // [2, 3]
arr.slice(0, 2); // [1, 2]
arr.slice(0, -1); // [1, 2]

toString方法：相当于arr.join()，即直接用,连接所有元素返回一个字符串；
indexOf方法：返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1；

/*
elem参数为所查找的元素
startIndex为开始查找的索引，可以为负，同上
当startIndex超出数组length时直接返回-1！
*/
Array.prototype.indexOf(elem[, startIndex=0]);

修改器方法

所有的修改器方法会改变调用它们的对象自身的值！

push方法：在数组的末尾添加一个或多个元素，并返回数组的新长度；
pop方法：删除数组的最后一个元素，并返回这个元素；
reserve方法：颠倒数组中所有元素的顺序，并返回颠倒后的数组；
shift方法：删除数组中第一个元素，并返回这个元素；
unshift方法：在数组的开头添加一个或多个元素，并返回数组的新长度；
sort方法：对数组元素进行排序，并返回当前数组；

/*
compareFunction参数为比较函数，是可选的；
若不填参数，默认按Unicode码进行排序；
compareFunction(a, b)若大于0，则b在a之前；
若小于0，则a在b之前；
若等于0，则a与b的相对位置不变！
*/
Array.prototype.sort([compareFunction]);

//MDN Example
var fruit = ['cherries', 'apples', 'bananas'];
fruit.sort(); 
// ['apples', 'bananas', 'cherries']

var scores = [1, 10, 21, 2]; 
scores.sort(); 
// [1, 10, 2, 21]
// 注意10在2之前,
// 因为在 Unicode 指针顺序中"10"在"2"之前

var things = ['word', 'Word', '1 Word', '2 Words'];
things.sort(); 
// ['1 Word', '2 Words', 'Word', 'word']
// 在Unicode中, 数字在大写字母之前,
// 大写字母在小写字母之前.

//要想让数字数组按照数值从小到大排序
//可以自定义一个compareFunction

/*
    当a > b时，返回值大于0
    当a < b时，返回值小于0
    a = b时，返回值为0
*/
function compare(a, b){
    return a - b;
}

var arr = [4, 1, 12, 9];
arr.sort(compare); // [1, 4, 9, 12]

splice方法：通过删除现有元素和/或添加新元素来更改一个数组的内容，并且返回被删除的元素（以数组的形式）；

array.splice(start)
// 删除数组从start开始到末尾的所有元素，start可以为负值
array.splice(start, deleteCount) 
/* 
删除数组从start开始的deleteCount个元素；
deleteCount可以为0，即不删除任何元素；
当deleteCount大于从start开始到末尾元素的个数，则删除从start开始到末尾的所有元素
*/
array.splice(start, deleteCount, item1, item2, ...)
/*
item1,irem2,...为要添加的元素
从start开始添加
*/

//示例：删除数组中的某一个元素
var arr = [1, 2, 3];
arr.splice(1, 1); // 2 （即删除数组中索引为1的元素）

//MDN示例：从第2位开始删除所有的元素
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);
// 运算后的myFish ：["angel", "clown"] 
// 被删除的元素数组： ["mandarin", "sturgeon"]

迭代方法

在下面的众多遍历方法中，有很多方法都需要指定一个回调函数作为参数。在每一个数组元素都分别执行完回调函数之前，数组的length属性会被缓存在某个地方，所以，如果你在回调函数中为当前数组添加了新的元素，那么那些新添加的元素是不会被遍历到的。此外，如果在回调函数中对当前数组进行了其它修改，比如改变某个元素的值或者删掉某个元素，那么随后的遍历操作可能会受到未预期的影响。总之，不要尝试在遍历过程中对原数组进行任何修改，虽然规范对这样的操作进行了详细的定义，但为了可读性和可维护性，请不要这样做。（MDN）

forEach方法：为数组中的每个元素执行一次回调函数；该方法没有返回值！

/*
callback为回调函数
thisArg为可选参数，作为callback函数中this对象进行使用
*/
array.forEach(callback[, thisArg]);

callback = function(currentValue, index, array){
    //do something
};
/*
currentValue为当前遍历的元素值
index为当前遍历的元素索引
array为所遍历的数组本身
*/

every方法：如果数组中的每个元素都满足测试函数，则返回true，否则返回 false；该方法不会改变原数组！

/*
参数同上
*/
arr.every(callback[, thisArg]);

every方法为数组中的每个元素执行一次 callback 函数，直到它找到一个使 callback 返回 false（表示可转换为布尔值 false 的值）的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true。callback只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。（MDN）

some方法：如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 false。

1	arr.some(callback[, thisArg]);

filter方法：将所有在过滤函数中返回true 的数组元素放进一个新数组中并返回。

//语法
var new_array = arr.filter(callback[, thisArg]);

//MDN Example
function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

// filtered is [12, 130, 44]

map方法：返回一个由回调函数的返回值组成的新数组；

var new_array = arr.map(function callback(currentValue, index, array) { 
    // Return element for new_array 
}[, thisArg]);

// MDN实例：求每个元素的平方
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

reduce方法：

/*
callback为回调函数，有四个参数
initialValue为可选参数，为累计值的初始值！
*/
arr.reduce(callback[, initialValue]);

/*
accumulator：累加器累加回调的返回值;它是上一次调用回调时返回的累积值，或initialValue
currentValue：数组中正在处理的元素
currentIndex（可选）：数组中正在处理的当前元素的索引。
如果提供了initialValue，则索引号从0开始，否则为索引从1开始
array：调用reduce的数组
*/
callback = function(accumulator, currentValue, currentIndex, array){
    /*
    do something
    */
    return /* some value */;
}

回调函数第一次执行时，accumulator 和currentValue的取值有两种情况：调用reduce时提供initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值；没有提供 initialValue，accumulator取数组中的第一个值，currentValue取数组中的第二个值。（MDN）

find方法：返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

/*
callback为回调函数，参数分别为（val，index，array）
thisArg用来指定callback的this参数
*/
arr.find(callback[, thisArg]);

function enough(val) {
    return val > 20;
}

var arr = [12, 16, 6, 23, 8, 29];

console.log(arr.find(enough)); // 23

参考文档

Array - JavaScript | MDN