JavaScript 数组和对象

数组

• 数组：一组数据的集合，数组的每一个数据叫做一个元素

• 数组元素可以是任何类型，同一个数组中的不同元素可能是对象或数组

• 每个数组都具有一个length属性，通过该属性可以获取数组长度，并且可以给一个数组length赋值定义长度

• 数组中每个元素在数组中有一个位置，以数字表示，称为索引（下标）

• 索引从0开始排列，[0]表示第一个数据，以此类推

• 数组的数据类型是一个对象，其实就是个加了数字索引和length属性的特殊对象

---

数组创建方法

隐式方法

   var arr = ["梨子", "橙子", "橘子"];
   var arr2 = [1, "小张", true, ["OliGit", 2], {}];
   var arr3 = [];

---

直接实例化，通过构造函数Array()创造

   // 1.直接把数组元素写到括号里
   var arr = new Array("OliGit", 12, "哈哈");

   // 2.创建数组并给数组元素赋值
   var arr2 = new Array();
   arr2[0] = "haha";
   arr2[1] = "heiha";
   arr2[2] = "heihei";

   // 3.规定数组初始的长度，并给数组元素赋值;数组长度动态调整
   var arr3 = new Array(3);
   arr3[0] = "haha";
   arr3[1] = "heiha";
   arr3[2] = "heihei";
   arr3[3] = "hihihi";
   arr3[4] = "enenen";

---

数组基本操作

• arr.toString()：将数组转换为字符串，保留逗号
• arr.join(“分隔符”)：将数组转成一个字符串，原来的数组会保留；参数为分隔符，省略的话则用默认逗号作为分隔符
• Array.from(str)：将伪数组转成数组，只要有length属性的就可以转成数组
• arr.pop()：移除数组末尾最后一项，减少数组的length值，然后返回移除的元素，而且会直接修改原数组
• arr.push()：用于向数组的末尾添加一个或多个元素，并返回修改后数组的长度，而且会直接修改原数组
• arr.shift()：删除数组开头第一项，减少数组的length值，然后返回移除的元素；而且会直接修改原数组
• arr.unshift()：用于向数组的开头添加一个或多个元素，并返回修改后数组的长度，而且会直接修改原数组
• arr.splice()：实现删除，插入，替换，截取，返回值为截取的数组元素，而且会直接修改原数组
  a、参数一：起始位置索引
  b、参数二：截取元素个数，如果是插入元素即为0
  c、参数三：插入的元素（可选），可以同时插入多个元素
• arr.slice(开始下标，结束下标)：截取指定下标的数组或字符串元素，返回截取的数组元素，不会修改原数组
  a、如果省略结束下标，则截取后面所有元素
  b、截取不包含结束下标的元素
  c、可以为负值
• arr.indexOf()：查找指定元素的下标，从前往后查找；若有重复，则返回第一个查到的下标；若不存在，则返回-1
• arr.lastIndexOf()：查找指定元素的下标，从后往前查找；若有重复，则返回第一个查到的下标；若不存在，则返回-1
• arr.concat()：合并两个或多个数组；返回一个新的数组，不会修改原数组，也可以在concat方法中直接添加元素
• arr.reverse()：反转数组元素的顺序，会修改原数组；返回值并不是排序后的数组，而是数组的引用
• arr.sort(比较函数)：用于对数组的元素进行排序
  a、默认：无参数情况下，按升序排序数组项，即最小的值位于最前面，最大的值排在最后面；会修改原数组；会转成字符串再比较，并从第1个字符进行比较
  b、参数为比较函数，规定数组排序顺序；比较函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字
  c、比较函数应该有两个参数 a 和 b，其返回值如下：
  （1）、若a 小于 b，在排序后的数组中 a 应该出现在b 之前，则返回一个小于0的值
  （2）、若a 等于 b，则返回0
  （3）、若a 大于 b，则返回一个大于0的值

	<script>
        // 升序排列
        function asc(a, b){
            if(a<b){
                return -1;
            }else if(a>b){
                return 1;
            }else{
                return 0;
            };
        };
        // 降序排列
        function des(a, b){
            if(a<b){
                return 1;
            }else if(a>b){
                return -1;
            }else{
                return 0;
            };
        }
        var arr = [12, 1, 35, 3, 9, 34];

        var b = arr.sort(des);

        alert(arr);
        alert(b);
	</script>

• arr.filter(过滤函数)：把数组中的某些元素过滤掉，然后返回剩下的元素，接收的是一个回调函数；数组中的每一项运行给定函数，返回满足过滤条件组成的新数组，不会修改原数组

    <script>
        function guolv(x){
            return x>10;
        }
        var arr = [12, 1, 35, 3, 9, 34];

        var b = arr.filter(guolv);

        alert(arr);
        alert(b);
    </script>

