【Python全栈-JavaScript】JavaScript-数组详解

JavaScript-数组详解

预热知识：对象遍历

1、定义对象，获取对象

var obj={
            a:1,
            b:2,
            c:3,
            d:function () {
                console.log("aa");
            }
        };

//        console.log(obj["a"]);
//        console.log(obj.a);
        obj.a=10;
        obj["a"]=10;    //可以传入动态的属性var mysttr = xxx;  obj[myattr]

        obj.d();
        obj["d"]();

2、for in 循环，复制对象


        *   for in 语句,遍历对象
        * */
        for(var prop in obj){
            console.log(prop,obj[prop]);        //prop 属性名  obj[prop] 属性值
        }

        //复制
        var obj1={};
        for(var key in obj){
            obj1[key]=obj[key];
        }
        obj.a=40;
        console.log(obj1,obj);  //obj1 和obj是两个独立的对象了

案例：设置div标签style属性

----------------------------------html

    

----------------------------------JavaScript
    
function setStyle(elem, style) {
        for (var prop in style) {
            elem.style[prop] = style[prop];
        }
    }

    var div0 = document.getElementById("div0");
    setStyle(div0, {
        width: "100px",
        height: "100px",
        backgroundColor: "red"
    });

另一种写法：

HTMLElement.prototype.addStyle = function (style) {
        for (var prop in style) {
            this.style[prop] = style[prop];
        }
    };

    div0.addStyle({
        width: "100px",
        height: "100px",
        backgroundColor: "red"
    })

一、数组基础

二、数组长度

案例：冒泡排序和选择排序

三、数组和对象

 四、数组的方法-push()  pop()  shift()  unshift()

var arr=[-2,-1,0,1,2,3,4,5];
//        var len=arr.push();//返回数组的新长度
//        len=arr.push(6);//[1,2,3,4,5,6],6;
//       var len=arr.push(6,7,8);//[1,2,3,4,5,6,7,8],8;
//       var len=arr.push([6,7,8]);//[1,2,3,4,5,[6,7,8]],6;

　　　　　　//数组首端入栈，返回新数组长度
//        var len=arr.unshift();
//        var len=arr.unshift(0);
//        var len=arr.unshift(-2,-1,0);
        /*
        *  减少使用unshift   ,unshift会将原来数组的所有项向后移动一位 因此效率非常低
        * */
//        console.log(len,arr);

//        删除数组尾部的元素
//        var t=arr.pop();　　//返回被删除的元素
//        console.log(t);
        /*var arr1=[];
        var t;
        while (t=arr.pop()){
            arr1.push(t);
        }
        console.log(arr1,arr);*/

//        删除数组的头部元素
//        var t=arr.shift();//返回被删除的元素

作业1.随机生成一个5位以内的数，然后输出该数共有多少位，每位分别是什么

var arr1=[];
        var bool=false;
        for(var i=0;i<4;i++){
            var s=parseInt(Math.random()*10);   //随机生成0-9
            if(s===0 && !bool) continue;    //第一位不能是0
            arr1.push(s);
            bool=true;
        }
        var num=Number(arr1.join(""));
        console.log(arr1,arr1.length,num)
随机生产4位数

 五、数组转化为字符串join()  ,  连接数组concat()

六、截取数组 splice()   slice()

七、indexOf()    lastindexOf()  查找内容

查找列表中的是否含有某项，有返回下标，没有返回-1。arr.indexOf()  arr.lastIndexOf()

 八、倒序reverse() 和 排序sort()

倒序reverse() 

    /*
    *  reverse 倒序
    * 原数组倒序改变,返回的新数组和原数组是引用关系
    *
    * */
    var arr = [2, 3, 5, 7, 9, 1, 4, 6, 8, 10];
    // var arr1 = arr.reverse();    //
    // console.log(arr, arr === arr1);  //true,arr1和arr是引用关系

