编程之家以前就给大家整理过关于JS数组相关的内容,这次我们给大家整理的是非常实用的JS数组操作技巧和写法,学习下吧。
instanceof
Array.isArray( )
toString( )
去除了[],
内容用逗号
链接;
例:
var arr = ["aaa","bbb","ccc"];
console.log(arr.toString()); //返回 aaa,bbb,ccc
valueOf( )
数组.join(参数)
链接变成一个字符串;console.log(arr.join()); //和toString()一样用逗号
链接console.log(arr.join("|")); //用参数
链接console.log(arr.join("&")); //用参数
链接console.log(arr.join(" ")); //如果是空格,真的用空格
链接console.log(arr.join("")); //空字符是无缝连接
push( )和pop( )
添加元素;
2. 数组.pop() //不需要参数;在数组的最末尾
删除一项;
例:
var arr = [1,3];
var aaa = arr.push("abc");//在数组的最末尾
添加一个元素;
console.log(arr);//元素被
修改了
console.log(aaa);//返回值是数组的长度;
aaa = arr.pop();//不需要参数;在数组的最末尾删除一项;
console.log(arr);//元素被修改了
console.log(aaa);//被删除的那一项
unshift( )和shift( )
添加一个元素;
2. 数组.shift() //不需要参数;在数组的最前面
删除一项;
例:
var arr = [1,3];
aaa = arr.unshift("abc");//在数组的最前面
添加一个元素;
console.log(arr);//元素被
修改了
console.log(aaa);//返回值是数组的长度;
aaa = arr.shift();//不需要参数;在数组的最前面删除一项;
console.log(arr);//元素被修改了
console.log(aaa);//被删除的那一项
数组元素排序
reverse( )
sort( )
sort() //数值大小排序
方法,需要借助回调
函数;
例:
var arr = [4,13,6];
//回调
函数里面返回值如果是:参数1-参数2;升幂; 参数2-参数1;降幂;
arr.sort(function (a,b) {
return a-b; //升序
//return b-a; //降序
//return b.value-a.value; //按照元素value
属性的大小排序;
});
console.log(arr); // [1,13]
sort( )底层原理
function bubbleSort(array,fn){
//外循环控制轮数,内循环控制
次数,都是元素个数-1;
for(var i=0;i<array.length-1;i++){
for(var j=0;j<array.length-1-i;j++){//次数优化,多比较一轮,少比较一次;
//满足条件交换位置;
// if(array[j]>array[j+1]){//大于升幂排序;否则降幂;
//a-b>0 和 a>b是一个意思;
//b-a>0 和 a<b是一个意思;
// if(array[j]-array[j+1]>0){//升幂排序
// if(array[j+1]-array[j]>0){//降幂排序
//把两个变量送到一个
函数中;
if(fn(array[j],array[j+1])>0){
var temp = array[j];
array[j] = array[j+1];
array[j+1] = temp;
}
}
}
//返回数组
return array;
}
数组元素的操作
concat( )
链接两个数组;
var arr1 = [1,3];
var arr2 = ["a","c"];
var arr3 = arr1.concat(arr2);
console.log(arr3) // [1,"c"]
slice( )
截取;
例 :
var arr = [1,"c"];
console.log(arr.slice(3)); //从索引值为3
截取到最后;["a","c"]
console.log(arr.slice(0,3)); //包左不包右;[1,3]
console.log(arr.slice(-2)); //负数是后几个;["b","c"]
console.log(arr.slice(3,0)); //如果前面的比后面的大,那么就是[];[]
console.log(arr); //原数组不被
修改;[1,"c"]
splice( )
删除几个,替换
内容1,替换
内容2,...); // 替换和
删除;
//改变原数组;返回值是被
删除/替换的
内容
例:
var arr = [1,"c"]
arr.splice(5); //从索引值为3
截取到最后;(
删除)
console.log(arr); // [1,5]
arr.splice(1,2); //(
删除指定个数)从索引为1的开始
删除2个
console.log(arr); //[1,5]
//替换
var arr = [1,"c"];
console.log(arr.splice(3,"aaa","ccc")); //(删除指定数并替换)
console.log(arr); // [1,"ccc","c"]
// 添加
arr.splice(3,"ccc");//(删除指定个数)
//
console.log(arr);//截取或者替换之后的; [1,"c"]
indexOf / lastIndexOf
数组迭代(遍历)
every()
//every返回一个bool值,全部是true才是true;有一个是false,结果就是false
var bool = arr.every(function (element,index,array) {
//判断:我们定义所有元素都大于200;
//if(element > 100){
if(element > 200){
return true;
}else{
return false;
}
})
alert(bool); //false
filter()
函数,该
函数返回结果是true的项组成的新数组
// 新数组是有老数组中的元素组成的,return为ture的项;
例:
var arr = [111,555];
var newArr = arr.filter(function (element,array) {
//只要是奇数,就组成数组;(数组中辨别元素)
if(element%2 === 0){
return true;
}else{
return false;
}
})
console.log(newArr); // [222,444]
forEach()
输出数组中的每一个元素
console.log(index); // 数组元素对应的索引值
console.log(array); // 数组本身 [111,555]
sum += element; //数组中元素求和;
});
console.log(sum); // 数组元素加起来的和
console.log(aaa);//undefined;没有返回值 所以返回undefined
map()
函数,返回该
函数的结果组成的新数组
// return什么新数组中就有什么; 不return返回undefined; 对数组二次加工
例:
var arr = [111,555];
var newArr = arr.map(function (element,array) {
if(index == 2){
return element; // 这里return了 所以下面返回的值是333
}
return element*100; // 返回的元素值都乘上100后的值
})
console.log(newArr); // [11100,22200,44400,55500]
some()
函数,如果该
函数对某一项返回true,则some返回true; 像杀手,有一个成功,就胜利了!!!
例:
var arr = [111,555];
var bool = arr.some(function (ele,i,array) {
//判断:数组中有3的倍数
if(ele%3 == 0){
return true;
}
return false;
})
alert(bool); //true ; 有一个成功就是true
数组清空
方法;
3. arr = []; // 可以操作伪数组; (推荐!)
方法;也不能
添加和
删除元素;
例: // arguments
fn(111,333);
function fn(){
arguments.length = 0; // 无法清空 返回 [1,3]
arguments.splice(0); // 会报错 arguments.splice is not a function
arguments = []; // 可以清空,返回空数组[]
console.log(arguments);
}
数组案例
1.将一个字符串数组输出为|分割的形式,比如“刘备|张飞|关羽”。使用两种方式实现
链接成字符串;
console.log(arr.join("|")); // 刘备|张飞|关羽
2.将一个字符串数组的元素的顺序进行反转。["a","d"] -> [ "d","a"]。使用两种种方式实现。提示:第i个和第length-i-1个进行交换
方法
var arr = ["a","d"];
console.log(arr.reverse()); // ["d","a"]
// 三种:1.正向遍历,反向<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>; 2.反向遍历,正向<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>; 3.元数组元素交换位置;
for(var i=0;i<arr.length/2;i++){
var temp = arr[i];
arr[i] = arr[arr.length-1-i];
arr[arr.length-1-i] = temp;
}
console.log(arr);</pre>
3.工资的数组[1500,1200,2000,2100,1800],把工资超过2000的删除
4.["c","z","x","a"]找到数组中每一个a出现的位置
输出索引值;
if("a" === ele){
console.log(index);
}
});
5.编写一个方法去掉一个数组的重复元素 (数组去重)
方法1: 思路:定义一个新数组,遍历老数组,判断,如果新数组里面没有老数组的元素就
添加,否则就不
添加;
var newArr = [];
//遍历老数组
arr.forEach(function (ele,array) {
//检测老数组中的元素,如果新数组中存在就不
添加了,不存在才
添加;
if(newArr.indexOf(ele) === -1){//不存在就
添加;(去新数组中查找元素索引值,如果为-1就是没有)
newArr.push(ele);
}
});
console.log(newArr); // ["鸣人","小樱"]
原文链接:https://www.f2er.com/js/34872.html