19js学习第六天数组第1部分

// 01JavaScript数组对象
    // 数的组合
    // 使用单独的变量命储存一系列的值，一个容器储存多个元素。

    // 单独声明变量  储存数据
    var name1 = "唐僧";
    var name2 = "孙悟空";
    var name3 = "猪悟能";
    var name4 = "沙悟净";

    // 使用数组将 一系列的值进行储存
    var aNames = ["唐僧", "孙悟空", "猪悟能", "沙悟净"];
    
    var bai1 = {
        name: "白龙马1",
        prop: "蹄朝西"
    }
    var bai2 = {
        name: "白龙马2",
        prop: "蹄朝西"
    }
    var bai3 = {
        name: "白龙马3",
        prop: "蹄朝西"
    }

    var aBais = [{
            name: "白龙马1",
            prop: "蹄朝西"
        }, {
            name: "白龙马2",
            prop: "蹄朝西"
        }, {
            name: "白龙马3",
            prop: "蹄朝西"
        }
    ]

  // 02JavaScript数组的创建

    // 1.字面量  []
    var arr=[1,2,3,4,5,6,7];
    console.log(arr);

    // 2.常规方式  构造函数 new关键字
    var arr2=new Array();
    // 添加数组项/元素
    arr2[0]="A";
    arr2[1]="B";
    arr2[2]="C";
    console.log(arr2);

    // 3.简写
    var arr3=new Array("唐僧","孙悟空","猪悟能","沙悟净");
    console.log(arr3);
    // 注意： 数组项为数字，且只有一个数组项  代表是数组项的个数
    var arr4=new Array(5);
    console.log(arr4);  
    
 

  // 03JavaScript数组的访问

    var arr3=new Array("唐僧","孙悟空","猪悟能","沙悟净");
    console.log(arr3);

    // 通过索引进行访问
    // 索引：由0开始的整数   所有的数组都有索引
    console.log(arr3[0]);
    console.log(arr3[1]);
    console.log(arr3[2]);
    console.log(arr3[3]);

    console.log(typeof arr3);

    // for循环 遍历数组的项
    for(var i=0;i<4;i++){
        console.log(arr3[i])
    }

    var person={
        name:"张三"
    }
    console.log(person["name"]);

  // 04JavaScript数组添加项

    var arr3=new Array("唐僧","孙悟空","猪悟能","沙悟净");
    console.log(arr3);

    // 通过索引 添加数组项
    arr3[4]="白龙马";
    arr3[5]="白龙马";
    arr3[6]="白龙马";
    arr3[1]="六耳猕猴";
    arr3[10]="曹帅";
    console.log(arr3);

 // 05JavaScript数组的属性

    var arr=new Array("唐僧","孙悟空","猪悟能","沙悟净");
    var arr2=["唐僧","孙悟空","猪悟能","沙悟净","白龙马"];

    console.log(arr);
    console.log(arr2);
    // - length：设置或返回数组元素的个数
    // 获取  length比数组最大索引+1
    console.log(arr.length);//4  
    console.log(arr2.length);//5

    // 设置 长度
    arr.length=10;
    console.log(arr);// 长度超过了原数组的长度  超出元素为undefined

    arr2.length=3;
    console.log(arr2);// 长度小于原数组的常速  删除超出部分的元素

    // var arr3=new Array();
    // arr3.length=10;

    for(var i=0;i<arr.length;i++){
        console.log(arr[i])
    }

    // - constructor：返回创建数组对象的原型函数
    // 通过 哪个函数  构造传来的  返回哪个函数
    console.log(arr.constructor);
    console.log(arr2.constructor);

    // - prototype：允许向数组对象(Array)添加属性或方法
    Array.prototype.name="数组";
    var arrx=new Array();
    console.log(arrx.name);

    console.log(Array.prototype);

    

    

 // 06JavaScript数组的方法
    var arr1=[1,2,3];
    var arr2=[4,5,6];
    var arr3=["A","B","C","D","E","F","G"];

    // 数组的方法，  **方法的作用 方法返回的结果**
    // concat()    连接两个或更多的数组，并返回结果。
    console.log(arr1.concat(arr2,arr3));//返回新数组
    console.log(arr1);//原数组不变

    // 删除和添加
    // pop()  删除数组的最后一个元素并返回删除的元素。
    console.log(arr1.pop());//返回被删除的元素
    console.log(arr1);//[1, 2]  改变原数组
    
    // push()    向数组的末尾添加一个或更多元素，并返回新的长度。
    console.log(arr1.push(3));//3
    console.log(arr1.push(10,20,30));//6  新数组的长度
    console.log(arr1);// 改变原数组

    // shift()    删除并返回数组的第一个元素。
    console.log(arr1.shift());//1
    console.log(arr1);// 改变原数组

    // unshift()  向数组的开头添加一个或更多元素，并返回新的长度。
    console.log(arr1.unshift(1,0));// 7
    console.log(arr1);// 改变原数组

    // slice(开始的索引,结束的索引) 选取数组的一部分，并返回一个新数组。
    // 留头不留尾 
    console.log(arr1.slice(0,4));// 截取数组
    console.log(arr1);// 原数组不变

    // splice(开始的索引,截取的长度,添加的元素) 从数组中添加或删除元素。
    // console.log(arr1.splice(1,4));// 删除
    console.log(arr1.splice(1,0,"A","B","C",10,20,30));// 添加
    console.log(arr1);// 改变原数组

    // 搜索数组项的位置
    // indexOf(被搜索的元素) 搜索数组中的元素，并返回它第一次出现的位置。
    console.log(arr1.indexOf(1));//0
    console.log(arr1.indexOf("A"));//1
    console.log(arr1.indexOf(30));//6
    console.log(arr1.indexOf("W"));// -1  找不到被检索的元素 返回-1
    // if(arr1.indexOf("W")===-1){
    //     console.log("W不存在")
    // }

    // lastIndexOf() 搜索数组中的元素，并返回它最后出现的位置。
    console.log(arr1.lastIndexOf(30));//12
    console.log(arr1.lastIndexOf("X"));//-1

    // join() 把数组的所有元素放入一个字符串。 数组转为字符串
    console.log(arr2.join());
    console.log(arr2);// 不改变原数组

    // split(转换的标识符) 将字符串转换为数组   字符串的方法
    var str="hello"
    console.log(str.split(""));

    // reverse() 反转数组的元素顺序。
    console.log(arr3.reverse());
    console.log(arr3);// 改变原数组

    // 反转字符串   好你

  // 反转字符串  你好 --> 好你
    var str = "你好";
    // 字符串转换为数组
    console.log(str.split("").reverse().join(""))

    // toString() 把数组转换为字符串，并返回结果
    console.log(arr3.toString())
    // valueOf() 返回数组对象的原始值。
    console.log(arr3.valueOf());
    // isArray() 判断对象是否为数组
    var str="";
    console.log(Array.isArray(str))
  

    

    

    // 淘宝商城 --> 各种商品 --> 商品信息是储存在数据中(图片，价格，标题，库存...) 
    // 一件商品  
    var product = {
        title: "原装正品无线蓝牙耳机",
        imgSrc: "https://img.alicdn.com/imgextra/i3/2208306095661/O1CN01Sn9V5b1rgmsGgpK7c_!!2208306095661.png_60x60q90.jpg",
        price: "43.80-53.80",
        count: 888
    }

    // 多件商品
    var products = [{
        title: "原装正品无线蓝牙耳机",
        imgSrc: "https://img.alicdn.com/imgextra/i3/2208306095661/O1CN01Sn9V5b1rgmsGgpK7c_!!2208306095661.png_60x60q90.jpg",
        price: "43.80-53.80",
        count: 888
    }, {
        title: "原装正品无线蓝牙耳机",
        imgSrc: "https://img.alicdn.com/imgextra/i3/2208306095661/O1CN01Sn9V5b1rgmsGgpK7c_!!2208306095661.png_60x60q90.jpg",
        price: "43.80-53.80",
        count: 888
    }, {
        title: "原装正品无线蓝牙耳机",
        imgSrc: "https://img.alicdn.com/imgextra/i3/2208306095661/O1CN01Sn9V5b1rgmsGgpK7c_!!2208306095661.png_60x60q90.jpg",
        price: "43.80-53.80",
        count: 888
    }, {
        title: "原装正品无线蓝牙耳机",
        imgSrc: "https://img.alicdn.com/imgextra/i3/2208306095661/O1CN01Sn9V5b1rgmsGgpK7c_!!2208306095661.png_60x60q90.jpg",
        price: "43.80-53.80",
        count: 888
    }]