排序sort()

 /*
    *  sort();
    *  排序数组中的元素,原数组发生改变,返回的新数组和原数组是引用关系
    *  sort(function(a,b){})
    * */
    // var arr1 = arr.sort();
    // console.log(arr,arr1===arr);    //[1, 10, 2, 3, 4, 5, 6, 7, 8, 9] true  按位进行排序

    /*由小到大排序*/
    /*arr.sort(function (pre,next) {
        return pre-next;
    });*/
    /*由大到小排序*/
    /*arr.sort(function (pre,next) {
        return next-pre;
    });*/
    //console.log(arr);

案例演示：

《1》随机生成data属性num对应的值，按照num从小到大排序

/*// 随机生成data属性num对应的值，按照num从小到大排序
      var data=[
          {id:1001,icon:"img/1.png",name:"餐饮0",num:1,price:10},
          {id:1002,icon:"img/2.png",name:"餐饮1",num:1,price:20},
          {id:1003,icon:"img/3.png",name:"餐饮2",num:1,price:30},
          {id:1004,icon:"img/4.png",name:"餐饮3",num:1,price:40},
          {id:1005,icon:"img/5.png",name:"餐饮4",num:1,price:50},
          {id:1006,icon:"img/6.png",name:"餐饮5",num:1,price:60},
          {id:1007,icon:"img/7.png",name:"餐饮6",num:1,price:70},
          {id:1008,icon:"img/8.png",name:"餐饮7",num:1,price:80},
          {id:1009,icon:"img/9.png",name:"餐饮8",num:1,price:90},
          {id:1010,icon:"img/10.png",name:"餐饮9",num:1,price:100}
      ];

      for(var i=0;i*/

《2-1》普通的随机，输出0-100之间 不重复的4个数

/*var arr2 = [];

    // 普通的随机，输出0-100之间 不重复的4个数
     while (arr2.length<4){
          var num=parseInt(Math.random()*100);
          if(arr2.indexOf(num)===-1){
              arr2.push(num);
          }
    }
    console.log(arr2);*/

《2-2》排序的随机乱序

/*
    排序的随机乱序
    for(var i=0;i<100;i++){
        arr2.push(i);    //[0,1,2,3 ....99]   
     }      
     arr2.sort(function () {
         return Math.random()-0.5;  //-0.5~0.5  (负数从小到大排序，正数从大到小)
     });
     arr2.length=4;     //取数组的前四个
     console.log(arr2);*/

《3》抽奖：一等奖1个，二等奖2个，三等奖3个，四等奖4个，五等奖5个

《4》生成4位数字 字母混合的验证码

var str = "azAZ";

    /* //拼音字符和汉字排序
    console.log(str.charCodeAt(0));     //a对应的ascii数值为 97
     console.log("一".charCodeAt(0).toString(16));   //一 对应的ascii数值 转化为十六进制
     var arr3=["xietian","wangzheng","xuli","zhangxueyou"];
     arr3.sort(function (pre,next) {
         return pre.charCodeAt(0)-next.charCodeAt(0);   //首字母从小到大排序
     });
     console.log(arr3);*/

    /*console.log(String.fromCharCode(97));     //a ,将ASCII上十进制数97 转化为对应字符
    console.log(String.fromCharCode(0x4e00));*/


    /*
    生成4位数字 字母混合的验证码
    *  a--97
    *  z--122
    *
    *  A-65
    *  Z-90
    * */
    //    console.log(str.charCodeAt(3));
    var arr3 = [];
    for (var i = 0; i < 123; i++) {
        if (i < 10) {
            arr3.push(i);
            continue;
        }
        if (i < 65) continue;
        if (i < 91) {
            arr3.push(String.fromCharCode(i));
            continue;
        }
        if (i < 97) continue;
        arr3.push(String.fromCharCode(i));
    }
    // arr3 为：
    //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",
    // "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]
    console.log(arr3);
    arr3.sort(function () {
        //将生成的4位验证码 乱序
        return Math.random() - 0.5;
    });
    console.log(arr3);
    arr3.length = 4;        //取出乱序后的数组的前4位
    console.log(arr3);
    console.log(arr3.join(""));

    // 面试问题：手机APP注册时 验证码一般是接入的一些收费的验证码API平台，如创蓝253 https://zz.253.com/v5.html#/yun/sms_y?did=232

 九、遍历的多种玩法

