1.1什么是对象
在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
对象是由属性和方法组成的。
-
属性:事物的特征,在对象中用属性来表示(常用名词)
-
方法:事物的行为,在对象中用方法来表示(常用动词)
创建对象的二种方式
1.2.1 利用字面量创建对象
使用对象字面量创建对象:
-
就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法;
-
{ } 里面采取键值对的形式表示
标签:内置,obj,log,对象,遍历,console,Math,属性 From: https://www.cnblogs.com/JAG2671169285/p/16916927.html注意
键:相当于属性名
值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)
对象的属性
对象中存储具体数据的 "键值对"中的 "键"称为对象的属性,即对象中存储具体数据的项
对象的方法
对象中存储函数的 "键值对"中的 "键"称为对象的方法,即对象中存储函数的项
<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
。
1.4 遍历对象
<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 还有其它的内置的对象2.2 Math对象
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>
3 - 简单数据类型和复杂数据类型
2.1 简单数据类型
简单类型(基本数据类型、值类型):在存储时变量中存储的是值本身,包括string ,number,boolean,undefined,null
2.2 复杂数据类型
复杂数据类型(引用类型):在存储时变量中存储的仅仅是地址(引用),如 Object、Array、Date等;
注意:
// 栈内存随用随取 是一个创建销毁的过程 比较灵活 会有垃圾回收机制 进行释放内存 可以提高性能 //复杂数据类型 不能直接赋值给另外一个=》因为赋值的是一个地址 此时修改一个另一个也会被修改(可以使用深拷贝解决这个问题)2.3 堆栈
堆栈空间分配区别:
1、栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;
简单数据类型存放到栈里面
2、堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。
简单数据类型的存储方式
值类型变量的数据直接存放在变量(栈空间)中
- 复杂数据类型的存储方式
引用类型变量(栈空间)里存放的是地址,真正的对象实例存放在堆空间中