木偶笔记
Pupper
2022-01-10
目录

JS 内置、数组、字符串对象

# 一、 对象

# 1. 字面量创建对象

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

注意：

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

# 调用对象属性

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

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

# 调用对象方法

obj.satHi();	// hi~
1

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

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

# 向对象中填写属性

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

注意:

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

# 3. 用构造函数创建 对象

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

构造函数语法：

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

构造函数调用：

new 构造函数名();
1

注意

  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);		// '刘德华'
1
2
3
4
5
6
7
8
9
10
11
12

# 4. for in 遍历对象

语法：

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

输出所有的键：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
2
3
4
5
6
7
8
9
10
11
12
13

# 二、 内置对象

# 1. Math

获取最大值 - Math.max

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

获取最小值 - Math.min

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

获取绝对值 - Math.abs

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

向下取整 - Math.floor

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

向上取整 - Math.ceil

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

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

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

# 2. Math.random （随机小数）

# 随机整数

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

console.log(getRandom(1, 10));
1
2
3
4
5

猜数字案例

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

# 3. 时间对象 - date

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

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

var time = new Date()

console.log(time);
1
2
3

# 有参数

常用参数写法：

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

# 日期格式化

方法名 说明
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 获取总毫秒数

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

通过 valueOf 、 getTime 获取

var date = new Date();

console.log(date.valueOf());
console.log(date.getTime());
1
2
3
4

通过 + 获取

var date = +new Datte();

console.log(date);
1
2
3

通过 Date.now 获取

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

毫秒 转 天、时、分、秒

公式 时间
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 三、数组对象

# 1. 判断是否为数组

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

# 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']
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]
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']
1
2
3

对 sort 强化

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
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]
1
2
3
4
5
6
7

# 4. 数组索引方法

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

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

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

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

# 数字去重

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

# 5. 数组转为字符串

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

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

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

# 四、字符串对象

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

# 1. 根据字符返回位置

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

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

console.log(str.lastIndexOf('吹'));		// 6
1
2
3
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]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 2. 根据位置返回字符

方法名 说明 案例
charAt(index) 根据下标返回字符 str.charAt(0)
x) 根据下标返回 ASCII 码 str.charCodeAt(0)
str(index) 根据下标返回字符 和 charAt()
var str = 'abcoefoxyozzopp';
			
console.log(str.charAt(4));		// e
1
2
3

# 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))		// 虎，宝
1
2
3

# 4. 字符串 替换 与 分割

replace ：替换字符串

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

split： 分割字符串

var str = '天王盖地虎，宝塔镇河妖';
			
console.log(str.split("，"))		// ["天王盖地虎", "宝塔镇河妖"]
1
2
3
编辑 (opens new window)
上次更新: 2022/01/26, 15:50:26
JS 数组、函数
JS DOM基础操作

← JS DOM基础操作→

最近更新
01
MySQL 数据库与表操作
03-29
02
MySQL 增删改查
03-29
03
loguru-日志技术
03-29
更多文章>
Theme by Vdoing | Copyright © 2021-2022 Pupper | MIT License
×