对象

一、认识对象

• 是键名和键值的集合
• 键名系统识别成字符串,且键名唯一不可重复。
• 键值可以为任意类型，可以重复

二、创建对象

1、字面量创建对象

        var obj = {name:"张三",age:20};
        console.log(obj);
        //注意 ： 键名 ： 1.字符串类型 2.引号可以加也可以不加，一般不加。 3.键名不能重复 。键值 ： 可以任意类型 ；
        let obj = {
            "name":true,
            "age":20,
            fn:function(){
                console.log("fn")
            },
            a:undefined,
            b:null,
            a:20,
            myage:20
            // null:"hello"
        }
        console.log(obj);

2、内置构造函数创建对象

• 构造函数
  

        // 构造函数 其实就是一种特殊的函数，一般约定俗成(不是js的语法规则，大家协商好的规则)首字母大写；通过new 来调用函数；

        function fn(){           // 普通函数
            console.log("fn");
        } 
        fn();
        function Person(){       // 构造函数
            console.log("person")
        }  
        new Person;

• 内置构造函数创建对象
  

        var obj = new Object();
        var obj1 = new Object({name:"zhangzhang",age:18});

3、通过工厂模式创建对象

        function Factory(){
            let obj = {};// 添加原料 ；
            obj.name = "zhangsan";// 加工原料 ；
            obj.age = 18;
            return obj; // 出厂；
        }
        
        var obj = Factory();

4、自定义构造函数创建对象

        function Person(){
            this.name = "zhangsan"; // this 会指向实例化之后的对象
            this.age = 18;
        }
        //new 实例化
        let obj = new Person();

三、获取对象的键值

1、通过 对象.键名 获取

        var obj = {
            myname:"张三",
            age:20,
            fn:function(){
                console.log("fn")
                return "hello";
            }
        }
        console.log(obj.myname);
        console.log(obj.fn());

2、通过 对象["键名"] 获取 （写键名记得写"",可以传变量名）

        var obj = {
            myname:"张三",
            age:20,
            fn:function(){
                console.log("fn")
                return "hello";
            }
        }
        // obj.myname 等同于  obj['myname'];
        console.log(obj['myname'])  //obj.myname;
        obj['fn']();

3、两种方法的区别

    //中括号 可以解析变量 ，但是 .语法不能解析变量；
        var str = "myname";
        var obj = {
            myname:"张三",
            age:20
        }

    // console.log(obj.str); // undefined 等同于 obj['str'];
    console.log( obj[str]);  // 等同于  obj['myname'];

四、对象的删除和修改

1、删除 使用delete关键字删除

       var obj = {
            myname:"张三",  // 字段 ，属性；
            age:20,
            height:"180cm"
        }

        // console.log(obj);
        delete obj.height;  // 删除obj里的height 属性；
        delete obj.age;
        console.log(obj);

2、修改-在原来对象上直接修改

        对象.键名 = 键值 
        对象[键名] = 键值；
        var obj = {
            myname:"张三",
            age:20,
            height:"178cm"
        }

        obj.myname = "李四";  // 修改原来对象的myname属性；
        obj.myhobby = "篮球"; // 如果之前没有这个属性，会追加；
        obj['age'] = 30;
        var myheight = "height";
        obj[myheight] = "180cm";
        console.log(obj);

3、修改-覆盖修改

    var obj = {
            name:"张三",
            age:20
        }

        obj = {
            name:"张三",
            age:20,
            height:"178cm"
        }
        console.log(obj);

五、对象的循环

使用 for in 循环遍历对象

    var obj = {
            name:"张三",
            age:20,
            height:"178cm"
        }

    //    可以通过 for ... in  .. 循环对象；
    // for  key in obj ；  key 键名；

    for(var key in obj){
        // console.log(obj.key) 等同于  obj['key'];
        // obj[key];
        // 第一次 ： obj['name']
        // 第二次 ： obj['age']
        // 第三次 ： obj['height'];
        console.log("键名是"+key +"键值是："+obj[key]);
    }      //对象无length方法

判断对象是否为空对象

        var obj = {
            name:"张三",
            age:20,
            height:"178cm"
        }
        let length = 0;
        for(var key in obj){
            length++;
        }
        if(length>0){
            console.log("不是空对象")
        }else{
            console.log("是空对象");
        }

包装对象 *********

        // 包装对象 ： 简单的数据类型 在调用固有方法的时候会包装成一个对象
        // 简单数据类型 ： 数字 、字符串 、布尔值、undefined 、null、bigInt 、symbol
        // 包装对象 ： 数字 、字符串 、布尔值、bigInt 、symbol
        // 非包装对象 ：undefined 、null 
        // var str = "a-b-c-d";
        // var arr = str.split("-");  // 为什么可以是 .语法 
        // console.log(arr);

        // js执行简单数据类型方法的时候 首先js 会把简单数据类型变成一个对象 ，这个对象就是包装对象 。可以调用 对象下的各种方法，调用完成之后 系统会自动销毁这个包装对象；

数组

