javascript --- ES6和对象2

9. 对象遍历

9.1 在JavaScript中对象和数组一样是可以遍历的
9.2 什么是对象的遍历？
     对象的遍历就是依次取出对象中所有的属性和方法
9.3 如何遍历一个对象?
     1. 在JS中可以通过高级for循环来遍历对象
     2. 以下代码的含义: 将指定对象中所有的属性和方法的名称取出来了依次的赋值给key这个变量
         for(let key in obj){}
         

        class Person {
            constructor(name,age) {
                this.name = name
                this.age = age
            }
            say(){
                console.log('say方法')
            }
        }
        let p = new Person('liu',24);
        for (let key in p) {
            console.log(key) //name,age
            //注意点: 以下代码的含义取出p对象中名称叫做当前遍历到的名称的属性或者方法的取值
            console.log(p[key]) //liu,24 相当于p["name"]  p["age"]
            //注意点: 以下代码的含义取出p对象中名称叫做key的属性的取值
            console.log(p.key) //undefined
        }

10. 对象解构赋值

10.1 注意点: 在对象解构赋值中, 左边的变量名称必须和对象的属性名称一致, 才能解构出数据
        let obj = {
            name: 'liu',
            age: 24
        }
        let {name,age} = obj
        console.log(name,age)
10.2 解构赋值应用场景
        //数组
        let arr = [1,3]
        function sum(a,b){
            return a+b
        }
        let res =sum(arr[0],arr[1])
        console.log(res)
        
        //解构赋值
        let arr = [1,3]
        function sum([a,b]){
            return a+b
        }
        let res = sum(arr)
        console.log(res)
        
        //对象
        let obj = {
            name: 'liu',
            age: 24
        }
        function say(name,age){
            console.log(name,age)
        }
        say(obj.name,obj.age)
        
        //解构赋值
        let obj = {
            name: 'liu',
            age: 24
        }
        function say({name,age}){
            console.log(name,age)
        }
        say(obj)

11. 浅拷贝和深拷贝

11.1 浅拷贝：修改新变量的值会影响原有的变量的值,默认情况下引用类型都是浅拷贝.
        class Person {
            constructor(name,age) {
                this.name = name
                this.age = age
            }
        }
        let p1 = new Person('liu',24)
        let p2 = p1
        p2.name = 'fu'
        console.log(p1.name);  //fu
        console.log(p2.name);  //fu
        
11.2 深拷贝：修改新变量的值不会影响原有变量的值,默认情况下基本数据类型都是深拷贝.
        let num1 = 10
        let num2 = num1
        num2 = 666
        console.log(num1);  //10
        console.log(num2);  //666
11.3 浅拷贝转换深拷贝
     //实现深拷贝一：
    class Person {
        constructor(name,age) {
            this.name = name
            this.age = age
        }
    }
    let p1 = new Person('liu',24)

    let obj = new Object();
    // obj.name = p1.name
    // obj.age = p1.age
    for(let key in p1){
        obj[key] = p1[key]
    }
    obj.name = 'fu'
    console.log(p1.name);  //liu
    console.log(obj.name);  //fu
    
    //实现深拷贝二：
    Object.assign方法可以将第二个参数的对象的属性和方法拷贝到第一个参数的对象中
    注意点: 只有被拷贝对象中所有属性都是基本数据类型, 以上代码才是深拷贝
    class Person {
        constructor(name,age) {
            this.name = name
            this.age = age
        }
    }
    let p1 = new Person('liu',24)

    let obj = new Object();
    Object.assign(obj,p1)

    obj.name = 'fu'
    console.log(p1.name);  //liu
    console.log(obj.name);  //fu
    
11.4 自定义方法实现深拷贝
     //深拷贝
    class Person {
        constructor(name,age) {
            this.name = name
            this.cat = {
                age: 24
            }

        }
    }
    let p1 = new Person('liu',24)

    let obj = new Object();

    //depCopy方实现了深拷贝,包括引用数据类型
    depCopy(obj,p1)
    console.log(obj);
    obj.cat.age = 28
    console.log(p1.cat.age);  //24 
    console.log(obj.cat.age); //28 

    function depCopy(target,source){
        //1.通过遍历拿到source中所有的属性
        for (let key in source) {
            //2.取出当前遍历到的属性对应的取值
            let sourceValue = source[key]
            //3.判断当前的取值是否是引用数据类型
            if(sourceValue instanceof Object){
                //console.log(sourceValue);  //age:24
                //console.log(sourceValue.constructor);  Object()
                //console.log(new sourceValue.constructor);  {}空对象
                let subTarget = new sourceValue.constructor
                target[key] = subTarget
                depCopy(subTarget, sourceValue);
            }else{
                target[key] = sourceValue
                //console.log(target[key]);  liu,24
            }
        }
    }

12. 字符串常用方法

12.1 在js中字符串可以看做一个特殊的数组, 所以大部分数组的属性/方法字符串都可以使用
12.2 获取字符串长度  .length
        let str1 = 'liu'
        console.log(str1.length);  //3
        
12.3 获取某个字符 [索引] / charAt
       let str2 = 'liu'
       //let ch = str2[2] //3 有兼容性问题,只有高级浏览器支持
       let ch = str2.charAt(0) //没有兼容性问题
       console.log(ch);  //l
       