（1）forEach()

/*var arr=[1,2,4,6,7,8,5,9];
        arr.forEach(function (item,index,arr) {
            console.log(item,index,arr);
        })*/

// item是数组每一项，index是数组下标，arr是该数组

案例和知识点演示：

/*
       修改产品的数量随机,求出每个产品的总价
       var data=[
           {id:1001,icon:"img/1.png",name:"餐饮0",num:1,price:10},
           {id:1002,icon:"img/2.png",name:"餐饮1",num:1,price:20},
           {id:1003,icon:"img/3.png",name:"餐饮2",num:1,price:30},
           {id:1004,icon:"img/4.png",name:"餐饮3",num:1,price:40},
           {id:1005,icon:"img/5.png",name:"餐饮4",num:1,price:50},
           {id:1006,icon:"img/6.png",name:"餐饮5",num:1,price:60},
           {id:1007,icon:"img/7.png",name:"餐饮6",num:1,price:70},
           {id:1008,icon:"img/8.png",name:"餐饮7",num:1,price:80},
           {id:1009,icon:"img/9.png",name:"餐饮8",num:1,price:90},
           {id:1010,icon:"img/10.png",name:"餐饮9",num:1,price:100}
       ];
       data.forEach(function (item) {
            item.num=parseInt(Math.random()*9+1);
            item.sum=item.num*item.price;
       });
        console.log(data);*/


       /*
      // 修改数组中的每个值
         var arr=[1,2,4,6,7,8,5,9];
             arr.forEach(function (t,i,arr) {
      //           t++;     //错误
      //           arr[i]++;    //数组中每一项

      //           将所有偶数+1
                 if(t%2===0){
                     arr[i]++;
                 }
             });
          console.log(arr);*/

（2）map()遍历

//map()遍历
      //  var arr=[1,2,4,6,7,8,5,9];
       // arr.map(function (t) {
       //
       // })

/* map()与forEach相似,可以完成forEach的所有功能
       var data=[
           {id:1001,icon:"img/1.png",name:"餐饮0",num:1,price:10},
           {id:1002,icon:"img/2.png",name:"餐饮1",num:1,price:20},
           {id:1003,icon:"img/3.png",name:"餐饮2",num:1,price:30},
           {id:1004,icon:"img/4.png",name:"餐饮3",num:1,price:40},
           {id:1005,icon:"img/5.png",name:"餐饮4",num:1,price:50},
           {id:1006,icon:"img/6.png",name:"餐饮5",num:1,price:60},
           {id:1007,icon:"img/7.png",name:"餐饮6",num:1,price:70},
           {id:1008,icon:"img/8.png",name:"餐饮7",num:1,price:80},
           {id:1009,icon:"img/9.png",name:"餐饮8",num:1,price:90},
           {id:1010,icon:"img/10.png",name:"餐饮9",num:1,price:100}
       ];
       data.map(function (item) {
           item.num=parseInt(Math.random()*9+1);
           item.sum=item.num*item.price;
       });
       console.log(data);*/

      // 每个元素+1,返回给新数组
      var arr=[1,2,4,6,7,8,5,9];
       var arr1=arr.map(function (t) {
            return ++t;
       });
        console.log(arr,arr1);

     /*
    return 返回数据元素,到新数组中,如果不返回的数据就会变成undefined
     var arr=[1,2,4,6,7,8,5,9];
       arr=arr.map(function (t) {
           if(t%2===0){
               return t+1;
           }
           return t;      //如果没有这句，非奇数的返回为undefined
       });
        console.log(arr);*/

