本文详细介绍了JavaScript的内置对象，如Math、Date和Array，以及如何使用它们的方法。此外，还探讨了字符串对象和数据类型的区分，包括简单类型与复杂类型的概念以及内存分配。最后，通过示例展示了如何进行数组操作、日期格式化和随机数生成。
2021.1.15
文章目录
JS学习笔记（五）
JS内置对象
内置对象
- JavaScript中的对象分为三种：自定义对象，内置对象和浏览器对象。
- 前面两种对象是JS基础内容，属于ECMAScript；
- 第三个浏览器对象属于我们JS独有的，我们在学习JS API时重点讲解。
- 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能(属性和方法)。
- 内置对象最大的优点就是帮助我们快速开发。
- JavaScript提供了多个内置对象：Math、Date、Array、String等。
查文档
MDN
学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。
Mozilla开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息，包括HTML、CSS和万维网及HTML5应用的API。
MDN官方网址：https://developer.mozilla.org/zh-CN/
如何学习对象中的方法
- 查阅该方法的功能
- 查看里面参数的意义和类型
- 查看返回值的意义和类型
- 通过demo进行测试
Math对象
Math数学对象不是一个构造函数，所以我们不需要new来调用，而是直接使用里面的属性和方法即可。例如：
console.log(Math.PI);//一个属性 圆周率
console.log(Math.max(-1,-10));//-1
console.log(Math.max(1,99,'Ludwig'));// NaN
console.log(Math.max());//-Infinity
练习：封装自己的数学对象
利用对象封装自己的数学对象，里面有PI、最大值和最小值。
<script>
var myMath = {
PI: 3.141592653,
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(1, 9, 85, 7));
</script>
Math概述
Math对象不是构造函数，它具有数学常数和函数的属性和方法。
跟数学相关的运算（求绝对值，取整，最大值等）可以使用Math中的成员。
Math.PI //圆周率
Math.floor() //向下取整，往小了取（floor地板）
Math.ceil() //向上取整，往大了取（ceil天花板）
Math.round() //四舍五入版，就近取整。
//注意.5特殊，往大了取，如：-3.5结果是-3
Math.abs() //绝对值
Math.max()/Math.min() //求最大和最小值
Note：console.log(Math.abs(’-1’));//输出结果为1，说明abs()方法存在隐式转换，会把字符串型的’-1’转换为数字型的’-1’。
随机数方法random()
- random()返回一个随机的小数。范围属于[0,1)。
- 这个方法里面不跟参数。
- 我们想得到两个数字之间的随机整数，并且包含这两个整数。
查阅MDN文档可知：
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,arr.length-1)]);
日期对象
Date()日期对象是一个构造函数，必须使用new来调用创建我们的日期对象。
Note:
var arr=new Array();//创建一个数组对象
var obj=new Object();//创建了一个对象实例
使用Date
var date = new Date();
console.log(date);
- 如果没有参数，返回当前系统时间
- 参数常用的写法
- 数字型 2021,1,14
- 字符串型 ‘2021-1-14 8:8:8’//常用
var date1=new Date(2021,1,14); console.log(date1);//返回的是11月，不是10月 var date2=new Date('2021-1-14 8:8:8'); console.log(date2);
日期格式化
我们可以采用如下方法：
getFullYear(); //获取当前年
getMonth(); //获取当月(0-11)
getDate(); //获取当天日期
getDay(); //获取星期几(周日0~周六6)
getHours(); //获取当前小时
getMinutes(); //获取当前分钟
getSeconds(); //获取当前秒
Note:
1.输出月份的时候要记得加1
console.log(date.getMonth()+1);
2.输出今天周几，周一周六返回的是16，而周日返回的是0
console.log(date.getDay());
案例1：写一个 今天是2021年1月14日 周四
var date = new Date();//先创建对象实例
var year = date.getFullYear();
var month = date.getMonth()+1;
var dates = date.getDate();
var arr=['日','一','二','三','四','五','六'];
var day = date.getDay();
console.log('今天是'+year+'年'+month+'月'+dates+'日'+' '+'星期'+arr[day]);
案例2：要求封装一个函数返回当前的时分秒，格式为 08:08:08
function getTimer() {
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(getTimer());
获取日期的总的毫秒形式(时间戳)
Date对象是基于1970年1月1日(世界标准时间)起的毫秒数。
我们经常利用总的毫秒数来计算时间，因为它更精确。
Note：
获取Date总的毫秒数，不是当前时间的毫秒数，
而是距离1970年1月1号过了多少毫秒。
- 1.通过valueOf()、getTime()
var date = new Date(); console.log(date.valueOf()); console.log(date.getTime());//我们现在的时间距离1970.1.1总的毫秒数。 - 2.简单的写法(最常用的写法)
var date1 = +new Date();//如果参数不为空则返回的是括号里时间总的毫秒数。 console.log(date1); - 3.H5新增的方法Date.now();
console.log(Date.now());
案例：倒计时
分析：
- 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数。
- 用时间戳来做。用户输入时间的总的毫秒数-现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
- 把剩余时间的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）
转换公式如下：
- d = parseInt(总秒数/60/60/24);//计算天数
- h = parseInt(总秒数/60/60%24);//计算小时
- m = parseInt(总秒数/60%60); //计算分数
- s = parseInt(总秒数%60); //计算当前秒数
<script>
function countDown(time){
var nowTime=+new Date();//如果括号为空，返回的是当前时间总的毫秒数
var inputTime=+new Date(time);//如果括号非空，返回的是用户输入时间总的毫秒数
var times=(inputTime-nowTime)/1000;//time是剩余时间总的毫秒数，1s=1000ms
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('2021-1-16 00:00:00'));
var date=new Date();
console.log(date);
</script>
数组对象
数组对象的创建
创建数组对象有两种方式：
- 字面量方式
- new Array()
var arr1=new Array();//创建一个空的数组 var arr2=new Array(2);//创建一个长度为2的数组，里面有两个空的数组元素 var arr3=new Array(2,3);//等价于[2，3]，里面有两个数组元素是2和3
检测是否为数组
1.instanceof运算符，它可以用来检测是否为数组。
var arr = [];
console.log(arr instanceof Array);//arr是否属于Array，如果属于是数组，返回true。
2.Array.isArray(参数); 用该方法检测是否为数组。//H5新增的方法
var arr = [];
console.log(Array.isArray(arr));
添加删除数组元素的方法
-
push()：在我们数组的末尾，添加一个或者多个数组元素 push 推
var arr=[1,2,3]; arr.push(4,'Ludwig');- 作用：push()可以给数组末尾追加新的元素
- 参数：push()参数直接写数组元素就可以了
- 返回值：push完毕后，返回的结果是新数组的长度
console.log(arr.push(4,‘Ludwig’));//返回值是5
-
unshift：在我们的数组开头，添加一个或者多个数组元素
var arr=[1,2,3]; arr.unshift('red','blue');- 作用：usnhift()可以给数组开头追加新的元素
- 参数：unshift()参数直接写数组元素就可以了
- 返回值：unshift()完毕后，返回的结果是新数组的长度
console.log(arr.unshift(4,‘Ludwig’));//返回值是5
-
pop()：它可以删除数组的最后一个元素
arr.pop(); console.log(arr);//返回剩下的数组 console.log(arr.pop());//返回被删掉的元素- 作用：pop()可以删除数组的最后一个元素，但一次只能删一个
- 参数：pop()没有参数
- 返回值：pop()完毕之后，返回的结果是删除的那个元素
-
shift()：它可以删除数组的第一个元素
arr.shift(); console.log(arr);//返回剩下的数组 console.log(arr.shift());//返回被删掉的元素- 作用：shift()可以删除数组的第一个元素，但一次只能删一个
- 参数：shift()没有参数
- 返回值：shift()完毕之后，返回的结果是删除的那个元素
数组排序
-
reverse() 翻转数组
var arr=['8','1','Ludwig']; arr.reverse(); console.log(arr); console.log(arr.reverse()); -
sort() 数组排序(冒泡排序)
var arr=[3,4,7,1]; arr.sort(); console.log(arr);Note:数组元素只能是个位数
如果是13，4，77，1，7。返回结果是1，13，4，7，77。错误。var arr=[13,4,77,1，7]; arr.sort(function(){ return a-b;//升序的顺序排列 //return b-a;//降序的顺序排列 }); console.log(arr);
数组索引方法
-
indexOf()：数组中查找给定元素的第一个索引。如果找不到，则返回-1。
var arr=['red','green','blue','pink']; console.log(arr.indexOf('blue'));//返回值2 -
lastIndexOf()：数组中的最后一个索引，从后往前找。找不到则返回-1。
案例：数组去重
1.目标：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去。
2.核心算法：遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，就添加，否则不添加。
3.我们怎么知道该元素没有存在？利用新数组.indexOf(数组元素)，
如果返回 -1 则说明新数组里面没有该元素。
4.封装一个去重的函数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(['c','a','z','a','x','a','x','c','b']);
console.log(demo);
数组转换为字符串
-
toString()：把数组转换成字符串，逗号分隔每一项。返回值是一个字符串。
var arr = [1,2,3]; console.log(arr.toString()); -
join(‘分隔符’)：把数组中的所有元素转换为一个字符串
var arr = ['green','red','blue']; console.log(arr.join());//green,red,blue.如果没有参数默认逗号分隔 console.log(arr.join('-'));//green-red-blue.
数组中的其他常用方法
-
concat():数组连接
连接两个或多个数组，不影响原数组。
返回值:返回一个新的数组。var arr1 = ['a','b','c']; var arr2 = ['d','e','f']; var arr3 = arr1.concat(arr2); console.log(arr3);//["a", "b", "c", "d", "e", "f"] -
slice()：数组截取
var color=['red','blue','green','black','yellow']; console.log(color.slice(2));//["green", "black", "yellow"]前两个截掉 console.log(color.slice(2,4));//["green", "black"] //浅拷贝slice(begin,end),包括begin，不包括end。 console.log(color.slice(1,5));//["blue", "green", "black", "yellow"] -
splice()：删除或替换数组元素//此方法会改变原数组
var months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); // replaces 0 element at index 1，即inserts at index 1 console.log(months); // expected output: Array ["Jan", "Feb", "March", "April", "June"] months.splice(4, 1, 'May'); // replaces 1 element at index 4 console.log(months); // expected output: Array ["Jan", "Feb", "March", "April", "May"]
字符串对象
一个问题
var str = 'andy';
console.log(str.length);//4
对象，也就是复杂数据类型，才有属性和方法，
简单数据类型字符串为什么会有length属性呢？
基本包装类型
基本包装类型：就是把简单数据类型包装成为了复杂数据类型。
- 第一步：把简单数据类型包装为复杂数据类型
var temp = new String('andy'); - 第二步：把临时变量的值给str
str = temp; - 第三步：销毁临时变量
temp = null;
这样基本数据类型就有了属性和方法。
为了方便操作基本数据类型JavaScript提供了三个特殊的引用类型：
String，Number和Boolean。
字符串的不可变
指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中开辟了一个新的内存空间。因此我们不要大量的拼接字符串。
var str = '';
for (var i = 1;i <= 1000000000;i++){
str += i;
}
console.log(str);//由于字符串的不变性，在不停开辟新的内存空间，所以可能会卡死。
也因此，字符串的所有方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。
根据字符返回位置
1. str.indexOf(‘要查找的字符’,[起始的位置])//中括号表示可选项。
var str = '改革春风吹满地，春天来了';
console.log(str.indexOf('春'));
console.log(str.indexOf('春',3));//从索引号是3的位置开始往后查找
2. lastIndexOf()//从后往前查找，只找到第一个匹配的。
案例：查找字符串中某个字符串中某个字符出现的位置及次数
var str = 'abcoefoxyozzopp';
var index = str.indexOf('o');
var num = 0;
while(index !== -1){
console.log(index);
num++;
index = str.indexOf('0',index + 1);
}
console.log('o出现的次数是：'+num);
根据位置返回字符
-
charAt(index)：根据位置返回字符
var str = 'andy'; console.log(str.charAt(3));//y //遍历所有字符串所有的字符 for (var i = 0;i < str.length;i++){ console.log(str.charAt(i)); } -
charCodeAt(index)：返回指定位置处字符的ASCII码值
目的：判断用户按下了哪个键。console.log(str.charCodeAt(0));//97 -
str[index]：获取指定位置处字符//HTML5新增
console.log(str[0]);//a
案例：判断一个字符串中出现次数最多的字符，并统计其次数
一个铺垫：
//有一个对象
var obj = {
age:18
}
if (obj['age']){//obj['age']相当于obj.age
//如果没有该属性返回的值就是undefined，在if中转化为false
console.log('里面有该属性');
}else{
console.log('没有该属性');
}
案例分析：
1.核心算法：利用charAt()遍历这个字符串
2.把每个字符都存储给对象，如果对象没有该属性就为1，如果存在了就+1
3.遍历对象，得到最大值和该字符
var str = 'abcoefoxyozzopp';
var obj = {};
for(var i = 0;i < str.length;i++){
var chars = str.charAt(i);//chars是字符串的每一个字符
if(obj[chars]){//obj[chars]得到的是属性值，相当于上文的obj.age
obj[chars]++;
}else{
obj[chars] = 1;
}
}
console.log(obj);
//遍历对象，用for...in
var max = 0;
var ch = '';
for(var k in obj){
//k得到的是属性名
//o[k]得到的是属性值
if(o[k]>max){
max = o[k];
ch = k;
}
}
console.log(max);
console.log('出现最多的字符是'+ch);
字符串操作方法
-
concat(str1,str2,str3…)
concat()方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用。var str = 'andy'; console.log(str.concat('red'));//andyred -
substr(start,length)
var str = '改革春风吹满地'; console.log(str.substr(2,2));//春风 //第一个2是索引号的2，第二个2是截取长度 -
replace(‘被替换的字符’，‘替换为的字符’)：替换字符
var str = 'andyandy'; console.log(str.replace('a','b'));//bndyandyNote:它只会替换第一个字符。
案例：把一个字符串里所有字符o全部替换为
var str = 'abcoefoxyozzopp'; while(str.indexOf('o') !== -1){ str=str.replace('o','*'); } console.log(str);//过滤文章敏感词 -
split(‘分隔符’) 字符转换为数组//join把数组转换为字符串
split里的分隔符取决于字符串里是用什么隔开的var str1 = 'red,pink,blue'; console.log(str1.split(','));//["red", "pink", "blue"] var str2 = 'red&pink&blue'; console.log(str2.split('&'));//["red", "pink", "blue"] console.log(str2.split('l')); //["red&pink&b", "ue"] -
toUpperCase()：转换大写
-
toLowerCase()：转换小写
JS简单类型与复杂类型（数据类型的总结）
简单类型与复杂类型
简单类型又叫做基本数据类型或者值类型，
复杂类型又叫做引用类型
-
值类型：简单数据类型/基本数据类型，在存储变量中存储的是值本身，因此叫做值类型。string，number，boolean，undefined，null
Note:简单数据类型null很特殊，它返回的是一个空的对象object。
因此，如果有个变量我们以后打算存储为对象，暂时还没想好放啥，这个时候就给null。var timer = null; console.log(typeof timer);//object -
引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址(引用)，因此叫做引用数据类型。可以通过new关键字创建对象(系统对象、自定义对象)，如：Object、Array、Date等。
堆和栈
在计算机中，操作系统会将内存分为两大类，堆和栈。
堆栈空间分配区别：
- 栈(操作系统)：简单数据类型存放到栈里面
由操作系统自动分配释放存放函数的参数值、局部变量的值等。
其操作方式类似于数据结构的栈; - 堆(操作系统)：复杂数据类型存放到堆里面
一般由程序员分配释放，存储复杂数据类型(对象)，
若程序员不释放，由垃圾回收机制回收。
Note:JavaScript中没有堆栈的概念，通过堆栈的方式，可以更容易理解代码的一些执行方式，便于将来学习其他语言。
简单类型与复杂类型的内存分配
- 简单数据类型
- 值类型(简单数据类型)：string，number，boolean，undefined，null
- 值类型变量的数据存放在变量(栈空间)中，在栈里面，直接开辟一个空间，存放的是值。
- 复杂数据类型
- 引用类型(复杂数据类型)：通过new关键字创建对象(系统对象、自定义对象)，如：Object、Array、Date等。
- 首先是在栈里面存放地址，用十六进制表示，然后这个地址指向堆里面的数据。真正的对象实例存放到堆空间中。
简单类型传参
函数的形参也可以看作是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，形参在栈里也开辟一个新的空间，那么在方法内部堆形参做任何修改，都不会影响到外部变量。
复杂类型传参
函数的形参也可以看作是一个变量，当我们把引用类型变量传给形参时，其实时把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。
function Person(name){
this.name=name;
}//这是一个构造函数
function f1(x){
console.log(x.name);//2.刘德华
x.name='张学友';
console.log(x.name);//张学友
}
var p = new Person('刘德华');
console.log(p.name);//1.刘德华
f1(p);//x=p.x和p都是变量，p将自己的地址复制给x
console.log(p.name);//张学友
个人小结
今天完成了毕业设计的任务书，花了许多时间，晚上和舍友去学校北门外吃了烤鱼，耽搁了一点时间，现在是1月16日的凌晨2点16分。庆幸JavaScript第一阶段语法阶段基本告一段落，也即将迎来JavaScript的第二阶段Web APIs阶段的学习。五天时间对我个人而言，这个学习强度还是挺大的，身体有些疲倦，知识有些遗忘，但还是坚持下来了。坚持每天一篇博客，也看到了陌生人的鼓励，对一个初学者来说，是莫大的鼓舞，还会继续坚持还会继续努力。学校里已经没有什么人了，挺冷清，明天（就是今天16号）会全力完成开题报告的书写，并且和女朋友约了哥老官火锅，可能会停更一天。23分了，准备睡觉。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
