+pink老师的JS教程笔记3+内置对象 Math Date 数组 字符处理 简单与复杂数据类型
JavaScript 内置对象
目标
- 能够说出什么是内置对象
- 能够根据文档查询指定 API 的使用方法
- 能够使用 Math 对象的常用方法
- 能够使用 Date 对象的常用方法
- 能够使用 Array 对象的常用方法
- 能够使用 String 对象的常用方法
js 中对象分为： 自定义对象、内置对象、浏览器对象
使用 MDN 查阅文档：
- 查阅该方法的功能
- 查看里面参数的意义和类型
- 查看返回值的意义和类型
- 通过 demo 进行测试
Math 对象
不是一个构造函数，所以不需要 new 来调用 而是直接使用里面的方法和属性
console.log(Math.PI); //一个属性 圆周率
console.log(Math.max(1, 99,3)); // 99
console.log(Math.max(-1, -10)); // -1
console.log(Math.max(1, 99, 'pink老师')); // NaN 有字符串或其他类型数据
console.log(Math.max()); // -Infinity 空值返回负无穷
- Math.PI // 圆周率
- Math.floor() // 向下取整
- Math.ceil() // 向上取整
- Math.round() // 四舍五入版 就近取整 -3.5 结果为 -3
- Math.abs() // 绝对值
- Math.max() /Math.min() // 最大最小值
案例 封装自己的函数
var myMath = {
PI: 3.141592653,
max: function() {
// var max = arr[0];
var max = arguments[0];
for (var i = 1;i < arguments.length; i++) {
if (max < arguments[i]) {
max = arguments[i];
}
}
return max;
},
min: function() {
var min = arguments[0];
for (var i = 1;i < arguments.length; i++) {
if (min < arguments[i]) {
min = arguments[i];
}
}
return min;
}
}
// var result = ;
console.log(myMath.max(1,2,5,6,8));
console.log(myMath.min(1,2,5,6,8));
案例 Math的绝对值 取整
// 1. 绝对值方法
console.log(Math.abs(1)); // 1
console.log(Math.abs(-1)); // 1
console.log(Math.abs('-1')); // - 隐式转换 转为数字型 1
console.log(Math.abs('pink')); // NaN
// 2. 三个取整方法
// (1) Math.floor() 地板 向下取整 往最小了取值
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1.9
// (2) Math.ceil() ceil天花板 向上取整往最大取
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2
// (3) Math.round() 四舍五入
// 其他数字都是四舍五入 但 .5 特殊
// 往大了取 -1 比 -2 大
console.log(Math.round(1.1)); // 1
console.log(Math.round(1.5)); // 2
console.log(Math.round(1.9)); // 2
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // -1
console.log(Math.round(-1.9)); // -2
console.log(Math.round(-1.51)); // -2
Math.random()
- 返回对象随机数方法 Math.random() 返回一个随机的小数 0 <= x < 1
- 这个方法内不跟参数
案例 随机取整数
// Math.floor(Math.random() * (max - min + 1)) + min;
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1,10));
// 随机点名
var arr = ['张三', '张三丰','李四', '李思思'];
console.log(arr[getRandom(0,3)]);
案例 猜数字游戏 自己的思路不忍直视 还是不够理解各个语句的用法
//随机生成1~10的数字 并让用户输入一个数字
// 1. 如果大于该数字 就提示数字大了 继续
// 2. 小于
// 3. 等于 结束程序
// 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 num = prompt('猜数字');
if (num > random) {
alert('猜大了');
} else if (num < random) {
alert('猜小了');
} else {
alert('恭喜');
break; // 退出整个循环
}
}
案例 猜数字游戏限制次数
for (var i = 0; i < 10; i++) { // 死循环 一定要记得退出
var num = prompt('猜数字');
if (num > random) {
alert('猜大了');
} else if (num < random) {
alert('猜小了');
} else {
alert('恭喜');
break; // 退出整个循环
}
if (i == 9){
alert('遗憾');
}
}
Date 日期对象
是一个构造函数 必须使用 new 来调用创建日期对象，date对象主要用来处理日期和时间
使用时必须实例化
// 1. 使用 Date 如果没有参数 则返回当前系统的当前时间
var date = new Date();
console.log(date);
// 2. 参数的常用写法 数字型 2020, 04, 05 或者是 字符串型 '2020-04-05 16:34'
var date1 = new Date(2020, 4, 1);
console.log(date1); // 返回的是5月 而不是4月
var date2 = new Date('2020-04-05 16:34');
console.log(date2);
// 格式化日期 年月日
var date3 = new Date();
console.log(date3.getFullYear()); // 返回当前日期的年
console.log(date3.getMonth() + 1); // 月份 0-11
| 方法名 | 说明 |
|---|---|
| getFullYear() | 获取当年 |
| getMonth | 获取当月 （0-11） |
| getDate() | 获取当天日期 |
| getDay() | 获取星期几 **（0-6）周日为0 ** |
| getHours() | 获取当前小时 |
| getMinutes() | 获取当前分钟 |
| getSeconds() | 获取当前秒钟 |
案例 格式化日期
// 输出 2020年4月5日 星期天
var dateb = new Date('2020-8-5 11:04');
var yearb = dateb.getFullYear();
var monthb = dateb.getMonth() + 1;
var date = dateb.getDate();
var day = dateb.getDay();
var arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
console.log('今天是' + yearb + '年' + monthb +'月' + date + '天天' + arr[day]);
案例 格式化日期 时分秒
// 格式化时分秒
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());
案例 date的总毫秒数 时间戳
从1970.1.1开始的总毫秒数
// 1. 通过 valueOf90 getTime()
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
// 2. 简单的写法 （最常用）
var date1 = +new Date(); // +new Date() 返回的就是总毫秒数
console.log(date1);
// 3. h5 新增的 获得总的毫秒数
console.log(Date.now());
案例 倒计时
- 核心算法：输入时间减去现在的时间即倒计时，但不能拿时分秒相减
- 用时间戳来完成
- 把剩余时间转换为天 时 分 秒
公式如下：
- d = parseInt(总秒数/ 60/60/24); // 计算天数
- h = parseInt(总秒数/ 60/60%24); // 计算小时
- m = parseInt(总秒数/60%60); // 计算分数
- s = parseInt(总秒数%60; // 计算当前秒数
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('2020-4-7 16:00:00'));
var date = new Date();
console.log(date);
数组对象
- 复习创建数组的两种方式
var arr = ['天天', 2, 3]; // 利用字面量
console.log(arr[0]);
var arr1 = new Array(); // 创建了一个空数组
console.log(arr1);
var arr2 = new Array(2); // 创建了数组长的为 2 的新数组
console.log(arr2);
var arr3 = new Array('天天', 8); // 等价于 ['天天', 8] 表示2个数组元素 是 天天 和 8
console.log(arr3);
案例 判断是否为数组
function reverse(arr) {
if (arr instanceof Array) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
} else {
return 'error';
}
}
console.log(reverse([1, 2, 3, '天天']));
console.log(reverse(1,'tt'));
- 添加删除数组元素的方法
- push() 在数组的末尾添加一个或多个元素
var arr = [1, 2, 3];// 返回新数组长度
console.log(arr.push(4, ‘天天’));
console.log(arr); - unshift 在数组的开头添加一个或多个元素
arr.unshift(‘不准天天’, ‘禁酒’);// 返回新数组长度 - pop() 可以删除数组的最后一个元素
arr.pop()// 返回删除的元素 - shift() 删除数组的第一个元素
arr.shift()// 返回第一个元素的值
| 方法名 | 说明 | 返回值 |
|---|---|---|
| push(参数1,…) | 末尾添加元素，注意修改i原数组 | 数组长度 |
| pop() | 删除数组最后一个元素，把数组长度兼1无参数/修改原数组 | 删除的元素 |
| unshift(参数1,…) | 在数组开头添加一个或多个元素，注意修改原数组 | 数组长度 |
| shift() | 删除数组的第一个元素，数组长度减1无参数/修改原数组 | 第一个元素的值（不是删除的元素) |
案例 push筛选数组
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
// newArr[i] = arr[i]; // 会产生空元素
// newArr[newArr.length] = arr[i];
newArr.push(arr[i]);
}
}
console.log(newArr);
-
数组排序
-
翻转数组
var arr = [1, 2, 3];
arr.reverse(); -
数组排序（冒泡）
var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a, b){
// return a - b; // 升序
return b - a; // 降序
});
- 返回数组元素索引号
| 方法名 | 说明 | 返回值 |
|---|---|---|
arr.indexOf(数组元素) |
从前面开始查找到的第一个元素 | 不存在则返回 -1 |
arr.lastIndexOf(数组元素) |
从后面开始查找 | 不存在则返回 -1 |
案例 数组去重
分析 1. 目标：把旧数组内不重复的元素取出来放入新数组，重复的元素只保留一个
分析 2. 核心算法： 遍历旧数组，拿着旧数组去查询新数组，该元素没出现过则添加，否则不添加
分析 3. 利用 新数组.indexOf(数组元素)返回 -1 则表示不重复
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 x9 = unique(['c', 'd', 'f', 'c', 'r', 'r']);
console.log(x9);
- 数组转换为字符串
toString()只能用逗号分隔join(分隔符)自定义分割符号
课下查询作业
| 方法名 | 说明 | 返回值 |
|---|---|---|
concat() |
连接两个或多个数组 不影响原数组 | 返回新数组 |
slice() |
数组截取slice(begin, end) | 返回被截取项目的新数组 |
splice() |
数组删除splice(第几个开始，要删除的个数) | 返回被删除项目的新数组，会影响原数组 |
var uniq1 = [1, 2, 3, 4, 5];
var uniq2 = [6, 7, 8, 9, 0];
var uniq3 = [];
var uniq4 = [6, 7, 8, 9, 0];
console.log(uniq3.concat(uniq1, uniq2)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
console.log(uniq1.slice(1,3)); // 2,3 默认不包括结束位置的元素
console.log(uniq1); // 不变
console.log('uniq4+' + uniq4); // uniq4+6,7,8,9,0
console.log(uniq4.splice(2,2)); //[8, 9]
console.log('splice后的' + uniq4); // splice后的6,7,0
参考的slice用法 - csdn
字符串对象
对象 才有属性和方法 复杂数据类型 才有属性和方法
- 基本包装类型：把简单数据类型 包装成为 复杂数据类型，这样基本数据类型就有了 属性和方法
var str = ‘uniq’;// 基本数据类型本无 属性和方法
console.log(str.length);
但以上代码可执行是因为 JS 会把基本数据类型包装为复杂数据类型 执行过程如下：
// 1. 生成临时变量，把简单数据类型包装为复杂数据类型
var temp = new String(‘uniq’);
// 2. 赋值给我们声明的字符变量
str = temp;
// 3.销毁临时变量
temp = null;
- 字符串的不可变性
指的是里面的值不变，实质改变的是地址 在内存中开辟了新的存储空间（指针改变了）
- 当重新给 str 赋值时， 常量 ‘uniq’ 不会被修改，但依然在内存中
- 重新给字符串赋值，会重新在内存中开辟空间，这就是字符串的不可变
- 由于字符串的不可变，在大量拼接字符串时就会产生效率问题
var str = 'uniq';
str = 'x9'; // 已改变地址
var str = '';
for (var i =0; i <1000000; i++) {
str += i;
}
console.log(str); // 不断开辟新的空间 需要大量的时间和内存
- 返回字符的位置
str.indexOf()
案例 返回字符出现的次数
// 核心算法： 先查找第一个字符 出现的位置
// 然后 只要 indexOf 返回的结果不是 -1 就继续往后查找
// 因为 indexOf 只能找到第一个，所以后面的查找一定是当前索引 + 1 后继续查找
var str =['red', 'blue', 'red', 'green', 'pink', 'red'];
var index = str.indexOf('red');
var num = 0;
while(index !== -1) {
console.log(index);
num++;
index = str.indexOf('red', index + 1);
}
console.log('共' + num + '次');
- 根据位置返回字符 重点
| 方法名 | 说明 | 使用 |
|---|---|---|
charAt(index) |
返回指定位置的字符（index字符串的索引号） | str.chrAt(0) |
charCodeAt(index) |
获取指定位置处字符的ASCII码 | str.charCodeAt(0) |
str[index] |
获取指定位置处字符 | h5, IE8+支持，和 charAt() 等效 |
var str = 'web';
console.log(str.charAt(0));
console.log(str.charCodeAt(0));
console.log(str[0]);
案例 统计出现最多的字符和次数
核心算法：利用 charAt（） 遍历这个字符串
把每个字符都存储给对象，若没有该属性就为 1，若存在了就 +1
遍历对象 得到最大值和字符串
var str = 'abcoefoxyozz';
var obj = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i); //chars 是字符串的每一个字符
// obj[chars] 是调用属性
if (obj[chars]) { //.chars 输出12
obj[chars]++; // 属性存在则加一
} else {
obj[chars] = 1;
}
// if (obj.chars) { //.chars 输出12
// 调用属性方法不管用 查找了原因：对象.静态 对象[变量]
}
console.log(obj);
var max = 0;
var ch = '';
for (var k in obj) {
if (obj[k] > max) { // k是属性名
max = obj[k]; // obj[k] 是属性值
ch = k;
}
}
console.log(max);
console.log('最多的是' + ch);
js 获取对象属性的两种方式 - csdn
js 对象中的中括号与点在调用对象属性时的区别 - csdn
字符串操作方法（重点）
| 方法名 | 说明 |
|---|---|
concat(str1,str2,str3…) |
连接两个字符串，等效于 + ，最常用 |
substr(start,length) |
(start索引号, length取的个数) 重点记 |
slice(start,end) |
(开始位置, 结束位置) end取不到 |
substring(start, end) |
基本与 slice 相同，但不取负值 |
-
替换字符 replace(‘被替换的字符’, ‘替换为的字符’) 只会替换第一个
var str2 = ‘bj’;
console.log(str.replace(‘b’,‘y’)); -
字符串转换为数组 split(‘分隔符’) （join 把数组转换为字符串）
-
转换大小写
toUpperCase() // 转换大写
toLowerCase() // 转换小写
简单数据类型与复杂数据类型
-
能够说出简单数据类型的内存分配
-
能够说出复杂数据类型的内存分配
-
能够说出简单类型如何传参
-
能够说出复杂类型如何传参
-
简单类型与复杂类型
简单类型又叫做基本数据类型或者 值类型，复杂类型又叫做 引用类型- 值类型：简单数据类新/基本数据类型， 在存储中就是值得本身
string, number, boolean, undefined, null - 引用类型：复杂数据类型，在存储时变量中存储得仅仅时地址（引用）
通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
- 值类型：简单数据类新/基本数据类型， 在存储中就是值得本身
-
堆和栈 （js 内本无堆栈）
- 栈（操作系统）：由操作系统自动分配释放存放函数得参数值、局部变量得值等，操作方式类似数据结构中得栈，简单数据类型存放到栈里面
- 堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收，复杂数据类型存放到堆里面
-
传参
- 简单数据类型传参：函数的形参可以看作一个变量，当我们把一个值类型作为参数传给函数得形参时，其实是把变量在栈空间里得值复制了一份给形参，在方法内部对形参做任何修改都不会影响到外部变量
- 复杂数据类型传参：函数得形参也可以看作是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存得地址复制给了形参，实参和形参保留得是同一个堆地址，所以操作的是同一个对象
- 简单数据类型传参：函数的形参可以看作一个变量，当我们把一个值类型作为参数传给函数得形参时，其实是把变量在栈空间里得值复制了一份给形参，在方法内部对形参做任何修改都不会影响到外部变量
function Person(name) {
this.name = name;
}
function f1(x) {
console.log(x.name); // 2. 刘德华
x.name = '张学友';
console.log(x.name); // 3. 张学友
}
var p = new Person('刘德华');
console.log(p.name); // 1. 刘德华
f1(p);
console.log(p.name); // 4.张学友
（传参要自己动手画两次图才能够理解）
200424补充：
字符串的不可变性：重新赋值时是开辟新的内存空间。
到此js基础终于终于学习完毕，划水的这么多天我深感后悔……到目前为止都还不能够算是真正的开始，就要开始做摸鱼的毕业设计了，看到第190p视频里大家的完结撒花还是很感动的，下个视频再见啦各位同学，可能很久以后我才会来 hhhh^^