JavaScriptES数组系列
正⽂从这开始～
ECMAScript 5.1 中提供的数组⽅法
其中部分⽅法，ECMAScript 3 就出现了，但是本⽂不再细分。
判断是否是数组
Array.isArray ( arg )
// false or true
不⽀持此⽅法的IE9-等浏览器可以这样处理：
String.call(obj) === '[object Array]';
转换⽅法
toString
数组的valueOf会默认调⽤toString⽅法，所以他们的返回值⼀样，都是逗号分隔每⼀项组成的字符串
var months = ['Jan', 'Feb', 'Mar', 'Apr'];
toLocaleString
调⽤数组每⼀项的toLocaleString⽅法，有时和toString⽅法的结果是⼀样的。有时也不同，⽐如Date对象元素组成的数组⾥，返回的结果会不同。join
a.join();      // 'Wind,Rain,Fire'
a.join(', ');  // 'Wind, Rain, Fire'
a.join(' + '); // 'Wind + Rain + Fire'
a.join('');    // 'WindRainFire'
如果数组中的某⼀项的值是null或者undefined，那么该值在join()、toLocale-String()、toString()和valueOf()⽅法返回的结果中以空字符串表⽰
对应的逆向⽅法是String.split()
栈⽅法
pop 删除数组的最后⼀项
操作原数组，返回删除项
var a = [1, 2, 3];
var b = a.pop();
console.log(a); // [1, 2]
console.log(b); // 3
push 在数组末尾添加新元素
操作的原数组，返回数组长度
var a = [1, 2, 3];
var b = a.push(4, 5);
console.log(a); // [1, 2, 3, 4, 5]
console.log(b); // 5
队列⽅法
shift 删除数组的第⼀项
操作的原数组，返回删除项
var a = [1, 2, 3];
var b = a.shift();
console.log(a); // [2, 3]
console.log(b); // 1
unshift 数组的前⾯添加新元素
操作的原数组，返回数组长度
var a = [1, 2, 3];
var b = a.unshift(4, 5);
console.log(a); // [4, 5, 1, 2, 3]
console.log(b); // 5
重排序⽅法
reverse 反转数组项的顺序
操作原数组，返回数组
var a = ['one', 'two', 'three'];
var b= a.reverse();
console.log(a); // ['three', 'two', 'one']
console.log(b); // ['three', 'two', 'one']
sort 排序
按照 Unicode code 位置排序，默认升序
var fruit = ['cherries', 'apples', 'bananas'];
fruit.sort(); // ['apples', 'bananas', 'cherries']
var scores = [1, 10, 21, 2];
scores.sort(); // [1, 10, 2, 21]
// because '10' is mix of two characters '1' and '0' so '10' is before '2' in Unicode code point order.排序后undefined会被放在数组末尾
之前写过⼀篇排序⽅法的深⼊解读，感兴趣请点击这⾥
操作⽅法
concat 合并数组
返回新数组
var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
var arr3 = at(arr2);
console.log(arr3);
// expected output: ["a", "b", "c", "d", "e", "f"]
var arr4 = at(1, [4, [5, 6]]);
console.log(arr4);
//猜猜这个的结果？
// 输出： ['a', 'b', 'c', 1, 4, [5, 6]]
//如果传⼊的是数组，取的是其值。但是数组中的数组，是保留的。
slice 基于当前数组创建新数组
返回新数组
传⼊两个参数起始位置（包含）结束位置（不包含），虎头蛇尾，有始⽆终。只传⼀个参数默认截取到数组末尾, 会认为是开始位置
传递的参数中有⼀个负数，则⽤数组长度加上该数来确定位置。长度为 5 的数组slice（-2，-1）与slice（3, 4）结果相同。结束位置⼩于起始位置，则返回空数组
var a = ['1', '2', '3', '4'];
var sliced = a.slice(1, 3);
console.log(a);      // ['1', '2', '3', '4']
console.log(sliced); // ['2', '3']
splice
可以实现删除、插⼊（元素个数⼤于要删除的元素个数）、替换（删除⼀个，再添加⼀个）
返回被删除元素组成的数组，如果没有被删除元素，返回空数组
参数：起始位置(包含)、要删除的元素个数、元素
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
myFish.splice(2, 0, 'drum');
// ["angel", "clown", "drum", "mandarin", "sturgeon"]
myFish.splice(2, 1);
// ["angel", "clown", "mandarin", "sturgeon"]
myFish.splice(-1, 0, 'drum');
//["angel", "clown", "mandarin", "drum", "sturgeon"]
区别于concat如果插⼊数组，就会插⼊数组，⽽不是将数组拆开。
myFish.splice(2, 1, ["hello", "world"]);
// ["angel", "clown", ["hello", "world"], "sturgeon"]
位置⽅法
indexOf和lastIndexOf都接受两个参数：查的值、查起始位置
不存在，返回 -1 ；存在，返回位置。indexOf是从前往后查，lastIndexOf是从后往前查。
indexOf
var a = [2, 9, 9];
a.indexOf(2); // 0
a.indexOf(7); // -1
if (a.indexOf(7) === -1) {
// element doesn't exist in array
}
lastIndexOf
var numbers = [2, 5, 9, 2];
numbers.lastIndexOf(2);    // 3
numbers.lastIndexOf(7);    // -1
numbers.lastIndexOf(2, 3);  // 3
numbers.lastIndexOf(2, 2);  // 0
numbers.lastIndexOf(2, -2); // 0
numbers.lastIndexOf(2, -1); // 3
迭代⽅法
ECMAScript 5 提供了5个迭代⽅法，他们的参数都是
给定的函数(当前元素、位置、数组)
可选的，执⾏回调是的 this 值
every
对数组的每⼀项都运⾏给定的函数，每⼀项都返回 ture，则返回 true
function isBigEnough(element, index, array) {
return element < 10;
}
[2, 5, 8, 3, 4].every(isBigEnough);  // true
some
对数组的每⼀项都运⾏给定的函数，任意⼀项都返回 ture，则返回 true
function isBiggerThan10(element, index, array) {
return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true
filter
对数组的每⼀项都运⾏给定的函数，返回结果为 ture 的项组成的数组
var words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];
var longWords = words.filter(function(word){
return word.length > 6;
});
// Filtered array longWords is ["exuberant", "destruction", "present"]
map
对数组的每⼀项都运⾏给定的函数，返回每次函数调⽤的结果组成⼀个新数组
var numbers = [1, 5, 10, 15];
var doubles = numbers.map(function(x) {
return x * 2;
});
// doubles is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]
forEach 数组遍历
const items = ['item1', 'item2', 'item3'];
javascript数组对象
const copy = [];
items.forEach(function(item){
copy.push(item)
});
缩⼩⽅法
reduce、reduceRight ⼀个是从前往后遍历，⼀个是从后往前遍历，⽐上⾯的五个迭代⽅法回调函数多了⼀个参数：上⼀项的值
回调函数参数上⼀项、当前元素、位置、数组
reduce
var numbers = [0, 1, 2, 3];
var result = duce(function(accumulator, currentValue) {
return accumulator + currentValue;
});
console.log(result);
// expected output: 6
reduceRight
var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
at(b);
}, []);
// flattened is [4, 5, 2, 3, 0, 1]
⼩总结
队列⽅法和栈⽅法操作的都是原数组，增加数组元素的时候，返回值是数组长度；删除数组元素的时候，返回值是被删除的元素。哪些⽅法改变了原数组？
栈⽅法：push、pop
队列⽅法：shift、unshift
重排序⽅法：reverse、sort
哪些⽅法返回的是数组？
重排序⽅法：reverse、sort
操作⽅法：splice、slice、concat
迭代⽅法中：filter、map
ECMAScript 6.0 新增的⽅法
from
将类似数组的对象（array-like object）和可遍历（iterable）的对象转为真正的数组
const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]
Array.from('foo');
// ["f", "o", "o"]
of
⽤于将⼀组值，转换为数组
这个⽅法的主要⽬的，是弥补数组构造函数Array()的不⾜。因为参数个数的不同，会导致Array()的⾏为有差异。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.of(7);      // [7]
Array.of(1, 2, 3); // [1, 2, 3]
Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]
copyWithin
将指定位置的元素复制到其他位置（会覆盖原有元素），返回当前数组。该⽅法会修改当前数组。
它接受三个参数。
target（必需）：从该位置开始替换数据。
start（可选）：从该位置开始读取数据，默认为0。如果为负值，表⽰倒数。
end（可选）：到该位置前停⽌读取数据，默认等于数组长度。如果为负值，表⽰倒数。
[1, 2, 3, 4, 5].copyWithin(-2);
// [1, 2, 3, 1, 2]
[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
/
/ [1, 2, 3, 3, 4]
fill
使⽤给定值，填充⼀个数组。
会抹除数组原有的元素
还可以接受第⼆个和第三个参数，⽤于指定填充的起始位置和结束位置。
var numbers = [1, 2, 3]
numbers.fill(1);
// results in [1, 1, 1]
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
find
出第⼀个符合条件的数组元素，参数是⼀个回调函数，所有数组元素依次执⾏该回调函数，直到出第⼀个返回值为true的元素，然后返回该元素。如果没有符合条件的元素，则返回undefined。回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
[1, 5, 2, 3].find(function(value, index, arr) {
return value > 9;
}) // undefined
findIndex
findIndex⽅法的⽤法与find⽅法⾮常类似，返回第⼀个符合条件的数组元素的位置，如果所有元素都不符合条件，则返回 -1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
ES6 提供三个新的⽅法—— entries()，keys()和 values() —— ⽤于遍历数组。它们都返回⼀个遍历器对象，可以⽤ for…of 循环进⾏遍历，唯⼀的区别是 keys() 是对键名的遍历、values() 是对键值的遍历，entries() 是对键值对的遍历。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
entries

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。