笔记--javascript对象及简单，复杂数据类型

已于 2022-04-23 22:57:22 修改
阅读量240 收藏
点赞数
文章标签： javascript
于 2021-03-16 16:11:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43488583/article/details/114839624
版权

javascript 对象

1. 对象

什么是对象 ？

	在 javascript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串，数值，数组，函数等。
	对象是由属性和方法组成的。
		属性：事物的特征，在对象中用属性来表示 (常用名词)
		方法：事物的行为，在对象中用方法来表示 (常用动词)

2. 创建对象的三种方式

	在 javascript 中，现阶段我们可以采用三种方式创建对象 ( object ) ：
		--利用字面量创建对象
		--利用 new Object 创建对象
		--利用构造函数创建对象

(1). 利用字面量创建对象

	(1) 里面的属性或者方法我们采用键值对的形式 键 属性名 ：值 属性值
	(2) 多个属性或者方法中间用逗号隔开的
	(3) 方法冒号后面跟的是一个匿名函数

		// 利用字面量创建对象：
		var obj = {
			uname : '易', 
			sex : '男',
			sayHi : function() {
				console.log('憨憨');
			}
		}
		// (1) 里面的属性或者方法我们采用键值对的形式 键 属性名 ：值 属性值
		// (2) 多个属性或者方法中间用逗号隔开的
		// (3) 方法冒号后面跟的是一个匿名函数

(2). 利用 new Object 创建对象

		// 利用 new Object 创建对象
		var obj1 = new Object();
		obj1.uname = '孙悟空';
		obj1.age = 18;
		obj1.sayHi = function() {
			console.log('憨憨');
		}
			// (1) 利用 等号 = 赋值的方法 添加对象的属性和方法
			// (2) 每个属性和方法之间用 分号结束
		console.log(obj1.age);
		console.log(obj1.sayHi());
		console.log(obj1['uname']);

(3). 利用构造函数创建对象

		// 构造函数
		function Star(name, age) {
			this.name = name;
			this.age = age;
			this.skills = function(skill) {
				console.log(skill);
			}
		}
		var ldh = new Star('刘德华', '18');
		console.log(ldh.name);
		console.log(ldh.sex);
		ldh.skills('憨憨');

(4). 使用对象

		// 使用对象
		// (1) 调用对象的属性 我们采取 对象名.属性名   . 我们理解为的 的
		console.log(obj.uname);
		// (2) 调用属性还有一种方法 ， 对象名['属性名']
		console.log(obj['sex']);
		// (3) 调用对象的方法 sayHi  对象名.方法名() 千万别忘记小括号
		obj.sayHi();

(5). 遍历对象

		// 遍历对象
		var obj = {
			name: '沙僧',
			age: 18,
			fn: function() {
				console.log('三师弟');
			}
		}
		for (var a in obj) {
			console.log(a); // a 变量 输出  得到的是属性名
			console.log(obj[a]); // obj[a] 得到的是 属性值
		}

(6). new 关键字

	new 在执行时会做四件事：
	1. 在内存中创建一个新的空对象。
	2. 让 this 指向这个对象。
	3. 执行构造函数里面的代码，给这个新对象添加属性和方法。
	4. 返回这个新对象 (所以构造函数不需要return) 。

(7). 判断对象是否有该属性

		// 有一个对象 来判断是否有该属性 对象['属性名']
		var  o = {
			age : 18
		}
		if (o['sex']) {
			console.log('里面有该属性');
		} else {
			console.log('里面没有该属性');
		}
		// 2. 遍历对象
		var max = 0;
		var ch = '';
		for (var k in 0) {
			// k 得到的是 属性名
			// o[k] 得到的是属性值
			if (o[k] > max) {
				max = o[k];
				ch = k;
			}
		}
		console.log(max);
		console.log('最多的字符是' + ch);