• 遍历数组去重复：建立一个新数组，然后循环遍历要去重复的数组，每次判断新数组不包含旧数组的值时（新数组用indexOf方法检索旧数组的值返回结果等于-1）将该值加入新数组

    <script>
        function qcf(arr){
            var abc = [];
            for(var i = 0; i < arr.length; i++){
                if(abc.indexOf(arr[i]) == -1){
                    abc.push(arr[i]);
                }
            }
            return abc;
        }
        var arr1 = [12, 1, 35, 3, 9, 34, 1, 12, 3];

        var b = qcf(arr1);

        alert(arr1);
        alert(b);
    </script>

• set方法去重复：它类似数组，但是成员的值都是唯一的，没有重复的值

    <script>
        var arr = [1, 1, 2, 2, 3];

        // 1、数组转set
        var set = new Set(arr);

        alert(arr);//[1, 1, 2, 2, 3]
        console.log(set);//[1, 2, 3]

        // 2、set转数组
        var arr2 = Array.from(set);
        var arr3 = [...set];//简写
        alert(arr2);//[1, 2, 3]
        alert(arr3);//[1, 2, 3]

        // 3、has()判断一个值是否在set中，返回布尔值，在为true，不在为false
        console.log(set.has(1));
        console.log(set.has(5));
    </script>

• 数组并集，交集，差集

    <script>
        var arr1 = [1, 2, 3];
        var arr2 = [2, 3, 4];
        var a = new Set(arr1);
        var b = new Set(arr2);

        // 1、并集：a+b再把重复去掉->[1, 2, 3, 4]
        var un = new Set([...a, ...b]);
        console.log(un);

        // 2、交集：a和b共同的部分->[2, 3]
        var is = new Set([...a].filter(x => b.has(x)));
        // function(x){
        //     return b.has(x);
        // }
        console.log(is);

        // 3、差集：a-b [1]
        var df = new Set([...a].filter(x => !b.has(x)));
        console.log(df);
    </script>

---

遍历数组

for-in 遍历数组

• for-in语句遍历数组的下标

    var student = {"name" : "OliGit", "age" : 23, "id" : 2333};
    for (stu in student){
        document.write(stu + "<br>");  //stu为键
        document.write(student[stu] + "<hr>");            
    }

    var arr00 = new Array("元素1", "元素2", "元素3", "元素4", "元素5")
    for (index in arr00){
        document.write(index + "<br>");  //index为数组下标
        document.write(arr00[index] + "<hr>");
    }

---

for-of 遍历数组

• for-of语句遍历数组的元素

    var arr00 = new Array("元素1", "元素2", "元素3", "元素4", "元素5")
    for (value of arr00){
        document.write(value + "<br>");  
    }

---

对象

• js中的所有事物都是对象：字符串、数值、数组、函数。。。
• js对象属性指的是对象相关的值。js对象是无序属性的集合
• 属性按照 名称 ：值 对的形式编写（名称和值以冒号分隔）

对象创建方法

json模式创建对象，创建对象用{}号；（最主要的形式）

var ren = {name : "Oligit", sex : "man", age : 12, height : "1.8"};

---

直接实例化，通过构造函数Object()创建对象

var ren = new Object();
ren.name = "OliGit";
ren.sex = "man";

对象基本操作

访问对象属性

    var ren = {name : "Oligit", sex : "man", age : 12, height : "1.8"};
    // 1、对象名["属性名"]
    var a = ren["name"];    

    //2、对象名.属性名（用得最多）
    var a = ren.sex; 
     console.log(a);  

---

添加对象属性

    var ren = {name : "Oligit", sex : "man", age : 12, height : "1.8"};
    // 1、对象名["属性名"] = 属性值;
    ren["id"] = "2333";
    //2、对象名.属性名 = 属性值;
    ren.yiFu = "t-shirt";
    console.log(ren);

---

对象在函数内添加属性或方法

   // 对象在函数内添加属性或方法
   function addInfo(key, value){
       var ren = {name : "苦涩"};
       // 方式一：对象名.属性名 = 属性值，该方式错误，结果为：{name:"苦涩", key:20},此处属性名为key，而不是age
       // ren.key = value;

       // 方式二：：对象名["属性名"] = 属性值，该方式正确，可以正确添加属性或方法，结果为：{name:"苦涩", age:20}
       ren[key] = value;

       console.log(ren);
   }

   addInfo("age", 20);

---

