《JavaScript高级程序设计 (第3版)》学习笔记11:chapter_5 - 2 Array类型(重点)

让学习“上瘾”,成为更好的自己!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Array_type</title>
    <script>
    /*
    1,创建数组的2种基本方式:
        1, 使用Array构造函数(见下)

        2, 使用数字字面量表示法(见下)



    2, 使用数组字面量表示法时,不会调用Array构造函数
    3, 检测数组
    if(value instanceof Array){  // 假定单一的全局执行环境
        // do something
    }

    if (Array.isArray(value)){  // 不管是在哪个全局执行环境中
        // do someting
    }

    4,转换方法
        a, toString():返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
                        调用数组每一项的toString()
        b, toLocaleString(): 返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
                        调用数组每一项的toLocalString()
        c, valueOf(): 返回 Array 对象的原始值,还是一个数组



    5,栈方法(LIFO)
        栈中的插入(推入)和移除(弹出),只发生在“栈的顶部”!
        push()方法:返回修改后数组的长度
        pop()方法:减少数组length值,然后返回移除的项


    6,队列方法 (FIFO)
        队列在列表的末端添加项,从列表的前端移除项!
        push()方法:后端添加值,返回修改后数组的长度
        shift()方法:前端取值,然后返回移除的项
        unshift()方法:前端添加任意个项并返回新数组的长度



    7,重排序方法
        reverse()方法:反转数组项
        sort()方法: 首先调用每个数组项的toString()转型方法,然后比较得到的字符串(即使是数值)
        【注意】这两个方法会改变原有数组项的顺序!!!



    8,操作方法(见下)
        concat()方法:
        slice()方法:
        splice()方法:



    9,位置方法
        indexOf(),lastIndexOf():接收两个参数,即要查找的项以及(可选的)表示查找起点位置的索引
      【从前往后】  【从后往前】  返回要查找的项在数组中的位置(查找到的第一个!),没找到则返回-1。
                                位置是“从前往后”数的位置!
                                第一个参数与数组中的每一项进行比较时,使用“全等操作符”
                                

        


    10,迭代方法
        接收两个参数:要在每一项上运行的函数和(可选的)运行在该函数的作用域对象
        方法对对数组中的每一项运行给定的函数
       every(): 函数对每一项都返回true,则返回true 【&&】
       some():函数对任一项返回true,则返回true  【||】
       filter():返回该函数会返回true的项组成的数组
       map(): 返回每次函数调用的结果组成的数组
       forEach():没有返回值
       
        函数接收3个参数:数组项的值,该项在数组中的位置,数组对象
       var everyResult = numbers.every(function(item,index,array){
            //     return (item>2);

            // })



    11,缩小方法
        两个都会迭代数组的所有项,然后构建一个最终返回的值
        接收两个参数:每一项上调用的函数和(可选的)作为缩小基础的初始值
        reduce():数组第一项开始,然后遍历到最后
        reduceRight():数组最后一项开始,然后遍历到第一项
        函数接收4个参数:前一个值(第一次为数组的第一项),当前值(第一次为数组的第二项),项的索引,数组对象
        var sum = values.reduce(function(prev, cur, index, array){
                return prev + cur;

            })



    
    
    
    

    
    */
    // 方式1
    // var arr1 = new Array();
    // var arr2 = new Array(12); // length = 12
    // alert(arr2[0]);  // undefined  
    // var arr4 = new Array('12');  // 创建包含1个字符串的数组
    // alert(arr4[0]);
    // var arr3 = new Array('red','blue','green');  // 创建包含3个字符串的数组
    // var names = Array('kai','lice','John');  // 可以省略new 操作符(Object也可以!!)
    // console.log(names.length);
    // console.log(names);
    // for(var i=0;i<3;i++){
    //     console.log(names[i]);
    // }

    // 方式2
    // var colors = ['red','blue','green'];   // 创建一个包含3项的数组
    // var names = [];  // 创建一个空数组
    // console.log(names);
    // // 不建议以下两种的书写方式,即不要在字面量的最后一项添加逗号!!!
    // var values = [1,2,];  // 创建一个包含2或者3项的数组
    // var options = [,,,,,];  // 创建一个包含5或者6项的数组

    // var colors = ['red','blue','green','yellow'];
    // console.log(colors[0]);  // 显示第一项
    // colors[2] = 'black';       // 修改第3项
    // colors[3] = 'orange';   //  新增第4项
    
    // length 属性
    // 1,数组的length:不是只读的!通过设置该属性,可以动态地从数字的末尾移除项或向数组中添加新项,新增的每一项初始值为undefined
    // var colors = ['red','yellow','orange'];
    // colors.length = 5;
    // console.log(colors[4]);  // undefined

   // 2, 利用length属性可以方便地在数组末尾添加新项
        // var colors = ['red','green','blue'];
        // colors[colors.length] = 'balck';
        // colors[colors.length] = 'white';
        // console.log(colors);

    // 3, 当把一个值放在超出当前数组大小的位置上,数组就会重新计算其长度
        // var colors = ['red','green','bllue'];
        // colors[20] = 'black';  // 在位置20(第21项)添加一种颜色
        // console.log(colors[15]);  // undefined
        // console.log(colors);
    
    // 转换方法

    // var colors = ['red','yellow','black'];
    // alert(colors.toString());  // red,yellow,black
    // var aToString = colors.toString();
    // console.log(aToString.toString());
    // console.log(typeof aToString);  // string

    // alert(colors);  // alert()接收字符串参数,故他会在后台调用toString()方法,然后得到与直接调用toString()方法相同的结果
    // // 默认情况下,创建这个以逗号分隔的字符串会调用数组每一项的toString()方法!!

    // var bValueOf = colors.valueOf();
    // console.log(bValueOf);
    // console.log(typeof bValueOf); // object

    // join():接收一个作为分隔符的参数(字符串),然后返回包含所有数组项的字符串
        // var names = ['kai','lice','James'];
        // console.log(names.join(','));
        // console.log(names.join('||'));
    
    // null,undefined转换成字符串时以空字符串表示
        // var arrTest = [12,34,null,54,undefined];
        // console.log(arrTest.toString());
        // console.log(arrTest.toLocaleString());
        // console.log(arrTest.valueOf());
        // console.log(arrTest.join('||'));

    // 栈方法:后进先出

    // var colors = new Array();
    // var count = colors.push('red','green');
    // console.log(count);  // 2
    // count = colors.push('blue');
    // console.log(count);

    // var item = colors.pop();  // blue
    // console.log(item);
    // console.log(colors.length);

    // 队列方法:先进先出
        // var names = ['kai','lice','John'];
        // var count = names.push('James','XIE');
        // console.log(count);
        // console.log(names.shift());
        // console.log(names.length);
        // console.log(names.toString());
        // var count1 = names.unshift('NIU','Geez')
        // console.log(count1);
        // console.log(names.pop());

    // 重排序方法

        var values1 = [1,2,3,4,5];
        // console.log(values1.reverse());
        // console.log(values1);
    
    // sort()
        var values2 = [0,1,5,10,15];
        // values2.sort();
        // console.log(values2); // 0,1,10,15,5 (按字符编码排序,不理想)

    // 解决方案:sort()方法接收一个“比较函数”作为参数,以便于我们指定哪个值位于哪个值的前面   
        
        // 方法一:
        // function compare(value1, value2){  // 【看返回值数值顺序】
        //     if(value1 < value2){
        //         // return -1; // 升序
        //         return 1;  // 降序

        //     } else if(value1 > value2){
        //         // return 1;  // 升序
        //         return -1; // 降序
        //     }else{
        //         return 0;
        //     }

        // }
        // values2.sort(compare);
        // console.log(values2);

        // 方法二:对于数值类型或者其valueOf()方法会返回数值类型的对象类型

        // function compare(value1, value2){    // 【看被减数与减数参数顺序】
        //     // return value1 - value2;  // 升序
        //     return value2 - value1;  // 降序
        // }
        // values2.sort(compare);
        // console.log(values2);
   

        // 操作方法
        // 1, concat():基于当前数组中的所有项创建一个新数组
        // 创建当前数组的一个副本(不是同一个数组对象),然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组
        
            // var colors = ['red','blue','yellow'];
            // var colors2 = colors.concat();
            // console.log(colors2);
            // colors2[5] = 'orange';
            // console.log('colors is ' + colors);
            // console.log('colors2 is '+colors2);
            // var colors3 = colors.concat('pink',['gray','violet']);
            // console.log(colors3);

        // 2, slice():基于当前数组中的一或多个项创建一个新数组
        // 接收一或二个参数,即要返回项的起始和结束位置
        // 【注意】
        //        1,slice()参数中有一个负数,则用当前数组的长度加上该数来确定相应的位置,
        //           如,长度为5的数组,slice(-2,-1) 和 slice(3,4)的结果一样
        //        2, 结束位置 < 起始位置,返回空数组
            // var colors = ['red','blue','yellow'];
            // var colors2 = colors.slice(1);
            // console.log(colors2);   // blue, yellow
            // console.log(colors.slice(0,2));  // red, blue
            // console.log(colors.slice(-1,3)); // slice(2,3)


        // splice():想数组中部插入项  【最强大的数组方法!!!】
        // splice()方法始终都会返回一个数组,该数组包含从原始数组中删除的项(如果没有删除,则返回一个空数组)
            // 删除:2个参数(起始位置,要删除的项数)
            // var colors = ['red','green','blue'];
            // var removed = colors.splice(0,1);
            // console.log(colors);
            // console.log(removed);

            // 插入:3个或3个以上的参数,(起始位置,0,要插入的任意数量的项)
            // removed = colors.splice(1,0,'yellow','orange');
            // console.log(colors);
            // console.log(removed);

            // 替换:3个或3个以上的参数(起始位置,要删除的项数,要插入的任意数量的项)
            // removed = colors.splice(1,1,'red','purple');
            // console.log(colors);
            // console.log(removed);

            // 位置方法
            // var numbers = [1,2,3,4,5,4,3,2,1];
            // console.log(numbers.indexOf(4));  // 3
            // console.log(numbers.lastIndexOf(4));  // 5

            // console.log(numbers.indexOf(4,4));  // 5
            // console.log(numbers.lastIndexOf(4,7));  // 5

            // 迭代方法
            var numbers = [1,2,3,4,5,4,3,2,1];
            var everyResult = numbers.every(function(item,index,array){
                return (item>2);

            })
            console.log(everyResult);

            var someResult = numbers.some(function(item,index,array){
                return (item>2);
                
            });
            console.log(someResult);

            var filterResult = numbers.filter(function(item,index,array){
                return (item > 2);

            });
            console.log(filterResult);

            var mapResult = numbers.map(function(item,index,array){
                return item * 2;

            });

            console.log(mapResult);

            var forEachResult = numbers.forEach(function(item,index,array){
                // do something
            });



         // 缩小方法
            // var values = [1,2,3,4,5];
            // var sum = values.reduce(function(prev, cur, index, array){
            //     return prev + cur;

            // })
            // console.log(sum);
            // reduceRight()作用类似,只是方向相反


    
    </script>
</head>
<body>
    
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值