数组、数组的方法、数组类别、数组排序、ES5新增的数组方法

数组的方法

  1. push() 可以接受任意数量的参数,把他们逐个添加到数组末尾,并返回修改后的数组的长度。改变原数组
	var arr = [1, 2];
    console.log(arr);   //[1,2]
    console.log(arr.push(3, 4, 5)); //5 返回修改后的长度
    console.log(arr);   //[1,2,3,4,5]
  1. pop()从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。
	var arr = [1,2];
    console.log(arr.pop()); //2 返回被删除的项
    console.log(arr);   //[1]
  1. unshift()方法能够在数组前面添加任意个项并返回新数组的长度。
	var arr = [1,2];
    console.log(arr.unshift(3, 4, 5, 6));   //6 返回新数组的长度
    console.log(arr);   //[3, 4, 5, 6, 1, 2]
  1. shift()方法能够移除数组中的第一个项并返回该项,同时将数组长度减 1。
	var arr = [1, 2, 3, 4];
    arr.shift();    //返回新数组
    console.log(arr);   //[2, 3, 4]
*案例:定义一个含有30个整型元素的数组,按顺序分别赋予从2开始的偶数;然后按顺序每五个数求出一个平均值,放在另一个数组中并输出。试编程*
	var arrnum = [];    //准备空数组
    for(var i = 1; i <= 30; i++){
        arrnum.push(i * 2);
    }
    console.log(arrnum);
    //[2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60]
    var newarr = [];    //存放平均数的数组
    var sum = 0;    //和
    for(var i = 0; i < arrnum.length; i++){
        sum = sum + arrnum[i];  //累加求和
        if ((i + 1) % 5 == 0) {
            newarr.push(sum / 5);
            sum = 0;    //重置sum=0
        }
    }
    console.log(newarr);    //[6, 16, 26, 36, 46, 56]
  1. reverse()方法会反转数组项的顺序
	var arr = ['a', 'b', 'c'];
    console.log(arr.reverse()); //['c', 'b', 'a']   颠倒输出
  1. sort()方法按照字母表升序排列数组项
    Unicode编码
    a-z 97-122
    A-Z 56-90
    0-9 48-57
	var arrstr = ['cyan', 'apple', 'banana'];
    console.log(arrstr.sort()); //['apple', 'banana', 'cyan']

    var arrnum = [9, 6, 3, 8, 2, 5, 7, 100, 4];
    console.log(arrnum.sort()); //无法排序数字

如果利用sort排序数字,需要添加一个比较函数作为参数

	function compare(a, b){
        return b - a;
    }
    function compare(a, b){
        if(a > b){
            return 1;
        }else if(a < b){
            return -1;
        }else{
            return 0;
        }
    }

    var arrnum = [9, 6, 3, 8, 2, 5, 7000, 100, 4];
    console.log(arrnum.sort()); //[100, 2, 3, 4, 5, 6, 7000, 8, 9]	未加比较函数
    console.log(arrnum.sort(compare));  //[2, 3, 4, 5, 6, 8, 9, 100, 7000]	添加比较函数
  1. concat()方法可以基于当前数组中的所有项创建一个新数组
    应用:快速排序,数组的扁平化
	var arr = ['zhangsan', 'lisi', 'wangwu'];
    console.log(arr.concat());  //["zhangsan", "lisi", "wangwu"]  生成一个新数组 克隆arr数组    不影响之前的数组
    console.log(arr.concat('ccccc', 'dddd'));   //["zhangsan", "lisi", "wangwu", "ccccc", "dddd"]
    console.log(arr);   //["zhangsan", "lisi", "wangwu"] 不会改变原数组
  1. slice()方法他能够基于当前数组中的一个或多个创建一个新数组。可以接受一个或两个参数
	var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
    console.log(arr.slice());   //["a", "b", "c", "d", "e", "f", "g"]   生成新的数组 全部截取从0开始
    console.log(arr.slice(1));  //["b", "c", "d", "e", "f", "g"]    从当前位置截取
    console.log(arr.slice(1, 5))    //["b", "c", "d", "e"]  从1开始到5结束,不包括5
    console.log(arr.slice(1, -3));  //["b", "c", "d"]   负数表示从后往前找位置,-1开始。截取始终是从前完后。
    console.log(arr.slice(1, -30));     //[]    找不到截取的位置,返回空数组。[]
    console.log(arr.slice(-16));    //["a", "b", "c", "d", "e", "f", "g"]  参1位负数,找不到情况下从索引0开始
  1. splice()方法,对数组进行删除、插入、替换,是最强大的数组方法,返回值是数组,改变原数组。
    参1:起始索引位置
    参2:删除的长度
    参3开始:需要添加的数组项
 	var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
    //删除
    console.log(arr.splice(1, 3));  //输出被删除的 ["b", "c", "d"]
    console.log(arr);   //["a", "e", "f", "g"]
    //插入:不删除,删除的起始位置直接添加
    console.log(arr.splice(1, 0, 'h', 'i', 'j'));   //[]
    console.log(arr);   //["a", "h", "i", "j", "b", "c", "d", "e", "f", "g"]
    //替换:删除了3项,对应添加了3项,理解成替换
    console.log(arr.splice(1, 3, 'hello', 'hi', 'hhh'));    //返回被操作的项 ["h", "i", "j"]
    console.log(arr);   //["a", "hello", "hi", "hhh", "e", "f", "g"]
  1. join方法,将数组转换成对应的字符串。参数就是连接符。
	var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
    console.log(arr);   // ["a", "b", "c", "d", "e", "f", "g"]
    console.log(arr.join());    //a,b,c,d,e,f,g
    console.log(arr.join('#')); //a#b#c#d#e#f#g
    console.log(arr.join(''));  //abcdefg