修改对象属性

    var ren = {name : "Oligit", sex : "man", age : 12, height : "1.8"};
    // 1、对象名["属性名"] = 属性值;
    ren["age"] = 15;

    //2、对象名.属性名 = 属性值;
    ren.height = 1.85;
    console.log(ren);  

---

删除对象属性

    var ren = {name : "Oligit", sex : "man", age : 12, height : "1.8"};
    // 1、delete 对象名["属性名"]
    delete ren["age"];

    //2、delete 对象名.属性名
    delete ren.height;
    console.log(ren);  

---

合并对象

• Object.assign()：用于对象的合并；第一个参数是目标对象，后面的参数都是源对象，将源对象的属性，复制到目标对象中；会修改目标对象，但不会修改源对象

    <script>
        var obj1 = {a:1};
        var obj2 = {b:2};
       
       var obj = Object.assign(obj1, obj2);
        
        console.log(obj1); //{a:1, b:2}
        console.log(obj2);//{b:2}
        console.log(obj);//{a:1, b:2}
    </script>

• 如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性

	    var obj1 = {a:1, b:1};
        var obj2 = {b:2, c:2};
       
        var obj = Object.assign(obj1, obj2);
        
        console.log(obj1); //{a:1, b:2, c:2}
        console.log(obj2);//{b:2, c:2}
        console.log(obj);//{a:1, b:2, c:2}

• 多个对象合并

        var obj1 = {a:1, b:1};
        var obj2 = {b:2, c:2};
        var obj3 = {c:3, d:4};
       
        var obj = Object.assign(obj1, obj2, obj3);
        
        console.log(obj1); //{a:1, b:2, c:3, d:4}
        console.log(obj2);//{b:2, c:2}
        console.log(obj3);//{c:3, d:4}
        console.log(obj);//{a:1, b:2, c:3, d:4}

---

获取对象属性名和属性值

• Object.keys()：用于返回对象可枚举的属性名或方法名，返回的结果是一个数组
• Object.values()：用于返回对象可枚举的属性值，返回的结果是一个数组
• 可枚举就是可遍历的意思，也就是说对象的属性是否能够通过遍历得到

    <script>
        var obj = {a:1, b:2, c:3, d:4};
        
        var a = Object.keys(obj);
        var b = Object.values(obj);

        console.log(a);//["a", "b", "c", "d"]
        console.log(b);//[1, 2, 3, 4]
    </script>

---

判断属性及销毁对象

• 判断对象中是否包含某个属性：in操作符

    <script>
        var obj = {a:1, b:2, c:3, d:4};

        // 判断对象中是否包含某个属性：in操作符
        var a = "b" in obj;//true 表示有这个属性
        var b = "f" in obj;//false 表示没有这个属性

        alert(a);
    </script>

• 销毁对象：对象=null

    <script>
        var obj = {a:1, b:2, c:3, d:4};
		//销毁对象: 对象=null
        console.log(obj);//{a:1, b:2, c:3, d:4}
        obj = null;
        console.log(obj);//null
    </script>

---

对象的易变性

变量的不易变性

   var a = "aaaa";
   var b = a;
   document.write(a + "<br>");//aaa
   document.write(b + "<br>");//aaa

   b = "bbb"; 
   document.write(a + "<br>");//aaa
   document.write(b + "<br>");//bbb

---

对象的易变性

   var a = {name : "Oligit", sex : "man"};
   var b = a;
   console.log(a);// {name : "Oligit", sex : "man"};
   console.log(b);// {name : "Oligit", sex : "man"};

   b.name = "hahahaha";
   console.log(a);// {name : "hahahaha", sex : "man"};
   console.log(b);// {name : "hahahaha", sex : "man"};

---

遍历对象

   var ren = {name : "Oligit", sex : "man", age : 15};
   
   for (r in ren){
       // document.write(r + " -> " + ren.r + "<br>");不可用

       document.write(r + " -> " + ren[r] + "<br>");
   };

---

构造函数

构造函数：主要功能初始化对象，可以想象成一套模板或一套方案；通过new 函数名来实例化对象的函数叫构造函数；new就是在创建对象，从无到有，构造函数就是在为初始化的对象添加属性和方法

    function Ren(){
        // this:表示当前构造函数，没有具体的名称
        this.name = "";
        this.sex = "man";
        this.age = "20";
        this.say = function(){
            alert("大家好！");
        }
    };
    // 通过new方法来创建xiaoMing对象
    // 通过new的方法创建具体的对象时，this具有具体名称，现在this就表示xiaoMing，表示当前调用者
    var xiaoMing = new Ren();
    
    // 修改数据
    xiaoMing.name = "Oligit";
    xiaoMing["age"] = "21";
    console.log(xiaoMing);

    // 调用数据
    xiaoMing.say();