• JavaScript初探 三 (学习js数组)


    JavaScript初探 (三)

    JavaScript数组

    定义

    创建数组

    • var 数组名 = [元素0,元素1,元素2,……] ;
    var arr = ["Huawei","China","Mirror"];
    

    同时JavaScript也支持 new Array 创建数组。但是建议使用上面的文本方式创建数组

    数组访问

    • 通过引用 索引号(下标) 来引用某个数组元素
    var name = arr[0];
    // name = Huawei
    

    ps:数组的索引是从 0 开始的

    • 可以直接使用数组名不加索引属性,直接访问所有数组内容
    var arr = ["Huawei","China","Mirror"];
    document.getElementById("demo").innerHTML = arr ;
    // 结果输出: Huawei,China,Refueling
    

    更新数组元素

    • 直接使用数组索引赋值方式,就可更改数组内元素

    数组是对象

    • typeof arr_name 会返回 object

      JavaScript的数组实际上是一种对象的表现,但是

      数组最好还是以数组方式来描述

    • 两者的区别:

      • 数组是利用索引位置访问数组内容属性的
      • 对象是利用对象属性名来访问属性名对象的属性值的
    • 数组元素可以是对象:

      由于数组的特点,数组是特殊类型的对象

      故此,可以在数组中存放不同类型的变量

      可以数字、字符串、函数、函数……

      而且,还可以在数组中存储另一个数组

    数组属性

    length属性
    • length:返回数组的长度(数组的元素数目)
    var arr = ["Huawei","China","Mirror"];
    arr.length;
    // 结果:返回 3 
    

    由于arr索引是从零开始,而length数目计算是从1开始的

    所以length-1 === 数组最后一个元素的下标索引

    • 访问数组最后一个元素的技巧:
    var arr[arr.length - 1] ;
    // 结果返回 Mirror
    
    遍历数组
    • 遍历数组理论上最好的是使用 for 循环
    var arr = ["Huawei","China","Mirror"];
    var text = "<ul>";
    for(i = 0 ; i < arr.length-1 ; i ++){
        text += "<li>" + arr[i] + "</li>";
    }
    
    Array.foreach()
    var arr = ["Huawei","China","Mirror"];
    var text ;
    text = "<ul>";
    arr.forEach(myArr);
    text += "</ul>";
    function myArr(value){
        text += "<li>" + value + "</li>";
    }
    
    添加元素:push()
    • push():向数组添加新元素的最佳方法就是push()方法
    var arr = ["Huawei","China","Mirror"];
    arr.push("Refueling");
    
    • 手动添加元素
    arr[arr.length] = ("Refueling");
    // 或者
    arr[x] = ("Refueling");
    
    关联数组
    • 在JavaScript中只支持数字索引;并不支持命名索引方法
    var arr = [];
    arr[0] = "Huawei";
    arr[1] = "China";
    arr[2] = "Refueling";
    var x = arr.length ;   //返回  3
    var y = arr[0];        //返回  Huawei
    
    • 如果使用了命名索引,则会把数组重定义为 对象
    var arr = [];
    arr["A"] = "Huawei";
    arr["B"] = "China";
    arr["C"] = "Refueling";
    var x = arr.length ; 		// 返回 0 
    var y = arr[0] ;		//返回 undefined
    
    对象和数组的区别
    • 在JavaScript中,数组 使用数字索引

    • 在JavaScript中,对象使用命名索引

    • 对象和数组的不同应用

      如果希望元素名为字符串(文本),则使用对象

      如果希望元素名数字,则使用数组

    • 避免 new Array()

      没有必要使用内建数组构造器 new Array()

    识别数组变量
    • 我们用 typeof 判断数组数据类型的时候,会返回 object ,因为数组是特殊的对象,但是还是区分不了对象和数字变量。我们可以使用数组的内建:Array.isArray()方法

    数组方法

    toString() 数组输出
    • 将数组转为字符串值输出(元素间逗号分隔)
    var arr = ["Huawei","China","Mirror"];
    document.getElimentById("demo").innerHTML = arr.toString();
    // 结果:Huawei,China,Mirror
    
    join() 数组输出
    • join(c):将所有数组元素结合为一个字符串;同时还可以规定分隔符 c
    var arr = ["Huawei","China","Mirror"];
    document.getElimentById("demo").innerHTML = arr.join("&");
    // 结果:Huawei&China&Mirror
    
    Popping()(删除元素)
    • pop():从数组中删除最后一个元素
    var arr = ["Huawei","China","Mirror"];
    arr.pop(); //删除最后一个元素 Mirror
    

    pop():返回被删除的那个数

    Pushing()(添加元素)
    • push():在数组的最后一个数组元素,向数组后添加一个新元素
    var arr = ["Huawei","China","Mirror"];
    arr.push("Refueling");  // 添加 Refueling到数组中,并返回最新数组的长度
    

    push():返回新数组的长度

    位移元素(开头元素添/删)
    • shift():删除首个数组元素,并把所有其他元素”位移“到更低的索引
    var arr = ["Huawei","China","Mirror"];
    arr.shift();	// 返回 Huawei
    

    shift() 返回被移出(删除)的元素

    • unshift():在数组开头添加元素 ,并把所有其他元素向后”位移“索引标志
    var arr = ["Huawei","China","Mirror"];
    arr.unshift("Refueling");	// 返回 新的数组长度 5
    

    unshift():返回新的数组长度

    更改元素
    • 通过对应的索引号引用直接赋值,来改变该索引位置的元素内容
    删除元素 delete
    • JavaScript 数组属于对象类型,其中的元素可以使用 JavaScript delete 运算符来删除
    var arr = ["Huawei","China","Mirror"];
    delete arr[0];		//把 "Huawei" 改为 undefined
    

    不建议使用delete运算符,可以使用pop() 或 shift() 代替

    原因:后者的数组方法,会自动抹除数组索引,而delete则会保留索引并导致空洞

    拼接数组 splice()
    • splice():用于向数组添加新项
    var arr = ["Huawei","China","Mirror"];
    arr.splice(2,0,"Refueling","Hello");
    

    第一个参数:定义添加新元素的位置

    第二个参数:定义应删除多少元素

    其余参数:定义要添加的新元素

    • splice():删除元素
    var arr = ["Huawei","China","Mirror"];
    arr.splice(0,1); // 删除 arr 数组中的第一个元素
    

    第一个参数:定义新元素添加的元素

    第二个参数:定义删除多个元素

    其余参数: 被忽略,没有新元素添加

    splice()会返回被删除的元素

    而原数组的内容就会被修改

    合并数组 concat()
    • concat():通过合并(连接)现有数组来创建一个新数组
    var str1 = ["Huawei","Refueling"];
    var str2 = ["China","Refueling"];
    var myStr = str1.concat(str2) ;   // 连接 str1 和 str2
    

    Array1.concat(Array2,……)

    同样的,concat()也可以和数值合并

    array1.concat([值,……])

    裁剪数组 slice()
    • slice():裁剪数组的某个片段,返回一个新的数组
    var arr = ["Huawei","China","Refueling","Hello","World"];
    var array = arr.slice(1);
    var array = arr.slice(1,3);
    

    第一个元素:裁剪的开始位置

    第二个元素:裁剪的结束位置

    若第二个元素被省略,

    则从开始的位置截取到数组的最后一个元素


    JavaScript数组排序

    排序 sort()

    • sort():按照ASCII顺序对数组(字符和数字)进行升序排序
    var arr = ["Huawei","China","Refueling","Hello","World"];
    arr.sort();
    // 结果:China,Hello,Huawei,Refueling,World
    

    反转数组 reverse()

    • reverse() :将数组中的所有元素反转
    var arr = ["Huawei","China","Refueling","Hello","World"];
    arr.reverse()
    
    • 利用 sort() + reverse() 对数组进行降序排序
    var arr = ["Huawei","China","Refueling","Hello","World"];
    arr.sort();
    arr.reverse();
    

    比值函数 *

    • 比较函数目的是定义另一种排序顺序

    • 比较函数应该返回一个负、零或正值,这取决于参数

    function(a,b){return a-b}
    

    sort() 函数比较两个值时,会将值发送到比较函数,并根据返回的值,对这些值进行排序。

    • 实例:

      当比较 40 和 100 时,sort() 方法会调用比较函数 function(40,100)

      该函数计算 40 - 100 ,然后返回一个 负值

      排序函数将40排序为比100更低的值

        <div>
            <button onclick="myFunction1()">字母顺序</button>
            <button onclick="myFunction2()">数字顺序</button>
            <p id = "demo"></p>
        </div>
        <script>
            var points = [40,100,1,5,25,10] ;
            document.getElementById("demo").innerHTML = points ;
            
            function myFuntion1() {
                points.sort();
                document.getElementById("demo").innerHTML = points ;
            }
            
            function myFuntion2() {
                points.sort(function(a,b){return a - b}) ;
                document.getElementById("demo").innerHTML = points ;
            }
        </script>
    

    以随机顺序排序

    var points = [40,100,1,5,25,10] ;
    points.sort(function(a,b){return 0.5 - Math.random()});
    

    原理就是:0.5减去一个随机数

    查找最值

    Math.max()

    • Math.max.apply:查找数组中的最高值
    function myArrayMax(arr) {
        return Math.max.apply(null,arr);
    }
    

    Math.max.apply([1,2,3]) === Math.max(1,2,3)

    Math.min()

    • Math.min.apply:查找数组中的最小值
    function myArrayMin(arr) {
        return Math.min.apply([null,arr]);
    }
    

    Math.min.apply([1,2,3]) === Math.min(1,2,3)

    自定义的max和min

    function myArrayMax(arr) {
        var len = arr.length ;
        var max = -Infinity ;  //最小的负值
        while (len --) {
            if  (arr[len] > max) {
                max = arr[len] ;
            }
        }
        return max ;
    }
    
    function myArrayMin(arr) {
        var len = arr.length ;
        var min = Infinity ;
        while (len --) {
            if (arr[len] < min) {
                min = arr[len];
            }
        }
        return min ;
    }
    

    排序对象数组

    • JavaScript 数组的定义中,是允许存储对象的;
    var cars = [
        {name:"HUAWEI",age:"good"},
        {name:"MI",age:"where"},
        {name:"Java",age:"No:1"}
    ];
    

    即使对象拥有不同数据类型的属性,sort()方法仍然可以对数组进行排序

    解决方法就是利用比较函数对比属性值

    cars.sort(function(a,b){return a.year - b.year});
    

    通过比较函数,将属性中的属性值内容进行对比


    JavaScript 数组迭代方法

    Array.forEach()

    • forEach():为每个数组元素调用一次函数(回调函数)
    var txt = "" ;
    var number = [45,4,9,16,25] ;
    numbers.forEach(myFunction) ;
    
    function myFunction (value , index , array) {
        txt += value + "<br>" ;
    }
    
    • 注释:
      • 项目值
      • 项目索引
      • 数组本身

    上述代码的作用:数组中每个值传递并调用函数

    Array.map()

    • map():通过对每个数组元素执行函数来创建数组
    • map():不会对没有值的数组元素执行函数
    • map():不会改变原始数组
    var number1 = [45,4,9,16,25] ;
    var number2 = number1.map(myFunction) ;
    function myFunction(value,index,array){
        return value * 2 ; // 数组中的元素 * 2 并返回
    }
    
    • 注释:
      • 项目值
      • 项目索引
      • 数组本身

    Array.filter()

    • filter():创建一个包含通过测试的数组元素的新数组
    var number = [45,4,9,16,25] ;
    var over18 = number.filter(myFunction) ;
    function myFunction(value , index , array){
        return value > 18 ; // 返回大于18的数组元素并组成一个新数组
    }
    
    • 注释:
      • 项目值
      • 项目索引
      • 数组本身

    Array.reduce()

    • reduce():在每个数组元素上运行函数,生成单个值;方法在数组中从左到右运行;不会改变原始的数组。
    var number = [45,4,9,16,25] ;
    var sum = number.reduce(myFunction) ;
    function myFunction(total , value , index , array){
        return total + value ;
    }
    
    • 注释:
      • 总数(初始值/先前返回的值)
      • 项目值
      • 项目索引
      • 数组本身

    reduce():方法能够接收一个初始值

    Array.reduceRight()

    • reduce() 类似

    Array.every()

    • every():检查所有数组值是否可以通过测试
    var number = [45,4,9,16,25] ;
    var allOver18 = number.every(myFunction) ;
    function myFunction(value , index , array) {
        return value > 18 ;
    }
    

    Array.some()

    • some():检查某些数组值是否通过测试
    var number = [45,4,9,16,25] ;
    var someOver18 = number.some(myFunction) ;
    function myFunction(value , index , array) {
        return value > 18 ;
    }
    

    Array.indexOf()

    • indexOf():在数组中搜索元素值并返回其位置
    var number = [45,4,9,16,25] ;
    var a = number.indexOf(45);
    

    array.indexOf(item,start)

    ​ item:必须,要检索的项目

    ​ start:可选,检索的起点

    未找到项目,返回 -1

    如果搜索的内容出现多次,则返回第一个出现的位置

    Array.lasIndexOf()

    • lasIndexOf():和indexOf()功能类似,不同的是,从数组结尾开始搜索

    Array.find()

    • find():返回通过测试函数的第一个数组元素的值
    var number = [45,4,9,16,25] ;
    var first = number.find(myFunction) ;
    function myFunction(value , index , array) {
        return value > 18 ;
    }
    

    Array.findIndex()

    • findIndex():返回通过测试函数的第一个数组元素的下标索引
    var number = [45,4,9,16,25] ;
    var first = number.findIndex(myFunction) ;
    function myFunction(value , index , array){
        return value > 18 ;
    }
    

  • 相关阅读:
    Spring IoC 容器和 AOP
    MySQL 锁与事务控制
    MySQL 存储引擎的选择
    如何理解MySQL 索引最左前缀原则
    MySQL 索引
    Java 线程池
    Java多线程 ReentrantLock、Condition 实现生产者、消费者协作模式
    Java多线程并发中 CAS 的使用与理解
    Java多线程中协作机制
    Mysql-SQL生命周期-show profile
  • 原文地址:https://www.cnblogs.com/wangyuyang1016/p/11055272.html
Copyright © 2020-2023  润新知