3. 查文挡MDN/W3C

	// 查文挡
	// MDN
	学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，
	可以通过MDN/W3C来查询。
	Mozilla开发者网络 (MDN) 提供了有关开发网络技术 ( Open Web ) 的信息，包括HTML，
	CSS和万维网及HTML5应用的API。

4. Math对象

(1). 最大值和最小值

利用对象封装自己的数学对象 里面有PI最大值和最小值

<!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>
</head>
<body>
    <script>
        // 利用对象封装自己的数学对象 里面有PI最大值和最小值
		var myMath = {
			PI : 3.1415926,
			max : function() {
				var max = arguments[0]
				for (var i = 0; i < arguments.length; i++) {
					if (max < arguments[i]) {
						max = arguments[i];
					}
				}
				return max;
			},
			min : function() {
				var min = arguments[0]
				for (var i = 0; i < arguments.length; i++) {
					if (min > arguments[i]) {
						min = arguments[i];
					}
				}
				return min;
			}
		}
		console.log(myMath.PI);
		console.log(myMath.max(1, 5, 6));
		console.log(myMath.min(2, 6, 9));
    </script>
</body>
</html>

(2). 随机数

	Math对象随机数方法 random() 返回一个随机的小数 0 <= x < 1

		// 随机数
		// 1. Math对象随机数方法 random() 返回一个随机的小数 0 <= x < 1,
		// 2. 这个方法里面不跟参数
		// 3. 代码例子;
		console.log(Math.random());
		// 4. 我们想要两个数之间的随机整数 并且 包含这两个整数
		var getRandom = function(min, max) {
			return Math.floor(Math.random()*(max - min +1)) + min;
		}
		console.log(getRandom(1, 6));

5. 日期对象

在这里插入图片描述

	获得Date总的毫秒数(时间戳) | 不是当前时间的毫秒数，而是距离1970年1月1号过了多少毫秒数

		// 4. 日期对象
		// 获得Date总的毫秒数(时间戳) | 不是当前时间的毫秒数，而是距离1970年1月
		//1号过了多少毫秒数
		// 1. 通过 valueOf() getTime()
		var date = new Date();
		console.log(date.valueOf()); // 就是我们现在的时间 距离1970.1.1的毫秒数
		console.log(date.getTime()); // 时间
		// 2. 简单的写法 (最常用的写法)
		var date1 = +new Date(); // +new Date() 返回的就是总的毫秒数
		console.log(date1);
		// 3. H5 新增的 获得总的毫秒数
		console.log(Date.now());
		
		// 获取时间戳
		// 倒计时效果
		// 1. 核心算法：输入的时间减去现在的时间，时间戳
		// 2. 把剩余时间总的毫秒数转换为天，时，分，秒
		// 转换公式如下：
		// d = parseInt(总秒数/60/60/24); // 计算天数
		// h = parseInt(总秒数/60/60%24); // 计算小时
		// m = parseInt(总秒数/60%60);    // 计算分钟
		// s = parseInt(总秒数%60);       // 计算秒数
        function conutDown(time) {
			var nowTime = +new Date(); // 返回当前时间的总毫秒数
			var inputTime = +new Date(time); // 计算用户输入的总的毫秒数
			var conutTime = ( inputTime - nowTime ) / 1000; // conutTime是剩余总秒数
            return conutTime;
		}
        console.log(conutDown('2021-3-16'));

6. 数组对象

(1). 检测是否为数组

	instanceof 运算符 它可以用来检测是否为数组

		// 数组对象
		// 检测是否为数组
		// (1) instanceof 运算符 它可以用来检测是否为数组
		var arr = [];
		var obj = {};
		console.log(arr instanceof Array);
		console.log(obj instanceof Array);
		// (2) Array.isArray(参数); H5新增的方法  ie9以上的版本支持
		console.log(Array.isArray(arr));
		console.log(Array.isArray(obj));

