数组的创建

定义数组的方式:
    第一种方式:定义数组Array - 字面量形式
      <script>     

    var arr = [];  // 空数组

    // 往里面添加成员(元素)

    arr[0] = "饶梓杭";

    arr[1] = "黄鑫张";

    arr[2] = "张洁";

    // 查看数组 打印对象(数组)快照信息

    console.log(arr);


    // 还可以初始化时 直接添加元素

    var arr = ['a', 'b', 'c'];

    // dir方法 用于展示对象结构

    console.dir(arr); // Array(3)

    // 在页面查看

    // console是在控制台结构化的展示,如果在页面中查看需要转化成字符串

    // 它会隐式的调用继承的toString(),返回一个以逗号拼接的字符串

    // 相当于自定义方法:

    arr.toString = function () {

        return this[0] + ',' + this[1] + ',' +  this[2];

        // return "[object Array]";

    }

    document.write(arr); // a,b,c

    // 数组本质上也是对象

    console.log(typeof arr);  // object

</script>



第二种方式:
      
<script>

    // 使用构造器 创建空数组

    var arr = new Array();

    // 向数组添加元素

    arr[0] = "a";

    arr[1] = "b";

    arr[2] = "c";

    console.dir(arr);

    // 初始化数组元素

    var arr = new Array("a", "b", "c");

    console.dir(arr);

    // 如果给构造器初始化传入一个数值 表示数组的元素个数

    var arr = new Array(10);

    console.log(arr); // 快照会直接展示元素 结果为[empty * 10]

    console.log(arr[0]);  // undefined

</script>

关联数组:

  <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        // 所谓的关联数组指以字符串作为下标的元素

        var arr = ["a", "b", "c"];

        // arr[0] = "a"

        // arr[1] = "b"

        // arr[2] = "c"


        arr["foo"] = "hello";

        arr["bar"] = "world";

        console.dir(arr);

        // 字符串编号的元素 被视作对象的属性

        console.log(arr["foo"], arr.bar);

        // js中的数组和对象完全互通的,除了在数组里面定义字符串下标外,也可以在对象里面定义数字属性

        var obj = {

            // 数字编号的属性

            0 : "a",

            1 : "b",

            2 : "c",

            foo : "foo",

            bar : "bar",

        }

        console.dir(obj);

        console.log(obj.foo, obj.bar); // foo bar

        console.log(obj[0], obj[1], obj[2]); // a b c

        // 数组本质上就是对象 只不过具有额外功能层的对象,就是在对象基础上延伸了 数字编号的 属性,其中数字编号的部分被理解成

        // 数组成员,并支持[]语法来操作

        var arr = ['a', 'b', 'c'];

        arr["foo"] = "foo";

        arr["bar"] = "bar";

        // 显示数组的长度(个数)

        console.log(arr.length); // 3

    </script>

</body>

</html>

for循环遍历数组:
   
   <script>

        /*

        * for 循环遍历数组元素有2个限制条件

        */

        // 1、数组编号必须是连续的

        var arr = ['a', 'b']; // 0 1

        // 跳过...arr[2]

        arr[3] = 'd';

        // 打印快站时 缺少元素 显示效果为empty

        console.log(arr); // ['a', 'b',empty, 'd']

        // 取值为undefined

        console.log(arr[2]);

        // 2、for循环的是下标 不能遍历对象属性

        arr["foo"] = "foo";

        arr["bar"] = "bar";

        for (var i = 0; i < arr.length; i++) {

            console.log(arr[i]);

        } // a b undefined d


    </script>

for ...in遍历数组:
   <script>

    /*

    * 使用for...in遍历对象属性,它也有2个限制

    * 1、遍历出来的属性的顺序 不可控

    * 2、不能遍历继承的属性

    */

    var person = {

        name : "zhangsan",

        sex : "male",

        age : 18,

        study () {

            return "床前明月光,疑是地上霜"

        },

        sing () {

            return "一人我饮酒醉,错把佳人成双对"

        }

    }

    // 定义变量p 用来接收person中的属性

    // p始终代表在person对象里面的某个属性

    // for的过程 会自动循环 p值一直在更新

    var i = 0;

    for (var p in person) {

        console.log(i++, p);

        // 接下来取属性的值 .运算符后面跟着的只能是硬编码的字符(标志符) 不能解析变量名

        // 只用[]里面可以解析变量

        console.log(person.p, person[p]); 

    }

