JS基础06

对象(object)

---

小概

本期的学习内容包括：对象的介绍，对象的取/赋值，对象的初始化，对象的点语法与字符串语法，遍历对象，对象方法中的this关键字，值类型与引用类型的区别，json对象初步了解

---

1.对象介绍

1.对象作用 ：一个变量存储多个数据，提高阅读性
对象与数组的异同点总结
相同点： 都可以存储多个数据
不同点 ： 存储方式不同
数组：有序存储， 下标从0开始递增
对象：无序存储，属性名与属性值一一对应(键key 值value 对)

2. 对象的取值与赋值

2.对象语法 ：
2.1 对象声明 : let 对象名 = { 属性名:属性值 };
2.2 对象取值 ： 对象名.属性名
(1)属性名存在，则是‘获取属性值’
(2)属性名不存在，则说获取undefined
2.3 对象赋值 : 对象名.属性名 = 值
(1)属性名存在，则是‘修改属性值’
(2)属性名不存在，则动态添加属性

        //1.对象声明：   let 对象名 = { 属性名1:属性值1,属性名2:属性值2………… }
        let obj = { name:'张三',age:18,sex:'男' };
        console.log( obj );

        //2.对象取值：    对象名.属性名
        //2.1 属性名存在，则是'获取'属性值
        console.log( obj.name );//'张三'
        //2.2 属性名不存在,则是获取undefined
        console.log( obj.gfs );//'undefined'

        //3.对象赋值 :   对象名.属性值 = 值
        //3.1 属性名存在, 则是‘修改’属性值
        obj.age = 19;
        console.log( obj );
        //3.2 属性名不存在, 则是‘动态添加’属性
        obj.hobby = '学习';
        console.log( obj );

3. 对象的初始化

3.1声明对象

1.声明一个空对象， 通过对象名.(点)属性名=属性值；为空对象填充数据
2. 声明的时候就赋值（如下示例）

 let people1 = {
            name:'张三',
            age: 18,
            sex:'man',
             gfs:[
                 {name:'小花',hobby:'逛街',age:20 },
                  {name:'小美',hobby:'看电影',age:22},
                  '小猪',
                  '小狗'],
            sayHi:function(){
                console.log('大家好，我是法外狂徒张三');
            },
            son:{
                name:'张小嘎',
                age:8,
                sex:'boy',
                hobby:'吃零食'
            }
        }
        // console.log(people1.gfs[0].name);

3.2 另外一种声明方式

对象有两种声明方式
简洁语法： let obj = { 属性名:属性值 }
标准语法： let obj = new Object( {属性名:属性值} );

4. 对象的点语法与字符串语法

操作对象属性的语法有两种
点语法： 对象名.属性名
字符串语法： 对象名[‘属性值’]（遍历需要用到）

let obj = {
    name:'班长',
    age:18,
    sex:'女'
};
/* 难点： 不要把对象的字符串语法 和 变量的取值语法 搞混淆 */
let sex = 'age';
let a = 'sex';
let name = 'a';
console.log( obj.sex );//女     含义： 点语法获取obj的sex属性值
console.log( obj['sex'] );//女  含义：字符串语法获取obj的sex属性值
console.log( obj[sex] );//18   含义： 字符串获取  sex变量中字符串 对应的属性值
console.log( obj.a );//undefined
console.log( obj['a'] );//undefined
console.log( obj[a] );//女
console.log( obj.name );//班长
console.log( obj['name'] );//班长
console.log( obj[name] );//undefined
console.log( obj.age );//18
console.log( obj['age'] );//18
//报错原因： 不是对象的语法报错，而是age变量没有声明  age is not defined
console.log( obj[age] );//报错

5.遍历对象

对象遍历 ： 获取对象每一个属性值
数组遍历是一个固定的for循环： for(let i = 0; i<arr.length;i++){ arr[i] }
对象遍历是一个特殊的for-in循环 : for(let key in obj){ obj[key] }
* 注意点：对象的遍历只能使用字符串语法来取值

let obj = {
    name:'班长',
    age:18,
    sex:'女',
    hobby:'学习'
};
for(let key in obj){
    //循环变量，类似于数组遍历中的i . 不同点是i存储元素下标，key存储属性名字符串
    console.log( key );
    console.log( obj.key );//undefined
    console.log( obj["key"] );//undefined
    console.log( obj[key] );//遍历每个属性值           
};

6. 对象方法中的this关键字

对象方法中的this关键字： 谁调用我，我就代表谁
说人话：这个this就相当于中文里面的 ‘我’字。 谁说这个字，这个字就代表谁

let person1 = {
    name:'李四',
    age:18,
    sayHi:function(){
        /* 如果在对象的方法中，想要获取对象。
        使用对象名弊端： 对象名修改，方法里面也要跟着改
        使用this : 谁调用我，我就代表谁
        */
        // console.log(`大家好，我的名字叫${person.name},我的年龄是:${person.age}`);
        console.log(`大家好，我的名字叫${this.name},我的年龄是:${this.age}`);
    }
};
person1.sayHi();//李四
person1.name = '张三';
person1.sayHi();//张三

