Array 常用数组方法 --- 前端
创建数组
var fruits = ['Apple', 'Banana'];
遍历数组
fruits.forEach(function(item, index, array) {
console.log(item, index);
});
添加元素到数组的末尾
fruits.push('Orange');
删除数组末尾的元素
var last = fruits.pop(); // remove Orange (from the end) // ["Apple", "Banana"];
删除数组的首个元素
var first = fruits.shift(); // remove Apple from the front // ["Banana"];
添加元素到数组的头部
var newLength = fruits.unshift('Strawberry') // add to the front
// ["Strawberry", "Banana"];
找出某个元素在数组中的索引
fruits.push('Mango');
// ["Strawberry", "Banana", "Mango"]
var pos = fruits.indexOf('Banana');
// 1
通过索引删除某个元素
var removedItem = fruits.splice(pos, 1); // this is how to remove an item
// ["Strawberry", "Mango"]
从一个索引位置删除多个元素
var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot']; console.log(vegetables); // ["Cabbage", "Turnip", "Radish", "Carrot"] var removedItems = vegetables.splice(1, 2); console.log(vegetables); // ["Cabbage", "Carrot"] (原数组改变) console.log(removedItems); // ["Turnip", "Radish"]
复制一个数组
var shallowCopy = fruits.slice(); // this is how to make a copy // ["Strawberry"]
concat()方法用于合并两个或更多数组。此方法不会更改现有的数组，而是返回一个新的数组。
var arr1 = ['a', 'b', 'c']; var arr2 = ['d', 'e', 'f'];
var arr3 = arr1.concat(arr2);
// arr3 is a new array [ "a", "b", "c", "d", "e", "f" ]
entries()方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
var a = ['a', 'b', 'c']; var iterator = a.entries(); console.log(iterator.next().value); // [0, 'a'] console.log(iterator.next().value); // [1, 'b'] console.log(iterator.next().value); // [2, 'c']
every()方法测试数组的所有元素是否都通过了指定函数的测试。
function isBigEnough(element, index, array) {
return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true 所有都为true则返回true
// 箭头函数
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true
fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。
arr.fill(value, start, end)
// 具体要填充的元素区间是 [start,end) 。
var numbers = [1, 2, 3] numbers.fill(1); // results in [1, 1, 1]
filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
var words = ["spray", "limit", "elite", "exuberant", "destruction", "present"];
var longWords = words.filter(function(word){
return word.length > 6;
});
// Filtered array longWords is ["exuberant", "destruction", "present"]
// filter为数组中的每个元素调用一次 callback函数，并利用所有使得callback返回 true 的元素创建一个新数组。
find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined。
function isBigEnough(element) {
return element >= 15;
}
[12, 5, 8, 130, 44].find(isBigEnough); // 130
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
function isBigEnough(element) {
return element >= 15;
}
[12, 5, 8, 130, 44].findIndex(isBigEnough);
// 数组的第四位满足return条件 返回 则findIndex值为3
forEach()方法对数组的每个元素执行一次提供的函数。
var a = ['a', 'b', 'c'];
a.forEach(function(element) {
console.log(element);
});
// a
// b
// c
Array.from()方法从一个类似数组或可迭代对象中创建一个新的数组实例。
const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]
Array.from('foo');
// ["f", "o", "o"]
includes()方法用来判断一个数组是否包含一个指定的值，根据情况返回 true否false。
var a = [1, 2, 3]; a.includes(2); // true a.includes(4); // false
indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
var a = [2, 9, 9];
a.indexOf(2); // 0
a.indexOf(7); // -1
if (a.indexOf(7) === -1) {
// 判断出a数组中不包含7
}
Array.isArray() 用于确定传递的值是否是一个Array。
Array.isArray([1, 2, 3]); // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar'); // false
Array.isArray(undefined); // false
join()方法将一个数组的所有元素连接成一个字符串并返回这个字符串。
var a = ['Wind', 'Rain', 'Fire'];
a.join(); // 'Wind,Rain,Fire'
a.join('-'); // 'Wind-Rain-Fire'
lastIndexOf()方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从fromIndex处开始。
var numbers = [2, 5, 9, 2];
numbers.lastIndexOf(2); // 3
numbers.lastIndexOf(7); // -1
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回。
var numbers = [1, 5, 10, 15];
var doubles = numbers.map(function(x) {
return x * 2;
});
// doubles is now [2, 10, 20, 30] 新数组为return出来的
// numbers is still [1, 5, 10, 15] 原数组不变
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]
pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
var a = [1, 2, 3]; a.pop(); console.log(a); // [1, 2]
push() 方法将一个或多个元素添加到数组的末尾，并返回新数组的长度。
var numbers = [1, 2, 3]; numbers.push(4); console.log(numbers); // [1, 2, 3, 4] numbers.push(5, 6, 7); console.log(numbers); // [1, 2, 3, 4, 5, 6, 7]
reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。
var total = [0, 1, 2, 3].reduce(function(sum, value) {
return sum + value;
}, 0);
// total is 6
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]
reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。
var total = [0, 1, 2, 3].reduce(function(sum, value) {
return sum + value;
}, 0);
// total is 6
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5] 二维数组转一维
reverse() 方法将数组中元素的位置颠倒。
第一个数组元素成为最后一个数组元素，最后一个数组元素成为第一个。
var a = ['one', 'two', 'three']; a.reverse(); console.log(a); // ['three', 'two', 'one']
shift()方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
var a = [1, 2, 3]; var b = a.shift(); console.log(a); // [2, 3] console.log(b); // 1
slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。
var a = ['zero', 'one', 'two', 'three']; var sliced = a.slice(1, 3); console.log(a); // ['zero', 'one', 'two', 'three'] console.log(sliced); // ['one', 'two']
some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。
function isBiggerThan10(element, index, array) {
return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true 只要有通过函数的 就返回为true
sort()方法用就地（ in-place ）的算法对数组的元素进行排序，并返回数组。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。
var fruit = ['cherries', 'apples', 'bananas']; fruit.sort(); // ['apples', 'bananas', 'cherries'] var scores = [1, 10, 21, 2]; scores.sort(); // [1, 10, 2, 21] // Note that 10 comes before 2, // because '10' is mix of two characters '1' and '0' so '10' is before '2' in Unicode code point order. var things = ['word', 'Word', '1 Word', '2 Words']; things.sort(); // ['1 Word', '2 Words', 'Word', 'word'] // In Unicode, numbers come before upper case letters, // which come before lower case letters.
//数组sort
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
return a - b;
});
console.log(numbers);
// [1, 2, 3, 4, 5]
//对象sort
var items = [ { name: 'Edward', value: 21 }, { name: 'Sharpe', value: 37 }, { name: 'And', value: 45 }, { name: 'The', value: -12 }, { name: 'Magnetic', value: 13 }, { name: 'Zeros', value: 37 } ]; // sort by value items.sort(function (a, b) { return a.value - b.value; }); // sort by name items.sort(function(a, b) { var nameA = a.name.toUpperCase(); // ignore upper and lowercase var nameB = b.name.toUpperCase(); // ignore upper and lowercase if (nameA < nameB) { return -1; } if (nameA > nameB) { return 1; } // names must be equal return 0; });
toString()返回一个字符串，表示指定的数组及其元素。
var months = ['Jan', 'Feb', 'Mar', 'Apr']; months.toString(); // "Jan,Feb,Mar,Apr"
unshift()方法将一个或多个元素添加到数组的开头，并返回新数组的长度。
var a = [1, 2, 3]; a.unshift(4, 5); console.log(a); // [4, 5, 1, 2, 3]
splice()方法通过删除现有元素和/或添加新元素来更改一个数组的内容。
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; myFish.splice(2, 0, 'drum'); // insert 'drum' at 2-index position // myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"] myFish.splice(2, 1); // remove 1 item at 2-index position (that is, "drum") // myFish is ["angel", "clown", "mandarin", "sturgeon"]
Array.prototype 属性表示Array 构造函数的原型，并允许向所有Array对象添加新的属性和方法。
会改变自身的方法 下面的这些方法会改变调用它们的对象自身的值： Array.prototype.copyWithin()在数组内部，将一段元素序列拷贝到另一段元素序列上，覆盖原有的值。 Array.prototype.fill()将数组中指定区间的所有元素的值，都替换成某个固定的值。 Array.prototype.pop()删除数组的最后一个元素，并返回这个元素。 Array.prototype.push()在数组的末尾增加一个或多个元素，并返回数组的新长度。 Array.prototype.reverse()颠倒数组中元素的排列顺序，即原先的第一个变为最后一个，原先的最后一个变为第一个。 Array.prototype.shift()删除数组的第一个元素，并返回这个元素。 Array.prototype.sort()对数组元素进行排序，并返回当前数组。 Array.prototype.splice()在任意的位置给数组添加或删除任意个元素。 Array.prototype.unshift()在数组的开头增加一个或多个元素，并返回数组的新长度。 不会改变自身的方法 下面的这些方法绝对不会改变调用它们的对象的值，只会返回一个新的数组或者返回一个其它的期望值。 Array.prototype.concat()返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组。 Array.prototype.includes()判断当前数组是否包含某指定的值，如果是返回true，否则返回false。 Array.prototype.join()连接所有数组元素组成一个字符串。 Array.prototype.slice()抽取当前数组中的一段元素组合成一个新数组。 Array.prototype.toSource()返回一个表示当前数组字面量的字符串。遮蔽了原型链上的Object.prototype.toSource()方法。 Array.prototype.toString()返回一个由所有数组元素组合而成的字符串。遮蔽了原型链上的Object.prototype.toString()方法。 Array.prototype.toLocaleString()返回一个由所有数组元素组合而成的本地化后的字符串。遮蔽了原型链上的Object.prototype.toLocaleString()方法。 遍历方法 在下面的众多遍历方法中，有很多方法都需要指定一个回调函数作为参数。在每一个数组元素都分别执行完回调函数之前，数组的length属性会被缓存在某个地方，所以，如果你在回调函数中为当前数组添加了新的元素，那么那些新添加的元素是不会被遍历到的。此外，如果在回调函数中对当前数组进行了其它修改，比如改变某个元素的值或者删掉某个元素，那么随后的遍历操作可能会受到未预期的影响。总之，不要尝试在遍历过程中对原数组进行任何修改，虽然规范对这样的操作进行了详细的定义，但为了可读性和可维护性，请不要这样做。 Array.prototype.entries()返回一个数组迭代器对象，该迭代器会包含所有数组元素的键值对。 Array.prototype.every()如果数组中的每个元素都满足测试函数，则返回true，否则返回false。 Array.prototype.some()如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 false。 Array.prototype.filter()将所有在过滤函数中返回true的数组元素放进一个新数组中并返回。 Array.prototype.find()找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回undefined。 Array.prototype.findIndex()找到第一个满足测试函数的元素并返回那个元素的索引，如果找不到，则返回-1。 Array.prototype.keys()返回一个数组迭代器对象，该迭代器会包含所有数组元素的键。 Array.prototype.map()返回一个由回调函数的返回值组成的新数组。 Array.prototype.reduce()从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。 Array.prototype.reduceRight()从右到左为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。 Array.prototype.values()返回一个数组迭代器对象，该迭代器会包含所有数组元素的值。 Array.prototype[@@iterator]()和上面的values() 方法是同一个函数。
浙公网安备 33010602011771号