js day4 数组


  •         //总结:上面这些方法会改变原数组。
      

数组的概念及定义
概念:数组为一组一般情况下相同类型的数据。

除了 Object 类型之外,Array 类型是ECMAScript 最常用的类型。而且 ECMAScript 中的        Array 类型和其他语言中的数组有着很大的区别。 虽然数组都是有序排列, 但 ECMAScript       中的数组每个元素可以保存任何类型。ECMAScript 中数组的大小也是可以调整的。

数组的创建方式
第一种是 new 运算符(构造函数);
注意:给构造函数传递一个值也可以创建数组。如果传递的是数字,则会按照该数自创建包含       给定项数的数组;而如果传递的是其他类型的参数,则会创建包含那个值的只有一项的数组。

第二种是字面量(json格式);
在计算机科学中,字面量是用于表达源代码中一个固定值的表示法。

数组的length和下标
使用索引下标来读取数组的值--下标是固定的,从0开始
数组的length属性--代表长度,数组的 length 属性不只是只读的。通过设置这个属性,可以从数组的末尾移除项或向数      组中添加新项。

数组的遍历--for循环
检测数组:Array.isArray() 静态方法(对象的构造函数开头的)
Array.isArray():确定括号中的某个值到底是不是数组

数组的方法--传统方法
push() 可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
pop() 从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。
unshift()方法能够在数组前端添加任意个项并返回新数组的长度。
shift() 方法能够移除数组中的第一个项并返回该项,同时将数组长度减 1。
reverse() 方法会反转数组项的顺序。
sort() 方法按字母表升序排列数组项。
注意:如果按照其他方式而非字母表顺序进行数组排列,必须给sort方法传递一个比较函         数做参数。
concat() 方法可以基于当前数组中的所有项创建一个新数组。
slice() 方法它能够基于当前数组中的一或多个项创建一个新数组。可以接受一或两个参数,即要返回项的起始和结束位置,不包括结束位置。
splice() 方法,对数组进行删除、插入、替换,是最强大的数组方法。返回值是数组。
join()方法,将数组转换成对应的字符串。参数就是连接符

整数数组/字符串数组/对象数组/二维数组
数组的排序(冒泡排序、选择排序)
强化练习
随机生成一个五位以内的数,然后输出该数共有多少位,分别是什么。
数组的冒泡排序(封装函数)
数组的选择排序(封装函数)
编写函数map(arr) 把数组中的每一位数字都增加30%
编写函数has(arr , 60) 判断数组中是否存在60这个元素,返回布尔类型
综合应用
编写函数norepeat(arr) 将数组的重复元素去掉,并返回新的数组。
有一个从小到大排好序的数组。现输入一个数,要求按原来的规律将它插入数组中。
定义一个含有30个整型元素的数组,按顺序分别赋予从2开始的偶数;然后按顺序每五个数求出一个平均值,放在另一个数组中并输出。试编程。
通过循环按行顺序为一个5×5的二维数组a赋1到25的自然数,然后输出该数组的左下半三角。试编程。
一.<script type="text/javascript">
            //一.利用构造函数创建数组。
            //构造函数:构造函数也是函数,特点是首字母大写,同时需要new运算符进行调用。
            /*function Array(){//系统定义的,无需自己定义,直接调用。
                
            }*/
            
            //1.对象下面都拥有属性和方法,通过点操作符操作。
            //Array:构造函数,它下面也会出现一些方法,静态方法。
            //var arr1=new Array(100,200,300,400);//定义一个数组。 arr1:数组对象。Array:构造函数
            //数组对象的属性--length:数组里面数组项的长度。
            //alert(arr1.length);//4
            //alert(arr2.length);//3
            
            //2.数组名等同于数组的所有值。
            //alert(arr1);//100,200,300,400
            //console.log(arr1);//[100, 200, 300, 400]
            
            //3.通过length属性修改(添加,删除)数组
            //console.log(arr1);//[100, 200, 300, 400]
            //arr1.length=2;
            //console.log(arr1);// [100, 200]
            
            //console.log(arr1);//[100, 200, 300, 400]
            //arr1.length=10;
            //console.log(arr1);//[100, 200, 300, 400, empty × 6]
            //alert(arr1);//100,200,300,400,,,,,,
            
            
            //4.数组的索引,也叫下标,通过下标(默认的索引编号)来访问数组中的某一个值。
            //数组的索引下标从0开始。  数组名[下标]  arr[3]:访问数组第四个位置的值。
            //数组都是有序排列
            //var arr2=new Array('zhangsan','lisi','wangwu');
            //alert(arr2[0]);//zhangsan
            //alert(arr2[2]);//wangwu
            //alert(arr2[8]);//undefined 值不存在。
            
            //5.数组的下标也是动态的,通过数组的下标改变数组的长度。
            //alert(arr2.length);//3
            //arr2[9]='ending';
            //alert(arr2.length);//10
            
            
            
            //6.数组的类型
            //var arr2=new Array('zhangsan','lisi','wangwu');
            //alert(typeof arr2);//object
            
            
            //总结:
            //1.通过构造函数创建数组。
            //2.通过数组的length属性和索引下标动态的改变数组。
            //3.数组的名称是所有数组项的值
            //4.数组的类型是对象。
            
            
            //二.利用字面量的简洁方式定义数组--常用的
            //在计算机科学中,字面量是用于表达源代码中一个固定值的表示法。
            //var arr2=new Array('zhangsan','lisi','wangwu');
            /*var arr2=['zhangsan','lisi','wangwu'];
            alert(arr2.length);//3
            alert(arr2[1]);//lisi*/
            
            
            //三.构造函数创建和字面量创建数组区别
            //给构造函数传递一个值也可以创建数组。如果传递的是数字,则会按照该数自创建包含给定项数目的数组;而如果传递的是其他类型的参数,则会创建包含那个值的只有一项的数组。
            //var arr=new Array(3);//3不是数组的第一项,代表是数组的长度。
            //alert(arr[0]);//undefined
            //alert(arr.length);//3
            //console.log(arr);//[empty × 3]
            
            /*var arr=new Array('hello');
            alert(arr[0]);//hello
            alert(arr.length);//1*/
            
            
            /*var arr=[3];//字面量创建没有上面的问题。
            alert(arr[0]);//3
            alert(arr.length);*///1

