js：对象+堆栈拓展对象在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的实物都是对象，例如字符串

对象

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的实物都是对象，例如字符串，数值，数组，函数等。

对象是由属性和方法组成的。

属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中使用方法来表示（常用动词）

1648870305320

对象使用

属性

数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。

属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔。
多个属性之间使用英文 , 分隔。
属性就是依附在对象上的变量（外面是变量，对象内是属性）。
属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等。

		//声明对象
		let person = {
            uname: '漩涡鸣人',
            age: 16,
            sex: '男'

        }
		//person的类型是 object
        console.log(typeof person);
        console.log(person);

属性访问

  let person = {
                uname: '漩涡鸣人',
                age: 16,
                sex: '男'

            }
            /* 
            属性访问：
            1.对象名.属性
            2.对象面['属性']，一定要加引号，不加引号，当做变量使用
            */

        document.write(`
			第七代火影名字：${person.uname}<br /> 
			第七代火影年龄：${person.age}<br /> 
			第七代火影性别：${person.sex}<br />
						`);

        document.write(`
			第七代火影名字：${person['uname']}<br /> 
			第七代火影年龄：${person['age']}<br /> 
			第七代火影性别：${person['sex']}
						`);

方法

数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。

  let object = {
           skill: function() {
               document.write('超大玉螺旋手里剑');
           }
       }

方法是由方法名和函数两部分构成，它们之间使用 : 分隔
多个属性之间使用英文 , 分隔
方法是依附在对象中的函数
方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

方法访问

声明对象，并添加了若干方法后，可以使用 . 调用对象中函数，我称之为方法调用。

    let object = {
            skill: function() {
                document.write('超大玉螺旋手里剑');
            }
        }
        object.skill();

操作对象

对象本质是无序的数据集合, 操作数据无非就是 增删改查 语法：

1649209106465

新增对象中的方法

也可以动态为对象添加方法，动态添加与直接定义是一样的，只是语法上更灵活

1649209259617

遍历对象

对象没有像数组一样的length属性,所以无法确定长度。

对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标。

1649226920558

一般不用这种方式遍历数组、主要是用来遍历对象
一定记住： k 是获得对象的属性名， 对象名[k] 是获得 属性值

遍历对象案例

1649227037544

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        table {
            margin: 100px auto;
            width: 600px;
            border: 1px solid black;
            border-collapse: collapse;
        }
        
        table thead th {
            width: 120px;
            height: 30px;
            border: 1px solid black;
            background-color: rgb(207, 201, 201);
        }
        
        table tbody td {
            text-align: center;
            border: 1px solid black;
        }
    </style>

</head>

<body>

    <script>
        let students = [{
            name: '小明',
            age: 18,
            gender: '男',
            hometown: '河北省',
        }, {
            name: '小红',
            age: 19,
            gender: '女',
            hometown: '河南省',
        }, {
            name: '小刚',
            age: 17,
            gender: '男',
            hometown: '山西省',
        }, {
            name: '小丽',
            age: 18,
            gender: '女',
            hometown: '山东省',
        }];
        let html = `
         <table>
        <caption>
            <h2>学生列表</h2>
        </caption>
        <thead>
            <tr>
                <th>序列</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>家乡</th>
            </tr>
        </thead>
        <tbody>
            `
        for (let i = 0; i < students.length; i++) {
            html += `<tr><td>${i+1}</td>`
            for (let k in students[i]) {

                html += `<td>${students[i][k]}</td>`
            }
            html += `</tr>`
        }
        html += `</tbody> + </table>`;
        document.write(html)
    </script>
</body>

</html>

内置对象

JavaScript内部提供的对象，包含各种属性和方法给开发者调用。

内置对象Math

方法有：

random：生成0-1之间的随机数（包含0不包括1）

ceil：向上取整
floor：向下取整
max：找最大数
min：找最小数
pow：幂运算
abs：绝对值

  	// 随机数
        console.log(Math.random());
        // 向上取值
        console.log(Math.ceil(3.3));
        // 向下取值
        console.log(Math.floor(3.1));
        // 最大值
        console.log(Math.max(1, 6, 41, 8, 99, 3));
        // 最小值
        console.log(Math.min(1, 6, 41, 8, 99, 3));
        // 四舍五入
        console.log(Math.round(4.5));
        // 幂数
        console.log(Math.pow(2, 3));

随机数公式

	Math.round(Math.random() * (max - min) + min)

随机点名案例

 	 let King = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操'];

        function getRandomIntInclusive(min, max) {

            return Math.round(Math.random() * (max - min) + min); //含最大值，含最小值 
        }
        while (King.length > 0) {
            let i = getRandomIntInclusive(0, King.length - 1)
            console.log(King[i]);
            King.splice(i, 1)

        }

猜数字游戏案例

	 let num = Math.round(Math.random() * 9 + 1);
        while (true) {
            let num1 = +prompt('请输入你猜测的随机数');
            if (num1 > num) {
                alert('你猜大了')
            } else if (num1 < num) {
                alert('你猜小了')
            } else {
                alert('你猜对了')
                break
            }
        }
        console.log(num);

专业术语

1649249423924

拓展

基本数据类型和引用数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型：string ，number，boolean，undefined，null

引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

堆栈

堆栈空间分配区别：

1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；

简单数据类型存放到栈里面

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

引用数据类型存放到堆里面

1649249627993

简单类型的内存分配

值类型（简单数据类型）： string ，number，boolean，undefined，null
值类型变量的数据直接存放在变量（栈空间）中

个人理解：每次给新的简单类型存储时，都要在栈新开辟的空间里存放。

1649249706022

复杂类型的内存分配

引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

个人理解：先在栈开辟一个空间，里面存储的是地址，对象实例在堆里面。下面有两个对象 a，b， a 将地址赋值给了 b ，但其实这两个对象其实是指向了同一个对象实例。所以当 b 的实例对象改变时，a 的实例对象也随着改变。

  	let a = {
            name: '张三'
        };
        let b = {};
        b = a
        b.name = '李四';
        console.log(a.name);

1649250350431