</script>

数组的方法:

<!-- 学习内置函数方法的几个关键点:

    1、函数名

    2、函数参数,有几个参数 分别代表什么含义

    3、函数返回值是什么!!!! -->

    <script>

        var arr = ['a', 'b', 'c', 'b'];

        /*

        * 查询索引的方法

        */

        // 元素在数组中的位置

        console.log(arr.indexOf('b')); // 1

        // 元素在数组中最后出现的位置

        console.log(arr.lastIndexOf('b')); // 3

        /*

        * 检测元素

        */

        // 判断数组中是否存在某个元素

        console.log(arr.includes("e")); // false

        console.log(arr.includes("b")); // true

        /*

        * 截取数组

        */

        // 截取数组的一部分,它有2个参数 分别是截取的起始位置和结束位置(不包含)

        // 它返回的是截取出来的新数组,原数组不变,其实slice是在复制

        console.log(arr.slice(1, 3)); // ['b', 'c']

        console.log(arr); // ['a','b','c','b']

        // 删除数组元素,它返回的是删除的元素,但是原数组本身已经改变

        console.log(arr.splice(1, 2)); // ["b", "c"]

        console.log(arr); // ['a', 'b']

        /*

        * 队列方法:愁边动角寒 夜久意难平

        */

        var arr = ['a', 'b', 'c', 'd']

        // 在数组头部添加元素 返回操作之后的数组长度

        console.log(arr.unshift(0)); // 5

        // 原数组已经发生改变

        console.log(arr); // [0, 'a', 'b', 'c', 'd'];

        // 在头部删除元素 返回被删除的元素

        console.log(arr.shift()); // 0

        console.log(arr);

        // 尾部添加一个元素 返回操作之后的数组长度

        console.log(arr.push("e")); // 5

        console.log(arr); // ['a', 'b', 'c', 'd', 'e'];

        // 尾部删除一个元素 返回被删除的元素

        console.log(arr.pop()); // e

        console.log(arr); //['a', 'b', 'c', 'd']

        /*

        * 其他常用方法

        */

        var arr = [1,2,3,4,5];

        // 将数组元素拼接成字符串

        console.log(arr.join("<")); // 1<2<3<4<5

        // 合并数组

        var arr2 = [6,7,8,9,10];

        console.log(arr.concat(arr2)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

    </script>

字符串方法:

<script>

    // 创建字符串 - 数组类型

    var str = "hello world"; // 字面量

    // 创建字符串 - 对象类型

    var str = new String("hello world"); // 构造器

    console.dir(str);

    // 查看字符串长度

    console.log(str.length); // 11

    // 通过编号取字符

    console.log(str[1]); // e

    console.log(str.charAt(1)); // e

    /*

    * 由值找索引

    */

    console.log(str.indexOf("o")); // 4

    console.log(str.lastIndexOf("o")); // 7

    /*

    * 字符串截取

    */

    // 不包括结束位置,如果不传第二个参数 则表示截取到末尾

    console.log(str.slice(6, 11)); // world

    // 第二个参数是截取的长度

    console.log(str.substr(6, 5)); // world

    // 字符串检测,是否包含某个内容

    var gname = "神舟十二号航天员指定太空用奶 伊利 纯牛奶 真正的牛奶"

    if (gname.includes("伊利")) {

        console.log("显示该商品")

    }

    var name = "#user",

        cont = "神舟十二号航天员指定太空用奶 伊利 纯牛奶 真正的牛奶.";

    // 检测字符串开头

    if (name.startsWith("#")) {

        console.log("id选择器");

    } else if (name.startsWith(".")) {

        console.log("类选择器");

    }

    // 检测字符串结尾

    if (cont.endsWith(".")) {

        console.log("一句完整的话")

    } else {

        console.log("没有结束的话");

    }

    // 大小写转化

    var code = "Xi2d"; // 系统生成的验证码

    var user = "xI2d"; // 用户输入的验证码

    // 比较的要求是不区分大小写,所以需要统一转化

    if (code.toLowerCase() == user.toLowerCase()) {

        console.log("输入正确");

    } else {

        console.log("输入不正确");

    }

    var nickname = "冷光~秋月";

    if (nickname.trim() == "") {

        console.log("输入不能为空");

    }

</script>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容