最实用的JS数组函数整理

我们以前就给大家整理过关于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); // ["鸣人", "佐助", "小樱"]
时间: 2017-12-03

js操作数组函数实例小结

本文实例讲述了js操作数组函数.分享给大家供大家参考,具体如下: 1.删除数组中指定的元素 /** * 参考实例 foreach = function (obj, insp){ if(obj== null && obj.constructor != Array){ return []; } //obj是要处理的数组,obj==null 表示对象尚未存在:obj.constructor != Array 表示对象obj的属性的构造函数不是数组: //constructor属性始终指向创建当前

javascript中Array()数组函数详解

在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. Array()是一个用来构建数组的内建构造器函数.数组主要由如下三种创建方式: array = new Array() array =

JavaScript数组函数unshift、shift、pop、push使用实例

如何声明数组 s中数组的声明可以有几种方式声明 复制代码 代码如下: var tmp = [];  // 简写模式 var tmp = new Array(); // 直接new一个 var tmp = Array();  // 或者new也可以 在new数组的时候可以传入一个参数,表示数组的初始化长度 复制代码 代码如下: // new的时候传入一个参数表示初始化数组长度 var tmp = new Array(3);   alert(tmp.length);  // 3 但如果你想创建一个只

javascript 定义初始化数组函数

方法一.js数组的定义与初始化 定义一维数组 方法1: var _TheArray = new Array();//定义 _TheArray[0]="1"; _TheArray[1]="2"; _TheArray[2]="3"; //初始化 方法2: var _TheArray = new Array("1","2","3");//直接定义并初始化 定义二维数组 方法1 var _The

JavaScript中实现PHP的打乱数组函数shuffle实例

PHP 里面有个非常方便的打乱数组的函数 shuffle() ,这个功能在许多情况下都会用到,但 javascript 的数组却没有这个方法,没有不要紧,可以扩展一个,自己动手,丰衣足食嘛. 请刷新页面查看随机排序效果. 复制代码 代码如下: <script type="text/javascript"> //<![CDATA[ // 说明:为 Javascript 数组添加 shuffle 方法   var shuffle = function(v){     fo

JavaScript中的Array 对象(数组对象)

 1.创建Array对象方法: --->var arr = [1,2,3];//简单的定义方法 此时可以知道 arr[0] == 1; arr[1] == 2; arr[2] == 3; --->new Array(); var arr = new Array();//定义一个没有任何内容的数组对象,然后以下面的方式为其赋值 arr[0] = "arr0"; arr[1] = "arr1"; arr[2] = "arr2"; ---&

JavaScript中关于for循环删除数组元素内容时出现的问题

昨天用for循环进行数组去重的时候出现的问题, 首先,用双重for循环把前一个和所有后面的元素进行比较,如果相等则删除. 但是,如果数组里面有三个以上连续相等的元素的时候,就会出现问题. var arr = [1,1,1,2,2]; for(var i=0; i<arr.length-1; i++){ for(var j=i+1; j<arr.length; j++){ if(arr[i] === arr[j]){ arr.splice(j,1); } } } document.write(&

C++ 中const对象与const成员函数的实例详解

C++ 中const对象与const成员函数的实例详解 const对象只能调用const成员函数: #include<iostream> using namespace std; class A { public: void fun()const { cout<<"const 成员函数!"<<endl; } void fun() { cout<<"非const成员函数 !"<<endl; } }; int

JavaScript中实现无缝滚动、分享到侧边栏实例代码

废话不多说,直接给大家贴代码了,代码解决一起问题! 下面一段代码给大家介绍js无缝滚动实例代码: 代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

javascript中的绑定与解绑函数应用示例

Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.document.window 或 XMLHttpRequest. type: 字符串,事件名称,不含"on",比如"click"."mouseover"."keydown"等. listener :实现了 EventListene

ES6 javascript中class类的get与set用法实例分析

本文实例讲述了ES6 javascript中class类的get与set用法.分享给大家供大家参考,具体如下: 与 ES5 一样, 在 Class 内部可以使用get和set关键字, 对某个属性设置存值函数和取值函数, 拦截该属性的存取行为. class MyClass { constructor() { // ... } get prop() { return 'getter'; } set prop(value) { console.log('setter: ' + value); } }

VBS数组函数学习实例分析

下面来具体讲解下几个数组函数的使用方式: Array函数 返回包含数组的Variant. Array(arglist) arglist参数是赋给包含在Variant中的数组元素的值的列表(用逗号分隔).如果没有指定此参数,则将会创建零长度的数组. 说明 用于引用数组元素的表示符,由跟随有括号的变量名组成,括号中包含指示所需元素的索引号.在下面的示例中,第一条语句创建名为 A 的变量.第二条语句将一个数组赋值给变量 A.最后一条语句将包含在第二个数组元素中的值赋值给另一个变量. arr = arr

JavaScript中实现继承的三种方式和实例

javascript虽然是一门面向对象的语言,但是它的继承机制从一开始设计的时候就不同于传统的其他面向对象语言,是基于原型的继承机制,但是在这种机制下,继承依然有一些不同的实现方式. 方法一:类式继承 所谓的类式继承就是指模仿传统面向对象语言的继承方式,继承与被继承的双方都是"类",代码如下: 首先定义一个父类(或超类): function Person(name){ this.name=name; } Person.prototype.getName=function(){ retu

php中current、next与reset函数用法实例

本文实例讲述了php中current.next与reset函数用法.分享给大家供大家参考. 具体代码如下: 复制代码 代码如下: $array=array('step one','step two','step three','step four');  //定义一个数组 echo current($array)."<br/>n";       //返回数组第一个元素 next($array);          //数组指针后移一位 next($array);