二.<script type="text/javascript">
            //1.数组的遍历--for循环
            //var arr=['apple','banana','pear','orange','group'];//索引0-4
            /*for(var i=0;i<arr.length;i++){
                alert(arr[i]);
            }*/
            
            //2.检测数组:Array.isArray() 静态方法(对象的构造函数开头的)固定的方法。
            //确定括号中的某个值到底是不是数组,返回布尔值
            //var arr=null;
            //var arr1=[1,2,3,4];
            //alert(typeof null);//object
            //alert(typeof arr);//object
            //alert(Array.isArray(arr));//false
            //alert(Array.isArray(arr1));//true
        </script>

8.数组的方法一:

改变原数组

<script type="text/javascript">
        //1.push() 可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
        var arr=['apple','banana'];
        console.log(arr);//["apple", "banana"]
        console.log(arr.push('pear','orange','group'));//5
        console.log(arr);///["apple", "banana", "pear", "orange", "group"]
        /*var arr=['apple','banana'];
        arr.push('pear');
        arr.push('apple');
        arr.push('apple');
        console.log(arr);*/
        //2.pop() 从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。pop里传值无效 
        //只能一项一项进行移除。
        /*var arr=["apple", "banana", "pear", "orange", "group"];
        arr.pop();//group
        arr.pop();//orange
        arr.pop();//pear
        console.log(arr);*/
        //3.unshift()方法能够在数组前端添加任意个项并返回新数组的长度
        /*var arr=['one'];
        arr.unshift('two','three');//["two", "three", "one"]
        console.log(arr);*/
        //4.shift() 方法能够移除数组中的第一个项并返回该项,同时将数组长度减 1。shift中指定删除的值是无效的
        /*var arr=["two", "three", "one"];
        arr.shift();
        console.log(arr);*/
        
        //5.reverse() 方法会反转数组项的顺序。
        //var arr=[100,200,300,400,500];
        //arr.reverse();
        //console.log(arr);//[500, 400, 300, 200, 100]
        
        //6.sort() 方法按字母表升序排列数组项。(unicode编码)
        //注意:如果按照其他方式而非字母表顺序进行数组排列,必须给sort方法传递一个比较函数做参数。

        /*var arr=[ "banana", "pear","apple", "orange", "group"];
        arr.sort();
        console.log(arr);*///["apple", "banana", "group", "orange", "pear"]
        
        //A-Z   unicode   65-90
        //a-z   unicode   97-122
        //0-9   unicode   48-57

        
        /*var arr=[9,6,3,8,5,2,1,4,7,0];
        arr.sort();//按照unicode编码进行排列
        console.log(arr);// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]*/
        
        
        //问题:无法对象正常的数字进行排序。
        //如果需要排序数字,提供一个比较函数实现,将比较函数当中sort的参数传递,对数字进行排序。
        /*function compare(a,b){
            if(a>b){
                return 1;
            }else if(a<b){
                return -1;
            }else{
                return 0;
            }
        }*/
        /*function compare(a,b){
            return a-b;
        }*/
        
        //var arr=[91,620,3,89,50,212,1000,45,7,-23,7,3];
        //arr.sort(compare);
        /*arr.sort(function(a,b){
            return a-b;
        });
        console.log(arr);*/// [-23, 3, 3, 7, 7, 45, 50, 89, 91, 212, 620, 1000]
        
        //总结:上面这些方法会改变原数组。
        </script>

<script type="text/javascript">
        //7.concat() 方法可以基于当前数组中的所有项创建一个新数组。(把两个数组拼接成一个数组,不会改变原数组的值
        //var arr=[ "banana", "pear","apple", "orange", "group"];
        //var arr1=[1,2,3,4,5,6];
        /*var newarr=arr.concat();//拷贝
        console.log(arr);
        console.log(newarr);*/
        
        //concat的参数:多个值,也可以是数组,全部拼接成一个数组
        /*var newarr=arr.concat('hehe','haha',arr,arr,arr1);
        console.log(arr);
        console.log(newarr);*/
        //console.log(arr1.concat(arr1,arr1));
        
        
        //8.slice() 方法它能够基于当前数组中的一或多个项创建一个新数组。可以接受一或两个参数(索引下标的位置),即要返回项的起始和结束位置,不包括结束位置(不改变原数组)
        //var arr=[ "banana", "pear","apple", "orange", "group"];
        //console.log(arr.slice(0,3));//[ "banana", "pear","apple"]
        //console.log(arr.slice());//没有参数,截取全部  ["banana", "pear", "apple", "orange", "group"]
        //console.log(arr.slice(0));//从0索引下标开始截取["banana", "pear", "apple", "orange", "group"]
        //console.log(arr.slice(2));//从2索引下标开始截取 ["apple", "orange", "group"]
        //console.log(arr.slice(100));//[]
        //console.log(arr.slice(0,-2));//负数从后往前数。[ "banana", "pear","apple"]
        //console.log(arr.slice(-5,-2));//[ "banana", "pear","apple"]
        //console.log(arr.slice(0,3));//[ "banana", "pear","apple"]
        //console.log(arr.slice(-10,-7));//[]
        //js的规律:如果是两个位置做参数,一般不包括结束位置。
        
        //9.splice() 方法,对数组进行删除、插入、替换,是最强大的数组方法。会改变原数组,返回值是删除的数组,var midvalue=arr.splice(midindex,1)[0];//获取中间值。。
        //var arr=[ "banana", "pear","apple", "group"];
        //console.log(arr);
        //删除--主要功能。
        //第一个参数:开始的位置   第二个参数:删除的长度。
        //返回值就是删除的数组项。
        //console.log(arr.splice(1,2));//["pear","apple"]
        //console.log(arr);// ["banana", "group"]
        
        //插入:
        //第一个参数:开始的位置   第二个参数:删除的长度(为0表示不删除)。从第三个参数开始就是插入到数组的数组项。
        //从设置的位置开始插入。
        /*console.log(arr.splice(1,0,'zhangsan','lisi','wangwu'));
        console.log(arr);*/
        
        
        //替换:
        //console.log(arr.splice(1,2,'hehe','haha'));//["pear","apple"]
        //console.log(arr);//["banana", "hehe", "haha", "group"]
        
        //10.join()方法,将数组转换成对应的字符串。参数就是连接符(不是分隔符)。
        //var arr1=['a','b','c','d'];
        //console.log(arr1.join());//a,b,c,d
        //console.log(typeof arr1.join());//string
        //console.log(arr1.join('#'));//a#b#c#d
        //console.log(arr1.join(''));//abcd  空隙
        //console.log(arr1.join(' '));//a b c d  空格
        
        
        //var arr2=['my','name','is','zhangsan'];
        //console.log(arr2.join(' '));
        //console.log(arr2.reverse().join(' '));//zhangsan is name my
        
        
        </script>js规律:如果是两个位置做参数,一般不包括结束位置;