(2). 增加删除数组元素的方法

	1. push() 在我们数组的末尾 添加一个或者多个数组元素 push 推
	2. unshift 在我们数组的开头 添加一个或者多个数组元素
	3. pop() 他可以删除数组的最后一个元素
	4. shift() 他可以删除数组的第一个元素

在这里插入图片描述

		// 增加删除数组元素的方法
		// 1. push() 在我们数组的末尾 添加一个或者多个数组元素 push 推
		var arr = [1, 2, 3];
		// arr.push(4, '悟空');
		console.log(arr.push(4, '悟空'));

		console.log(arr);
		// (1) push 是可以给数组追加新的元素
		// (2) push() 参数直接写 数组元素就可以了
		// (3) push完毕之后，返回的是 新数组的长度
		// (4) 原数组也会发生变化

		// 2. unshift 在我们数组的开头 添加一个或者多个数组元素
		console.log(arr.unshift('red', 'pueple'));
		console.log(arr);
		// (1) unshift是可以给数组前面追加新的元素
		// (2) unshift() 参数直接写 数组元素 就可以了
		// (3) unshift完毕之后，返回的结果是 新数组的长度
		// (4) 原数组也会发生变化

		// 3. pop() 他可以删除数组的最后一个元素
		console.log(arr.pop());
		console.log(arr);
		// (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
		// (2) pop() 没有参数
		// (3) pop完毕之后，返回的结果是 删除的那个元素
		// (4) 原数组也会发生变化

		// 4. shift() 他可以删除数组的第一个元素
		console.log(arr.shift());
		console.log(arr);
		(1) shift() 是可以删除数组的第一个元素，一次只能删除一个
		(2) shift() 没有参数
		(3) shift完毕之后，返回的结果是 删除的那个元素
		(4) 原数组也会发生变化

(3). 数组排序

	sort方法可以使用函数表达式方便的书写,默认用首个字符进行比较

在这里插入图片描述

		// 数组排序
		// sort方法可以使用函数表达式方便的书写,默认用首个字符进行比较

		var numbers = [4, 2, 5, 1, 3];
		number.sort(function(a, b) {
			return a - b;
		});
		console.log(number);
		// 也可以写成：
		var numbers = [4, 2, 5, 1, 3];
		number.sort((a, b) => a-b);
		console.log(numbers);
		//[1, 2, 3, 4, 5]

		// 对象可以按照某个属性排序：
		var items = [
			{ name: 'Edwa', value: 21 },
			{ name: 'Sharpe', value: 37},
			{ name: 'And', value:45 },
			{ name: 'Magnetic' },
			{ name: 'Zeros', value:37 }
		];
		// sort by name
		items.sort(function(a, b){
			var nameA = a.name.toUpperCase(); // ignore upper and lowercase
			var nameB = b.name.toUpperCase(); // 忽略大小写
			if (nameA < nameB) {
				return -1;
			}
			if (nameA > nameB) {
				return 1;
			}
			// names must be equal
			return 0;
		});

(4). 数组索引方法

在这里插入图片描述

		// 字符串对象 根据字符返回位置 str.indexOf('要查找的字符'，[起始的位置])
		var str = '憨憨';
		console.log(str.indexOf('春夏秋冬'));
		console.log(str.indexOf('春', 3)); //从索引号是 3的位置开始往后查找

(5). 数组转换为字符串

	数组转换为字符串
	1. toString() 把数组转换成字符串，逗号分隔每一项  返回一个字符串
	2. join('分隔符') 方法用于把数组中的所有元素转换为一个字符串 返回一个字符串

在这里插入图片描述

		// 数组转换为字符串
		// 1. toString() 把数组转换成字符串，逗号分隔每一项  返回一个字符串
		// 2. join('分隔符') 方法用于把数组中的所有元素转换为一个字符串 返回一个字符串
		var str = [1, 2, 3, 4];
		console.log(str.join('&'));

7. 字符串对象

