最实用的JS数组函数整理


Posted in Javascript onDecember 05, 2017

三水点靠木以前就给大家整理过关于JS数组相关的内容,这次我们给大家整理的是非常实用的JS数组操作技巧和写法,学习下吧。

instanceof

检测一个对象是否是数组;(用来对付复杂数据类型;)
// 简单数据类型 typeof ;
A instanceof B // A是不是B造出来的;
例:
  var arr = [1,2,3];
  console.log(arr instanceof Array); //arr属不属于Array类型;

Array.isArray( )

Array.isArray(参数); // 判断参数是不是数组,返回布尔值;
例:
  var arr = [1,2,3];
  var num = 123;
  console.log(Array.isArray(arr)); //true
  console.log(Array.isArray(num)); //false

toString( )

数组.toString(); // 把数组变成字符串,去除了[],内容用逗号链接;
例:
  var arr = ["aaa","bbb","ccc"];
  console.log(arr.toString());   //返回 aaa,bbb,ccc

valueOf( )

数组.valueOf(); //返回数组本身;  
例:
  var arr = ["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() //不需要参数;在数组的最末尾删除一项;
例:
  var arr = [1,2,3];
  var aaa = arr.push("abc");//在数组的最末尾添加一个元素;
  console.log(arr);//元素被修改了
  console.log(aaa);//返回值是数组的长度;

  aaa = arr.pop();//不需要参数;在数组的最末尾删除一项;
  console.log(arr);//元素被修改了
  console.log(aaa);//被删除的那一项

unshift( )和shift( )

1. 数组.unshift() //在数组的最前面添加一个元素;
2. 数组.shift() //不需要参数;在数组的最前面删除一项;
例:
  var arr = [1,2,3];
  aaa = arr.unshift("abc");//在数组的最前面添加一个元素;
  console.log(arr);//元素被修改了
  console.log(aaa);//返回值是数组的长度;

  aaa = arr.shift();//不需要参数;在数组的最前面删除一项;
  console.log(arr);//元素被修改了
  console.log(aaa);//被删除的那一项

数组元素排序

reverse( )

reverse()  //翻转数组
例:
  var arr1 = [1,2,3,4,5];
  var aaa = arr1.reverse(); // [5,4,3,2,1]

sort( )

sort() // 数组中元素排序;(默认:从小到大)
   // 默认:按照首个字符的Unicode编码排序;如果第一个相同那么就比较第二个...
例:    
  var arr = [4,5,1,3,2,7,6];
  var aaa =arr.sort();
  console.log(aaa);     // [1, 2, 3, 4, 5, 6, 7]
  console.log(aaa === arr);// true 原数组被排序了(冒泡排序)
  //默认还可以排列字母;
  var arr2 = ["c","e","d","a","b"];
  var bbb = arr2.sort();
  console.log(bbb);     // ["a", "b", "c", "d", "e"]
  console.log(bbb===arr2); // true 原数组被排序了(冒泡排序)

sort() //数值大小排序方法,需要借助回调函数;
例:
   var arr = [4,5,1,13,2,7,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, 2, 4, 5, 6, 7, 13]

sort( )底层原理

var aaa = bubbleSort([1,12,3], function (a,b) {
//    return a-b;//实参:array[j]-array[j+1];
    return b-a;//实参:array[j+1]-array[j];
  });
  console.log(aaa);

  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( )

数组1.concat(数组2); // 链接两个数组;
var arr1 = [1,2,3];
var arr2 = ["a","b","c"];
var arr3 = arr1.concat(arr2);
console.log(arr3)  //  [1, 2, 3, "a", "b", "c"]

slice( )

数组.slice(开始索引值,结束索引值);   //数组截取;
例 :
   var arr = [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,...); // 替换和删除;
                           //改变原数组;返回值是被删除/替换的内容
例:
  var arr = [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]

//替换
  var arr = [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(元素); // 给元素,查索引(从后往前)
例:
  var arr = ["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.  var arr = [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=有时候无法赋值;
    return true;
  });

2. //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,222,333,444,555];
  var newArr = arr.filter(function (element, index, array) {
    //只要是奇数,就组成数组;(数组中辨别元素)
    if(element%2 === 0){
      return true;
    }else{
      return false;
    }
  })

  console.log(newArr); // [222, 444]

forEach()

// 和for循环一样;没有返回值;
例:
  var arr = [111,222,333,444,555];
  var sum = 0;
  var aaa = 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; 对数组二次加工
例:
  var arr = [111,222,333,444,555];
  var newArr = arr.map(function (element, index, array) {
    if(index == 2){
      return element; // 这里return了 所以下面返回的值是333
    }
    return element*100; // 返回的元素值都乘上100后的值
  })
  console.log(newArr); // [11100, 22200, 333, 44400, 55500]

some()

//对数组中每一项运行回调函数,如果该函数对某一项返回true,则some返回true; 像杀手,有一个成功,就胜利了!!!
例:
  var arr = [111,222,333,444,555];
  var bool = arr.some(function (ele,i,array) {
    //判断:数组中有3的倍数
    if(ele%3 == 0){
      return true;
    }
    return false;
  })
  alert(bool); //true ; 有一个成功就是true

数组清空

1. arr.length = 0; // (不好,伪数组无法清空)
  2. arr.splice(0); // 伪数组没有这个方法;
  3. arr = [];   // 可以操作伪数组; (推荐!)
// 伪数组: 就是长的像数组,但是没有数组的方法;也不能添加和删除元素;
例: // arguments
    fn(111,222,333);
    function fn(){
      arguments.length = 0; // 无法清空 返回 [1, 2, 3]
      arguments.splice(0); // 会报错 arguments.splice is not a function
      arguments = []; // 可以清空,返回空数组[] 
      console.log(arguments);
    }

数组案例

1.将一个字符串数组输出为|分割的形式,比如“刘备|张飞|关羽”。使用两种方式实现

var arr = ["刘备","张飞","关羽"];
    var separator = "|";
    //通过for循环累加
    var str = arr[0];
    for(var i=1;i<arr.length;i++){
      str += separator+arr[i];
    }
    console.log(str); // 刘备|张飞|关羽
    //join()可以把数组中的元素链接成字符串;
    console.log(arr.join("|")); // 刘备|张飞|关羽

2.将一个字符串数组的元素的顺序进行反转。["a", "b", "c", "d"] -> [ "d","c","b","a"]。使用两种种方式实现。提示:第i个和第length-i-1个进行交换

// 数组.reverse() 方法
      var arr = ["a", "b", "c", "d"];
      console.log(arr.reverse()); // ["d", "c", "b", "a"]
    
    // 三种:1.正向遍历,反向添加; 2.反向遍历,正向添加;  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);

3.工资的数组[1500, 1200, 2000, 2100, 1800],把工资超过2000的删除

var arr = [1500, 1200, 2000, 2100, 1800];
  //利用filter()形成一个数组;return true;组成的数组;
  var newArr = arr.filter(function (ele, i, array) {
    //2000以上返回false;
    if(ele<2000){
      return true;
    }else{
      return false;
    }
  });
  console.log(newArr); // [1500, 1200, 1800]

4.["c", "a", "z", "a", "x", "a"]找到数组中每一个a出现的位置

var arr = ["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.编写一个方法去掉一个数组的重复元素 (数组去重)

var arr = ["鸣人","鸣人","佐助","佐助","小樱","小樱"];
  // 方法1: 思路:定义一个新数组,遍历老数组,判断,如果新数组里面没有老数组的元素就添加,否则就不添加;
    var newArr = [];
    //遍历老数组
    arr.forEach(function (ele,index,array) {
      //检测老数组中的元素,如果新数组中存在就不添加了,不存在才添加;
      if(newArr.indexOf(ele) === -1){//不存在就添加;(去新数组中查找元素索引值,如果为-1就是没有)
        newArr.push(ele);
      }
    });
    console.log(newArr); // ["鸣人", "佐助", "小樱"]

 

Javascript 相关文章推荐
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
原生js编写焦点图效果
Dec 08 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
基于webpack 实用配置方法总结
Sep 28 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 #Javascript
Vue DevTools调试工具的使用
Dec 05 #Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 #Javascript
webpack学习教程之前端性能优化总结
Dec 05 #Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 #Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 #Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 #Javascript
You might like
PHP向socket服务器收发数据的方法
2015/01/24 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
js查找节点的方法小结
2015/01/13 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
python批量下载图片的三种方法
2013/04/22 Python
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
django使用多个数据库的方法实例
2021/03/04 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
见习期自我鉴定
2013/11/07 职场文书
实习自我评价怎么写
2013/12/02 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
大学生社会实践感想
2015/08/11 职场文书