总结 map() 和 forEach() 的区别

/*  map() 和 forEach() 的区别
     *   forEach遍历当前数组,没有返回值,不会返回新数组
     *   map遍历当前数组,并且将当前数组中的元素返回给新数组,
     * 不使用return时,新数组的长度与原数组相同,但是每个元素都是undefined;
     * */

十、some()  every()  filter()  reduce()

《1》some()方法

定义和用法：

some() 方法用于检测数组中是否存在满足条件的项（函数提供）。

some() 方法会依次执行数组的每个元素：

  • 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

语法：array.some(function(currentValue,index,arr),thisValue)

案例：





菜鸟教程(runoob.com)




点击按钮检测数组中是否有元素大于输入框中输入的数字。


最小年龄: 



判断结果:
some()

参考：https://www.runoob.com/jsref/jsref-some.html

《2》every方法

定义和用法：

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

  • 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
  • 如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测。

注意： every() 不会改变原始数组。

语法：array.every(function(currentValue,index,arr), thisValue)

案例：





菜鸟教程(runoob.com)




点击按钮检测数组的所有元素是否都大于输入框中指定的数字。


最小年龄: 



是否所有年龄都符号条件?
every()

《3》filter()方法

定义和用法：

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

语法：array.filter(function(currentValue,index,arr), thisValue)

案例：





菜鸟教程(runoob.com)




点击按钮返回数组 ages 中所有元素都大于输入框指定数值的元素。


最小年龄: 



所有大于指定数组的元素有？
filter()

参考：https://www.runoob.com/jsref/jsref-filter.html

《4》reduce() 方法

定义和用法：

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

案例：





菜鸟教程(runoob.com)




点击按钮后对数组元素进行四舍五入并计算总和。




数组元素之和:
reduce()

视频学习笔记：

some() every() filter() reduce() Array.isArray() Array.from()

十一、函数arguments参数与数组方法的结合

一般的函数传参必须一一对应

// *  参数如果写在所有参数的最前面,那就是必要参数
    // *  ES5中所有的参数一般都需要按位置填写,如果没有填写,就会变成undefined
    // *  多填进入的参数值不会被直接获取到
    // *
    /* function fn1(a,b,c) {
         console.log(a,b,c);
     }
     fn1(null,3,4,10,20);*/

arguments可以传入不定参数

/*function max() {
        console.log(arguments);     //函数中就可以获取这个arguments
        var arr = Array.from(arguments);        //将传入的参数 转化为一个数组
        return arr.reduce(function (p1, p2) {
            return p1 > p2 ? p1 : p2;
        });
    }

    console.log(max(1, 2, 3, 5, 7, 9, 1, 2, 5));
    console.log(max(3, 6, 8, 20, 10));*/

arguments的属性

function fn2() {
        console.log(arguments);
        console.log(Array.from(arguments));
        console.log(arguments.callee.a);
        console.log(arguments.callee);      //arguments.callee 当前执行的函数
        console.log(arguments.callee.caller);   //回调当前函数的父级函数
    }

    fn2.a = 10;

    // fn2(3,4,6,7);
    function fn3(fn) {
        fn(3,6,4,7);
    }
    fn3(fn2);

 十二、Math函数

Math常量

案例1：轮播图




    
    轮播图
轮播图

 

【JavaScript】JavaScript

相关

javascript基础知识(29) 实现继承的方式

7个有用的JavaScript技巧

JavaScript跳出嵌套循环

JavaScript常用对象介绍

JavaScript学习day03

推荐12个最好的 JavaScript 图形绘制库

javascript模板字符串（反引号）

javascript 新版本的语法（ECS6）

javascript设计模式阅读后的感悟与总结

【译】理解JavaScript中的柯里化

javascript性能优化

图说js中的this——深入理解javascript中this指针

标签