(1). 根据位置返回字符

	1. charAt(index) 根据位置返回字符
	2. charCodeAt(index) 返回响应字符号的字符ASCII值 目的：判断用户按下那个键
	3. str[index]  H5新增的

在这里插入图片描述

		// 根据位置返回字符
		// 1. charAt(index) 根据位置返回字符
		var str = 'andy';
		console.log(str.charAt(3));
		// 遍历所有的字符
		for (var i = 0; i < str.length; i++) {
			console.log(str.charAt(i));
		}
		// 2. charCodeAt(index) 返回响应字符号的字符ASCII值 目的：判断用户按下那个键
		console.log(str.charCodeAt(0)); // 97
		// 3. str[index]  H5新增的
		console.log(str[0]);

(2). 数组转换为字符串

	数组转换为字符串
	1. toString() 把数组转换成字符串，逗号分隔每一项  返回一个字符串
	2. join('分隔符') 方法用于把数组中的所有元素转换为一个字符串 返回一个字符串

在这里插入图片描述

		// 数组转换为字符串
		// 1. toString() 把数组转换成字符串，逗号分隔每一项  返回一个字符串
		// 2. join('分隔符') 方法用于把数组中的所有元素转换为一个字符串 返回一个字符串
		var str = [1, 2, 3, 4];
		console.log(str.join('&'));

(4). 数组索引方法

在这里插入图片描述

		// 字符串对象 根据字符返回位置 str.indexOf('要查找的字符'，[起始的位置])
		var str = '憨憨';
		console.log(str.indexOf('春夏秋冬'));
		console.log(str.indexOf('春', 3)); //从索引号是 3的位置开始往后查找

(5). 字符串操作方法

	1. concat('字符串1', '字符串2'....)
	2. substr('截取的起始位置', '截取几个字符');
	3. slice(start, end) 从start位置开始，截取到end位置，end位置取不到(他们俩都是索引号)
	4. substring(start, end) 从start开始，截取到end位置，end取不到 基本和slice相同，但是不接受负值
	5. 替换字符 replace('被替换的字符'，'替换的字符')他只会替换一个字符
	6. 字符转换为数组 split('分隔符') join把数组转换为字符串
	7. toUpperCase()  转换大写
	8. toLowerCase()  转换小写

在这里插入图片描述
在这里插入图片描述

		// 字符串操作方法
		// 1. concat('字符串1', '字符串2'....)
		var str = 'andy';
		console.log(str.concat('red'));

		// 2. substr('截取的起始位置', '截取几个字符');
		var str1 = '挥墨染山河';
		console.log(str1.substr(1,3)); 
		// 第一个2 是索引号的2 从第几个开始 第二个2 是取几个字符
		// 3. slice(start, end) 从start位置开始，截取到end位置，end位置取不到(他们俩都是索引号)
		// 4. substring(start, end) 从start开始，截取到end位置，end取不到 
		//基本和slice相同，但是不接受负值

		// 1. 替换字符 replace('被替换的字符'，'替换的字符')他只会替换一个字符
		var str = 'andyandy';
		console.log(str.replace('a','b'));
		// 有一个字符串 'asdpqwkosnmsogo' 要求把里面所有的 o 替换为 *
		var str1 = 'asdpqwkosnmsogo';
		while(str1.indexOf('o') !== -1) {
			str1 = str1.replace('o', '*');
		}
		console.log(str1);
		// 2. 字符转换为数组 split('分隔符') join把数组转换为字符串
		var str2 = 'red, blue, color';
		console.log(str2.split(','));
		var str3 = 'red&blue&color';
		console.log(str3.split('&'));

		// toUpperCase()  转换大写
		// toLowerCase()  转换小写

8. 基本包装类型

在这里插入图片描述

javascript简单数据类型和复杂数据类型

1. 简单数据类型和复杂数据类型

在这里插入图片描述

2. 堆和栈

在这里插入图片描述

3. 简单数据类型内存分配

