跳至主要內容

4.内置、数组、字符串对象

Pupper大约 8 分钟学习笔记前端基础JavaScript

一、 对象

1. 字面量创建对象

var obj = {}; // 一个名为 obj 的空对象
var obg = {
	uname: "张三疯",
	age: 18,
	sex: "男",
	satHi: function () {
		console.log("hi~");
	},
};

注意：

  1. 里面的属性 或 方法 采用键值对的形式；
  2. 多个属性 或 方法 中间用 逗号隔开；
  3. 方法冒号后面跟的是 匿名函数；

调用对象属性

// 方法1
console.log(obj.uname); // 张三疯

// 方法2
console.log(obj["age"]); // 18

调用对象方法

obj.satHi(); // hi~

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

var obj = new Object(); // 创建一个名为 obj 的空对象

向对象中填写属性

obj.uname = "张三疯";
obj.age = 18;
obj.sex = "男";
obj.sayHi = function () {
	console.log("hi~");
};

注意:

  1. 添加对象的属性和方法通过 等号 赋值的形式添加，属性和方法之间用分号；

3. 用构造函数创建 对象

构造 对象的 函数，叫做 构造函数

构造函数语法：

function 构造函数名() {
	this.属性 = 值;
	this.方法 = function () {};
}

构造函数调用：

new 构造函数名();

注意

  1. 构造函数名称的 首字母 需要 大写；
  2. 构造函数中 不需要写 return 就可以返回值；
  3. 构造函数 属性之间必须用 ; 分号；
  4. 构造函数 调用 时 需要用 new 函数名；
function Star(uname, age, sex, sang) {
	this.uname = uname;
	this.age = age;
	this.sex = sex;
	this.sang = function (sang) {
		console.log(sang);
	};
}

// 函数调用
var ldh = new Star("刘德华", 18, "男", "冰雨");
console.log(ldh.uname); // '刘德华'

4. for in 遍历对象

语法：

for (var 变量 in 对象) {
}
输出所有的 键 或 值

输出所有的键：console.log(k);

输出所有的值：console.log(obj[k]);

var obj = {
	uname: "张三疯",
	age: 18,
	sex: "男",
	satHi: function () {
		console.log("hi~");
	},
};

for (var k in obj) {
	console.log(k); // 输出所有的键
	console.log(obj[k]); // 输出所有的值
}

二、 内置对象

1. Math

获取最大值 - Math.max

console.log(Math.max(1, 2, 3, 4, 5)); // 5

获取最小值 - Math.min

console.log(Math.max(1, 2, 3, 4, 5)); // 1

获取绝对值 - Math.abs

console.log(Math.abs(5)); // 5

向下取整 - Math.floor

console.log(Math.floor(5.2)); // 5

向上取整 - Math.ceil

console.log(Math.ceil(5.2)); // 6

四舍五入 - Math.round ( 出现 .5 时，向大取值)

console.log(Math.round(5.5)); // 6
console.log(Math.round(5.2)); // 5

2. Math.random （随机小数）

随机整数