数组的类型:<script type="text/javascript">
            //1.二维数组:数组里面嵌套数组。
            //获取多维数组的值。
            //var arr=[1,2,3,[4,'hello',['a','c'],6],7,[8,9]];
            //alert(arr[3][1]);
            //alert(arr[3][2][1])
            
            //二维数组赋值
            var arr=['a','b'];
            //arr[2][0]=10;//不能直接给二维数组赋值。但可以arr[2]=[10,11]
            arr[2]=[];//先确认数组的某项是数组。
            arr[2][0]=10;
            arr[2][1]=100;
            arr[2][5]=1000;
            console.log(arr);
        </script>

6.数组的应用:script type="text/javascript">
        //定义一个含有30个整型元素的数组,按顺序分别赋予从2开始的偶数;
        //然后按顺序每五个数求出一个平均值,放在另一个数组中并输出。试编程。
        //1.创建数组
        /*var arr=[];
        for(var i=1;i<=30;i++){
            arr.push(2*i);
        }
        console.log(arr);
        
        //2.五个数求出一个平均值,放在另一个数组中并输出;
        var newarr=[];
        var svg=0;//平均值
        for(var j=0;j<arr.length;j++){
            svg+=arr[j];
            if((j+1)%5==0){
                newarr.push(svg/5);//将5个数字和的平均值给新数组
                svg=0;
            }
        }
        console.log(newarr);*/
        
        
        //4.通过循环按行顺序为一个5×5的二维数组arr赋1到25的自然数,然后输出该数组的左下半三角。试编程。

var arr=[];
        var num=0;
        for(var i=0;i<5;i++){
            arr[i]=[];
            for(var j=0;j<5;j++){
                ++num;
                if(j<i+1){
                    arr[i][j]=num;
                }
            }
        }
        
        console.log(arr)
        //var arr=[[1,2,3,4,5],[6,7,8,9,10]......]
        //arr[0][0]  arr[0][1]  arr[0][2]  arr[0][3]  arr[0][4]
        
        function double(n){
            return n<10 ? '0'+n : n;
        }把1~9变成01~09

        var arr=[];
        var num=1;
        for(var i=0;i<5;i++){
            arr[i]=[];//数组的每一项还是数组
            for(var j=0;j<5;j++){
                arr[i][j]=double(num++);
                if(i>=j){
                    document.write(arr[i][j]+'&nbsp;&nbsp;&nbsp;&nbsp;');    
                }
            }
            document.write('<br>');
        }
        </script>

7.数组的排序
<script type="text/javascript">
            //var arr=[12,5,896,35,4,-45,-6,7,2,100,48,35,4];
            //1.冒泡排序
            //冒泡排序算法的原理如下:
            //1比较相邻的元素。如果第一个比第二个大,就交换他们两个。
            //2对每一对相邻元素做同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。
            //3针对所有的元素重复以上的步骤,除了最后一个。
            //4持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。
            /*console.log('原数组:'+arr);
            var times=0;
            for(var i=0;i<arr.length;i++){//次数
                for(var j=0;j<arr.length;j++){
                    if(arr[j]>arr[j+1]){
                        var temp=arr[j];
                        arr[j]=arr[j+1];
                        arr[j+1]=temp;
                    }
                    times++;
                }
            }
            console.log(arr);
            console.log(times);//169*/
            
            /*console.log('原数组:'+arr);
            var times=0;
            for(var i=0;i<arr.length-1;i++){//次数/轮数
                for(var j=0;j<arr.length-i-1;j++){//相邻的元素两两比较。
                    if(arr[j]>arr[j+1]){
                        var temp=arr[j];
                        arr[j]=arr[j+1];
                        arr[j+1]=temp;
                    }
                    times++;
                }
            }
            console.log(arr);
            console.log(times);*///78
            
            function bubblesort(arr){
                if(Array.isArray(arr)){
                    for(var i=0;i<arr.length-1;i++){//次数/轮数
                        for(var j=0;j<arr.length-i-1;j++){//相邻的元素两两比较。
                            if(arr[j]>arr[j+1]){
                                var temp=arr[j];
                                arr[j]=arr[j+1];
                                arr[j+1]=temp;
                            }
                        }
                    }
                    return arr;
                }else{
                    //alert('请输入数组');
                    throw new Error('你输入的不是一个数组');//利用错误对象抛错
                }
            }
            //console.log(bubblesort(12,5,896,35,4000,-450,-6,7,2,100,48,35,4));
            
            //2.选择排序
            //var arr=[12,5,896,35,4000,-450,-6,7,2,100,48,35,4];
            //选择排序(Selection sort)是一种简单直观的排序算法。它的工作原理是每一次从待排序的数据元素中选出最小(或最大)的一个元素,存放在序列的起始位置,直到全部待排序的数据元素排完。 选择排序是不稳定的排序方法。
            /*for(var i=0;i<arr.length;i++){//按顺序假设每一个值都是最小值。
                var minindex=i;//假设的最小值的索引下标
                var minvalue=arr[minindex];//假设的最小值
                for(var j=i+1;j<arr.length;j++){
                    if(minvalue>arr[j]){//数组项的值比假设的最小值还要小,当前这项就是最小值
                        minvalue=arr[j];
                        minindex=j;
                    }
                }
                //如果获取到了最小值,和假设的最小值进行交换。
                if(minindex!=i){//防止假设的真的是最小值,无需自己和自己进行交换。
                    var temp=arr[i];
                    arr[i]=arr[minindex];
                    arr[minindex]=temp;
                }
                
            }
            
            console.log(arr);*/
        </script>

  • 新增的数组方法:
  • 位置方法----indexOf()  lastIndexOf()返回要查找的项在数组中的索引位置,没找到的情况下返回-1。(两个参数:要查找的项和(可选的)表示查找起点位置的索引)----当查找到的元素的下标和当前元素的下标一样时,说明此元素在数组中只出现了一次。

