zoukankan      html  css  js  c++  java
  • javascript中Array常用方法

    一、基本概念

    1、什么是数组

    数组就是一组数据的集合

    其表现形式就是内存中的一段连续的内存地址

    数组名称其实就是连续内存地址的首地址

    2、关于js中的数组特点

    数组定义时无需指定数据类型

    数组定义时可以无需指定数组长度

    数组可以存储任何数据类型的数据(比如说一个元素保存整型,一个元素保存字符串型,这个在JS中是可以的)

    创建数组的语法:

    var arr=[值1,值2,值3];                     //隐式创建

    var arr=new Array(值1,值2,值3);      //直接实例化

    var array=new Array(size);           //创建数组并指定长度

    3、关于数组长度

    数组对象.length

    在js中,每一个数组对象都可以调用length属性,它表示数组对象下共有几个数组元素

    示例:

    1 var row = ['zhangsan','lisi','wangwu'];
    2 doucument.write('共有'+row.length+'个人<br>');
    3 
    4 var length = row.length;//对数组进行遍历
    5 for (var i=0;i<length;i++){
    6 doucument.write(row[i]+'<br>');
    7 }    

    4、for...in语句

    在js中,数组不是数据类型,数组的数据类型其实就是对象

    Js中的For.....in语句可以实现对一个对象的所有属性的遍历

    也可以使用for...in语句实现对一个数组的所有元素的遍历

    语法:

    for( var i in array ){

    }

    原理:数组中有几个元素,for..in语句就循环执行多少次

    每次执行时,将当前数组元素的下标存放到变量i中

    1 var row = ['zhangsan','lisi','wangwu','xiaoqiang'];
    2 
    3 for (var i in row){
    4     document.write(i + ':' + row[i] + '<br>');
    5 }    

    结果:

      0:zhangsan
      1:lisi
      2:wangwu
      3:xiaoqiang

    5、文本下标

    格式:

    arr['key'] = value;

    在js中,文本下标的数组元素,不计入数组长度

    以文本下标形式添加到数组,实际是以属性形式添加到数组对象中的

    1 var arr = [1,2,3];
    2 arr['first'] = 'zhangsan';
    3 arr['second'] = 'lisi';
    4 
    5 document.write(arr.length + '<br>');
    6 document.write(arr.first + '<br>');
    7 document.write(arr.second + '<br>');

    结果:

      3
      zhangsan
      lisi

    遍历带有文本下标的数组:

    1 var arr = [1,2,3];
    2 arr['first'] = 'zhangsan';
    3 arr['second'] = 'lisi';
    4 
    5 for(var i in arr){
    6     document.write(i + ':' + arr[i] + '<br>');
    7 }
     

    结果:

      0:1
      1:2
      2:3
      first:zhangsan
      second:lisi

    6、多维数组    

     
     1 var arr = [
     2         [10,'zhangsan','male'],
     3         [11,'lisi','female'],
     4         [12,'wangwu','male']
     5     ];
     6 for (var i in arr){
     7     for(var j in arr[i]){
     8         document.write(arr[i][j]);
     9     }
    10     document.write('<br>');
    11 }

    二、常用方法

    (一)会改变原数组

     1.移除数组末尾最后一项.pop(),返回删除的元素
     如果你在一个空数组上调用 pop(),它返回  undefined
    2.在数组末尾添加一个或多个元素.push(),返回修改后数组长度
    3.移除数组第一项.shift(),返回移除的元素
    4.在数组头部添加一个或多个元素.unshift(),返回修改后数组长度
    5.对数组元素排序.sort(),返回排序后的数组
    6.颠倒数组元素.reverse(),返回颠倒后的数组
    7.删除或插入元素.splice(),返回数组删除的项,没有删除的项,返回空数组

    var word = ['a', 'b', 'c', 'd'];
    //删除,前闭后开
    var newArr = word.splice(0,2);
    console.log(word); //["c", "d"]
    console.log(newArr); //["a", "b"]

    //插入,当前数组索引1处插入hello
    var newArr = word.splice(1,0,'hello');
    console.log(word); //["c", "hello", "d"]
    console.log(newArr); //[]

    //替换
    var newArr = word.splice(1,1,'world');
    console.log(word); //["c", "world", "d"]
    console.log(newArr); //["hello"]

    (二)不会改变原数组

    1.合并两个或多个数组.concat(),返回新数组
    2.将数组所有元素连接成一个字符串.join(),返回连接后的字符串
    3.截取数组元素到新数组中.slice(),返回新数组
    4.获取查询元素第一次出现的索引.indexOf(),找不到查询元素,则返回-1
    5.获取查询元素最后一次出现的索引.lastIndexOf(),找不到查询元素,则返回-1
    6.toString()返回有数组每个元素的字符串形式拼接而成的以逗号分隔的字符串
    7.toLocaleString()返回一个字符串表示数组中的元素

    (三) 迭代方法

    每个方法接受含有三个参数的函数,三个参数为:数组中的项,元素索引,数组本身
                1.every(),数组所有元素都满足要求则返回true,否则返回false
                2.some(),只要有满足要求的就返回true
                3.filter(),返回过滤后的结果数组
                4.map(),返回在函数中处理过的数组
                5.forEach(),遍历整个数组

    var number = [1,2,3,4,5,6,7,8];
            var res = number.every(function(item, index, array) {
                return (item > 2);
            })
            console.log(res);   //false
     
            var res = number.some(function(item, index, array) {
                return (item > 2);
            })
            console.log(res);   //true
     
            var res = number.filter(function(item, index, array) {
                return (item > 2);
            })
            console.log(res);   //[3, 4, 5, 6, 7, 8]
     
            var res = number.map(function(item, index, array) {
                return (item * 2);
            })
            console.log(res);   //[2, 4, 6, 8, 10, 12, 14, 16]
     
            var res = number.forEach(function(item, index, array) {
                //执行某些操作
            })

    (四) 归并方法

     迭代数组所有项,构建最终返回值,每个方法接受两个参数:调用的函数和作为归并基础的初始值。函数接受4个参数:前一个值,当前值,项索引,数组本身。函数返回的值都会作为第一个参数自动传给下一项,第一次迭代从数组第二项开始,当前值为数组第二项。

                1.reduce(),从数组第一项开始遍历到最后
                 2.reduceRight(),从数组最后一项开始遍历到第一项

    /*
                开始执行回调函数cur为2,prev为1,
                第二次执行回调函数,在之前的基础上加1
                函数返回的值都会作为一个参数传给下一项,
                最后执行函数时就是28+8
            */
            var number = [1,2,3,4,5,6,7,8];
            var res = number.reduce(function(prev, cur, index, array) {
                return prev + cur;
            })
            console.log(res);   //1+2+3+4+5+6+7+8=36
     
            var res = number.reduceRight(function(prev, cur, index, array) {
                return prev + cur;
            })
  • 相关阅读:
    我的家庭保险方案推荐
    如何修改Total Commander配件文件的位置
    豆瓣统计-2015
    RESTful API接口设计规范
    正则表达式中 的$1,$2与实际应用
    查询排序:order by case when理解、在order By子句中使用case语句的理解
    架构设计:BFF和Serverless简介
    移动端1px细线解决方案总结
    SpringMVC中实体类属性is开头的字段返回JSON时自动去掉is开头的问题
    详解JS面向对象的三大特征之多态
  • 原文地址:https://www.cnblogs.com/dreamingbaobei/p/9803143.html
Copyright © 2011-2022 走看看