• 数组 ： 键值的集合 ；键名 索引 自动生成的；

一、数组的创建

1、字面量创建

        //键名会自动生成，且重0 开始；
        var arr = ["张三","李四",20,null,true,function(){},undefined,{name:"123"},[1,2,3]];
        console.log(arr);

2、内置构造函数

        //1. 只给一个数字参数 
        var arr = new Array(6);  // 创建一个长度为 6的空数组；
        console.log(arr);
        //2.给多个参数 
        var arr = new Array(6,7,8,9);  // 把传入的参数作为数组的键值；
        console.log(arr);

二、数组的循环

1、for循环

        var arr = ["张三","李四","王五"];
        for(var i=0;i<arr.length;i++){
            console.log(i,arr[i]);
        }

2、for in循环

        var arr = ["张三","李四","王五"];
        for(var key in arr){
            console.log(key,arr[key]);
        }

三、数组的添加操作

1、获取值

        var arr = ["张三","李四","王五"];
        //          0       1     2
        // console.log(arr[1]);
        // 2.设置键值 
        arr[1] = "修改了";
        console.log(arr);

2、unshift()在头部添加

        //会改变原本的数组；
        var arr = [1,2,3,4,5];
        arr.unshift("添加的内容");
        arr.unshift("添加的内容2");
        console.log(arr);

3、push() 在尾部添加

        // 会改变原本的数组；
        var arr = [1,2,3,4,5];
        arr.push("添加的内容1");
        arr.push("添加的内容2");
        console.log(arr);

4、在指定位置添加 splice(索引值,删除的个数,"添加的内容")

        var arr = [1,2,3,4,5];
        //         0 1 2 3 4
        arr.splice(1,0,"添加的内容");
        console.log(arr);

四、数组的删除操作

1、修改数组的长度 length

        //设置数组的长度 来删除元素 ；
        var arr = [1, 2, 3, 4, 5];
        arr.length = 3; 
        console.log(arr);

2、 shift() 删除头部的元素

        //是改变原本的数组 ，返还值是被删除的元素；
        var arr = [1, 2, 3, 4, 5];
        var res = arr.shift();
        console.log(res);

3、pop() 删除尾部的元素

        //改变原来的数组，返还值是删除的元素；
        var arr = [1, 2, 3, 4, 5];
        var res = arr.pop();
        console.log(arr);
        console.log(res);

4、splice() 删除指定位置元素

        // 会改变原本的数组，返还值是删除的内容（数组形式）；
        var arr = [1,2,3,4,5];
        var res =  arr.splice(2,1);
        console.log(res);

        // 可以替换元素
        var arr = [1,2,3,4,5];
        arr.splice(1,1,"添加的内容");
        console.log(arr);

5、slice() 截取数组元素

        // 数组.slice(开始截取的索引值,结束截取的索引值);
        // 包前不包后
        // 不会改变原本的数组，截取的内容是返还值；
        var arr = ["张三","李四","王五","王六"];
        //          0       1     2     3
        var res =  arr.slice(1,3);  
        // console.log(arr);
        console.log(res);

五、数组的其他方法

1、join("x")把数组变成字符串 通过"x"拼接

        var res = arr.join(""); //abcd
        var res = arr.join("-"); //a-b-c-d
        var res = arr.join(); // a,b,c,d 

2、concat() 合并多个数组

      var arr1 = [1, 2, 3, 4];
      var arr2 = [5, 6, 7];
      var arr3 = [8, 9];

      var arr4 = arr1.concat(arr2,arr3)

3、反转数组 reverse()

      var arr = ["a", "b", "c", "d"];
      arr.reverse(); 

4、indexOf() 判断某个键值在数组中的索引位置 返回索引值,若键值在数组中不存在 返回-1

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

      var res = arr.indexOf("d"); //3
      var res = arr.indexOf("e"); //-1

5、数组排序 sort()传入一个回调函数,不传参默认按ASCII码排序

      var arr = [4, 2, 1, 3, 6, 9, 5, 22];
      arr.sort(function (a, b) {
        return a - b;
      }); 
      // sort 可以排序对象数组；
     var arr = [
        { name: "张三", age: 20 },
        { name: "张三", age: 19 },
        { name: "张三", age: 21 },
      ];
      arr.sort(function (a, b) {
        return a.age - b.age;
      });
      console.log(arr); 
      
       // 数组的去重
      /* var arr = [1, 1, 2, 3, 4, 4, 5, 6, 6, 6];
      var arr1 = [];
      for (var i = 0; i < arr.length; i++) {
        if (arr1.indexOf(arr[i]) === -1) {
          arr1.push(arr[i]);
        }
      }
      console.log(arr1); */

      //对象键名不重复
      /* var arr = [1, 1, 2, 3, 4, 4, 5, 6, 6, 6];

      var obj = {};
      var arr1 = [];
      for (var i = 0; i < arr.length; i++) {
        obj[arr[i]] = "";
      }
      for (var key in obj) {
        arr1.push(+key);
      }
      console.log(arr1); */