function getRandom(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(getRandom(1, 10));

猜数字案例

function getRandom(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = console.log(getRandom(1, 10));
while (true) {
	var num = prompt("请猜测1~10之间的数字。");
	if (num > random) {
		alert("你输入的数字过大。");
	} else if (num < random) {
		alert("你输入的数字过小。");
	} else {
		alert("恭喜你，答对了");
		break;
	}
}

3. 时间对象 - date

date 是一个构造函数，需要用 new 创建

无参数：返回系统的当前时间

var time = new Date();

console.log(time);

有参数

常用参数写法：

  • 数字型：2020, 11, 28
  • 字符串型： 2021-12-8 17:18:50
var time = new Date(`2021-12-8 17:18:50`);

日期格式化

方法名说明
obj.getFullYear()获取年份
obj.getMonth()获取月份（0-11）
obj.getDate()获取当前日期
obj.getDay()获取星期几（星期日 0~星期六 6）
obj.getHours()获取当前小时
obj.getMinutes()获取当前分钟
obj.getSeconds()获取当前秒
function myDate() {
	var day = [
		"星期日",
		"星期一",
		"星期二",
		"星期三",
		"星期四",
		"星期五",
		"星期六",
	];
	var date = new Date();
	var Y = date.getFullYear();
	var M = date.getMonth();
	var D = date.getDate();
	var d = date.getDay();
	d = day[d];
	var h = date.getHours();
	h = h < 10 ? "0" + h : h;
	var m = date.getMinutes();
	m = m < 10 ? "0" + m : m;
	var s = date.getSeconds();
	s = s < 10 ? "0" + s : s;

	return Y + "年" + M + "月" + D + "日 " + d + " " + h + ":" + m + ":" + s;
}
var a = myDate();
console.log(a); // 2021年11月8日 星期三 17:54:02

获取总毫秒数

当前时间 距离 1970 年 1 月 1 日 的毫秒数

通过 valueOf 、 getTime 获取

var date = new Date();

console.log(date.valueOf());
console.log(date.getTime());

通过 + 获取

var date = +new Datte();

console.log(date);

通过 Date.now 获取

console.log(Date.now());

毫秒 转 天、时、分、秒

公式时间
parseInt(总秒数/60/60/24);天数
parseInt(总秒数/60/60%24);小时
parseInt(总秒数/60%60);分钟
parseInt(总秒数%60);秒数

倒计时案例

function conutDown(time) {
	var nowTime = +new Date();
	var inputTime = +new Date(time);
	var times = (inputTime - nowTime) / 1000; // 剩余时间的总秒数

	var d = parseInt(times / 60 / 60 / 24);
	d = d < 10 ? "0" + d : d;
	var h = parseInt((times / 60 / 60) % 24);
	h = h < 10 ? "0" + h : h;
	var m = parseInt((times / 60) % 60);
	m = m < 10 ? "0" + m : m;
	var s = parseInt(times % 60);
	s = s < 10 ? "0" + s : s;

	return d + "天" + h + "时" + m + "分" + s + "秒";
}

var date = conutDown("2021-12-8 19:00:00");
console.log(date); // 00天00时36分33秒

三、数组对象

1. 判断是否为数组

  1. 使用 运算符 检测 instanceof
var arr = [];
console.log(arr instanceof Array); // true
  1. Array.isArray(参数)
var arr = [];
console.log(Array.isArray(arr)); // true

2. 添加 删除 数组元素

方法名说明返回值
push(参数 1...)末尾添加一个或多个元素，
会修改原数组		返回新数组的长度
pop()删除数字最后一个元素，把数组长度减 1
无参数、修改原数组		返回它删除的元素值
unshift(参数 1...)末尾添加一个或多个元素，
会修改原数组		返回新数组的长度
shift()删除数组的第一个元素，数组长度减 1
无参数、修改原数组		并返回第一个元素的值

添加元素

var arr = [1, 2, 3, 4];

console.log(arr.push("hello", "sorry")); // 6
console.log(arr); // [1, 2, 3, 4, 'hello', 'sorry']
var arr = [1, 2, 3, 4];

console.log(arr.unshift("hello", "sorry")); // 6
console.log(arr); // ['hello', 'sorry', 1, 2, 3, 4]

删除元素

var arr = ["hello", "sorry", 1, 2, 3, 4];

console.log(arr.pop()); // 4
console.log(arr); // ['hello', 'sorry', 1, 2, 3]
var arr = ["hello", "sorry", 1, 2, 3, 4];

console.log(arr.shift()); // hello
console.log(arr); // ['sorry', 1, 2, 3, 4]

3. 数组排序

方法名说明是否修改原数组
reverse()颠倒数组中元素的顺序，无参数改变原数组
sort()对数组的元素进行排序（只能正对个位数排序）改变原数组
var arr = ["hello", "sorry", 1, 2, 3, 4];

console.log(arr.reverse()); // [4, 3, 2, 1, 'sorry', 'hello']

对 sort 强化

var arr = ["hello", "sorry", 11, 22, 33, 21, 8, 7];

console.log(arr.sort()); // [11, 21, 22, 33, 7, 8, 'hello', 'sorry']
var arr = ["hello", "sorry", 11, 22, 33, 21, 8, 7];

arr.sort(function (a, b) {
	return a - b; // 升序
});

console.log(arr); // ['hello', 'sorry', 7, 8, 11, 21, 22, 33]

4. 数组索引方法

方法名说明返回值
indexOf()数组中查找指定元素的第一个索引存在就返回索引号，不存在返回 -1
lastIndexOf()数组中查找指定元素的最后一个索引存在就返回索引号，不存在返回 -1

indexOf： 指从前往后查找，lastIndexOf : 指从后往前查找；

var arr = ["hello", "sorry", 11, 22, 33, 21, 8, 7];

console.log(arr.indexOf(11)); // 2

数字去重

function unique(arr) {
	var newArr = [];
	for (var i = 0; i < arr.length; i++) {
		if (newArr.indexOf(arr[i]) === -1) {
			newArr.push(arr[i]);
		}
	}
	return newArr;
}

var arr = [0, 11, 3, -1, 4, 7, 11, 22, 33, 21, 8, 7];
console.log(unique(arr)); // [0, 11, 3, -1, 4, 7, 22, 33, 21, 8]

5. 数组转为字符串

方法名说明返回值
toString()把数组转成字符串，逗号分隔每一项返回一个字符串
join('分隔符')把数组转为字符串，自定义分隔符返回一个字符串
var arr = ["你好", "hello", "你是谁", "你在哪里"];

console.log(arr.toString()); // 你好,hello,你是谁,你在哪里
var arr = ["你好", "hello", "你是谁", "你在哪里"];

console.log(arr.join("  ")); // 你好  hello  你是谁  你在哪里

四、字符串对象

基本包装类型： 把简单数据类型 包装成为了 复杂数据类型

1. 根据字符返回位置

方法名说明
indexOf('要查找的字符', [开始位置])返回指定内容在原字符串中的位置，
如果找不到就返回 -1，开始位置时 index 索引号
lastIndexOf()从后往前找，只找第一个匹配的
var str = "改革春风吹满春地";

console.log(str.indexOf("春")); // 2
console.log(str.indexOf("春", [3])); // 6
var str = "改革春风吹满吹地";

console.log(str.lastIndexOf("吹")); // 6
var str = "abcoefoxyozzopp";

var arr = [];
var num = 0;
while (true) {
	if (str.indexOf("o", [num]) != -1) {
		var res = str.indexOf("o", [num]);
		arr.push(res);
		num = res + 1;
	} else {
		break;
	}
}

console.log(arr); // [3, 6, 9, 12]

2. 根据位置返回字符

方法名说明案例
charAt(index)根据下标返回字符str.charAt(0)
x)根据下标返回 ASCII 码str.charCodeAt(0)
str(index)根据下标返回字符和 charAt()
var str = "abcoefoxyozzopp";

console.log(str.charAt(4)); // e

3. 字符串操作方法

方法名说明
concat(str1,str2...)拼接多个字符串
substr(start,length)从下标位置开始，截取 length 长度
slice(start,end)从下标位置开始，截取到 end 位置，end 位置不截取
substring(start,end)从下标位置开始，截取到 end 位置，end 位置不截取
等同于 slice ，但不接收负值
var str = "天王盖地虎，宝塔镇河妖";

console.log(str.substr(4, 3)); // 虎，宝

4. 字符串 替换 与 分割

replace ：替换字符串

var str = "天王盖地虎，宝塔镇河妖";

console.log(str.replace("地虎", "老猫")); // 天王盖老猫，宝塔镇河妖

split： 分割字符串

var str = "天王盖地虎，宝塔镇河妖";

console.log(str.split("，")); // ["天王盖地虎", "宝塔镇河妖"]
默认页脚
Copyright © 2024 Pupper