数组类别

  1. 二维数组:数组中还有数组
	var arr = [1, 2, [3, 4], [5, 6], [7, [8, 9]]];
    //如何获取二维数组的值
    console.log(arr[2][0]); //3
    console.log(arr[4][1][1]);  //9

    //如何给二维数组赋值
    //必须确认数组的这一项的结果还是数组

    var arr = [];
    //arr[0][0] = 10; //报错
    //正确做法
    arr[0] = [];
    arr[0][0] = 1;
    arr[0][1] = 2;
    arr[1] = 3;
    console.log(arr);	//[[1,2],3]
*案例:通过循环按执行顺序,做一个5×5的二维数组,赋1到25的自然数,然后输出该数组的左下半三角。试编程。*
	//var arr = [[1,2,3,4,5],[6,7,8,9,10],[11,12,13,14,15],[],[]];
   function double(n){
       //如果n<10,前面添加0
       return n < 10 ? '0' + n : n;
   }
   var arr = [];
   var num = 1;
   for(var i = 0; i < 5; i++){
       arr[i] = []; //告知arr数组的每一项是数组
        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>');
   }
   console.log(arr);
  1. 对象数组
    学会访问数组的值和访问对象的值。
	var arrobj = [
   { a: 1, b: 2 }, 
   { c: 3, d: 4 }, 
   { name: 'zhangsan', age: 100 }
   ];
   console.log(arrobj[1]);	//{c: 3, d: 4}
   
    var data = {
            "result": [
                ["衣服女2019新品", "1721756.308989681"],
                ["衣服男冬季", "504758.0918811832"],
                ["衣服女", "1865461.4536140976"],
                ["衣服女冬季", "2161687.2736833775"],
                ["衣服男", "950314.6975331445"],
                ["衣服男潮流", "456609.93286396784"],
                ["衣服套装女秋冬", "642995.9155301922"],
                ["衣服女2019新款潮", "1509431.645108339"],
                ["衣服女秋冬 百搭", "638487.1820551006"],
                ["衣服冬天女装", "1243145.52768236"]
            ],
            "magic": [
                {
                    "index": "6",
                    "type": "tag_group",
                    "data": [
                        [
                            { "title": "薄款", "type": "hot" },
                            { "title": "常规" }
                        ],
                        [
                            { "title": "夏季" },
                            { "title": "圆领" },
                            { "title": "印花" },
                            { "title": "短袖" },
                            { "title": "脑壳疼" },
                            { "title": "纯棉" },
                            { "title": "宽松" },
                            { "title": "学生", "type": "逆战" }
                        ]
                    ]
                }
            ]
        };
        console.log(data.magic[0].data[1][4].title);	//脑壳疼

