1. 内置对象
- JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象
- 前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的， 我们JS API 讲解
- 内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
- 内置对象最大的优点就是帮助我们快速开发
- JavaScript 提供了多个内置对象：Math、 Date 、Array、String等
2. 查文档
MDN 里查询
- 查阅该方法的功能
- 查看里面参数的意义和类型
- 查看返回值的意义和类型
- 通过 demo 进行测试
3. Math对象
3.1. Math 概述
Math 对象不是构造函数，不需要用new来调用，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。
Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值
// 1.Π值
console.log(Math.PI); //结果为 3.141592653589793
// 2.绝对值
console.log(Math.abs(-1)); //结果为 1
console.log(Math.abs('-1')); //隐式转换 会把字符串型的-1转换为数字型1
console.log(Math.abs('cutie')); //结果为 NaN
// 3.三个取整方法
console.log(Math.floor(1.8)); //向下取整 结果为 1
console.log(Math.ceil(1.2)); // 向上取整 结果为 2
console.log(Math.round(1.7)); //四舍五入 结果为 2
console.log(Math.round(-1.3)); //四舍五入 结果为-1
console.log(Math.round(-1.5)); //特殊 四舍五入 往大了取 结果为 -1
注意：上面的方法必须带括号。
- 练习
// 案例：封装自己的数学对象
// 利用对象封装自己的数学对象 里面有 PI 最大值和最小值
var myMath = {
PI: 12334444,
max: function () {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
},
min: function () {
var min = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] < min) {
min = arguments[i];
}
}
return min;
}
}
console.log(myMath.PI);
console.log(myMath.max(2, 4, 5, 7, 19));
console.log(myMath.min(2, 4, 5, 7, 19));
3.2.随机数方法 random()
// 1.random() 方法可以随机返回一个小数，其取值范围是[0，1)
console.log(Math.random());
// 2.得到一个两数之间的随机整数，包括两个数在内
// Math.floor(Math.random() * (max - min + 1)) + min;
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
console.log(getRandom(3, 7));
// 3.随机点名(2的实际运用)
var arr = ['lisa', 'zoe', 'jenny', 'garry']
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
var getRandom = getRandom(0, arr.length - 1);
console.log(arr[random]);
// 案例：猜数字游戏
// 程序随机生成一个 1~10 之间的数字，并让用户输入一个数字，
// 1. 如果大于该数字，就提示，数字大了，继续猜；
// 2. 如果小于该数字，就提示数字小了，继续猜；
// 3. 如果等于该数字，就提示猜对了， 结束程序。
// 案例分析
// ① 随机生成一个1~10 的整数 我们需要用到 Math.random() 方法。
// ② 需要一直猜到正确为止，所以一直循环。
// ③ 用 while 循环合适更简单。
// ④ 核心算法：使用 if else if 多分支语句来判断大于、小于、等于。
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
var random = getRandom(1, 10);
while (true) { //死循环
var number = prompt('请输入1-10的数字');
if (number > random) {
alert('数字大了，继续猜');
} else if (number < random) {
alert('数字小了，继续猜');
} else {
alert('好棒耶！猜对啦！！');
break; //推出整个循环 结束程序
}
}
// 案例：要求用户猜1 - 50之间的一个数字，但只有8次机会。
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
var random = getRandom(1, 50);
var i = 1;
while (i <= 7) {
var num = prompt('来玩猜数字游戏吧！这个数在1-50之间，你猜是多少？试试^^');
if (num < random) {
alert('猜小啦，再来一次');
} else if (num > random) {
alert('猜大啦，再来一次');
} else {
alert('牛的，恭喜猜对啦！！');
break;
}
}
4. Date日期对象
4.1. Date概述
- Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用。
- Date 实例用来处理日期和时间。
4.2. Date()方法的使用
4.2.1. 获取当前时间必须实例化
var now = new Date();
console.log(now);
4.2.2. Date() 构造函数的参数
如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date(‘2019-5-1’) 或者 new Date(‘2019/5/1’)
- 如果Date()不写参数，就返回当前时间
- 如果Date()里面写参数，就返回括号里面输入的时间
var now = new Date('2000/1/1 02:02:02');
console.log(now); // Sat Jan 01 2000 02:02:02 GMT+0800 (GMT+08:00)
4.2.3. 日期格式化
var date = new Date();
console.log(date.getFullYear()); // 返回当前日期的年 2022
console.log(date.getMonth() + 1); // 返回的月份小1个月 记得月份+1
console.log(date.getDate()); // 返回几号
console.log(date.getDay()); // 返回星期几 周一返回的是1 周六返回6 周日返回0
// 案例： 输出当前日期
// 请写出 今天是2022年5月25日 星期三
var date = new Date();
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
var day = date.getDay();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
console.log('今天是' + y + '年' + m + '月' + d + '日 ' + arr[day]);
// 案例： 输出当前时间
// 写一个函数，格式化日期对象，成为 HH: mm:ss 的形式 比如 00: 10: 45
function getTime() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
console.log(getTime());
4.4. 获取日期的总的毫秒形式
Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数，也叫做时间戳。
// 一共有3种方法：
var date = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf());
console.log(date.getTime());
// 2. 简单写法（最常用）
var date1 = + new Date();
console.log(date1);
// 3. HTML5中提供的方法，有兼容性问题
console.log(Date.now());
// 案例：倒计时效果
// 分析：
// ① 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒
// 相减，比如 05 分减去25分，结果会是负数的。
// ② 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时
// 间的毫秒数。
// ③ 把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
// 转换公式如下：
// d = parseInt(总秒数 / 60 / 60 / 24); // 计算天数
// h = parseInt(总秒数 / 60 / 60 % 24); // 计算小时
// m = parseInt(总秒数 / 60 % 60); // 计算分数
// s = parseInt(总秒数 % 60); // 计算当前秒数
function countDown(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 + '秒';
}
console.log(countDown('2022-5-27 00:00:00'));
5. Array数组对象
5.1. 数组对象的创建
创建数组对象的两种方式：
- 字面量方式
var arr = [1, 2, 3];
console.log(arr[0]);
- new Array()
var arr1 = new Array(); // 创建了一个空的数组
var arr1 = new Array(2); // 这个2 表示 数组的长度为2 里面有2个空的数组元素
var arr1 = new Array(3, 5) // 等价于[2,3] 表示里面有2个数组元素 分别是 3和5
5.2. 检测是否为数组
- instanceof 运算符，可以判断一个对象是否属于某种类型
- Array.isArray(参数)用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法
var arr = [11, 12];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false
5.3. 添加删除数组元素的方法
// 1. push(参数1...)
var arr = [1, 2, 3];
console.log(arr.push(4)); //返回结果是新数组长度 4
console.log(arr); // 返回结果是 [1, 2, 3, 4]
// 注意：
// (1) 返回的是 新数组的长度
// (2) 原数组也会发生变化，表现为在【末尾】追加一个元素
// 2. unshift(参数1...)
var arr1 = [11, 22, 33];
console.log(arr1.unshift(44)); // 返回结果是新数组长度 4
console.log(arr1); // 返回结果是 [44, 11, 22, 33]
// 注意：
// (1) 返回的是 新数组的长度
// (2) 原数组也会发生变化，表现为在【开头】追加一个元素
// 3. pop()
console.log(arr.pop()); // 返回结果是 删除的那个元素 4
console.log(arr); // [1, 2, 3]
// 注意：
// (1) 返回的是 删除的元素值
// (2) 原数组也会发生变化，表现为删除原数组的【最后一个元素】
// (3) pop()没有参数
// 4. shift()
console.log(arr1.shift()); // 返回结果是 删除的那个元素 44
console.log(arr1); // [11, 22, 33]
// 注意：
// (1) 返回的是 删除的元素值
// (2) 原数组也会发生变化，表现为删除原数组的【第一个元素】
// (3) shift()没有参数
// 案例： 筛选数组
// 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
newArr.push(arr[i]);
}
}
console.log(newArr);
5.4. 数组排序
// 1. 翻转数组 reverse()
var arr = [1, 3, 5, 7, 9];
arr.reverse();
console.log(arr);
// 2. 数组排序（冒泡排序）sort()
var arr1 = [6, 2, 12, 56, 105, 33];
arr1.sort(function (a, b) {
// return a - b; // 升序排序
return b - a; // 降序排序
})
console.log(arr1);
5.5. 数组索引方法
// 1. 返回数组元素索引号的方法 indexOf(数组元素)
var arr = ['hi', 'halo', 'hello', 'こんにちは', 'hi'];
console.log(arr.indexOf('hi')); // 0
console.log(arr.indexOf('^^')); // -1
// 注意：
// (1) 从前开始查找，返回第一个满足条件的元素的索引号
// (2) 如果在数组里找不到这个元素，返回 - 1
// 2. 返回数组元素索引号的方法 lastIndexOf(数组元素)
console.log(arr.lastIndexOf('hi')); // 4
console.log(arr.indexOf('^^')); // -1
// 注意：
// (1) 从后开始查找，返回第一个满足条件的元素的索引号
// (2) 如果在数组里找不到这个元素，返回 - 1
// 案例： 数组去重（重点案例）
// 有一个数组[‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’]，要求去除数组中重复的元素。
// 分析：
// ① 目标：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重。
// ② 核心算法：我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，
// 否则不添加。
// ③ 我们怎么知道该元素没有存在？ 利用 新数组.indexOf(数组元素) 如果返回时 -1 就说明 新数组里面没有改元素
// 封装一个 去重的函数 unique
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 demo = unique([1, 1, 1, 2, 3, 4, 1, 2, 3, 6, 3, 4, 5])
console.log(demo);
5.6. 数组转换为字符串
// 1. toString() 把数组转换为字符串，逗号分隔每一项
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
// 2. join('自定义的分隔符')
var arr1 = ['hi', 'halo', 'hello', 'こんにちは'];
console.log(arr1.join()); // 默认逗号 hi,halo,hello,こんにちは
console.log(arr1.join('-')); // hi-halo-hello-こんにちは
console.log(arr1.join(' & ')); // hi & halo & hello & こんにちは
5.7. 课下查询
// 1. concat() 连接两个或多个数组，返回一个连接后的新数组
// 注意：
// (1) 不会修改原数组
// 连接两个数组:
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3); // ['a', 'b', 'c', 'd', 'e', 'f']
// 连接三个数组：
var num1 = [1, 2, 3],
num2 = [4, 5, 6],
num3 = [7, 8, 9];
var nums = num1.concat(num2, num3);
console.log(nums); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 将值和数组与其他数组连接：
var alpha = ['a', 'b', 'c'];
var alphaNumeric = alpha.concat(1, [2, 3]);
console.log(alphaNumeric); // ['a', 'b', 'c', 1, 2, 3]
// 2. slice([begin[,end]]) 返回被截取后的新数组
// 注意：
// (1) 不会修改原数组
// (2) 包括begin,不包括end
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2)); // ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4)); // ["camel", "duck"]
console.log(animals.slice(1, 5)); // ["bison", "camel", "duck""elephant"]
console.log(animals.slice(-2)); // ["duck", "elephant"]
console.log(animals.slice(2, -1)); // ["camel", "duck"]
console.log(animals.slice()); // ["ant", "bison", "camel", "duck""elephant"]
console.log(animals); // ['ant', 'bison', 'camel', 'duck', 'elephant']
// 3. splice(start[, deleteCount[, item1[, item2[, ...]]]]) 返回由被删除的元素组成的新数组
// 注意：
// (1) 会修改原数组
// (2) 如果没有删除元素，则返回空数组。
var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, "trumpet");
console.log(myFish); // ['angel', 'clown', 'trumpet', 'sturgeon']
console.log(removed); // ['drum']
console.log(myFish.splice(2, 0, 'guitar')); // []
console.log(myFish); // ['angel', 'clown', 'guitar', 'trumpet', 'sturgeon']
console.log(myFish.splice(3)); // ['trumpet', 'sturgeon']
console.log(myFish); // ['angel', 'clown', 'guitar']
6. String字符串对象
6.1. 基本包装类型
- 基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
- 为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。
// 下面代码有什么问题？
var str = 'andy';
console.log(str.length); // 4
// 按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为 js 会把基本数据类型包装为复杂数据类型，其执行过程如下 ：
// 1. 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;
6.2. 字符串的不可变
- 指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
6.3. 根据字符返回位置
// 案例：返回字符位置
// 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
// 思路：
// ① 核心算法：先查找第一个o出现的位置
// ② 然后 只要indexOf 返回的结果不是 - 1 就继续往后查找
// ③ 因为indexOf 只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找
var str = 'abcoefoxyozzopp';
var index = str.indexOf('o');
var num = 0;
while (index !== -1) {
console.log(index);
num++;
index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是：' + num);
6.4. 根据位置返回字符（重点）
// 1. charAt(index) 根据指定位置返回字符
var str = '嗨，小福~';
console.log(str.charAt(3)); // 福
// 遍历所有字符
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
// 2. charCodeAt(index) 获取指定位置处字符的ASCⅡ码，目的：判断用户按下了哪个键
console.log(str.charCodeAt(4)); // 126
// 3. str[index] H5新增 获取指定位置处的字符
console.log(str[3]); // 福
// 案例：返回字符位置
// 判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
// ① 核心算法：利用 charAt(） 遍历这个字符串
// ② 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 + 1
// ③ 遍历对象，得到最大值和该字符
// 统计所有字符的出现次数
var str = 'abcoefoxyozzopp';
var o = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i);
if (o[chars]) {
o[chars]++;
} else {
o[chars] = 1;
}
}
console.log(o);
// 遍历对象
var max = 0;
var ch = '';
for (var k in o) {
// k 得到的是 属性名
// o[k] 得到的是 属性值
if (o[k] > max) {
max = o[k];
ch = k;
}
}
console.log('最多的字符是' + ch + ',出现次数' + max + '次');
6.5.字符串操作方法（重点）
// substr(start, length) 从第几个字符开始,截取几个
str = '这是执念吧';
console.log(str.substr(2, 2)); // 执念
6.6. replace() 方法
replace() 方法用于在字符串中用一些字符替换另一些字符。
// replace(被替换的字符串， 要替换为的字符串) 只会替换第一个字符
var str = 'lovelove';
console.log(str.replace('o', 'a')); // lavelove
// 将字符串'fuckfuckfuck'里的 u 替换为 *
var str1 = 'fuckfuckfuck';
while (str1.indexOf('u') !== -1) {
str1 = str1.replace('u', '*');
}
console.log(str1); // f*ckf*ckf*ck
6.7. split() 方法
split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。
// 字符转换为数组 split('分隔符') 前面学过用join把数组转换为字符串
var str = 'halo,hello,hi';
console.log(str.split(',')); // ['halo', 'hello', 'hi']
var str1 = 'hi&my&friend';
console.log(str1.split('&')); // ['hi', 'my', 'friend']
6.8. 课下查询
- toUpperCase() //转换大写
- toLowerCase() //转换小写
6.9. 作业
给定一个字符串，如：“abaasdffggghhjjkkgfddsssss3444343”，问题如下：
1、 字符串的长度
2、 取出指定位置的字符，如：0,3,5,9等
3、 查找指定字符是否在以上字符串中存在，如：i，c ，b等
4、 替换指定的字符，如：g替换为22,ss替换为b等操作方法
5、 截取指定开始位置到结束位置的字符串，如：取得1-5的字符串
6、 找出以上字符串中出现次数最多的字符和出现的次数
7、 遍历字符串，并将遍历出的字符两头添加符号“@”
// 给定一个字符串，如：“abaasdffggghhjjkkgfddsssss3444343”，问题如下：
var str = 'abaasdffggghhjjkkgfddsssss3444343';
// 1. 字符串长度
console.log(str.length); // 33
// 2. 取出指定位置的字符，如：0,3,5,9等
console.log(str[0]);
console.log(str.charAt(3));
console.log(str[5]);
console.log(str[9]);
// 3. 查找指定字符是否在以上字符串中存在，如：i，c ，b等
if (str.indexOf('i') !== -1) {
console.log('该字符串存在 i 哦');
} else {
console.log('该字符不存在 i 哦');
}
str.indexOf('c') !== -1 ? console.log('该字符串存在 c 哦') : console.log('该字符不存在 c 哦');
str.indexOf('g') !== -1 ? console.log('该字符串存在 g 哦^^') : console.log('该字符不存在 g 哦');
// 4. 替换指定的字符，如：g替换为22,ss替换为b等操作方法
while (str.indexOf('g') !== -1, str.indexOf('ss') !== -1) {
str = str.replace('g', '22')
str = str.replace('ss', 'b')
}
console.log(str);
// 5. 截取指定开始位置到结束位置的字符串，如：取得1-5的字符串
var str = 'abaasdffggghhjjkkgfddsssss3444343';
console.log(str.substr(1, 5));
// 6. 找出以上字符串中出现次数最多的字符和出现的次数
var o = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i);
if (o[chars]) {
o[chars]++;
} else {
o[chars] = 1;
}
}
var max = 0;
var ch = '';
for (var k in o) {
if (o[k] > max) {
max = o[k];
ch = k;
}
}
console.log('最多的字符是"' + ch + '",出现次数' + max + '次');
// 7. 遍历字符串，并将遍历出的字符两头添加符号"@"
for (var j = 0; j < str.length; j++) {
console.log('@' + str.charAt(j) + '@');
}
1945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