indexOf() 方法从数组的开头开始向后查找。

lastIndexOf() 方法则从数组的末尾开始向前查找。

  1. 迭代方法(不会改变原数组)

迭代是重复反馈过程的活动,其目的通常是为了逼近所需目标或结果。每一次对过程的重 复称为一次“迭代”,而每一次迭代得到的结果会作为下一次迭代的初始值。

两个参数:

第一个参数:要在每一项上运行的函数

此函数会接收三个参数:数组项的值、该项在数组中的位置、数组对象本身。

第二个参数:(可选的)运行该函数的作用域对象(影响 this 的值)。

every()

对数组中的每一项运行给定函数,如果该函数对每一项都返回 true ,则返回 true 。

some()

对数组中的每一项运行给定函数,如果该函数对任意一项返回 true ,则返回 true 。

filter()

对数组中的每一项运行给定函数,返回该函数结果为 true 的项组成的数组。

  1. 利用filter 来去除数字重复;

Var  arr=[5,5,533,33,55,66,66,11,23,43,43]

Var  arr2=arr.filter(function(a,b){

Return   arr.indexOf(a)==b//满足条件的会输出来,返回的是一个新的数组

})

Console.log(arr2)

        

 

map()

对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

返回就是数组,不考虑true或者false;

forEach() :对数组中的每一项运行给定函数。这个方法没有返回值。

以上方法都不会修改数组中的包含的值。

    1. 归并方法---- reduce()  reduceRight()

这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。

reduce() 方法从数组的第一项开始,逐个遍历到最后。

reduceRight() 方法从数组的最后一项开始,向前遍历到第一项。

两个参数:每一项上调用的函数和(可选的)作为归并的初始值。

调用的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。

  •  

对象是javascript的数据类型。对象是一种复合值,它将很多值聚合在一起,可通过名字访 问这些值。对象也看做是属性的无序集合,每个属性都是一个名/值对。

    1. 构造函数创建对象--var obj=new Object();
    2. 字面量创建对象--var obj={ };
  1.  

JSON 是一种轻量级的数据交换格式。它是基于 ECMAScript的一个子集,采用完全独立于编 程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换 语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

    1. json: 是一种轻量级的数据交换格式。不是js独有的。
    2. json组成:简单值+对象+数组。
    3. json里面字符串需要添加双引号。
    4. json没有var关键字,没有分号(;)
  • --for...in循环
    1. 栈:自动分配内存空间,系统自动释放,基本类型的值和引用类型的地址
    2. 堆:动态分配的内存,大小不定,也不会自动释放。存放引用类型的值。

 

  1. 使用json形式创建一个对象,该对象存储一个学生的信息,该对象包含姓名,学号、身份 证、年龄、性别、所学专业等属性信息,同时该对象包含一个自我介绍的方法,用来输出 该对象的所有信息。
  2. 随机点名程序。
  3. 扩展案例:快速排序的实现。
  4. 扩展案例:多种方式实现数组去重。
  5. 扩展案例:数组的扁平化。

8.数组的新方法:
<script type="text/javascript">
            //indexOf()  lastIndexOf()
            //返回要查找的项在数组中的索引位置,没找到的情况下返回-1。
            //两个参数:要查找的项和(可选的)表示查找起点位置的索引
            //indexOf() 方法从数组的开头开始向后查找。
            //lastIndexOf() 方法则从数组的末尾开始向前查找

            //var arr=['a','b','c','d','b','c','d'];
            //alert(arr.indexOf('c'));//2
            //alert(arr.lastIndexOf('c'));//5
            //alert(arr.indexOf('c',3));//5
            //alert(arr.indexOf('f'));//-1  不存在。
            //alert(arr.indexOf('c',-6));//2 负数从后往前数。
            //alert(arr.indexOf('c',2));//2 包括查找的位置。(为2的下标所指的c也算值)
            
            
            //编写函数norepeat(arr) 将数组的重复元素去掉,并返回新的数组。
            /*var arr=[12,5,12,12,12,896,35,4,-45,-6,7,2,100,48,35,4,12,5,896];
            console.log(arr);
            for(var i=0;i<arr.length;i++){//i=0
                for(var j=i+1;j<arr.length;j++){//j=1;  j=2;   j=3
                    if(arr[i]==arr[j]){
                        arr.splice(j,1);//splice改变原数组
                        j--;
                    }
                }
            }
            console.log(arr);*/
            
            
            /*var arr=[12,5,12,12,12,896,35,4,-45,-6,7,2,100,48,35,4,12,5,896];
            var newarr=[];
            
            for(var i=0;i<arr.length;i++){
                var bstop=true;
                for(var j=0;j<newarr.length;j++){
                    if(arr[i]==newarr[j]){//满足条件,新数组拥有此值
                        bstop=false;
                    }
                }
                
                if(bstop){//当前的arr[i]的值绝对不在新数组中
                    newarr.push(arr[i]);//添加到新数组中
                }
                
            }
            
            console.log(arr);
            console.log(newarr);*/
            
            /*var arr=[12,5,12,12,12,896,35,4,-45,-6,7,2,100,48,35,4,12,5,896];
            var newarr=[];
            for(var i=0;i<arr.length;i++){
                if(newarr.indexOf(arr[i])==-1){
                    newarr.push(arr[i]);
                }
            }
            console.log(arr);
            console.log(newarr);*/
            
            /*var arr=[12,5,12,12,12,896,35,4,-45,-6,7,2,100,48,35,4,12,5,896];
            console.log(arr);
            console.log([...new Set(arr)]);*/
        </script>
