对象的使用 对象的方法 遍历对象 数字内置的对象 数据内存的存储
1.1什么是对象
对象是由属性和方法组成的。
-
属性：事物的特征，在对象中用属性来表示（常用名词）
-
方法：事物的行为，在对象中用方法来表示（常用动词）
创建对象的二种方式
1.2.1 利用字面量创建对象
使用对象字面量创建对象：
-
就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；
-
{ } 里面采取键值对的形式表示
注意
键：相当于属性名
值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）
对象中存储具体数据的 "键值对"中的 "键"称为对象的属性，即对象中存储具体数据的项
对象的方法
对象中存储函数的 "键值对"中的 "键"称为对象的方法，即对象中存储函数的项
<body> <script> // 属性：实物的特征 =》静态属性（名词） // 方法：事物的行为，在对象中用方法表示（动词） // ======================= // 创建对象 //1.字面量创建对象 let obj = { "user-name": 97, name: "李四", name: "李四", age: 17, sex: "女", addess: "河南洛阳", 0: "hhhahhahhahhahhahahah", }; console.log(obj); // console.log(obj); // // 2.new Object()创建对象 // let obj1 = new Object(); // (obj1.name = "张三"), console.log(obj1); // =======键值对========== // 属性名: 是键=====属性值:是值
// 查======对象名.属性名 name: "李四", console.log(obj.name); //李四 console.log(obj.names); //如果找对象中不存在的属性名 则返回undefined // console.log(obj.user - name); //NaN // console.log(obj.user - hight);//报错 //查 对象名['属性名']====中括号语法更强大 console.log(obj["user-hight"]); console.log(obj["sex"]); console.log(obj["0"]);
语法：对象名.新属性 = 新值
// 增加属性名
obj.gz = 777777; obj["sg"] = "100"; console.log(obj.gz); console.log(obj.sg);
语法：对象名.属性 = 新值
//改属性名======之前有这个属性就改(覆盖之前的属性值)
不然就新增 obj.name = "王五"; console.log(obj.name);
语法：delete 对象名.属性名
//删除属性名 delete obj.sex; console.log(obj); </script> </body>
对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号
<body> <script> // let obj = { // name: "ww", // age: 5, // // 方法 // sing: function () { // console.log(obj); // }, // sum: function (a, b) { // return a + b; // }, // }; // console.log(obj.name); // console.log(obj["age"]); // obj.sing(); // let res = obj.sum(1, 3); // console.log(res); let obj = { colose: "黑色", name: "小白兔", address: "深圳", xz: 2000, like: function () { console.log("唱喜羊羊"); return "唱喜羊羊"; }, danser: function () { console.log("迪斯科"); }, // 简写 eat() { console.log("简写省略和:号function"); //只有对象方法中可以这样使用 }, }; console.log(obj.name); console.log(obj["address"]); obj.like(); obj.danser(); // 拓展 变量和属性的区别点、相同点 // 变量单独使用 属性需要借助对象访问名//相同都是容器 // 函数 方法 区别 // 相同：都是处理数据 封装代码块 // 区别：函数单独使用（fn()） 方法借助对象使用（如obj.sing()) // ========== let obj1 = null; //将来存一个对象 obj1 = { name: "aa", }; </script> </body>1.2.3 变量、属性、函数、方法总结
属性是对象的一部分，而变量不是对象的一部分，变量是单独存储数据的容器
变量：单独声明赋值，单独存在
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
方法是对象的一部分，函数不是对象的一部分，函数是单独封装操作的容器
函数：单独存在的，通过“函数名()”的方式就可以调用
方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。
1.3 null
null 也是 JavaScript 中数据类型的一种，通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时，结果为
object。
<body> <script> /* for...in 语句用于对数组或者对象的属性进行循环操作。 语法： for (变量 in 对象名字) { // 在此执行代码 } 语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。 */ // 遍历对象的方法 语法 for(变量名in对象名){} 变量名/属性名习惯写为key 对象名习惯给obj let obj = { uname: "lw", age: 17, sex: "男", }; let a = ""; for (let key in obj) { // console.log(key); //所有的属性名uname age sex console.log(obj[key]); //obj[key]是属性值 lw 17 男 if (obj[key] === "lw") { a = key; } } console.log(a); //a=obj[key]; </script> </body>遍历数组中的对象
<body> <script> let students = [ { name: "小明", age: 18, gender: "男", hometown: "河北省" }, { name: "小红", age: 19, gender: "女", hometown: "河南省" }, { name: "小刚", age: 17, gender: "男", hometown: "山西省" }, { name: "小丽", age: 18, gender: "女", hometown: "山东省" }, { name: "晓强", age: 16, gender: "女", hometown: "蓝翔技校" }, ]; for (i = 0; i < students.length; i++) { // console.log(students[i]); // console.log(students[i].name);//obj.语法 console.log(students[i]["hometown"]); //obj[]语法 } // 让用户输入年龄 姓名 性别 住址 let arr = []; </script>2.内置对象
回想一下我们曾经使用过的
console.log，console其实就是 JavaScript 中内置的对象，该对象中存在一个方法叫log，然后调用log这个方法，即console.log()。除了
console对象外，JavaScritp 还有其它的内置的对象
Math是 JavaScript 中内置的对象，称为数学对象，这个对象下即包含了属性，也包含了许多的方法。属性
Math.PI，获取圆周率
// 圆周率
console.log(Math.PI);方法
Math.random，生成 0 到 1 间的随机数
// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()
Math.ceil，数字向上取整
// 舍弃小数部分，整数部分加1
Math.ceil(3.4)
Math.floor，数字向下取整
// 舍弃小数部分，整数部分不变
Math.floor(4.68)
Math.round，四舍五入取整
// 取整，四舍五入原则
Math.round(5.46539)
Math.round(4.849)
Math.max，在一组数中找出最大的
// 找出最大值
Math.max(10, 21, 7, 24, 13)
Math.min，在一组数中找出最小的
// 找出最小值
Math.min(24, 18, 6, 19, 21)<body> <script> // 属性 // Math js内置对象 console.log(Math.ceil(7.01)); //8向上取整 console.log(Math.floor(7.01)); //7向下取整 console.log(Math.round(4.5)); //4.5四舍五入 console.log(Math.round(4.35)); //4四舍五入 console.log(Math.round(-3.5)); //-3四舍五入 .5是往大的取 console.log(Math.max(100, 11, 33, 2 - 3.5)); //一组数中取最大值 console.log(Math.max()); //没有参数返回无穷大Infinity console.log(Math.max("1", "2", "张三")); //如果任一参数不能转换为数值 则结果为NaN console.log(Math.min(100, 11, 33, 2 - 3.5)); //一组数中取最小值 console.log(Math.abs(-3.5)); //取绝对值 </script> </body>
<body> <script> // 能取到 0 但是取不到 1 中间的一个随机小数>=0>1 console.log(Math.random()); //随机小数 console.log(Math.floor(Math.random() * 10)); //向下取整 最大取到9 console.log(parseInt(Math.random() * 10)); //随机取整 let arr = ["张三", "李四", "王五", "赵六", "田七", "王八"]; let random = parseInt(Math.random() * arr.length); let random1 = Math.floor(Math.random() * arr.length); console.log(arr[random]); console.log(arr[random1]); // function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值 } console.log(getRandomInt(2, 17)); </script> </body><style> div { width: 300px; height: 300px; } </style> </head> <body> <script> // 1. 自定义一个随机颜色函数1. 自定义一个随机颜色函数 // 封装函数 // true或者啥也不传 #ffffff 传false rgb(255,255,255) function getRandomColor(flag = true) { if (flag) { let arr = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", ]; let str = "#"; for (i = 1; i <= 6; i++) { let random = parseInt(Math.random() * arr.length); str = str + arr[random]; // console.log(str); } // console.log(str); return str; } else { let r = Math.floor(Math.random() * 256); let g = parseInt(Math.random() * 256); let b = Math.floor(Math.random() * 256); // console.log("rgb(24,25,26)"); return `rgb(${r},${g},${b})`; } } let res = getRandomColor(false); let res1 = getRandomColor(true); // document.write(res); //rgb() document.write(res1); //16进制 </script> </body>
2.1 简单数据类型
简单类型（基本数据类型、值类型）：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null
2.2 复杂数据类型
复杂数据类型（引用类型）：在存储时变量中存储的仅仅是地址（引用），如 Object、Array、Date等；
注意：
// 栈内存随用随取 是一个创建销毁的过程 比较灵活 会有垃圾回收机制 进行释放内存 可以提高性能//复杂数据类型 不能直接赋值给另外一个=》因为赋值的是一个地址 此时修改一个另一个也会被修改（可以使用深拷贝解决这个问题）2.3 堆栈
堆栈空间分配区别：
1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；
简单数据类型存放到栈里面
2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
简单数据类型的存储方式
引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中
