• javascript基础,数组(5)


    数组

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <script type="text/javascript">
     7             
     8             /*
     9              * 内建对象
    10              * 宿主对象
    11              * 自定义对象
    12              * 
    13              * 数组(Array)
    14              *     - 数组也是一个对象
    15              *     - 它和我们普通对象功能类似,也是用来存储一些值的
    16              *     - 不同的是普通对象是使用字符串作为属性名的,
    17              *         而数组时使用数字来作为索引操作元素
    18              *     - 索引:
    19              *         从0开始的整数就是索引
    20              *     - 数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据
    21              */
    22             
    23             //创建数组对象
    24             var arr = new Array();
    25             
    26             //使用typeof检查一个数组时,会返回object
    27             //console.log(typeof arr);
    28             
    29             /*
    30              * 向数组中添加元素
    31              * 语法:数组[索引] = 值
    32              */
    33             arr[0] = 10;
    34             arr[1] = 33;
    35             arr[2] = 22;
    36             arr[3] = 44;
    37             /*arr[10] = 31;
    38             arr[100] = 90;*/
    39             
    40             /*
    41              * 读取数组中的元素
    42              * 语法:数组[索引]
    43              *     如果读取不存在的索引,他不会报错而是返回undefined
    44              */
    45             
    46             //console.log(arr[3]);
    47             
    48             /*
    49              * 获取数组的长度
    50              * 可以使用length属性来获取数组的长度(元素的个数)
    51              *     语法:数组.length
    52              * 
    53              * 对于连续的数组,使用length可以获取到数组的长度(元素的个数)
    54              * 对于非连续的数组,使用length会获取到数组的最大的索引+1
    55              *         尽量不要创建非连续的数组
    56              */
    57             /*console.log(arr.length);
    58             console.log(arr);*/
    59             
    60             /*
    61              * 修改length
    62              *     如果修改的length大于原长度,则多出部分会空出来
    63              *  如果修改的length小于原长度,则多出的元素会被删除
    64              */
    65             //arr.length = 10;
    66             
    67             /*arr.length = 2;
    68             
    69             console.log(arr.length);
    70             console.log(arr);*/
    71             
    72             arr[4] = 50;
    73             arr[5] = 60;
    74             
    75             //向数组的最后一个位置添加元素
    76             //语法:数组[数组.length] = 值;
    77             arr[arr.length] = 70;
    78             arr[arr.length] = 80;
    79             arr[arr.length] = 90;
    80             
    81             console.log(arr);
    82             
    83         </script>
    84     </head>
    85     <body>
    86     </body>
    87 </html>

    1.构造函数创建数组,var arr = new Array(); 

    2.如果读取不存在的索引,他不会报错而是返回undefined
     
     
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <script type="text/javascript">
     7             
     8             //创建一个数组
     9             //var arr = new Array();
    10             
    11             //使用字面量来创建数组
    12             //语法:[]
    13             //var arr = [];
    14             
    15             //console.log(typeof arr); //objet
    16             
    17             //使用字面量创建数组时,可以在创建时就指定数组中的元素
    18             var arr = [1,2,3,4,5,10];
    19             
    20             //console.log(arr[3]);
    21             
    22             //使用构造函数创建数组时,也可以同时添加元素,将要添加的元素作文构造函数的参数传递
    23             //元素之间使用,隔开
    24             var arr2 = new Array(10,20,30);
    25             //console.log(arr2);
    26             
    27             //创建一个数组数组中只有一个元素10
    28             arr = [10];
    29             
    30             //创建一个长度为10的数组
    31             arr2 = new Array(10);
    32             
    33             //console.log(arr2.length);
    34             //数组中的元素可以是任意的数据类型
    35             arr = ["hello",1,true,null,undefined];
    36             
    37             //也可以是对象
    38             var obj = {name:"孙悟空"};
    39             arr[arr.length] = obj;
    40             console.log(arr2); 
    41         
    42             console.log(arr2[arr2.length-1]);//{name:"孙悟空"}
    43             console.log(arr2[arr2.length-1].name);//孙悟空
    44 
    45             arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];
    46             
    47             //也可以是一个函数
    48             arr = [function(){alert(1)},function(){alert(2)}];
    49             
    50             //console.log(arr);
    51             //arr[0]();
    52             
    53             //数组中也可以放数组,如下这种数组我们称为二维数组
    54             arr = [[1,2,3],[3,4,5],[5,6,7]];
    55             console.log(arr[1]);
    56             console.log(arr[1][0]);
    57             
    58         </script>
    59     </head>
    60     <body>
    61     </body>
    62 </html>

    1.使用字面量来创建数组,var arr = [];

    2.创建一个数组数组中只有一个元素10,arr = [10];

    3.创建一个长度为10的数组,arr2 = new Array(10);

    数组的方法

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <script type="text/javascript">
     7             
     8             //创建一个数组
     9             var arr = ["孙悟空","猪八戒","沙和尚"];
    10             
    11             /*
    12              * push()
    13              *     - 该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度
    14              *     - 可以将要添加的元素作为方法的参数传递,
    15              *         这样这些元素将会自动添加到数组的末尾
    16              *     - 该方法会将数组新的长度作为返回值返回
    17              */
    18             
    19             var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
    20             
    21             
    22             //console.log(arr);
    23             //console.log("result = "+result);
    24             
    25             /*
    26              * pop()
    27              *     - 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
    28              */
    29             result = arr.pop();
    30             /*console.log(arr);
    31             console.log("result = "+result);*/
    32             
    33             /*
    34              * unshift()
    35              *     - 向数组开头添加一个或多个元素,并返回新的数组长度
    36              *     - 向前边插入元素以后,其他的元素索引会依次调整
    37              */
    38             //console.log(arr);
    39             
    40             arr.unshift("牛魔王","二郎神");
    41             
    42             console.log(arr);
    43             
    44             /*
    45              * shift()
    46              *     - 可以删除数组的第一个元素,并将被删除的元素作为返回值返回
    47              */
    48             result = arr.shift();
    49             result = arr.shift();
    50             
    51             console.log(arr);
    52             console.log("result = "+result);
    53             
    54             
    55         </script>
    56     </head>
    57     <body>
    58     </body>
    59 </html>
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <script type="text/javascript">
     7             
     8             var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
     9             
    10             /*
    11              * slice()
    12              *     - 可以用来从数组提取指定元素
    13              *     - 该方法不会改变元素数组,而是将截取到的元素封装到一个新数组中返回
    14              *     - 参数:
    15              *         1.截取开始的位置的索引,包含开始索引
    16              *         2.截取结束的位置的索引,不包含结束索引
    17              *             - 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
    18              *         - 索引可以传递一个负值,如果传递一个负值,则从后往前计算
    19              *             -1 倒数第一个
    20              *             -2 倒数第二个
    21              */
    22             
    23             var result = arr.slice(1,4);
    24             console.log(result); // "猪八戒","沙和尚","唐僧"
    25             //该方法不会改变元素数组,而是将截取到的元素封装到一个新数组中返回
    26             console.log(arr);//"孙悟空","猪八戒","沙和尚","唐僧","白骨精"
    27             
    28             result = arr.slice(3);//"唐僧","白骨精"
    29             
    30             result = arr.slice(1,-2);//"猪八戒","沙和尚"
    31             
    32             //console.log(result);
    33             
    34             /*
    35              * splice()
    36              *     - 可以用于删除数组中的指定元素
    37              *     - 使用splice()会影响到原数组,会将指定元素从原数组中删除
    38              *         并将被删除的元素作为返回值返回
    39              *     - 参数:
    40              *         第一个,表示开始位置的索引
    41              *         第二个,表示删除的数量
    42              *         第三个及以后。。
    43              *             可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
    44              *             (可以替换某个元素,也可以在某元素中插入其他元素)
    45              */
    46             
    47             arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
    48             
    49             
    50             var result1= arr.splice(1,2)
    51             console.log(result1);
    52             console.log(arr);
    53             
    54 
    55             // 替换某个元素
    56             var result= arr.splice(1,1,"牛魔王");
    57             console.log(result);//猪八戒
    58             console.log(arr);//"孙悟空","牛魔王","沙和尚","唐僧","白骨精"
    59 
    60             //在某个元素前插入新元素
    61 
    62             var result=arr.splice(1,0,"牛魔王","铁扇公主","红孩儿")
    63             console.log(arr);//孙悟空", "牛魔王", "铁扇公主", "红孩儿", "猪八戒", "沙和尚", "唐僧", "白骨精"
    64             
    65             
    66         </script>
    67     </head>
    68     <body>
    69     </body>
    70 </html>

    数组遍历

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <script type="text/javascript">
     7             
     8             //创建一个数组
     9             var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
    10             
    11             //所谓的遍历数组,就是将数组中所有的元素都取出来
    12             /*console.log(arr[0]);
    13             console.log(arr[1]);
    14             console.log(arr[2]);
    15             console.log(arr[3]);*/
    16             
    17             for(var i=0 ; i<arr.length ; i++){
    18                 console.log(arr[i]);
    19             }
    20             
    21         </script>
    22     </head>
    23     <body>
    24     </body>
    25 </html>
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <script type="text/javascript">
     7             
     8             function Person(name , age , gender){
     9                 this.name = name;
    10                 this.age = age;
    11             }
    12             
    13             //修改Person原型的toString
    14             Person.prototype.toString = function(){
    15                 return "Person[name="+this.name+",age="+this.age+"]";
    16             };
    17             
    18             //创建一个Person对象
    19             var per = new Person("孙悟空",18);
    20             var per2 = new Person("猪八戒",28);
    21             var per3 = new Person("红孩儿",8);
    22             var per4 = new Person("蜘蛛精",16);
    23             var per5 = new Person("二郎神",38);
    24             
    25             /*
    26              * 将这些person对象放入到一个数组中
    27              */
    28             var perArr = [per,per2,per3,per4,per5];
    29             
    30             /*
    31              * 创建一个函数,可以将perArr中的满18岁的Person提取出来,
    32              *     然后封装到一个新的数组中并返回
    33              * arr
    34              *     形参,要提取信息的数组
    35              */
    36             function getAdult(arr){
    37                 //创建一个新的数组
    38                 var newArr = [];
    39                 
    40                 //遍历arr,获取arr中Person对象
    41                 for(var i=0 ; i<arr.length ; i++){
    42                     var p = arr[i];
    43                     //判断Person对象的age是否大于等于18
    44                     if(p.age >= 18){
    45                         //如果大于等于18,则将这个对象添加到newArr中
    46                         //将对象放入到新数组中
    47                         newArr.push(p);
    48                     }
    49                 }
    50                 //将新的数组返回
    51                 return newArr;
    52                 
    53             }
    54             
    55             var result = getAdult(perArr);
    56             
    57             console.log(result);
    58 
    59             for( var j=0; j<result.length; j++){
    60                     console.log(result[j]);
    61                 }
    62             
    63             
    64         </script>
    65     </head>
    66     <body>
    67     </body>
    68 </html>
    forEach()方法
     
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <script type="text/javascript">
     7             
     8             /*
     9              * 一般我们都是使用for循环去遍历数组,
    10              *     JS中还为我们提供了一个方法,用来遍历数组
    11              * forEach()
    12              *         - 这个方法只支持IE8以上的浏览器
    13              *             IE8及以下的浏览器均不支持该方法,所以如果需要兼容IE8,则不要使用forEach
    14              *             还是使用for循环来遍历
    15              */
    16             
    17             //创建一个数组
    18             var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
    19             
    20             /*
    21              * forEach()方法需要一个函数作为参数
    22              *     - 像这种函数,由我们创建但是不由我们调用的,我们称为回调函数
    23              *     - 数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素
    24              *         以实参的形式传递进来,我们可以来定义形参,来读取这些内容
    25              *     - 浏览器会在回调函数中传递三个参数:
    26              *         第一个参数,就是当前正在遍历的元素
    27              *         第二个参数,就是当前正在遍历的元素的索引
    28              *         第三个参数,就是正在遍历的数组
    29              *         
    30              */
    31             arr.forEach(function(value , index , obj){
    32                 console.log(value);
    33                 console.log(index);
    34                 console.log(obj);
    35             });
    36             
    37             
    38         </script>
    39     </head>
    40     <body>
    41     </body>
    42 </html>

    去重数组

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <script type="text/javascript">
     7             
     8             //创建一个数组
     9             var arr = [1,2,3,2,2,1,3,4,2,5];
    10             
    11             //去除数组中重复的数字
    12             //获取数组中的每一个元素
    13             for(var i=0 ; i<arr.length ; i++){
    14                 //console.log(arr[i]);
    15                 /*获取当前元素后的所有元素*/
    16                 for(var j=i+1 ; j<arr.length ; j++){
    17                     //console.log("---->"+arr[j]);
    18                     //判断两个元素的值是否相等
    19                     if(arr[i] == arr[j]){
    20                         //如果相等则证明出现了重复的元素,则删除j对应的元素
    21                         arr.splice(j,1);
    22                         //当删除了当前j所在的元素以后,后边的元素会自动补位
    23                         //此时将不会在比较这个元素吧,我需要在比较一次j所在位置的元素
    24                         //使j自减
    25                         j--;
    26                     }
    27                 }
    28             }
    29             
    30             console.log(arr);
    31             
    32             
    33         </script>
    34     </head>
    35     <body>
    36     </body>
    37 </html>

    数组其他方法

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8" />
     5         <title></title>
     6         <script type="text/javascript">
     7             
     8             var arr = ["孙悟空","猪八戒","沙和尚"];
     9             var arr2 = ["白骨精","玉兔精","蜘蛛精"];
    10             var arr3 = ["二郎神","太上老君","玉皇大帝"];
    11             
    12             /*
    13              * concat()可以连接两个或多个数组,并将新的数组返回
    14              *     - 该方法不会对原数组产生影响
    15              */
    16             var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主");
    17             console.log(result);
    18             console.log(arr);
    19             
    20             /*
    21              * join()
    22              *     - 该方法可以将数组转换为一个字符串
    23              *     - 该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回
    24              *     - 在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符
    25              *         如果不指定连接符,则默认使用,作为连接符
    26              */
    27             arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
    28 
    29             var result= arr.join()
    30             console.log(typeof result); //string
    31             
    32             result = arr.join("@-@"); //孙悟空@-@猪八戒@-@沙和尚@-@唐僧
    33             console.log(result);
    34             /*
    35              * reverse()
    36              *     - 该方法用来反转数组(前边的去后边,后边的去前边)
    37              *     - 该方法会直接修改原数组
    38              */
    39             
    40             arr.reverse();
    41             
    42             //console.log(arr);
    43             
    44             arr = ["b","d","e","a","c"];
    45             
    46             /*
    47              * sort()
    48              *     - 可以用来对数组中的元素进行排序
    49              *     - 也会影响原数组,默认会按照Unicode编码进行排序
    50              */
    51             arr.sort();
    52             //arr.reverse();
    53             
    54             /*
    55              * 即使对于纯数字的数组,使用sort()排序时,也会按照Unicode编码来排序,
    56              *     所以对数字进排序时,可能会得到错误的结果。
    57              * 
    58              * 我们可以自己来指定排序的规则
    59              *     我们可以在sort()添加一个回调函数,来指定排序规则,
    60              *         回调函数中需要定义两个形参,
    61              *         浏览器将会分别使用数组中的元素作为实参去调用回调函数
    62              *         使用哪个元素调用不确定,但是肯定的是在数组中a一定在b前边
    63              *     - 浏览器会根据回调函数的返回值来决定元素的顺序,
    64              *         如果返回一个大于0的值,则元素会交换位置
    65              *         如果返回一个小于0的值,则元素位置不变
    66              *         如果返回一个0,则认为两个元素相等,也不交换位置
    67              * 
    68              *     - 如果需要升序排列,则返回 a-b
    69              *         如果需要降序排列,则返回b-a
    70              */
    71             arr = [5,4,2,1,3,6,8,7];
    72             
    73             arr.sort(function(a,b){
    74                 
    75                 //前边的大
    76                 /*if(a > b){
    77                     return -1;
    78                 }else if(a < b){
    79                     return 1;
    80                 }else{
    81                     return 0;
    82                 }*/
    83                 
    84                 //升序排列
    85                 //return a - b;
    86                 
    87                 //降序排列
    88                 return b - a;
    89                 
    90             });
    91             
    92             console.log(arr);
    93             
    94         </script>
    95     </head>
    96     <body>
    97         
    98     </body>
    99 </html>
     toString,indexOf,forEach,map,filter 方法
      1 //六、toString
      2             //功能:把数组对象转化为基本数据字符串
      3             //参数:无
      4             //返回值:返回数组转化的字符串
      5             
      6 //            var arr = [10,6,2,20];
      7 //            var result = arr.toString();
      8 //            console.log(arr);//'10,6,2,20'
      9 //            console.log(result);
     10             
     11             //数组   函数  对象  都有toString方法,返回的结果是不一样的
     12             //数组调用这个方法,返回的就是去掉[]后剩余的,加引号
     13             //函数调用这个方法,返回的就是函数数据本身,加引号
     14             //对象调用这个方法,返回的是固定的 '[object Object]'
     15             
     16             
     17 //            console.log([1,2,3].toString());//'1,2,3'
     18 //            function fn(){};
     19 //            console.log(fn.toString());
     20 //            console.log({name:'zly'}.toString());
     21             //两遍都是对象数据   对象数据之间的判等,判的就是地址
     22             //所有的对象数据转化布尔值,都是true   
     23             //对象和对象之间的比较及运算 以及 对象和基本数据之间的比较判等和运算 都要把对象数据转化为基本数据
     24             //然后再按照基本数据的隐式转换去运算;
     25 //        
     26 //            console.log([1,2,3] + [1,2,3]);//1,2,31,2,3
     27 //            console.log(fn - 100);//'function fn(){};'-100 变成Nan
     28 //            console.log({name:'zly'} + 100); //[object Object]100
     29             
     30             
     31             
     32             
     33             //这些方法也是必须搞定
     34 //            1. Array.prototype.indexOf(value) : 得到值在数组中的一个下标,不存在返回-1
     35 //            var arr = [1,2,3];
     36 //            var result = arr.indexOf(2);//1
     37 //            var result = arr.indexOf(7);//-1
     38 //            console.log(result);
     39             
     40             
     41             //数组去重  第一种方式
     42 //            var arr = [1,2,3,41,1,2,1];
     43 //            var newArr = [];
     44 //            var flag = true;
     45 //            for(var i = 0; i < arr.length; i++){
     46 //                for(var j = 0; j < newArr.length; j++){
     47 //                    if(arr[i] == newArr[j]){
     48 //                        flag = false;
     49 //                        break;
     50 //                    }
     51 //                }
     52 //                
     53 //                if(flag){
     54 //                    newArr[newArr.length] = arr[i];
     55 //                }
     56 //                
     57 //                flag = true;
     58 //            }
     59 //            console.log(newArr);
     60             
     61             //数组去重第二种
     62 //            for(var i = 0; i < arr.length; i++){
     63 //                if(newArr.indexOf(arr[i]) == -1){//拿一个元素就去新数组内去找,如果没有返回-1;
     64 //                    newArr.push(arr[i]);
     65 //                }
     66 //            }
     67 //            console.log(newArr);
     68             
     69 //            2. Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标,不存在返回-1
     70 
     71             //*******************************************8
     72 //            3. Array.prototype.forEach(function(item, index){}) : 遍历数组
     73 //                for循环是最基本的循环,它不是数组的方法
     74                 
     75 //                var arr = [1,2,3,4];
     76 //                arr.forEach(function(item,index){
     77 //                    console.log(index,item);
     78 //                })
     79                 
     80 //                数组的forEach方法也可以去遍历数组,但是不能continue和break
     81                 //它比for循环效率要高的多;
     82                 
     83 //            4. Array.prototype.map(function(item, index){}) : 
     84                 //遍历数组返回一个新的数组,新的数组和老的数组有关系
     85 //                var arr = [1,2,3];
     86 //                
     87 //                var result = arr.map(function(item,index){
     88 //                    return item * 2;  //返回由原数组 计算后的一个新值,放入一个新数组里面
     89 //                })
     90 //                
     91 //                console.log(result);
     92             
     93 //            5. Array.prototype.filter(function(item, index){}) : 
     94 //                遍历过滤出一个新的子数组
     95                 var arr = [10,20,5,7]; 
     96                 var result = arr.filter(function(item,index){
     97                     return item >= 6;
     98                 })
     99                 console.log(result);
    100                 
  • 相关阅读:
    2020.12.12【NOIP提高B组】模拟 总结
    2020.10.17【普及组】模拟赛C组 总结
    jsonp多次请求报错 not a function的解决方法
    windows phone 独立存储空间的操作(2)[转]
    Sencha Touch 2 官方文档翻译之 Intro to Applications with Sencha Touch 2(ST2应用程序简介)[转]
    windows phone xaml文件中元素及属性(10)[转]
    Sencha touch 初体验[转]
    地理坐标系与投影坐标系的区别[转]
    jquery ajax中使用jsonp的限制[转]
    windows phone小试自定义样式 (12) [转]
  • 原文地址:https://www.cnblogs.com/fsg6/p/12769149.html
Copyright © 2020-2023  润新知