• JavaScript数组常用操作


    前言

    相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法。这里无非是对原生js的数组操作多了一些包装。

    这里主要汇总一下JavaScript数组操作的常用API。相信对大家解决程序问题很有帮助。

    1、性质

    JavaScript中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数。然而,这些数字索引在内部被转换为字符串类型,这是因为JavaScript对象中的属性名必须是字符串。

    2、操作

    2.1 判断数组类型

    var array0 = [];    // 字面量
    var array1 = new Array();   // 构造器
    // 注意:在IE6/7/8下是不支持Array.isArray方法的
    alert(Array.isArray(array0));
    // 考虑兼容性,可使用
    alert(array1 instanceof Array);
    // 或者
    alert(Object.prototype.toString.call(array1) === '[object Array]');

    2.2 数组与字符串

    非常简单:由数组转换为字符串,使用join;由字符串转换为数组,使用split。

    // join - 由数组转换为字符串,使用join
    console.log(['Hello', 'World'].join(','));    // Hello,World
    // split - 由字符串转换为数组,使用split
    console.log('Hello World'.split(' '));    // ["Hello", "World"] 

    2.3 查找元素

    相信大家都常用字符串类型indexOf,却很少知道数组的indexOf同样可以用于查找元素。

    // indexOf - 查找元素
    console.log(['abc', 'bcd', 'cde'].indexOf('bcd'));  // 1
    
    // 
    var objInArray = [
        {
            name: 'king',
            pass: '123'
        },
        {
            name: 'king1',
            pass: '234'
        }
    ];
    
    console.log(objInArray.indexOf({
        name: 'king',
        pass: '123'
    }));    // -1
    
    var elementOfArray = objInArray[0];
    console.log(objInArray.indexOf(elementOfArray));    // 0

    从以上可以看出,对于数组包含对象的这种数组,indexOf方法并非是经过深度比较来得到对应的查找结果,仅仅是比较对应元素的引用。

    2.4 数组连接

    使用concat,要注意,使用concat之后会生成一个新的数组。

    var array1 = [1, 2, 3];
    var array2 = [4, 5, 6];
    var array3 = array1.concat(array2); // 实现数组连接之后,会创建出新的数组
    console.log(array3);

    2.5 类列表操作

    用于添加元素,可分别使用push和unshift,移除元素可分别使用pop和shift。

    // push/pop/shift/unshift
    var array = [2, 3, 4, 5];
    
    // 添加到数组尾部
    array.push(6);
    console.log(array); // [2, 3, 4, 5, 6] 
    
    // 添加到数组头部
    array.unshift(1);
    console.log(array); // [1, 2, 3, 4, 5, 6] 
    
    // 移除最后一个元素
    var elementOfPop = array.pop();
    console.log(elementOfPop);   // 6
    console.log(array); // [1, 2, 3, 4, 5] 
    
    // 移除第一个元素
    var elementOfShift = array.shift();
    console.log(elementOfShift);   // 1
    console.log(array); // [2, 3, 4, 5] 

    2.6 splice方法

    主要两个用途:

    1> 从数组中间位置添加和删除元素

    2> 从原有数组中,获取一个新数组

    当然,两个用途是一气合成的,有些场景注重用途一,有些则注重用途二。

    从数组中间位置添加和删除元素,splice方法为数组添加元素,需提供如下参数

    1> 起始索引(也就是你希望开始添加元素的地方)

    2> 需要删除的元素的个数或者是提取的元素的个数(添加元素时该参数设置为0)

    3> 想要添加进数组的元素

    var nums = [1, 2, 3, 7, 8, 9];
    nums.splice(3, 0, 4, 5, 6);
    console.log(nums);  // [1, 2, 3, 4, 5, 6, 7, 8, 9] 
    // 紧接着做删除操作或者提取新的数组
    var newnums = nums.splice(3, 4);
    console.log(nums);  // [1, 2, 3, 8, 9]
    console.log(newnums);   // [4, 5, 6, 7] 

    2.7 排序

    主要介绍reverse和sort两个方法。数组反转使用reverse,sort方法不仅可以用于简单排序,也可以用于复杂排序。

    // 反转数组
    var array = [1, 2, 3, 4, 5];
    array.reverse();
    console.log(array); // [5, 4, 3, 2, 1]

    我们先对字符串元素的数组进行排序

    var arrayOfNames = ["David", "Mike", "Cynthia", "Clayton", "Bryan", "Raymond"];
    arrayOfNames.sort();
    console.log(arrayOfNames);  // ["Bryan", "Clayton", "Cynthia", "David", "Mike", "Raymond"] 

    我们对数字元素的数组进行排序

    // 如果数组元素时数字类型,sort()方法的排序结果就不能让人满意了
    var nums = [3, 1, 2, 100, 4, 200];
    nums.sort();
    console.log(nums);  // [1, 100, 2, 200, 3, 4] 

    sort方法是按照字典顺序对元素进行排序的,因此它假定元素都是字符串类型,因此,即使元素时数字类型,也被认为是字符串类型。这时,可以在调用方法时传入一个大小比较函数,排序时,sort()方法将会根据该函数比较数组中两个元素的大小,从而决定整个数组的顺序。

    var compare = function(num1, num2) {
        return num1 > num2;
    };
    nums.sort(compare);
    console.log(nums);  // [1, 2, 3, 4, 100, 200] 
    var objInArray = [
        {
            name: 'king',
            pass: '123',
            index: 2
        },
        {
            name: 'king1',
            pass: '234',
            index: 1
        }
    ];
    // 对数组中的对象元素,根据index进行升序
    var compare = function(o1, o2) {
        return o1.index > o2.index;
    };
    objInArray.sort(compare);
    console.log(objInArray[0].index < objInArray[1].index); // true

    2.8 迭代器方法

    主要包含forEach和every、some和map、filter

    forEach相信大家都会,主要介绍一下其他四种方法。

    every方法接受一个返回值为布尔类型的函数,对数组中的每个元素使用该函数。如果对于所有的元素,该函数均返回true,则该方法返回true。

    var nums = [2, 4, 6, 8];
    // 不生成新数组的迭代器方法
    var isEven = function(num) {
        return num % 2 === 0;
    };
    // 如果都是偶数,才返回true
    console.log(nums.every(isEven)); // true

    some方法也接受一个返回值为布尔类型的函数,只要有一个元素使得该函数返回true,该方法就返回true。

    var isEven = function(num) {
        return num % 2 === 0;
    };
    var nums1 = [1, 2, 3, 4];
    console.log(nums1.some(isEven)); // true

     map和filter这两个方法都可以产生新数组,map返回的新数组是对原有元素应用某个函数得到的结果。如——

    var up = function(grade) {
        return grade += 5;
    }
    var grades = [72, 65, 81, 92, 85];
    var newGrades = grades.ma

    filter方法和every方法很类似,传入一个返回值为布尔类型的函数。和every()方法不同的是,当对数组中的所有元素应用该函数,结果均为true时,该方法并不返回true,而是返回一个新数组,该数组包含应用该函数后结果为true的元素。

    var isEven = function(num) {
        return num % 2 === 0;
    };
    var isOdd = function(num) {
        return num % 2 !== 0;
    };
    var nums = [];
    for (var i = 0; i < 20; i++) {
        nums[i] = i + 1;
    }
    var evens = nums.filter(isEven);
    console.log(evens); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20] 
    var odds = nums.filter(isOdd);
    console.log(odds);  // [1, 3, 5, 7, 9, 11, 13, 15, 17, 19] 

    3. 总结

    以上还存在某些方法在低级浏览器不支持的问题,后续再采用其他方法进行兼容实现。

    都是常见的可能大家不太容易想到的方法。大家不妨多留意一下。

    参考:

    《数据结构与算法JavaScript描述》

  • 相关阅读:
    wamp支持win10吗?怎么设置?
    帝国cms添加修改会员字段时字段名不能带数字,否则注册页会出现空白
    微信用户量破6.5亿 首超移动QQ
    如何进行网站统计分析?分8步走!
    《如何策划一个有逼格的竞价专题页面》有感
    dedecms批量删除文档关键词可以吗
    一只刚学竞价两周的菜鸟
    Android/iOS微信6.3.5同时发布更新 支持群视频聊天、群公告
    帝国cms修改栏目后文章列表的url错误怎么解决
    dedecms批量导出新增文章url和标题
  • 原文地址:https://www.cnblogs.com/jinguangguo/p/4099415.html
Copyright © 2020-2023  润新知