9.数组的新方法-迭代方法
<script type="text/javascript">
            //两个参数:
            //第一个参数:要在每一项上运行的函数
            //此函数会接收三个参数:数组项的值、该项在数组中的位置、数组对象本身。
            //第二个参数:(可选的)运行该函数的作用域对象(影响 this 的值)。
            
            every必有return,不然执行到最后不会迭代,返回值为1个boolean值。

           some也必须有return,返回值为一个boolean值

             /filter:返回的是一个数组,结果为true的项。
            //map:返回的是一个数组,不管真假。
            //返回的是map内部的函数返回的值,不管值是否存在,都会返回对应的值。

            //1.every()对数组中的每一项运行给定函数,如果该函数对每一项都返回 true ,则返回 true 。对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回 false,如果发现这个元素,every 将返回 false,如果回调函数对每个元素执行后都返回 true ,every 将返回 true。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略
            //var arr=[100,2,3,4,5,6,7,8,9];
            /*var result=arr.every(function(a){
                return a>0;
            });
            console.log(result);*///true
            
            /*var result=arr.every(function(a){
                return a;
            });
            console.log(result);*///true
            
            //var result=arr.every(function(a){
                //console.log(a);//100
            //});
            
            //确认数组中的每一项都是数字
            /*var arr=[100,2,3,4,'5',6,7,8,9];
            
            var result=arr.every(function(a){
                //return !isNaN(a);//具有隐式转换。
                //return typeof a == 'number';
            });
            console.log(result);*/
            
            //2.some()对数组中的每一项运行给定函数,如果该函数对任意一项返回 true ,则返回 true 。
            //编写函数has(arr , 60) 判断数组中是否存在60这个元素,返回布尔类型

            /*var arr=[100,2,3,4,'5',6,7,8,9];
            var result=arr.some(function(value){
                return value==60;
            });
            console.log(result);*/
            
            
            /*function has(arr,num){
                for(var i=0;i<arr.length;i++){
                    if(arr[i]==num){
                        return true;
                    }
                }
                return false;
            }
            
            console.log(has([6,2,3,4,5,60,7],600));*/
            

var arr=[100,2,3,4,'5',6,7,8,9];
            function has(arr){
                return arr.some(function(value){return value==60});
                不然has()无返回值
            }
            console.log(has(arr))
            
            //3.filter()对数组中的每一项运行给定函数,返回该函数结果为 true 的项组成的数组。最后return的必须是boolean值,return 如value-5是不行的,改成value>5;
            /*var arr=[1,2,3,4,5,6,7,8,9];
            var result=arr.filter(function(value){
                return value>5;
            });
            console.log(result);*///[6, 7, 8, 9]
            
            /*var arr=[1,2,3,4,5,6,7,8,9];
            var result=arr.filter(function(value,index,array){
                console.log(value,index,array);
            });*/
            
            /*var arr=[12,5,12,12,12,896,35,4,-45,-6,7,2,100,48,35,4,12,5,896];
            var result=arr.filter(function(value,index,array){
                return arr.indexOf(value)==index;
                //arr.indexOf(value):当前的value在数组第一个找到的位置索引
                //index:数组每一个数组项的索引
                
            });
            console.log(arr);
            console.log(result);*/
            
            
            //4.map() 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。返回就是数组,不考虑true或者false;
            /*var arr=[1,2,3,4,5,6,7,8,9];
            console.log(arr.filter(function(v){
                return v==5;
            }));
            
            console.log(arr.map(function(v){
                return v==5;
            }));*/
            
            //编写函数map(arr) 把数组中的每一位数字都增加30%
            //var arr=[100,200,300,400,500,600,700,800,900];
            /*console.log(arr.map(function(v){
                return v*1.3;
            }));*/
            
            /*arr.filter(function(v){
                console.log(v*1.3);
            });*/
            
            /*arr.some(function(v){
                console.log(v*1.3);
            });*/
            
            //5.forEach() :对数组中的每一项运行给定函数。这个方法没有返回值(取代for循环)
            /*var arr=[100,200,300,400,500,600,700,800,900];
            var newarr=[];
            arr.forEach(function(value,index,array){
                newarr.push(value*1.3);
                //return 不能这样写。 
            });
            console.log(newarr);*/
            
            
            var arr=[100,200,300,400,500,600,700,800,900];
            arr.forEach(alert);alert默认接受一个参数
            console.log默认接收多个参数
        </script>
