JavaScript - 内置、数组、字符串对象

一、 对象

1. 字面量创建对象

1
var obj = {};		// 一个名为 obj 的空对象	
1
2
3
4
5
6
7
8
var obg = {
    uname: '张三疯',
    age: 18,
    sex: '男',
    satHi: function (){
        console.log('hi~')
    }
}

注意：

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

调用对象属性

1
2
3
4
5
// 方法1
console.log(obj.uname);		// 张三疯

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

调用对象方法

1
obj.satHi();	// hi~

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

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

向对象中填写属性

1
2
3
4
5
6
obj.uname = '张三疯';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function (){
        console.log('hi~')
    }

注意:

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

3. 用构造函数创建 对象

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

构造函数语法：

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

构造函数调用：

1
new 构造函数名();

::: warning

  1. 构造函数名称的 首字母 需要 大写；
  2. 构造函数中 不需要写 return 就可以返回值；
  3. 构造函数 属性之间必须用 ; 分号；
  4. 构造函数 调用 时 需要用 new 函数名；

:::

1
2
3
4
5
6
7
8
9
10
11
12
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 遍历对象

语法：

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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

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

获取最小值 - Math.min

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

获取绝对值 - Math.abs

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

向下取整 - Math.floor

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

向上取整 - Math.ceil

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

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

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

2. Math.random （随机小数）

随机整数

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

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

猜数字案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 创建

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

1
2
3
var time = new Date()

console.log(time);

有参数

常用参数写法：

  • 数字型：2020, 11, 28
  • 字符串型： 2021-12-8 17:18:50
1
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()获取当前秒
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 获取

1
2
3
4
var date = new Date();

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

通过 + 获取

1
2
3
var date = +new Datte();

console.log(date);

通过 Date.now 获取

1
console.log(Date.now());

毫秒 转 天、时、分、秒

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

倒计时案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
1
2
var arr = [];
console.log(arr instanceof Array);		// true
  1. Array.isArray(参数)
1
2
var arr = [];
console.log(Array.isArray(arr));		// true

2. 添加 删除 数组元素

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

添加元素

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

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

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

删除元素

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]
1
2
3
4
var arr = ['hello', 'sorry', 1, 2, 3, 4];

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

3. 数组排序

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

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

对 sort 强化

1
2
3
var arr = ['hello', 'sorry', 11, 22, 33, 21, 8, 7];

console.log(arr.sort());		// [11, 21, 22, 33, 7, 8, 'hello', 'sorry']
1
2
3
4
5
6
7
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 : 指从后往前查找；

1
2
3
var arr = ['hello', 'sorry', 11, 22, 33, 21, 8, 7];

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

数字去重

1
2
3
4
5
6
7
8
9
10
11
12
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(‘分隔符’)把数组转为字符串，自定义分隔符返回一个字符串
1
2
3
 var arr = ['你好', 'hello', '你是谁', '你在哪里'];

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

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

四、字符串对象

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

1. 根据字符返回位置

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

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

console.log(str.lastIndexOf('吹'));		// 6
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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()
1
2
3
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 ，但不接收负值
1
2
3
var str = '天王盖地虎，宝塔镇河妖';
			
console.log(str.substr(4, 3))		// 虎，宝

4. 字符串 替换 与 分割

replace ：替换字符串

1
2
3
var str = '天王盖地虎，宝塔镇河妖';
			
console.log(str.replace('地虎', '老猫'))		// 天王盖老猫，宝塔镇河妖

split： 分割字符串

1
2
3
var str = '天王盖地虎，宝塔镇河妖';
			
console.log(str.split("，"))		// ["天王盖地虎", "宝塔镇河妖"]