1. 简单数据类型是存放到栈里面，里面直接开辟一个空间，存放的是值。
2. 复杂数据类型首先在栈里面存放地址，十六进制表示，然后这个地址指向堆里面的数据。

在这里插入图片描述
在这里插入图片描述

4. 复杂数据类型内存分配

在这里插入图片描述

5. 简单数据类型传参

在这里插入图片描述

在这里插入图片描述

6. 复杂数据类型传参

在这里插入图片描述
在这里插入图片描述

    <script>
        function Person(name){
            this.name = name;
        }
        
        function f1(x){
            console.log("1"+x.name); // 刘德华
            x.name='张学友';
            console.log("2"+x.name); // 张学友
        }

        var p = new Person("刘德华");
        console.log("first"+p.name); //刘德华
        f1(p);
        console.log(p.name); // 张学友
    </script>
若梦丶忆流年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript数据类型学习笔记
10-22
在JavaScript中，数据类型分为两种：基本数据类型（简单数据类型）和复杂数据类型。 基本数据类型包括Undefined、Null、Boolean、Number和String。这些类型的值在内存中占据固定大小的空间，它们是非引用类型，意味...
【JavaScript】2.复杂数据类型：数组和对象
M&Q的博客
04-17 599
三、对象 对象是一个非常重要的概念，一定要灵活掌握： 对象：属性的无序集合，当属性值为函数的时候，我们叫这个函数为对象的方法。 数组：元素的有序集合。了解数组的常用方法 日期对象：获取年月日时分秒 数学对象：获取随机数 了解其他对象：正则表达式、包装对象，其实函数也是对象，不过这些简单了解一下就行。 作者：李吉阳 链接：https://zhuanlan.zhihu.com/p/...
js显示当前系统时间+星期几
春夏秋冬
11-30 4979
function runCode(num){ var obj=document.getElementsByTagName("textarea"); for(var i=0;i<obj.length;i++){ if(num==i){ var newWin=window.open('',"_blank",'');
春夏秋冬
lc1662076的博客
06-09 381
下面由我说他的具体步骤我们还是得想一下怎么做或者说，春夏秋冬的特点是什么？颜色该怎么搭配，然后我们做的是扁平化首先我们来做春天首先我们得找到它的颜色以及配搭还有他的特征春天有样子，柳树还有我们这个扁平化要有突出感先做一个圆，然后把它裁剪一半在做两个圆放到旁边再把它裁剪然后把颜色调一下#36A684 #70CD90然后再做树木用圆角矩形工具做三个，然后再做一个圆角工具当树枝在然后再调一下投影为用钢笔...
JAVA:基本案例 春夏秋冬
l_XiaoBaiA的博客
10-31 1225
java:春夏秋冬,四季花开. import java.util.Scanner; public class test07{ public static void main(String[] args){ System.out.println("请输入月份"); Scanner in = new...
java 判断当前时间节气,请问js获取阴历节气后根据节气判断春夏秋冬四季?该怎么写呢...
weixin_39836726的博客
03-11 696
export default {/*** 获取旧历几月几日* d : date对象* showYear: 是否显示农历年** getLunarDay() //当天的农历日期* getLunarDay(new Date("1988-02-06")) //腊月十九* getLunarDay(new Date("1988-02-06"), true) //丁卯年 腊月十九**/getLunarDay: ...
javascript学习笔记（六）数据类型和JSON格式
10-25
JavaScript有两类数据类型：简单数据类型（或基本数据类型）和复杂数据类型。简单数据类型包括Undefined、Null、Boolean、Number和String。这些类型是不可变的，也就是说，一旦创建，就不能更改它们的值。例如，当...
javascript 学习笔记（八）javascript对象
10-28
JavaScript中的对象是编程的核心概念，它是一种数据结构，可以存储键值对，这些键可以是字符串或符号，而值可以是任何数据类型。在JavaScript中，对象分为内置对象和自定义对象。 内置对象是JavaScript预先定义好的...
javascript学习笔记整理（概述、变量、数据类型简介）
10-23
- **`object`**：JavaScript中最复杂的数据类型，它可以包含其他数据类型和函数，例如数组、对象等。 检测数据类型的运算符有： - **`typeof`**：返回一个表示变量或表达式数据类型的字符串。 - **`isNaN()`**：...
《javascript设计模式》学习笔记七：Javascript面向对象程序设计组合模式详解
10-15
JavaScript设计模式中的组合模式是一种对象结构型模式，其核心思想是将一组相似或相关的对象作为一个单一的对象来处理，实现部分与整体的层次结构。这种模式允许客户端以一致的方式对待单个对象（叶子对象）和包含多...
学习笔记：JavaScript（对象）
Yang_Xingxing_的博客
06-04 220
1. 对象 1.1 什么是对象？ 对象是一个具体的事物。 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如 字符串、数值、数组、函数等。 对象是由 属性 和 方法 组成的。 属性： 事物的特征，在对象中用属性来表示（常用名词） 方法： 事物的行为，在对象中用方法来表示（常用动词） 1.2 为什么需要对象 保存一个值是，可以使用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息呢？ 2. 创建对象的三种方式 在 JavaScript 中，现阶段
JS：使用数组字面量来创建一个数组(数组中的元素可以是任意数据类型)
weixin_46682277的博客
03-04 1019
使用数组字面量来创建一个数组，语法：[] 使用字面量创建数组时，可在创建时就指定数组中的元素。 var arr = [1,4,10,"hello"]; console.log(arr.length); // 长度为4 console.log(arr[3]); // 输出hello 使用构造函数创建数组时，也能同时添加元素，将要添加的元素作为构造函数的参数传递即可，元素之间用，隔开。 var arr2 = new Array(10,4,23,"tom"); console.log(arr2.length);
春夏秋冬 60
chencao100
03-06 500
一年四季 春夏秋冬
致:WWF技术博客领跑者WXWINTER--兰竹梅菊.春夏秋冬
GeneralXCK的专栏
03-12 1184
      WXWINTER--兰竹梅菊.春夏秋冬 先生的博客是我一直关注的一个博客；也是一个很优秀的博客，我在里面学习了很多的东西，特在这里表示我的感谢；但是，他的博客已经很久没有更新了，没有更新的同时，也没有他的任何的音信，虽然他是我的朋友，但我仅仅只有他的网络联系方式；祝愿他每天过的充实、开心、快乐．．．．．．　　每当看到他博客中那些经典优秀的文章一直静静的呆在那里，保留着仅存的一
js：可输入可选择的select下拉框,可及时匹配包含输入的内容（兼容ie）
春夏秋冬
12-21 7610
js：可输入可选择的select下拉框,可及时匹配内容（兼容ie）
JAVA——Switch语句判断春夏秋冬
surymy
07-08 1707
package jaz; import java.util.Scanner; public class switchh { public static void main(String[] args) { int month = 4; switch (month) { case 3: case 4: case 5: System.out.println("春"...
Java输入一个月份判断春夏秋冬季节中switch与if使用
热门推荐
每日一码的博客
05-24 1万+
我们定义3、4、5月为春天，6、7、8月为夏天，9、10、11月为秋天，12、1、2月为冬天。我最先想到的是用if语句：public class test1 { public static void main(String[] args) { int mo=3;    //要判断的月份 if (mo&gt;=3 &amp;&amp; mo&lt;=5){ ...
牛客JS题（三十四）监听对象
最新发布
不起眼小菜菜的博客
08-10 201
注释很详细，直接上代码……
JavaScript学习笔记：数据类型与操作
JavaScript中有两种基本的数据类型：简单数据类型和复杂数据类型。 1. **简单数据类型** - **Number**：包括整型和浮点型。例如，`10`，`3.14`。在JavaScript中，八进制数字前缀为`0`，如`010`代表八进制的8。此外...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值