10.递归方法
<script type="text/javascript">
        //递归
        //程序调用自身的编程技巧称为递归。
        //它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解。
        //递归的能力在于用有限的语句来定义对象的无限集合。
        //一般来说,递归需要有边界条件、递归前进段和递归返回段。
        
        //1. 子问题须与原始问题为同样的事,且更为简单;
        //2. 不能无限制地调用本身,须有个出口,化简为非递归状况处理。
        
        //5!=5*4!
        //4!=4*3!
        
        //1.编写一个函数,输入n为偶数时,调用函数求1/2+1/4+1/6...+1/n,当输入n为奇数时,调用函数求1+1/3+1/5...+1/n.
        /*n=2   1/2
        n=4   1/4+even(2)
        n=6   1/6+even(4)
        
        n=6   1/6+1/4+1/2*/
        
        
        
        /*function fn(num){
            function even(n){
                if(n==2){
                    return 1/2;
                }else{
                    return 1/n+even(n-2);
                    //函数调用函数自身
                }
            }
            function odd(n){
                if(n==1){
                    return 1;
                }else{
                    return 1/n+odd(n-2);
                    //函数调用函数自身
                }
            }
            if(num%2==0){
                return even(num);
            }else{
                return odd(num);
            }
        }
        
        console.log(fn(6));*/
        
        //快速排序
        //1.从待排序的数组中挑出一个数,挑中间数。--splice
        //2.用剩余的数和挑出的数进行一一比较。如果比挑出的数大,放在一个新创建的数组里面。如果比挑出的数小,也放在另外一个新创建的数组里面。
        //3.分别对新创建的两个数组,重复上面的操作(递归)。
        //4.直到每一个数组的length<=1,输出数组的值。利用concat进行数组的拼接。
        /*var arr=[12,5,896,35,4000,-450,-6,7,2,100,48,35,4];
        function quicksort(arr){
            if(arr.length<=1){//边界点/基点-----若改成==会报错
                return arr;
            }else{
                var midindex=parseInt(arr.length/2);//中间值的索引。
                var midvalue=arr.splice(midindex,1)[0];//获取中间值。
                var left=[];
                var right=[];
                for(var i=0;i<arr.length;i++){
                    if(arr[i]<midvalue){
                        left.push(arr[i]);
                    }else{
                        right.push(arr[i]);
                    }
                }
                return quicksort(left).concat(midvalue,quicksort(right));
            }
        }
        console.log(quicksort(arr));*/
        
        //数组的扁平化:将多维数组变成一维数组。
        //新建一个数组。
        //遍历待扁平化数组的每一项
        //如果是单个的值,直接push到新的数组中
        //如果还是数组,递归调用,利用concat进行拼接。

做法一:ar arr=[1,2,3,['a','b','c'],['4','5','6',[7,8,9]],10];
        var newarr=[]
        function fn(arr){
            arr.map(function(value){
                if(!Array.isArray(value)){
                 newarr.push(value)
                 }
                else{fn(value)}
                })
            return newarr
        }
        
        document.write(fn(arr))

做法二:
        /*var arr=[1,2,3,['a','b','c'],['4','5','6',[7,8,9]],10];
        function flatten(arr){
            var newarr=[];
            for(var i=0;i<arr.length;i++){
                if(Array.isArray(arr[i])){//数组项还是数组
                    newarr=newarr.concat(flatten(arr[i]));
                }else{//单个值
                    newarr.push(arr[i]);
                }
            }
            return newarr;
        }
        console.log(flatten(arr));*/
        
        /*var arr=[1,2,3,['a','b','c'],['4','5','6',[7,8,9]],10];
        function flatten(arr){
            return arr.reduce(function(prev,curr,index,array){
                return prev.concat(Array.isArray(curr)?flatten(curr):curr);
                
            },[]);
        }
        console.log(flatten(arr));*/
        
        var arr=[12,5,896,6,35,4000,100,-450,6,7,2,100,48,35,4];
        function quicksort(arr){
            if(arr.length<=1){//边界点/基点
                return arr;
            }else{
                var midindex=parseInt(arr.length/2);//中间值的索引。
                var midvalue=arr.splice(midindex,1)[0];//获取中间值。
                var left=[];
                var right=[];
                for(var i=0;i<arr.length;i++){
                    if(arr[i]<midvalue){
                        left.push(arr[i]);
                    }else if(arr[i]>midvalue){
                        right.push(arr[i]);
                    }
                }
                return quicksort(left).concat(midvalue,quicksort(right));
            }
        }
        console.log(quicksort(arr));
        
        </script>

 10.数组的新方法:
    <script type="text/javascript">
            //1.indexOf/lastIndexOf
            /*var arr=['zhangsan','lisi','wangwu','zhaoliu','lisi','wangwu'];
            alert(arr.indexOf('lisi'));//1
            alert(arr.indexOf('lisi',2));//4
            alert(arr.lastIndexOf('lisi'));//4*/
            
            //2.迭代方法
            //every
/*            var arr=['zhangsan','lisi','wangwu',123,'lisi','wangwu'];
            var newarr=[];
            var result=arr.every(function(value,index,array){
                //console.log(value);
                //newarr.push(value);
                return typeof value=='string';//每一个数组项都要走一遍函数。
            });
            console.log(result);//false*/
            
            /*var arr=['zhangsan','lisi','wangwu',123,'lisi','wangwu'];
            arr.every(function(value,index,array){
                console.log(typeof value=='string');//一次执行。
            });*/
            
            
            //some:返回值也是一个
            var arr=['zhangsan','lisi','wangwu','123','lisi','wangwu'];
            /*var result=arr.some(function(value,index,array){
                //console.log(typeof value=='string');
                return typeof value=='string';
            });
            console.log('结果:'+result);*/
            
            //函数名等于函数体,方法是由函数构建的。
            //alert(alert);//function alert() { [native code] }
            console.log(arr.some(alert));//false
            console.log(arr.some(function alert(a) { }));//false
            console.log(arr.some(function log(a,b,c,d,e,f) { }));//false
            //alert('一个参数');
            //console.log('a','b','c','d');//多个参数
            //alert(console.log)
            //arr.some(console.log);
            
            //filter:返回的是一个数组,结果为true的项。
            //map:返回的是一个数组,不管真假。
            //返回的是map内部的函数返回的值,不管值是否存在,都会返回对应的值。
            /*var arr=['zhangsan','lisi','wangwu',123,'lisi','wangwu'];
            var newarr=arr.filter(function(value){
                console.log(value);
                //return value;
            });
            console.log(newarr);//[]*/
            
            /*var arr=['zhangsan','lisi','wangwu',123,'lisi','wangwu'];
            var newarr=arr.map(function(value){
                //console.log(value);
                return typeof value=='string';
            });
            console.log(newarr);*///[undefined, undefined, undefined, undefined, undefined, undefined]
            
            //forEach:没有返回值,替换for循环
            /*var arr=[123,56,2,89,456,2,7,89,100];
            function fn(arr){
                var newarr=arr.sort(function(a,b){
                    return a-b;
                });
                var minvalue=newarr[0];
                var maxvalue=newarr[newarr.length-1];
                var sum=0;
                arr.forEach(function(v){
                    sum+=v;
                });
                return '数组的最大值:'+maxvalue+'<br/>数组的最小值:'+minvalue+'<br/>数组的和:'+sum;
            }
            document.write(fn(arr))*/
        </script>
    </body>
    