6.2 对象的练习

//有一个字符串数组,找出出现次数最多的字符及对应的次数
let str = ['a', 'b', 'a', 's', 'f', 'g', 'g', 'g', 'h', 'j', 'j', 'k', 'k', 'g', 'f', 'd', 'd', 
's', 's', 's', 's', 's', '3', '4', '4', '4', '3', '4', '3']; 
/*思路分析 
(1)求什么？  字符：次数  （键值对）
(2)对象存储结果： 字符：次数
*/
let obj = {};
for(let i = 0;i<str.length;i++){
    console.log( str[i] );
    //判断这个字符是否第一次出现
   if( obj[ str[i] ] == undefined ){
       //第一次出现
       obj[ str[i] ] = 1;        //obj['a']
   }else{
       obj[ str[i] ]++;
   }
};
console.log( obj );
//擂台思想求对象最大属性值
let max = -Infinity;
let char = '';
for(let key in obj){
    if( obj[ key ] > max ){
        max = obj[key];
        char = key;
    };
};
console.log( max,char );
         

还有一种复杂点的方法，把数组复制到一个新的数组，用旧数组的值和新数组的值比较，然后判断，也能实现 但是比较复杂一些，当时没想到用对象。

---

# 7. 值类型和引用类型

1.js数据类型分为两大类
1.1 简单数据类型(值类型)
* string,number,boolean,undefined,null
1.2 复杂数据类型(引用类型)
* array,function,object
2.值类型与引用类型内存区别
值类型： 栈中存储的是数据, 赋值的时候拷贝的也是数据 。 修改拷贝后的数据,对原数据没有影响。
引用类型： 栈中存储的是地址,堆中存储的是数据。 赋值的时候拷贝的是栈中的地址, 修改拷贝后的数据，对原数据有影响。

        //值类型
        let num1 = 10;
        let num2 = num1;//num1数据拷贝一份 赋值给num2
        num2 = 20;
        console.log( num2 );//20
        console.log( num1 );//10

        //引用类型
        let arr1 = [10,20,30];
        arr2 = arr1;//arr1数据拷贝一份 赋值给arr2
        arr2[0] = 100;
        console.log( arr2 );//[100,20,30]
        console.log( arr1 );//[100,20,30]

栈和堆和另一个知识点也有关，深拷贝与浅拷贝，浅拷贝就是拷贝栈里的，深拷贝是堆，栈一起拷贝，不会影响原数组或原对象、

8. json对象介绍

1.json对象作用：解决跨平台数据传输
* 网页的时候都是服务器(后台)通过网络传输给我们的，而后台的编程语言不一定是js语言，也可以是其他编程语言，例如 java、python、c#、php等等。不同的编程语言之间，数据类型不一致。 后来人们为了解决这种不同平台之间的数据互通问题，发明了一个几乎所有编程语言都通用的对象，称之为json对象。
2.json对象和js对象区别
json对象属性名属性值都是字符串，其他用法一致

        let jsObj = {
            name:'张三',
            age:18
        };
        let jsonObj = {
            "name" : "张三",
            "age" : "18"
        };
        console.log( jsObj,jsonObj);
        console.log( jsObj.name,jsonObj.name );

8.2 json对象应用

        //数据来源于服务器
        let jsonData = {
            "head": ['学号', '姓名', '年龄', '分数'],
            "data": [
                {
                    "number": "001",
                    "name": "大花",
                    "age": "18",
                    "score": "88"
                },
                {
                    "number": "002",
                    "name": "老铁",
                    "age": "22",
                    "score": "59"
                },
                {
                    "number": "003",
                    "name": "李狗蛋",
                    "age": "16",
                    "score": "55"
                },
                {
                    "number": "004",
                    "name": "学霸",
                    "age": "30",
                    "score": "99"
                },
            ]
        };
        //表格结构 ：  table>(tr>th)+(tr>td)
        document.write('<table>');
        //1.表头
        document.write('<tr>');
        for(let i = 0;i < jsonData.head.length;i++){
            document.write(`<th>${jsonData.head[i]}</th>`);
        };
        document.write('</tr>');
        //2.表格内容
        for(let i = 0;i < jsonData.data.length;i++){
            document.write('<tr>');
            for(let key in jsonData.data[i] ){
                document.write(`<td>${jsonData.data[i][key]}</td>`);
            };
            // document.write(`<td>${jsonData.data[i].number}</td>`);
            // document.write(`<td>${jsonData.data[i].name}</td>`);
            // document.write(`<td>${jsonData.data[i].age}</td>`);
            // document.write(`<td>${jsonData.data[i].score}</td>`);
            document.write('</tr>');
        };
        document.write('</table>');

总结

先飞的绝对不是笨鸟，因为笨鸟没有这种忧患意识、
每天暗示自己一波，学习很爽。