• 从零开始学 Web 之 JavaScript(四)数组


    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

    一、数组

    1、数组定义

    1. 通过字面量定义数组var arr = [10,20,30];
    2. 通过构造函数定义数组var arr = new Array(参数); // 参数位置为一个数值时为数组长度,多个数值时为数组中的元素。如果没有参数的时候 Array后面的括号可以省略。

    2、数组操作

    1. 数组长度: 数组名.length;

    问:数组中存储的数据类型一定是一样的吗?

    类型可以不一样。

    问:数组的长度是不是可以改变呢?

    可以改变。

    3、数组高级API

    3.1、判断数组和转换数组

    instanceof // 是一个关键字,判断A是否是B类型:A instanceof B。
    isArray()    //HTML5中新增 ,判断是不是数组
    toString()    //把数组转换成字符串,每一项用,分割
    valueOf()    //返回数组对象本身
    join(变量)    //根据每个字符把数组元素连起来变成字符串,变量可以有可以没有。不写变量默认用逗号分隔,无缝连接用空字符串。
    

    instanceof

    var str1 = new String("abc");
    var str2 = "abc";
    console.log(str1 instanceof String); // true
    console.log(str2 instanceof String); // false str2不是String对象
    

    join

    //join是把数组元素用特殊方式链接成字符串(参数决定用什么链接,无参默认用逗号链接)
    var arr = ["关羽","张飞","刘备"];
    var str1 = arr.join();
    var str2 = arr.join(" ");//如果用空格的话,那么元素之间会有一个空格
    var str3 = arr.join("");//用空字符串,链接元素,无缝连接
    var str4 = arr.join("&");
    console.log(str1);
    console.log(str2);
    console.log(str3);
    console.log(str4);
    

    arguements

    只在函数中使用,代表传入实参的数组。

    arguements 是伪数组:不能修改长短的数组。(可以修改元素,但是不能变长变短)

    fn(1,2);
    fn(1,2,3);
    fn(1,2,3,4,5);
    function fn(a,b){
        //只在函数中使用,实参的数组。
        arguments[0] = 0; // 可以修改内容
        console.log(arguments);
        //伪数组:不能修改长短的数组。(可以修改元素,但是不能变长变短)
        arguments.push(1);  // arguments 伪数组没有push方法
        console.log(arguments instanceof Array); // false
    
        //形参个数
        console.log(fn.length);
        //实参个数
        console.log(arguments.length);
        // 形参和实参个数可以不同,因为实参传入的时候可以形参的个数不一样。
    
        // arguments.callee相当于函数名,这里打印整个函数。
        console.log(arguments.callee);
    }
    

    3.2、数组增删和换位置(原数组将被修改)

    push() //在数组最后面插入项,返回数组的长度
    //数组1改后的长度 = 数组1.push(元素1);
    
    pop() //取出数组中的最后一项,返回最后一项
    //被删除的元素 = 数组1.pop();
    
    unshift() //在数组最前面插入项,返回数组的长度
    //数组1改后的长度 = 数组1.unshift(元素1);
    
    shift() //取出数组中的第一个元素,返回第一项
    //被删除的元素 = 数组1.shift();
    
    reverse()    //翻转数组(原数组讲被反转,返回值也是被反转后的数组)
    //反转后的数组 = 数组1.reverse();
    
    sort(); //给数组排序,返回排序后的数组。如何排序看参数。
    //从小到大排序后的数组 = 数组1.sort(function(a,b){
    // return a-b;
    //});
    

    sort

    var arr2 = [7,6,15,4,13,2,1];
    console.log(arr2); // 7,6,15,4,13,2,1
    console.log(arr2.sort()); // 1,13,15,2,4,6,7
    

    问题:只能通过第一位字母或数字的 unicode 编码进行排列。

    解决:sort方法不稳定,设计的时候就是这么设计的,可以通过回调函数进行规则设置。

    console.log(arr2);
    console.log(arr2.sort(function (a,b) {
    	return a-b;   //升序   //b-a:降序
    }));
    

    4、迭代方法

    作用:代替 for 循环。

    every

    every() 他的返回值是一个 boolean 类型值。而参数是一个回调函数。
    参数有三个。名字随便起,但是表示的意思还是这样顺序的。

    var arr = ["关长","张飞","赵子龙","马超","黄忠"];
    
    // function (element,index,array)
    // element:数组元素的值
    // index:索引
    // array:调用这个方法的整个数组对象(一般不用)
    
    arr.every(function(fff,www,ggg) {
        console.log(fff);
        console.log(www); 
        console.log(ggg);
        return true;
    }); 
    // 关长
    // 0
    // ["关长", "张飞", "赵龙", "马超", "黄忠"]
    // 张飞
    // 1
    // ["关长", "张飞", "赵龙", "马超", "黄忠"]
    // 赵龙
    // 2
    // ["关长", "张飞", "赵龙", "马超", "黄忠"]
    // 马超
    // 3
    // ["关长", "张飞", "赵龙", "马超", "黄忠"]
    // 黄忠
    // 4
    // ["关长", "张飞", "赵龙", "马超", "黄忠"]
    
    var arr = ["青花瓷", "一路向北", "轨迹"];
        var flag = arr.every(function (ele, index) { // 只要有一个没满足条件,就返回false
         ele.length > 2;
    }); 
    
    console.log(flag); // false
    

    filter

    filter 返回值是一个新数组。return 为 true 的数组。

    var arr = ["关长","张飞","赵子龙","马超","黄忠"];
    var arr1 = arr.filter(function (ele,index,array) {
        if(ele.length>2){
          return true;
        }
        return false;
    });
    
    console.log(arr1); // ["赵子龙"]    
    

    foreach

    foreach 遍历数组(无返回值,纯操作数组中的元素)

    var arr = ["关长","张飞","赵子龙","马超","黄忠"];
    var str = "";
    arr.forEach(function (ele,index,array) {
        str+=ele;
    });
    console.log(str); // 关长张飞赵子龙马超黄忠
    

    map

    map有返回值,返回什么都添加到新数组中。

    var arr = ["关长","张飞","赵子龙","马超","黄忠"];
    var arr2 = arr.map(function (ele,index,array) {
        return ele+"你好";
    })
    
    console.log(arr2); // (5) ["关长你好", "张飞你好", "赵子龙你好", "马超你好", "黄忠你好"]
    

    some

    some有返回值,如果函数结果有一个是true,那么some方法结果也是true。

    var arr = ["关长","张飞","赵子龙","马超","黄忠"];
    var flag = arr.some(function (ele,index,array) {
        if(ele.length>2){
            return true;
        }
        return false;
    })
    
    console.log(flag); // true    
    

    push

    向数组的末尾添加一个或更多元素,并返回新的长度。

    注意: 新元素将添加在数组的末尾。

    注意: 此方法改变数组的长度。

    提示: 在数组起始位置添加元素请使用 unshift() 方法。

    pop

    删除数组的最后一个元素并返回删除的元素。

    注意:此方法改变数组的长度!

    提示: 移除数组第一个元素,请使用 shift() 方法。

    了解方法

    concat() //把参数拼接到当前数组
    //新数组 = 数组1.concat(数组2);
    
    slice() //从当前数组中截取一个新的数组,不影响原来的数组,参数start从0开始,end从1开始
    //新数组 = 数组1.slice(索引1,索引2);
    
    splice()//删除或替换当前数组的某些项目,参数start,deleteCount,options(要替换的项目)
    //新数组 = 数组1.splice(起始索引,结束索引,替换内容);
    
    indexOf()、lastIndexOf() //如果没找到返回-1
    //索引值 = 数组.indexOf/lastIndexOf(数组中的元素);
    
    forEach() // 数组每个元素都执行一次回调函数。
    

    5、清空数组

    var array = [1,2,3,4,5,6];
    
    // 方法一:删除数组中所有项目 
    array.splice(0,array.length); 
    
    // 方法二:length属性可以赋值,其它语言中length是只读
    array.length = 0;
    
    // 方法三:
    array = []; //推荐
    

  • 相关阅读:
    好的文章聚集地
    java连接mysql数据库8.0以上版本过程中遇到的坑
    Tomcat8.5安装与配置的坑
    用阿里fastJson解析Json字符串
    通过java代码HttpRequestUtil(服务器端)发送HTTP请求并解析
    Vue中美元$符号的意思
    java的jdk和jre区别
    java正则
    java8 四大核心函数式接口Function、Consumer、Supplier、Predicate(转载)
    SpringBoot:静态资源的访问和配置(转载)
  • 原文地址:https://www.cnblogs.com/lvonve/p/9163319.html
Copyright © 2020-2023  润新知