11.归并方法
<script type="text/javascript">
            //归并方法:这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。
            /*var arr=[1,2,3,4,5,6,7,8,9,10];
            //调用的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。
            var result=arr.reduce(function(prev,curr,index,array){
                //prev:第一次指向数组的第一项,后面都是前面迭代return的结果。
                //curr:如果数组的第一项指向prev,除了第一项其他的都归它.
                console.log(prev+'-----'+curr);
                return prev+curr;
            });


            
            console.log(result);*/
            
            var arr=[1,2,3,4,5,6,7,8,9,10];
            //调用的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。
            var result=arr.reduce(function(prev,curr,index,array){
                //prev:如果reduce方法存在第二个参数,prev指向第二个参数,后面都是前面迭代的结果。
                //curr:如果reduce方法存在第二个参数,curr指向数组的每一项.
                console.log(prev+'-----'+curr);
                return prev+curr;
            },100);//100:迭代的初始值
            
            console.log(result);
        </script>
11.1归并方法
<script type="text/javascript">
            //归并方法:这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。
            /*var arr=[1,2,3,4,5,6,7,8,9,10];
            //调用的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。
            var result=arr.reduce(function(prev,curr,index,array){
                //prev:第一次指向数组的第一项,后面都是前面迭代的结果。
                //curr:如果数组的第一项指向prev,除了第一项其他的都归它.
                console.log(prev+'-----'+curr);
                return prev+curr;
            });
            
            console.log(result);*/
            
            var arr=[1,2,3,4,5,6,7,8,9,10];
            //调用的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。
            var result=arr.reduce(function(prev,curr,index,array){
                //prev:如果reduce方法存在第二个参数,prev指向第二个参数,后面都是前面迭代的结果。
                //curr:如果reduce方法存在第二个参数,curr指向数组的每一项.
                console.log(prev+'-----'+curr);
                return prev+curr;
            },100);//100:迭代的初始值
            
            console.log(result);
        </script>
12.对象的创建:
    <script type="text/javascript">
        //对象:一切皆对象。
        //对象是javascript的数据类型。对象是一种复合值,它将很多值聚合在一起,可通过名字访问这些值。对象也看做是属性的无序集合,每个属性都是一个名/值对。
        //组成:属性+方法
        
        //自定义对象(属性、方法)
        
        //1.创建对象--构造函数创建
        /*var obj=new Object();//新建一个空对象。
        obj.name='zhangsan';//自定义的属性---不需要var
        obj.age=100;
        obj.showinfo=function(){//自定义的方法。
            return obj.name+','+obj.age;
        }*/
        
        
        //访问对象属性1:通过点操作符完成。点操作符后面只能跟字符串。
        //访问对象属性2:通过[]操作属性。[]里面可以是字符串(obj.xx----------都是字符串),也可以是变量(/*for(var i in obj){//变量i:对象的属性,obj:对象
                console.log(i+'----'+obj[i]);
            }*/)

        //alert(obj['name']);//zhangsan
        //alert(obj.name);//zhangsan
        //alert(obj.a);//对象下面的属性和方法不存在,不会报错,报undefined
        
        //访问方法
        //alert(obj.showinfo());
        
        //alert(typeof obj);//object;
        //alert(obj.showinfo);//函数体。
        
        
        //2.创建对象--字面量的方式
        //这里的属性名一定是字符串,自动调用toString()方法将它转换成字符串。
        /*var obj={
            name:'zhangsan',
            age:100,
            showinfo:function(){
                return obj.name+','+obj.age;
            }
        };*/
        /*var obj={
            'name':'zhangsan',
            'age':100,
            'showinfo':function(){
                return obj.name+','+obj.age;
            }
        };
        alert(obj['name']);//zhangsan
        alert(obj.name);//zhangsan
        alert(obj.showinfo());*/
        
        /*var obj={
            1:2,
            3:4
        }
        //alert(obj.1);//格式错误。
        alert(obj['1']);//2
        alert(obj[1]);//2*/
        
        
        /*var num=10;
        alert(typeof num);//number
        alert(typeof num.toString());//string
        alert(typeof String(num));//string*/
        
        /*var arr=[1,2,3];
        alert(typeof arr);//object
        alert(typeof arr.toString());//string
        alert(typeof String(arr));*/
        
        
        </script>

13.对象的遍历
<script type="text/javascript">
            //1.对象的遍历
            /*var obj={
                'name':'zhangsan',
                'age':100,
                'showinfo':function(){
                    return obj.name+','+obj.age;
                }
            };*/
            
            
            //2.新的遍历方式--for...in
            /*for(var i in obj){//变量i:对象的属性(只有属性没有值),obj:对象
                console.log(i+'----'+obj[i]);
            }*/
            
            
            
            /*var arr=['zhangsan','lisi','wangwu','zhaoliu'];
            //for循环:索引下标,固有的,从0开始的顺序。
            for(var i=0;i<arr.length;i++){
                alert(arr[i]);
            }*/
            
            /*var arr=['zhangsan','lisi','wangwu','zhaoliu'];
            for(var i in arr){
                console.log(i+'-----'+arr[i]);
            }*/
            
            
            //结论:
            //对象只能用for...in进行遍历
            //数组可以用for和for...in进行遍历(在for(i in xx)中i是下标或对象的属性)
        </script>
    </body>
14.数组和对象的综合应用