12.4 字符串查找 indexOf / lastIndexOf / includes
      1. let str3 = 'chinese'
         let index = str3.indexOf('e')    
         console.log(index)  //4 从左往右查找
       
      2. let str3 = 'chinese'
         let index = str3.lastIndexOf('e')  
         console.log(index);  //6 从右往做查找
       
      3. let res1 = str3.includes('c')
         let res2 = str3.includes('a')
         console.log(res1);  //true
         console.log(res2);  //false
         
12.5 拼接字符串 concat / +
      1. let str1 = 'liu'
         let str2 = 'yu'
         let str = str1+ str2
         console.log(str);  //liuyu 开发中推荐使用
      
      2. let str1 = 'liu'
         let str2 = 'yu'
         let str = str1.concat(str2)
         console.log(str);  //liuyu 不推荐使用 
     
12.6 截取子串 slice / substring / substr
      1. slice方法：从索引1开始,索引3结束,不包括索引3
           let str = 'chinese'
           let res = str.slice(1,3)
           console.log(res);  //hi
           
      2. substring方法：从索引1开始,索引3结束,不包括索引3
           let str = 'chinese'
           let res = str.substring(1,3)
           console.log(res);  //hi
           
      3. substr方法：从索引1开始,索引3结束,包括索引3
           let str = 'chinese'
           let res = str.substr(1,3)
           console.log(res);  //hin

12.7 字符串切割  
      1. join方法将数组变成字符串
          let arr = [1,3,5]
          let str = arr.join('-')
          console.log(str);  //1-3-5
          console.log(typeof str);  //string
      
      2. split方法将字符串编程数组 
          let newArr = str.split('-')
          console.log(newArr);  //['1','3','5']
      
12.8 判断是否以指定字符串开头 ES6
      let str = 'str'
      let res = str.startsWith('s')
      console.log(res);  //true
      
      let str = 'www.study.com'
      let res = str.startsWith('www')
      console.log(res);  //true

12.9 判断是否以指定字符串结尾 ES6
      let str1 = 'str'
      let res1 = str1.endsWith('r')
      console.log(res1);  //true
      
      let str = 'www.study.com'
      let res = str.endsWith('com')
      console.log(res);  //true   
        
12.9 字符串模板 ES6
      let name = "lnj";
      let age = 34;
      //let str = "我的名字是" + name + ",我的年龄是" + age;
      let str = `我的名字是${name},我的年龄是${age}`;
      console.log(str);  //我的名字是lnj,我的年龄是34

13. 基本数据类型和基本包装类型

13.1 有哪些基本数据类型?
    字符串类型 / 数值类型 / 布尔类型 / 空类型 / 未定义类型

13.2 通过字面量创建的基本数据类型的数据都是常量

13.3 常量的特点和注意点
    常量是不能被修改的
    每次修改或者拼接都是生成一个新的

13.4 基本类型特点：没有属性和方法
     let str = "lnj";
     str.age = 34;
     str.say = function () {
        console.log("hello");
     }
     console.log(str.age); // undefined
     str.say(); // str.say is not a function

13.5 对象类型的特点：有属性和方法

13.6 以前之所以能够访问基本数据类型的属性和方法, 是因为在运行的时候
     系统自动将基本数据类型包装成了对象类型 String() / Number() / Boolean()
     let str = "www.study.com";
     //let str = new String(str);
     console.log(str.length);
     str.split(".");
    

14. 三大内置对象

14.1 JavaScript中提供三种自带的对象, 分别是"本地对象"/"内置对象"/"宿主对象"

14.2 什么是宿主?
    宿主就是指JavaScript运行环境, js可以在浏览器中运行, 也可以在服务器上运行(nodejs)
    */
    /*
14.3 本地对象
    与宿主无关，无论在浏览器还是服务器中都有的对象
    就是ECMAScript标准中定义的类(构造函数)。
    在使用过程中需要我们手动new创建
    例如：Boolean、Number、String、Array、Function、Object、Date、RegExp等。

14.4 内置对象
    与宿主无关，无论在浏览器还是服务器中都有的对象
    ECMAScript已经帮我们创建好的对象。
    在使用过程中无需我们手动new创建
    例如：Global、Math、JSON

15.5 宿主对象
    对于嵌入到网页中的JS来说，其宿主对象就是浏览器, 所以宿主对象就是浏览器提供的对象
    包含: Window和Document等。
    所有的DOM和BOM对象都属于宿主对象。

15.6 自定义对象
    我们自己编写的类创建的对象
    

15. Math内置对象

15.1 Math.floor()    向下取整
     直接砍掉所有的小数位就是向下取整
      let num = 3.9
      et value = Math.floor(num)
      console.log(value);  //3
      
15.2 Math.ceil()     向上取整
     只要有小数位就会给整数位+1, 然后砍掉所有小数位
      let num = 3.1
      let value = Math.ceil(num)
      console.log(value);  //4

15.3 Math.round()    四舍五入 
     如果小数位满5就会进1
      let num = 3.5
      let value = Math.round(num)
      console.log(value);  //4

15.4 Math.abs()      绝对值
     统一变为正数
      let num = -3.5
      let value = Math.abs(num)
      console.log(value);  //3.5

15.5 Math.random()   生成随机数
     1. Math.random()会生成一个0~1的随机数,包括0,但是不包括1
        let value = Math.random()
        console.log(value);

     2. 随机生成1-10的随机数,包含1和10.
       function getRandomIntInclusive(min, max) {
          min = Math.ceil(min);
          max = Math.floor(max);
          return Math.floor(Math.random() * (max - min + 1) + min);
        }
        let value = getRandomIntInclusive(1,10)
        console.log(value);