JavaScript原声的数组操作函数归纳
1.filter() 方法,把不符合条件的过滤掉。 创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测, filter() 不会改变原始数组。
var myarr = [["北京", 90],["上海", 50],["福州", 10],["广州", 50],["成都", 90],["西安", 100]]; //想要删除上海这一项, var city="上海"; //val为每一项的值,index为下标,array为要过滤的数组值 var newArr = myarr.filter(function(val, index, array) { return val[0] != city; }); console.log(myarr); //["北京", 90],["上海", 50],["福州", 10],["广州", 50],["成都", 90],["西安", 100] console.log(newArr); //["北京", 90],["福州", 10],["广州", 50],["成都", 90],["西安", 100]
2.slice()从已有的数组中返回选定的元素(不修改原数组)
var obj3 = [["北京", 90],["上海", 50,'shanghai'],["福州", 10],["广州", 50],["成都", 90],["西安", 100]]; //提取范围为[star,end),不包含end;若没有设置,到最后一项 //第一个参数,必须,规定从哪一项开始。若为负数,从尾数开始算。-1 指最后一个元素,-2 指倒数第二个元素 var obj4 = obj3.slice(2,3); var obj5 = obj3.slice(2,-1); var obj6 = obj3.slice(2); console.log(obj4); console.log(obj5); console.log(obj6);
结果
3.使用delete和splice()删除数组的区别
var obj = new Array(['1','2','3','4'],['a','b','c','d'],['f','7','h','7']); var obj2 = new Array(['1','2','3','4'],['a','b','c','d'],['f','7','h','7']); //delete和splice结果的不同 delete obj[0][1]; console.log('delete:',obj); obj2[0].splice(1,1); console.log('splice:',obj2);
结果如下图:
delete不会改变数组的长度。splice()会直接修改原数组,
splice()还可以用于插入数组
var obj2 = new Array(['1','2','3','4'],['a','b','c','d'],['f','7','h','7']); //第一个参数指定位置(必须,负数从结尾开始) //第二个参数指定要删除的项目数量(必须,为0则不删) //第三个要添加的新项目(可选) obj2[0].splice(1,1,'insert','insert2'); console.log('splice:',obj2);
结果:
4.删除数组中元素,pop()和shift()向数组添加一个元素,并返回删除内容
pop()去尾,shift()去头,如果数组为空,则 不改变数组,返回 undefined 值。
var obj = new Array(['1','2','3','4'],['a','b','c','d'],['f','7','h','7']); var obj2 = new Array('1','2','3','4','qqqq','44444','rttrr'); //直接修改原数组,返回被删的内容 var obj3 = obj.pop(); var obj4 = obj2.shift(); console.log(obj); // ['1','2','3','4'],['a','b','c','d'] console.log(obj2); // '2','3','4','qqqq','44444','rttrr' console.log(obj3); //['f','7','h','7'] console.log(obj4); //1
5.添加元素到数组中,push()和unshift()向数组添加一个或多个元素,并返回新的长度
push()从尾部添加,unshift()从开头添加
var obj = new Array(['1','2','3','4'],['a','b','c','d'],['f','7','h','7']);
var obj2 = new Array('1','2','3','4','qqqq','44444','rttrr');
obj.push(['尾','push'],['尾部','aaaa']);
obj2.unshift('头','unshift','多个');
console.log(obj);
console.log(obj2);
结果如图
6.concat()连接两个或多个数组
不改变原数组,返回新数组 arr.concat(arr2)
7.reverse()用于颠倒数组中元素的顺序,改变原数组
var obj = new Array(['1','2','3','4'],['1a','2a','3a','4a'],['12a','22a','32a','42a'],['13a','23a','33a','43a']); obj.reverse(); console.log('reverse颠倒位置',obj); //['13a','23a','33a','43a'],['12a','22a','32a','42a'],['1a','2a','3a','4a'],['1','2','3','4']
8.sort()对数组排序,可自己定义排序规则(若没有写规则,默认为升序)
var arr= [{ 'sortNo': 2}, { 'sortNo': 1}, { 'sortNo': 5}, { 'sortNo': 6}, { 'sortNo': 7}, { 'sortNo': 3}, { 'sortNo': 8}, { 'sortNo': 4}, { 'sortNo': 0}]; arr.sort(function(a, b){ return a.sortNo - b.sortNo; }); console.log(arr); //输出结果 //{ 'sortNo': 0} //{ 'sortNo': 1} //{ 'sortNo': 2} //{ 'sortNo': 3} //{ 'sortNo': 4} //{ 'sortNo': 5} //{ 'sortNo': 6} //{ 'sortNo': 7} //{ 'sortNo': 8}
9some()和every()
var obj6 = [34,65,435,5,456,456,6,7,8,9,33]; function checkAdult(age) { return age >= 18; } //some()有一项都为true就返回true!every()每一项都为true才返回true console.log(obj6.every(checkAdult)); //false console.log(obj6.some(checkAdult)); //true
10循环数组map()与forEach()
//参数1:值;参数2:下标;参数3:原数组 //map()返回新数组,不改变原数组 var array1 = [12,23,24,42,1]; var res = array1.map(function (val,index,array) { return val*10; }) console.log(res); //[120,230,240,420,10]; console.log(array1); //[12,23,24,42,1]; //forEach()直接改变原数组,无返回值 var array2 = [12,23,24,42,1]; var res2 = array2.forEach(function (val,index,array) { array[index] = val*10; }) console.log(res2);//undefined; console.log(array2); //[120,230,240,420,10]
以下两段代码转自https://www.cnblogs.com/aqigogogo/p/7478510.html
还没有测过
/** * map遍历数组 * @param callback [function] 回调函数; * @param context [object] 上下文; */ Array.prototype.myMap = function myMap(callback,context){ context = context || window; if('map' in Array.prototye) { return this.map(callback,context); } //IE6-8下自己编写回调函数执行的逻辑 var newAry = []; for(var i = 0,len = this.length; i < len;i++) { if(typeof callback === 'function') { var val = callback.call(context,this[i],i,this); newAry[newAry.length] = val; } } return newAry; }
/** * forEach遍历数组 * @param callback [function] 回调函数; * @param context [object] 上下文; */ Array.prototype.myForEach = function myForEach(callback,context){ context = context || window; if('forEach' in Array.prototye) { this.forEach(callback,context); return; } //IE6-8下自己编写回调函数执行的逻辑 for(var i = 0,len = this.length; i < len;i++) { callback && callback.call(context,this[i],i,this); } }
11.reduce()接收一个函数作为累加器
var numbers = [10, 40, 60, 40]; function getSum(total, num) { return total + num; } //两个参数,第一个必须,用于执行每个数组元素的函数(函数参数有四,1必须,初始值,或最终返回值;2必须,当前元素的值;3可选,当前索引;4可选,当前数组) console.log(numbers.reduce(getSum)); //150 //第二个参数,可选。传递给函数的初始值 console.log(numbers.reduce(getSum,50)); //200
toString() 可把一个逻辑值转换为字符串,并返回结果 booleanObject.toString()
12.join() 用于把数组中的所有元素转换一个字符串 arr.join()
//定义二维数组 var myarr = new Array(); //先声明一维 for(var i = 0; i < 2; i++){ myarr[i] = new Array(); //再声明二维 for(var j = 0; j < 3; j++){ myarr[i][j] = i + j; // 为每个数组元素的值赋值 } } console.log(myarr)
结果
本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。