数组的排序

  1. 排序,就是把一个乱序的数组,通过我们的处理,让他变成一个有序的数组–sort()
  2. 交换两个值的方式,通过中间值实现
	var a = 10;
    var b = 5; 
    console.log(a, b);  //10 5
    var temp = a;
    a = b;
    b = temp;
    console.log(a, b);  //5 10
  1. 交换两个值的方式,数字通过计算实现
	var a = 10;
    var b = 5; 
    console.log(a, b);  //10 5
    a = a + b;  //a=15
    b = a - b;  //b = 10
    a = a - b ; //a = 5
    console.log(a, b);  //5 10
  1. 冒泡排序
    相邻的元素两两比较,如果第一个数比第二个数大,交换位置,每一轮有一个数字排序好了。
    重复。
	var arr = [23, 5, 89, -23, 0, 5, 88, 100, 7, 2];
    var times = 0;
    console.log(arr);   //[23, 5, 89, -23, 0, 5, 88, 100, 7, 2]

    for(i = 0; i < arr.length - 1; i++){    // 比较的轮数   10个数字比较9次  
        for(j = 0; j < arr.length - i - 1; j++){    //当前比较轮次 两两比较
            //10个数字比较9次 每一轮都有一个数字排序号,当下一次比较时,忽略这个已经排序好的数
            if(arr[j] > arr[j + 1]){    //满足条件,交换位置
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
            times++;
        }
        
    }
    console.log(arr);   //[-23, 0, 2, 5, 5, 7, 23, 88, 89, 100]
    console.log(times); //45
  1. 选择排序
    工作原理:每一次从待排序的数据中选出最小的一个元素,存放起始位置。直到全部排序完成。
	var arr = [23, 5, 89, -23, 0, 5, 88, 100, 7, 2];
    console.log(arr);   //[23, 5, 89, -23, 0, 5, 88, 100, 7, 2]
    for(var i = 0; i < arr.length; i++){
        var minindex = i;   //假设i为最小值的索引
        var minvalue = arr[minindex];   //假设为最小值
        for(var j = i + 1; j < arr.length; j++){	//比较:如果当前的值比设定的最小值还要小,当前找到的才是真正的最小值。
            if (arr[j] < minvalue) {	//满足条件,得到真正的最小值
                minvalue = arr[j];	//当前的最小值
                minindex = j;	//当前最小值的索引
            }
        }
	//内层循环完成了,代表找到了真正的最小值
	//如果假设的最小值成立,真的是最小值,无需进行交换比较
        if (i !== minindex) {	//假设的最小值不是真正的最小值,进行交换。
            var temp = arr[i];
            arr[i] = arr[minindex];
            arr[minindex] = temp;
        }
    }
   console.log(arr);    //[-23, 0, 2, 5, 5, 7, 23, 88, 89, 100]

ES5新增的数组方法

  1. indexOf/lastIndexOf
    返回要查找的项在数组中的索引位置,没找到的情况下返回-1
    两个参数:参1,要查找的数组项,参2,(可选的)查找的起点位置的索引 找参1从参2的位置开始找
	var arr = ['apple', 'banana', 'pear', 'orange', 'banana', 'pear', 'orange'];
    console.log(arr.indexOf('pear'));   //2 始终找第一次出现的  找到就不找了
    console.log(arr.indexOf('pear', 3));    //5 从索引3的位置找
    console.log(arr.indexOf('xxxxx'));  //-1
*案例:检测是否是数组*
	function noRepeat(arr) {
        //检测是否是数组    Array.isArray
        if (Array.isArray(arr)) {
            //满足是数组的条件
            var newarr = [];
            for (var i = 0, len = arr.length; i < len; i++) {
                if (newarr.indexOf(arr[i]) == -1) {
                    newarr.push(arr[i]);
                }
            }
            return newarr;  //返回去重后的数组
        }else{
            //不是数组
            throw new Error('你输入的不是数组');
        }
    }
    console.log(noRepeat([1, 1, 34, 56, 34, 56, 123, 1, 34]));	//[1, 34, 56, 123]
    console.log(noRepeat(1));	//报错
  1. 迭代是重复反馈过程的活动,其目的通常是为了逼近所需目标或结果。每一次对过程的重复称为一次迭代
    每一个方法都有2个参数:参1是一个函数(回调函数) 参2(可选的)this指向
    参1是一个函数(回调函数),这个函数又有三个参数(数组项的值,数组项的索引位置,数组本身);
    every():对数组中的每一项运行给定的函数,如果函数对数组的每一项都返回true,整个方法的结果就是true
	var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var result = arr.every(function(value, index, array){
        //value:数组项的值
        //index:数组项的索引位置
        //array:数字本身
        return value > 0;
    });
    console.log(result);    //true
*案例:检测字符串数组:数组的每一项都是字符串*
	function checkStr(arr){
        var result = arr.every(function (value, index, array){
            return typeof value == 'string';
        }) ;
        return result;
    }
    console.log(checkStr(['a', 'b', 'v'])); //true
  1. some():对数组中的每一项运行给定的函数,如果该函数对数组的任意一项返回true,结果就返回true
	var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var result = arr.some(function(value, index, arr){
        return value > 3;   //有一个满足即可
    });
    console.log(result);    //true
*案例:判断一个数组中是否存在某个值。*
	var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var result = arr.some(function(value, index, arr){
        return value > 3;   //有一个满足即可
    });
    console.log(result);    //true
    //判断一个数组中是否存在某个值。
    function checkValue(v){
        var result = arr.some(function(value, index, arr){
            return value == v;
        });
        return result;
    }
    console.log(result);    //true
  1. filter():对数组中的每一项运行给定的函数,返回该函数为true项组成的数组
	var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var result = arr.filter(function(value, index, arr){
        return value > 5;
    })
    console.log(result);
  1. map(),对数组中的每一项运行给定的函数,返回每次函数调用的结果组成的数组,返回的就是数组,无需考虑true false—映射
	var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var result = arr.map(function(value, index, array){
        return value > 5;
    });
    console.log(result);    //[false, false, false, false, false, true, true, true, true]
*案例:编写一个map()函数,把数组的中的每一位数字都增加30%,并返回一个新数组*
	function map1(arr){
        return arr.map(function(value){
            return value * 1.3
        });
    }
    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    console.log(map1(arr)); //[1.3, 2.6, 3.9000000000000004, 5.2, 6.5, 7.800000000000001, 9.1, 10.4, 11.700000000000001]
  1. forEach():对数组的每一项运行给定的函数,这个方法没有返回值
	var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var result = arr.forEach(function(value, index, array){
        console.log(value + '----' + index);
    });
  1. reduce() reduceRight()
    这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。每一
    次迭代得到的结果会作为下一次迭代的初始值
    reduce():从数组的第一项开始,逐个遍历到最后
    reduceRight():从数组的最后一项开始,逐个遍历到第一项

    方法包含两个参数:参1每一项执行的函数,参2 迭代的初始值(可选的)
    每一项执行的函数里面包含四个参数(前一个值,当前值,数组项的索引,数组本身)

	var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    //一个参数:每一项执行的函数
    var result = arr.reduce(function(prev, curr, index, array){
        // console.log(prev);  //第一次找的是迭代的初始值,后面的每一次值就是迭代结果。
        // console.log(curr);  //分别表示从数组的第一项开始的值。
        console.log(prev + '|' + curr); //迭代每次的过程
        return prev + curr; 
    },100); //迭代的初始值(可选的)
    console.log(result);
    // 100|1
    // 101|2
    // 103|3
    // 106|4
    // 110|5
    // 115|6
    // 121|7
    // 128|8
    // 136|9
    // 145|10

    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    //一个参数:每一项执行的函数
    var result = arr.reduceRight(function(prev, curr,index, array){
        console.log(prev + '|' + curr);
        return prev + curr;
    });
    console.log(result);
    // 10|9
    // 19|8
    // 27|7
    // 34|6
    // 40|5
    // 45|4
    // 49|3
    // 52|2
    // 54|1
    // 55
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值