数组由对象组成,先用arr[n]定位哪个对象,再用对象方法访问
<script type="text/javascript">
            var obj={
                        "result": [
                            ["aj", "888740"],
                            ["阿迪达斯", "2577353"],
                            ["安踏", "1829713"],
                            ["aj1", "401090"],
                            ["阿玛尼", "313581"],
                            ["矮个子秋季套装", "66915"],
                            ["a字裙女", "4644066"],
                            ["a字裙 半身裙", "2527105"],
                            ["a字连衣裙", "1820882"],
                            ["阿迪达斯官方旗舰店男", "269057"]
                        ],
                        "magic": [{
                            "index": "1",
                            "type": "tag_group",
                            "data": [
                                [{
                                    "title": "男鞋"
                                }, {
                                    "title": "T恤"
                                }, {
                                    "title": "篮球鞋",
                                    "type": "hot"
                                }],
                                [{
                                    "title": "病倒"
                                }, {
                                    "title": "短袖"
                                }, {
                                    "title": "战靴"
                                }, {
                                    "title": "未来",
                                    "type": "hot"
                                }, {
                                    "title": "纯棉"
                                }, {
                                    "title": "低帮"
                                }, {
                                    "title": "气垫"
                                }]
                            ]
                        }, {
                            "index": "4",
                            "type": "tag_group",
                            "data": [
                                [{
                                    "title": "篮球鞋",
                                    "type": "hot"
                                }, {
                                    "title": "运动鞋"
                                }, {
                                    "title": "男鞋"
                                }, {
                                    "title": "女鞋"
                                }],
                                [{
                                    "title": "白灰"
                                }, {
                                    "title": "樱木"
                                }, {
                                    "title": "库里"
                                }, {
                                    "title": "黑水泥"
                                }, {
                                    "title": "公牛"
                                }, {
                                    "title": "高帮",
                                    "type": "hot"
                                }]
                            ]
                        }, {
                            "index": "8",
                            "type": "tag_group",
                            "data": [
                                [{
                                    "title": "中长款"
                                }, {
                                    "title": "中裙"
                                }, {
                                    "title": "短裙",
                                    "type": "hot"
                                }],
                                [{
                                    "title": "中腰"
                                }, {
                                    "title": "高腰",
                                    "type": "hot"
                                }],
                                [{
                                    "title": "修身"
                                }, {
                                    "title": "学院风"
                                }, {
                                    "title": "大码",
                                    "type": "hot"
                                }, {
                                    "title": "韩国"
                                }, {
                                    "title": "蓬蓬裙"
                                }]
                            ]
                        }, {
                            "index": "9",
                            "type": "tag_group",
                            "data": [
                                [{
                                    "title": "中长款",
                                    "type": "hot"
                                }, {
                                    "title": "中裙"
                                }, {
                                    "title": "短裙"
                                }],
                                [{
                                    "title": "打底裙"
                                }, {
                                    "title": "大码的衣服不好卖",
                                    "type": "hot"
                                }, {
                                    "title": "学生"
                                }, {
                                    "title": "短袖"
                                }, {
                                    "title": "修身"
                                }, {
                                    "title": "夏季"
                                }, {
                                    "title": "宽松"
                                }]
                            ]
                        }]
                    };
                    
                //console.log(obj.result[9][0]);    
                //console.log(obj.magic[3].data[1][1]['title']);
                
                
                var a={
                    "name":"zhangsan",
                    "age":100,
                    "showinfo":"我是文字"
                }
                
        </script>
15值传递和引用传递
<script type="text/javascript">
            //数据类型:基本类型和引用类型
            //基本类型:值传递
            //引用类型:引用传递(地址传递)
            //内存:栈内存和堆内存
            //栈内存:存放基本类型的值和引用类型 的地址。
            //堆内存:存放引用类型的值。
            //1.解决赋值关系
            /*var a=5;
            var b=a;//值传递。将a的值传递给b
            b++;
            console.log(a);//5
            console.log(b);//6*/
            
            /*var a=[1,2,3];
            var b=a;//地址传递,将a的地址给了b
            b.push(4);
            console.log(a);//[1,2,3,4]
            console.log(b);//[1,2,3,4]*/
            
            //如果解决引用类型之间的赋值关系。
            //赋值关系
            var a=[1,2,3];//栈里面拥有地址
            var b=[];//栈里面拥有地址
            //浅拷贝:采用一一拷贝将a的值给b
            for(var i in a){
                b[i]=a[i];//将a的值逐个的给b数组
            }
            b.push(4);
            console.log(a);//[1,2,3]
            console.log(b);//[1,2,3,4]
        </script>
16.随机点名程序
<style type="text/css">
            #box{
                width:200px;
                height:60px;
                color:red;
                font-weight: bold;
                text-align: center;
                line-height: 60px;
                border: 1px solid #FF0000;
                font-size:45px;
                padding: 0 20px;
                margin: 100px auto;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="box">开始点名</div>
        <script type="text/javascript">
            //1.window.setInterval(函数体,时间(ms)); 反复执行定时器。
            //规定的时间内反复执行函数体,知道关闭定时器。
            /*window.setInterval(function(){
                alert(123);
            },1000);*/
            //停止定时器
            //clearInterval(设置定时器的返回值)
            
            
            //2.innerHTML属性:获取和设置元素对象内部的内容。包括内部的标签元素。
            //var oBox=document.getElementById('box');
            //alert(oBox.innerHTML);//获取-读
            //oBox.innerHTML='6789';//设置-写
            
            
            //2.随机点名程序。
            var arr=['徐斌','郭康','秦昕','徐斌','温作业','徐斌','姚宇','杨奇道','徐斌','廉仁杰','丁雁秋','李政','宋军伟','刘灿','徐斌'];
            var oBox=document.getElementById('box');
            var timer=null;//定时器的返回值
            oBox.οnclick=function(){
                clearInterval(tim);
                clearInterval(timer);//防止定时器叠加。
                timer=setInterval(function(){
                    var num=parseInt(Math.random()*arr.length);//0-15
                    oBox.innerHTML=arr[num];
                },5);
            };
            
        document.οnkeydοwn=function(){
            clearInterval(timer);
        }
        </script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章