ECMAScript数组方法总结

  • 2017-09-05
  • 104
  • 0

首先说些为什么叫ECMAScript数组方法,
1.javascript现在这么语言的规范基本上就是按照ECMAScript国际规范来的;
2.我自己觉得从ECMAScript整个规范的历史进程来总结数组方法也是一个语言的发展过程吧。
开发过程中,我们和数组打交道的地方太多了,所以了解数组以及js对于数组的一些重要的api特别重要。
我主要从EcmaScript来谈谈数组api的变化:

ES3


其实我个人感觉es3的数组的api还是很实用,尽管现在es6都普及了
join(sep)

将数组元素通过指定的字符连接成字符串

var array = [1, 2, 3, 4, 5];
//无参数时,默认用‘,’连接
var joinStr = array.join();//joinstr: '1,2,3,4,5'
//用‘-’连接
var joinStr1 = array.join('-');//joinStr1: '1-2-3-4-5'

reverse()

将数组元素颠倒顺序

var array = [1, 2, 3, 4, 5];
array.reverse();//array: [5,4,3,2,1]

sort(fn)

将数组元素排序

var array = ['a', 'e', 'b', 'd', 'c'];

//无参数时按照字母表升顺排序
array.sort(); //array: ['a','b','c','d','e']

//当参数是函数时,函数有两个参数a、b,分别是数组相邻的两个数据,返回值则决定相邻的两个数据哪个排在在前面
//返回值小于0,则a顺序在前
//返回值大于0,则a顺序在后
例如:
var array = [5, 2, 1, 4, 3];

//升序排列,用代入的思想可以把a看成5,b看出2。
array.sort(function (a, b) {
    return a - b;
});//array: [1,2,3,4,5]

//降序排列
array.sort(function (a, b) {
    return b - a;
});//array: [5,4,3,2,1]

concat(data…)

数组拼接成新的数组

var array = [1, 2, 3];

var newArray = array.concat(1, 'xxx'); //newArray: [1, 2, 3, 1, 'xxx']

var newArray1 = array.concat([4, 5]); //newArray1: [1, 2, 3, 4, 5]

slice(start,end)

数组截取

var array = [1, 2, 3, 4, 5];

var newArray = array.slice(1); //newArray: [2,3,4,5]
var newArray1 = array.slice(0, 3); //newArray1: [1,2,3]
var newArray2 = array.slice(0, -1); //newArray2: [1,2,3,4]
var newArray3 = array.slice(-3, -2); //newArray3: [3]

splice(start,len,data…)

数组插入数据、删除数据

var array = [1, 2, 3, 4, 5]

var newArray = array.splice(1);//array=[1] newArray=[2,3,4,5]
var newArray1 = array.splice(0, 2);//array=[3,4,5] newArray1=[1,2]
var newArray2 = array.splice(0, 1, 6, 7);//array=[6,7,2,3,4,5] newArray2=[1]

push(data…)

往数组的尾部添加数据

var array = [1, 2, 3];

array.push(4, 5);//array : [1,2,3,4,5]

pop()

删除数组的最后一个数据

var array = [1, 2, 3, 4, 5];

var value = array.pop();//array : [1,2,3,4]  value: 5

unshift(data…)

往数组的头部添加数据

var array = [3, 4, 5];

array.unshift(1, 2);//array : [1,2,3,4,5]

shift()

删除数组的第一一个数据

var array = [1, 2, 3, 4, 5];

var value = array.shift();//array : [2,3,4,5] value: 1


ES5
ES5新增了9个api,我也查看了些文章,借鉴了不少,


5个迭代方法:forEach()、map()、filter()、some()、every();

2个索引方法:indexOf() 和 lastIndexOf();

2个归并方法:reduce()、reduceRight();

比较重要的思想是都不会改变原数组,相对ES3迭代使用的更多,减少了for循环的使用。
forEach()

对数组进行遍历循环,对数组中的每一项运行给定的函数,这个方法没有返回值。

var arr1 = [2,4,6];
arr1.forEach(function(value, index, arr) {
  console.log(value + ':' + index + ':' +arr);
});
// 2:0:2,4,6
// 4:1:2,4,6
// 6:2:2,4,6

map()

指“映射”,对数组中的每一项运行给定的函数,返回每次函数调用的结果组成的数组。

var arr2 = [2,4,6];
var sum2 = arr2.map(function(value,index,arr) {
  return value += value;
});
console.log(sum2);  // [4, 8, 12] 

filter()

“过滤”,对数组中的每一项运行给定函数,返回满足过滤条件组成的数组。

var arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var flag = arr3.filter(function(value, index) {
  return value % 3 === 0;
}); 
console.log(flag);  // [3, 6, 9]

every()

判断数组中每一项都是否满足所给条件,当所有项都满足条件,才会返回true。

var arr4 = [1, 2, 3, 4, 5];
var flag = arr4.every(function(value, index) {
  return value % 2 === 0;
}); 
console.log(flag);  // false

some()

判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。

var arr5 = [1, 2, 3, 4, 5];
var flag = arr5.some(function(value, index) {
  return value % 2 === 0;
}); 
console.log(flag);   // true

indexOf()

返回查找项的整数索引值,如果没有匹配(严格匹配),返回-1。这个方法与字符串方法ndexOf()的功能是一样的,不过是对数组的操作而已。

var arr6 = [1, 3, 5, 3, 5];

console.log(arr6.indexOf(5, 'x'));  // 2 ('x'被忽略)
console.log(arr6.indexOf('5', 3));  // -1 (未找到,因为5 !== '5')
console.log(arr6.indexOf(5, '3'));  // 4 (从3号位开始向后搜索)
console.log(arr6.indexOf(5, 3));  // 4 (从3号位开始向后搜索)
console.log(arr6.indexOf(4));  // -1 (未找到)

lastIndexOf()与IndexOf()类似,只是lastIndexOf()是从字符串的末尾开始查找,而不是从开头.
reduce()

方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。注意: reduce() 对于空数组是不会执行回调函数的。

var arr9 = [1, 2, 3, 4];
var sum9 =arr9.reduce(function (total, curr, index, array) {
  return total * curr;
});
console.log(sum9);  // 24 
var sum9_1 =arr9.reduce(function (total, curr, index, array) {
  return total * curr;
}, 10);
console.log(sum9_1);  // 240

reduceRight()和reduce()相比,用法类似,差异在于reduceRight是从数组的末尾开始实现的。来做个简单的减法:


ES6
这里主要看了阮老师的《ECMAScript6入门》中数组的扩展。
那我就不说了吧,阮老师的那么好,自己去看es6数组扩展


评论

还没有任何评论,你来说两句吧

- 友情链接 - Theme by Qzhai