zoukankan      html  css  js  c++  java
  • JS 中的 数组(ES5 中方法最全解析)

    一、数组概念

    • []包起来的,一组有序的、任意数据类型的数据集合

    • 数组的长度:array.length

    • JS 中的数组与其他语言的数组,有很大的区别

    二、创建数组的方式

    1. 通过构造函数

    // 创建空数组
    var array=new Array();
    
    // 创建数组,并填充三个元素10,20,30
    var array=new Array(10,20,30);
    
    // 创建数组,里面存储7个值
    var array=new Array(7); 
    

    2.通过字面量

    var arr = [];
    

    三、检测是不是数组 ( 3种方法 )

    1、借用对象原型的toString() 方法 --->【最严谨,兼容性好】

    var arr = [];
    
    var result = toString.call(arr);
    console.log(result);
    
    若是数组,输出: '[object Array]'
    

    2、Array.isArray(被检测对象) ---> ES5中新方法,有兼容问题

    <script>
        var arr = [];
    
        var result = Array.isArray(arr);
        console.log(result);
    </script>
    
    // 结果:布尔值
    

    3、使用instanceof 判断是哪种引用类型 ---> IE8及以下不兼容

    • 用法: 被检测对象 instanceof 引用类型的构造函数

    • 引用类型值有:Object、Array、RegExp、Data 等

    • 任何对象 instanceof Object 值都是true (因为所有的对象都继承自:Object)

    <script>
        var arr = [];
    
        var result1 = arr instanceof Array; // true
        var result2 = arr instanceof Object; // true
    </script>
    

    4. 检测数组兼容代码:方法1 、2 的结合

    综上:测试数组兼容代码
    
    if(typeof Array.isArray==="undefined"){
      Array.isArray = function(arg){
            return result = Object.prototype.toString.call(arg)==="[object Array] ? true : false"
        };  
    }
    

    四、数组几种方法

    1. 遍历 方法

    (1)forEach( ):遍历数组
    • 语法: arr.forEach(function(item, index) { })

    • 参数:

      • 回调中的 item :数组项

      • 回调中的 index :当前数组项的索引值

    • return false: 停止本次循环,继续下一次循环

    var arr = [1, 2, 3, 4];
    arr.forEach(function( value , index){
        if (item > 3) {
            return false;
        }
    
        console.log(item);
    });
    
    // 输出:1 2 3
    
    (2)filter( ):筛选数组;原数组不变,返回新数组: 符合条件的项构成的
    • 语法: arr.filter(function (item, index) { return 筛选条件})

      • 返回值: 符合条件的项构成的 新数组

      • 筛选条件,写在 return

    • 原数组不变

    var arr = [1,2,3,4,23,4,3,5,6];
    var result = arr.filter(function (value,index,array) {
        return (value < 10)
    });
    
    console.log(result);  // [1,2,3,4,4,3,5,6]
    
    (3)map( ):集体操作数组项;原数组不变,返回新数组: 集体操作后的数组项构成的
    • 语法: arr.map(function (item, index) { return 集体操作})

      • 返回值: 集体操作后的数组项构成的 新数组

      • 集体操作,写在 return

    • 原数组不变

    var arr = [1,2,3,4];
    var newArr = arr.map(function(value,index){
        return value * 10;
    })
    
    console.log(newArr);    // [10, 20, 30, 40]
    console.log(arr);       // [1, 2, 3, 4]
    
    (4)every( ):判断 数组项是否符合条件;原数组不变;有一项不符合,就返回 false
    • 语法: arr.every(function (item, index) { return 判断条件})

      • 返回值: 布尔值

        • true:所有项都符合条件

        • false:有一项 或 多项 不符合条件

      • 判断条件,写在 return

    • 原数组不变

    var arr = [1,2,3,4];
    var result = arr.every(function (value, index) {
        return value < 3;
    });
        
    console.log(result);    // false
    
    (5)some( ):判断 数组项是否符合条件;原数组不变;只要有一项符合,就返回 true
    • 语法: arr.some(function (item, index) { return 判断条件})

      • 返回值: 布尔值

        • true:只要有一项符合,就返回 true

        • false:所有项都不符合

      • 判断条件,写在 return

    • 原数组不变

    var arr = [1,2,3,4];
    var result = arr.some(function (value, index) {
        return value > 3;
    });
        
    console.log(result); 
    

    2. 增加、删除 方法

    (1)push( ):末尾追加数组项;原数组改变;返回:新数组的长度
    • 语法: arr.push(item)arr.push(item1, item2);

      • 参数(item):追加一项

      • 参数(item1, item2):追加多项

      • 注意: 参数个数不定,只能是数组项,不能是数组

      • 返回值: 新数组的长度

    • 原数组改变: 追加后的数组

    var arr = [1,2,3,4];
    var result = arr.push(5,6,7);
    console.log(arr);	        // [1,2,3,4,5,6,7]
    console.log(result);        // 7 
    
    (2)unshift( ):开头追加数组项;原数组改变;返回:新数组的长度
    • 语法: arr.unshift(item)arr.unshift(item1, item2);

      • 参数(item):追加一项

      • 参数(item1, item2):追加多项

      • 注意: 参数个数不定,只能是数组项,不能是数组

      • 返回值: 新数组的长度

    • 原数组改变: 追加后的数组

    var arr = [1,2,3,4];
    var result = arr.unshift(5,6,7);
    console.log(arr);	    // [5,6,7,1,2,3,4]
    console.log(result);    // 7 
    
    (3)pop:末尾删除数组项;原数组改变;返回 被删除的数组项
    • 语法: arr.pop()

      • 不用传参

      • 返回值: 被删除的元素

    • 原数组改变: 删除数组项后的数组

    var arr = [1,2,3,4];
    var result = arr.pop();
    console.log(arr);	// [1,2,3]
    console.log(result);    // 4
    
    (4)shift( ):开头删除数组项;原数组改变;返回 被删除的数组项
    • 语法: arr.shift()

      • 不用传参

      • 返回值: 被删除的元素

    • 原数组改变: 删除数组项后的数组

    var arr = [1,2,3,4];
    var result = arr.shift();
    console.log(arr);	    // [2,3,4]
    console.log(result);    // 1
    

    3. 合并、截取、删除 替换 增加 方法

    (1)concat( ):末尾追加 数组 / 数组项;原数组不改变;返回 合并后的新数组
    • 语法: arr.concat(item)arr.concat(arr1)arr.concat(item, arr1)

      • 参数:

        • 可以是 一个 或 多个 数组项:arr.concat(item)arr.concat(item1, item2)

        • 可以是 一个 或 多个 数组:arr.concat(arr1)arr.concat(arr1, arr2)

        • 可以是 一个 或 多个 数组 / 数组项:arr.concat(arr1, item)

      • 返回值: 合并后的新数组

    • 原数组不改变

    var arr = [1,2,3,4];
    var arr2 = arr.concat(5,6,[7,8]);
    
    console.log(arr);  // [1,2,3,4]
    console.log(arr2); // [1,2,3,4,5,6,7,8] 
    
    (2)slice( ):截取数组;原数组不变;返回 截取出来的数组项 构成的新数组
    • 语法: arr.slice()

      • 参数(startIndex, endIndex): 截取数组项的首位、末尾索引,不包含末尾

      • 参数(startIndex): 截取数组项的首位索引,末尾到最后

      • 参数(): 复制出一个新数组,可用于:将伪数组,转为真数组

      • 注意: 不包含结束索引 endIndex 的数组项

    • 原数组不改变

    • 伪数组 变 真数组:

    * 实现:
    var realArr = [].slice.apply(伪数组);
    
    * 原理
    var arr1 = arr.slice();
    
    (3)splice( ) 删除 、替换、插入 数组项;原数组改变;返回:被删除的数组项组成的新数组
    • 语法: arr.splice()

      • 参数(index, number):要删除数组项的索引(包含)、删除数组项的个数

      • 参数(index, number, item):要删除数组项的索引、删除数组项的个数、插入的数组项(可多个)

      • 注意:

        • 参数 index、number 是必需的,参数item可有可无

        • 添加的item数组项从 index 索引开始添加(直接顶替了index索引的位置)

      • 返回值: 被删除的数组项 做成的新数组

    • 原数组改变: 被修改后的数组

    // 删除
    
    var arr = [0, 1, 2, 3, 4, 5, 6];
    var result = arr.splice(1, 2);
    console.log(arr);       //[0, 3, 4, 5, 6]
    console.log(result);    // [1, 2]
    
    // 替换
    
    var arr = [0, 1, 2, 3, 4, 5, 6];
    var result = arr.splice(1, 3, 7, 8);
    console.log(arr);       // [0, 7, 8, 4, 5, 6]
    console.log(result);    // [1, 2, 3]
    
    // 插入
    
    var arr = [0, 1, 2, 3, 4, 5, 6];
    var result = arr.splice(1, 0, 7, 8);
    console.log(arr);       // [0, 7, 8, 1, 2, 3, 4, 5, 6]
    console.log(result);    // []
    

    4. 排序 方法

    (1)sort( )数组项 排序;原数组改变 【非常重要】
    • 语法: arr.sort(function (a, b) {return a - b})

      • 回调 参数(a, b):数组比较项

      • 回调 返回值:

        • retrun a - b:由小到大排列(升序)

        • retrun b - a:由大到小排列(降序)

      • 返回值: 排序后的数组

    • 原数组改变: 排序后的

    • 应用一: 简单数组 的排序

    var arr = [0, 1, 10, 12, 7, 22, 2, 3];
    var result = arr.sort(function (a, b) {
        return a - b;
    });
    console.log(arr);       // [0, 1, 2, 3, 7, 10, 12, 22]
    console.log(result);    // [0, 1, 2, 3, 7, 10, 12, 22]
    
    • 应用二: 数组对象 的排序
    var obj = [{
        value: 10
    }, {
        value: 30
    }, {
        value: 20
    }];
        
    var result = obj.sort(function(a, b) {
        return b.value - a.value;
    });
        
    // 降序排列
    console.log(result);
    
    (2)reverse( ):数组项 反转;原数组改变:反转后的数组
    • 语法: arr.reverse()

      • 参数: 不用传参

      • 返回值: 反转后的数组

    • 原数组改变:数组项被反转

    
    var arr = [0, 1, 2, 3];
    var result = arr.reverse();
    console.log(arr);       // [3, 2, 1, 0]
    console.log(result);    // [3, 2, 1, 0]
    console.log(arr === result); // true
    

    5. 转换 方法:数组转字符串

    (1)join('分隔符'):数组转为 分隔符 连接的字符串;原数组不改变;返回字符串
    • 语法: arr.join()

      • 参数('分隔符'):转成一个 由分隔符连接各数组项的字符串

      • 参数(''):转成一个字符串(各数组项没有任何分隔符、空字符串 连接)

      • 参数():转成一个 逗号连接各数组项的字符串

    var arr = [1, 2, 6];
    console.log(arr); // [1,2,6]
    console.log(arr.join('--')); // '1--2--6'
    console.log(arr.join('')); // '126'
    console.log(arr.join()); // 1,2,6  这个多个字符串
    
    • 对比: 字符串 转 数组的:str.split('分隔符')

    7. 位置查找 方法

    (1)indexOf( )正数查找位置 / 查找数组中是否有这一项;原数组不变;返回:索引值
    • 语法: arr.indexOf(item)
      • 参数 (item):要查找的数组项;默认从第 0 项开始查找

      • 参数 (item, startIndex):item是要查找的数组项;startIndex是开始查找的位置(含此位置的数组项)

      • 返回值: 返回第一个符合体检的索引值

        • 返回值 > -1,证明 数组中有这一项

        • 返回值 === -1,证明 数组中没有这一项

    var arr = [0, 1, 2,3,4,5,6];
    var result = arr.indexOf(3,3);
    console.log(result);    // 3
    
    (2)lastIndexOf( )倒数查找位置 / 查找数组中是否有这一项;原数组不变;返回:索引值
  • 相关阅读:
    Android studio 搭建测试环境 创建虚拟机
    Halcon算子翻译——break
    Halcon算子翻译——throw
    halcon算子翻译——stop
    halcon算子翻译——return
    halcon算子翻译——par_join
    Halcon算子翻译——import
    Halcon算子翻译——global
    Halcon算子翻译——export_def
    Halcon算子翻译——exit
  • 原文地址:https://www.cnblogs.com/zxvictory/p/8088086.html
Copyright © 2011-2022 走看看