最实用的JS数组函数整理
毛票票以前就给大家整理过关于JS数组相关的内容,这次我们给大家整理的是非常实用的JS数组操作技巧和写法,学习下吧。
instanceof
检测一个对象是否是数组;(用来对付复杂数据类型;) //简单数据类型typeof; AinstanceofB//A是不是B造出来的; 例: vararr=[1,2,3]; console.log(arrinstanceofArray);//arr属不属于Array类型;
Array.isArray()
Array.isArray(参数);//判断参数是不是数组,返回布尔值; 例: vararr=[1,2,3]; varnum=123; console.log(Array.isArray(arr));//true console.log(Array.isArray(num));//false
toString()
数组.toString();//把数组变成字符串,去除了[],内容用逗号链接; 例: vararr=["aaa","bbb","ccc"]; console.log(arr.toString());//返回aaa,bbb,ccc
valueOf()
数组.valueOf();//返回数组本身; 例: vararr=["aaa","bbb","ccc"]; console.log(arr.valueOf());//返回数组本身["aaa","bbb","ccc"]
数组.join(参数)
数组.join(参数);//数组中的元素可以按照参数进行链接变成一个字符串;
console.log(arr.join());//和toString()一样用逗号链接
console.log(arr.join("|"));//用参数链接
console.log(arr.join("&"));//用参数链接
console.log(arr.join(""));//如果是空格,真的用空格链接
console.log(arr.join(""));//空字符是无缝连接
数组元素的添加和删除
push()和pop()
1.数组.push()//在数组的最末尾添加元素; 2.数组.pop()//不需要参数;在数组的最末尾删除一项; 例: vararr=[1,2,3]; varaaa=arr.push("abc");//在数组的最末尾添加一个元素; console.log(arr);//元素被修改了 console.log(aaa);//返回值是数组的长度; aaa=arr.pop();//不需要参数;在数组的最末尾删除一项; console.log(arr);//元素被修改了 console.log(aaa);//被删除的那一项
unshift()和shift()
1.数组.unshift()//在数组的最前面添加一个元素; 2.数组.shift()//不需要参数;在数组的最前面删除一项; 例: vararr=[1,2,3]; aaa=arr.unshift("abc");//在数组的最前面添加一个元素; console.log(arr);//元素被修改了 console.log(aaa);//返回值是数组的长度; aaa=arr.shift();//不需要参数;在数组的最前面删除一项; console.log(arr);//元素被修改了 console.log(aaa);//被删除的那一项
数组元素排序
reverse()
reverse()//翻转数组 例: vararr1=[1,2,3,4,5]; varaaa=arr1.reverse();//[5,4,3,2,1]
sort()
sort()//数组中元素排序;(默认:从小到大) //默认:按照首个字符的Unicode编码排序;如果第一个相同那么就比较第二个... 例: vararr=[4,5,1,3,2,7,6]; varaaa=arr.sort(); console.log(aaa);//[1,2,3,4,5,6,7] console.log(aaa===arr);//true原数组被排序了(冒泡排序) //默认还可以排列字母; vararr2=["c","e","d","a","b"]; varbbb=arr2.sort(); console.log(bbb);//["a","b","c","d","e"] console.log(bbb===arr2);//true原数组被排序了(冒泡排序) sort()//数值大小排序方法,需要借助回调函数; 例: vararr=[4,5,1,13,2,7,6]; //回调函数里面返回值如果是:参数1-参数2;升幂;参数2-参数1;降幂; arr.sort(function(a,b){ returna-b;//升序 //returnb-a;//降序 //returnb.value-a.value;//按照元素value属性的大小排序; }); console.log(arr);//[1,2,4,5,6,7,13]
sort()底层原理
varaaa=bubbleSort([1,12,3],function(a,b){ //returna-b;//实参:array[j]-array[j+1]; returnb-a;//实参:array[j+1]-array[j]; }); console.log(aaa); functionbubbleSort(array,fn){ //外循环控制轮数,内循环控制次数,都是元素个数-1; for(vari=0;iarray[j+1]){//大于升幂排序;否则降幂; //a-b>0和a>b是一个意思; //b-a>0和a0){//升幂排序 //if(array[j+1]-array[j]>0){//降幂排序 //把两个变量送到一个函数中; if(fn(array[j],array[j+1])>0){ vartemp=array[j]; array[j]=array[j+1]; array[j+1]=temp; } } } //返回数组 returnarray; }
数组元素的操作
concat()
数组1.concat(数组2);//链接两个数组; vararr1=[1,2,3]; vararr2=["a","b","c"]; vararr3=arr1.concat(arr2); console.log(arr3)//[1,2,3,"a","b","c"]
slice()
数组.slice(开始索引值,结束索引值);//数组截取; 例: vararr=[1,2,3,"a","b","c"]; console.log(arr.slice(3));//从索引值为3截取到最后;["a","b","c"] console.log(arr.slice(0,3));//包左不包右;[1,2,3] console.log(arr.slice(-2));//负数是后几个;["b","c"] console.log(arr.slice(3,0));//如果前面的比后面的大,那么就是[];[] console.log(arr);//原数组不被修改;[1,2,3,"a","b","c"]
splice()
数组.splice(开始索引值,删除几个,替换内容1,替换内容2,...);//替换和删除; //改变原数组;返回值是被删除/替换的内容 例: vararr=[1,2,3,4,5,6,"a","b","c"] arr.splice(5);//从索引值为3截取到最后;(删除) console.log(arr);//[1,2,3,4,5] arr.splice(1,2);//(删除指定个数)从索引为1的开始删除2个 console.log(arr);//[1,4,5] //替换 vararr=[1,2,3,4,5,6,"a","b","c"]; console.log(arr.splice(3,3,"aaa","bbb","ccc"));//(删除指定数并替换) console.log(arr);//[1,2,3,"aaa","bbb","ccc","a","b","c"] //添加 arr.splice(3,0,"aaa","bbb","ccc");//(删除指定个数) // console.log(arr);//截取或者替换之后的;[1,2,3,"aaa","bbb","ccc","aaa","bbb","ccc","a","b","c"]
indexOf/lastIndexOf
数组.indexOf(元素);//给元素,查索引(从前往后) 数组.lastIndexOf(元素);//给元素,查索引(从后往前) 例: vararr=["a","b","c","d","c","b","b"]; console.log(arr.indexOf("b"));//1查到以后立刻返回 console.log(arr.lastIndexOf("b"));//6找到以后立刻返回 console.log(arr.indexOf("xxx"));//-1;查不到就返回-1;
数组迭代(遍历)
every()
对数组中每一项运行回调函数,如果都返回true,every返回true, 如果有一项返回false,则停止遍历every返回false;不写默认返回false 像保镖失误一次,游戏结束!!! 例: 1.vararr=[111,222,333,444,555]; arr.every(function(a,b,c){ console.log(a);//元素 console.log(b);//索引值 console.log(c);//数组本身; console.log("-----");//数组本身; //数组中元素赋值:c[b]=值;a=有时候无法赋值; returntrue; }); 2.//every返回一个bool值,全部是true才是true;有一个是false,结果就是false varbool=arr.every(function(element,index,array){ //判断:我们定义所有元素都大于200; //if(element>100){ if(element>200){ returntrue; }else{ returnfalse; } }) alert(bool);//false
filter()
//对数组中每一项运行回调函数,该函数返回结果是true的项组成的新数组 //新数组是有老数组中的元素组成的,return为ture的项; 例: vararr=[111,222,333,444,555]; varnewArr=arr.filter(function(element,index,array){ //只要是奇数,就组成数组;(数组中辨别元素) if(element%2===0){ returntrue; }else{ returnfalse; } }) console.log(newArr);//[222,444]
forEach()
//和for循环一样;没有返回值; 例: vararr=[111,222,333,444,555]; varsum=0; varaaa=arr.forEach(function(element,index,array){ console.log(element);//输出数组中的每一个元素 console.log(index);//数组元素对应的索引值 console.log(array);//数组本身[111,222,333,444,555] sum+=element;//数组中元素求和; }); console.log(sum);//数组元素加起来的和 console.log(aaa);//undefined;没有返回值所以返回undefined
map()
//对数组中每一项运行回调函数,返回该函数的结果组成的新数组 //return什么新数组中就有什么;不return返回undefined;对数组二次加工 例: vararr=[111,222,333,444,555]; varnewArr=arr.map(function(element,index,array){ if(index==2){ returnelement;//这里return了所以下面返回的值是333 } returnelement*100;//返回的元素值都乘上100后的值 }) console.log(newArr);//[11100,22200,333,44400,55500]
some()
//对数组中每一项运行回调函数,如果该函数对某一项返回true,则some返回true;像杀手,有一个成功,就胜利了!!! 例: vararr=[111,222,333,444,555]; varbool=arr.some(function(ele,i,array){ //判断:数组中有3的倍数 if(ele%3==0){ returntrue; } returnfalse; }) alert(bool);//true;有一个成功就是true
数组清空
1.arr.length=0;//(不好,伪数组无法清空) 2.arr.splice(0);//伪数组没有这个方法; 3.arr=[];//可以操作伪数组;(推荐!)
//伪数组:就是长的像数组,但是没有数组的方法;也不能添加和删除元素; 例://arguments fn(111,222,333); functionfn(){ arguments.length=0;//无法清空返回[1,2,3] arguments.splice(0);//会报错arguments.spliceisnotafunction arguments=[];//可以清空,返回空数组[] console.log(arguments); }
数组案例
1.将一个字符串数组输出为|分割的形式,比如“刘备|张飞|关羽”。使用两种方式实现
vararr=["刘备","张飞","关羽"]; varseparator="|"; //通过for循环累加 varstr=arr[0]; for(vari=1;i2.将一个字符串数组的元素的顺序进行反转。["a","b","c","d"]->["d","c","b","a"]。使用两种种方式实现。提示:第i个和第length-i-1个进行交换
//数组.reverse()方法 vararr=["a","b","c","d"]; console.log(arr.reverse());//["d","c","b","a"] //三种:1.正向遍历,反向添加;2.反向遍历,正向添加;3.元数组元素交换位置; for(vari=0;i3.工资的数组[1500,1200,2000,2100,1800],把工资超过2000的删除
vararr=[1500,1200,2000,2100,1800]; //利用filter()形成一个数组;returntrue;组成的数组; varnewArr=arr.filter(function(ele,i,array){ //2000以上返回false; if(ele<2000){ returntrue; }else{ returnfalse; } }); console.log(newArr);//[1500,1200,1800]4.["c","a","z","a","x","a"]找到数组中每一个a出现的位置
vararr=["c","a","z","a","x","a"]; //遍历数组(for/while/do...while)forEach(); arr.forEach(function(ele,index,array){ //如果元素等于“a”,那么就输出索引值; if("a"===ele){ console.log(index); } });5.编写一个方法去掉一个数组的重复元素(数组去重)
vararr=["鸣人","鸣人","佐助","佐助","小樱","小樱"]; //方法1:思路:定义一个新数组,遍历老数组,判断,如果新数组里面没有老数组的元素就添加,否则就不添加; varnewArr=[]; //遍历老数组 arr.forEach(function(ele,index,array){ //检测老数组中的元素,如果新数组中存在就不添加了,不存在才添加; if(newArr.indexOf(ele)===-1){//不存在就添加;(去新数组中查找元素索引值,如果为-1就是没有) newArr.push(ele); } }); console.log(newArr);//["鸣人","佐助","小樱"]