1.内置对象
JavaScript中的对象分为:自定义对象、内置对象、浏览器对象
内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或者最基本而必要的功能(属性和方法)。Math、Data、Array、String等
2.查文档
查文档学习,通过MDN/W3C来查询
3.Math对象
3.1 常用
<script>
// 1. 绝对值方法
console.log(Math.abs(1)); //1
console.log(Math.abs(-1)); //1
console.log(Math.abs('-1')); //1 隐式转换为数字型
console.log(Math.abs('mmm')); //NaN
// 2. 三个取整方法
// (1) Math.floor() 向下取整
console.log(Math.floor(1.1)); //1
console.log(Math.floor(1.7)); //1
// (1) Math.ceil() 向上取整 ceil:天花板
console.log(Math.ceil(1.1)); //2
console.log(Math.ceil(1.7)); //2
// (1) Math.round() 四舍五入取整 .5 往大了取
console.log(Math.floor(1.1)); //1
console.log(Math.floor(1.7)); //2
console.log(Math.floor(-1.1)); //-1
console.log(Math.floor(-1.5)); //-1
</script>
3.2 随机数方法 random( )
Math.random()
函数返回一个浮点数, 伪随机数在范围从0到小于1,也就是说,从0(包括0)往上,但是不包括1(排除1),然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。
Math.random() - JavaScript | MDN
<script>
// 1.Math对象随机数方法 random() 返回一个随机的小数 [0,1)
// 2. 这个方法里面不跟参数
// 3. 代码验证
console.log(Math.random());
// 4. 两个整数之间的随机整数 并且 包含这两个整数
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值
}
console.log(getRandomIntInclusive(1,10));
// 5.随机点名
var arr = ['张三','李四','王八','刘芳'];
console.log(arr[getRandomIntInclusive(0,arr.length-1)]);
</script>
4.日期对象 Date( )
<script>
// Date() 日期对象 是一个构造函数 必须使用 new来调用创建我们得日期对象
var arr = new Array(); //创建一个数组对象
var obj = new Object(); //创建一个对象实例
// 1. 使用Date 如果没有参数 返回当前系统的当前时间
var date = new Date();
console.log(date);
// 2. 参数常用的写法 数字型 2019,10,01 或字符型 '2019-10-01 08:20:59'
var date1 = new Date(2019,10,01);
console.log(date1); //返回的11月 不是10月
var date2 = new Date('2019-10-01 08:20:59');
console.log(date2);
</script>
实例 输出当前 年月日星期
<script>
// 2022年2月24日 星期四
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]);
</script>
实例 返回当前的 时分秒 格式 08:08:08
<script>
// 格式化日期 时分秒
var date = new Date();
console.log(date.getHours()); // 时
console.log(date.getMinutes()); // 分
console.log(date.getSeconds()); // 秒
// 封装函数 返回当前的 时分秒 格式 08:08:08
function getTimes(){
var time = new Date();
var hour = time.getHours();
hour = hour < 10 ? '0' + hour : hour;
var minutes = time.getMinutes();
minutes = minutes < 10 ? '0' + minutes : minutes;
var seconds = time.getSeconds();
seconds = seconds < 10 ? '0' + seconds : seconds;
return '现在的时间是:' + hour + ':' + minutes + ':' + seconds ;
}
console.log(getTimes());
</script>
时间戳
<script>
// 获得Date总的毫秒数(时间戳) 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒
// 1. 通过 valuOf() getTime()
var date = new Date();
console.log(date.valueOf()); // 现在距离1970.1.1 总的毫秒数
console.log(date.getTime());
// 2. 简单的写法
var date1 = +new Date();
console.log(date1);
// 3. H5 新增的 获得总的毫秒数
console.log(Date.now());
</script>
时间戳转换为 时 分 秒
案例: 倒计时
<script>
// 倒计时效果
function countDown(time){
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000; //time 是剩余时间总的秒数
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-3-4 18:00:00'));
</script>
5.数组对象
5.1 数组对象的创建
创建数组对象的两种方式
- 字面量方式
- new Array()
<script>
// 创建数组的两种方式
// 1. 利用数组字面量
var arr = [1, 2, 3];
console.log(arr[0]);
// 2. 利用new Array
// var arr1 = new Array(); // 创建了一个空的数组
// var arr1 = new Array(2); // 2 表示数组的长度为2 里面有2个空的数组元素
var arr1 = new Array(2, 3); // 等价于[2, 3] 里面有2个数组元素 是 2和3
console.log(arr1);
</script>
5.2 检测数组
-
instanceof 运算符 它可以用来检测是否为数组
-
Array.isArray(参数)
<script>
// 检测是否为数组
// (1) instanceof 运算符 它可以用来检测是否为数组
var arr = [];
var obj = {};
console.log(arr instanceof Array); //true
console.log(obj instanceof Array); //false
// (2) Array.isArray(参数)
console.log(Array.isArray(arr)); //true
console.log(Array.isArray(obj)); //false
</script>
5.3 添加删除数组元素的方法
5.3.1 添加数组元素的方法
- push(参数1...) 在数组的末尾 添加一个或者多个数组元素
- unshift(参数1...) 在数组的开头 添加一个或者多个数组元素
<script>
// 添加删除数组元素的方法
// 1. push() 在我们数组的末尾 添加一个或者多个数组元素
var arr = [1, 2 , 3];
// arr.push(4, 'Pink');
console.log(arr.push(4, 'Pink'));
console.log(arr);
// (1) push() 是可以给数组追加新的元素
// (2) push() 参数直接写 数组元素就可以了
// (3) push() 完毕之后,返回的结果是 新数组的长度
// (4) 原数组也会发生变化
// 2. unshift() 在我们数组的开头 添加一个或者多个数组元素
// arr.unshift('red', 'purple');
console.log(arr.unshift('red', 'purple'));
console.log(arr);
// (1) unshift() 是可以给数组前面追加新的元素
// (2) unshift() 参数直接写 数组元素就可以了
// (3) unshift() 完毕之后,返回的结果是 新数组的长度
// (4) 原数组也会发生变化
</script>
5.3.1 删除数组元素的方法
- pop() 无参数,删除数组的最后一个元素(一次只能删一个)
- shift() 无参数,删除数组的第一个元素(一次只能删一个)
<script>
// 3. pop() 删除数组的最后一个元素
// arr.pop();
console.log(arr.pop());
console.log(arr);
// (1) pop() 是可以给数组删除数组的最后一个元素 一次只能删除一个元素
// (2) pop() 无参数
// (3) pop() 完毕之后,返回的结果是 删除的那个元素
// (4) 原数组也会发生变化
// 3. shift() 删除数组的最后一个元素
// arr.shift();
console.log(arr.shift());
console.log(arr);
// (1) shift() 是可以给数组删除数组的第一个元素 一次只能删除一个元素
// (2) shift() 无参数
// (3) shift() 完毕之后,返回的结果是 删除的那个元素
// (4) 原数组也会发生变化
</script>
案例 :筛选数组
<script>
// 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]要求把数组中超过2100的删除,剩余的放在新数组中
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for(var i =0; i < arr.length; i++){
if(arr[i] < 2000){
// newArr[newArr.length] = arr[i];
newArr.push(arr[i])
}
}
console.log(newArr);
</script>
5.4 数组排序
举例
<script>
// 数组排序
// 1. 翻转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);
// 2. 数组排序(冒泡排序)
var arr1 = [33, 4, 8, 2];
arr1.sort(function(a, b){
// return a - b; // 升序的顺序排列
return b - a; // 降序的顺序排列
});
console.log(arr1);
</script>
5.5 数组索引方法
<script>
// 返回数组元素索引号方法 (索引号从0开始位置固定不变)
// indexOf(数组元素)
// 作用就是从前面开始查找, 返回该数组元素满足条件的第一个元素索引号
// 如果元素不存在 返回-1
var arr = ['pnk', 'grenn', 'blank', 'blue', 'grenn'];
console.log(arr.indexOf('grenn')); // 1
console.log(arr.indexOf('red')); // -1
// lastIndexOf(数组元素)
// 作用就是从最后开始查找, 返回该数组元素满足条件的第一个元素索引号
// 如果元素不存在 返回-1
console.log(arr.lastIndexOf('grenn')); // 4
console.log(arr.lastIndexOf('red')); // -1
</script>
案例: 数组去重(重点案例)
<script>
// indexOf() 元素不存在返回-1
// var arr = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'];
// 封装一个 去重的函数 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);
</script>
5.6 数组转换为字符串
<script>
// 数组转换为字符串
// 1. toString() 将数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString());
// 2. join(分隔符)
var arr1 = ['pink', 'blue', 'orange'];
console.log(arr1.join()); // pink,blue,orange
console.log(arr1.join('-')); // pink-blue-orange
console.log(arr1.join('&')); //pink&blue&orange
</script>
5.7 补充数组函数
6.字符串对象
6.1 基本包装类型
<script>
// 基本包装数据类型
var str = 'andy';
console.log(str.length);
// 对象 才有 属性和方法 复杂数据类型才有 属性和方法
// 简单数据类型为什么会有length属性呢?
// 基本包装类型; 就是把简单数据类型 包装成了复杂数据类型
// (1)把简单数据类型包装为复杂数据类型
var temp = new String('andy');
// (2)把临时变量的值 给 str
str = temp;
// (3)销毁这个临时变量
temp = null;
</script>
6.2 字符串的不可变
6.3 根据字符串返回位置
<script>
// 字符串对象 根据字符串返回位置
// str.indexOf('要查找的字符', 起始的位置)
var str = '改革春风吹满地,春天来了';
console.log(str.indexOf('春')); // 2
console.log(str.indexOf('春', 3)); // 8 从索引号是 3 的位置开始往后查找
console.log(str.lastIndexOf('春')); // 8
console.log(str.lastIndexOf('春', 5)); // 2
</script>
案例:返回字符位置
查找字符串"abcoefoxyozzopp"中所有o出现的位置及次数
(1)核心算法: 先查找第一个o出现的位置
(2)然后 只要indexOf 返回的结果不是-1就继续往后查找
(3)因为indexOf只能查找到第一个,所以后面的查找,利用第二个参数,当前索引加1,从而继续查找
<script>
//查找字符串"abcoefoxyozzopp"中所有o出现的位置及次数
// (1)核心算法: 先查找第一个o出现的位置
// (2)然后 只要indexOf 返回的结果不是-1就继续往后查找
// (3)因为indexOf只能查找到第一个,所以后面的查找,利用第二个参数,当前索引加1,从而继续查找
var str = "abcoefoxyozzopp";
var index = str.indexOf('o');
// console.log(index);
var num = 0;
while(index !== -1){
console.log(index);
num++;
index = str.indexOf('o',index + 1);
}
console.log('o出现的次数:' + num);
</script>
6.4 根据位置返回字符串 (重点)
<script>
// 根据位置返回字符
// 1. charAt(index) 根据位置返回字符
var str = 'andy';
console.log(str.charAt(3));
// 遍历所有的字符
for(var i =0; i < str.length; i++){
console.log(str.charAt(i));
}
// 2. charCodeAt(index) 返回相应索引号的字符ASCII值 目的:判断用户按下了哪个键
console.log(str.charCodeAt(0)); //97
// 3. str[index] H5新增的
console.log(str[0]);
</script>
案例: 返回字符位置
判断一个字符串'abcoefoxyozzopp'中出现次数最多的字符,并统计其次数
<script>
// 有一个对象 来判断是否有该属性 对象['属性名']
var o = {
age: 18
}
if(o['age']){
console.log('里面有该属性');
console.log(o['age']);
}else{
console.log('没有该属性');
}
// 判断一个字符串'abcoefoxyozzopp'中出现次数最多的字符,并统计其次数
// o.a = 1
// o.b = 1
// o.c = 1
// o.o = 4
// 核心算法: 利用 charAt() 遍历这个字符串
// 把每个字符串都存储给对象, 如果对象没有该属性,就为1,如果存在了就+1
// 遍历对象,得到最大值和该字符
var str = 'abcoefoxyozzopp';
var o = {};
for(var i = 0; i < str.length; i++){
var chars = str.charAt(i); //chars 是字符串的每一个字符
if(o[chars]){ // o[chars] 得到的是属性值
o[chars]++;
}else{
o[chars]=1;
}
}
console.log(o);
// 2. 遍历对象
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);
</script>
6.5 字符串操作方法(重点)
<script>
// 字符串操作方法
// 1. concat('字符串1','字符串2','字符串3'...)
var str ='andy';
console.log(str.concat('acc'));
// 2. substr('截取的起始位置','截取几个字符')
var str1 = '改革春风吹满地';
console.log(str1.substr(2, 2)); //第一个2 是索引号的2
</script>
<script>
// 1. 替换字符 replace('被替换的字符', '替换为的字符') 只会替换选中字符的第一个
var str = 'andyandy';
console.log(str.replace('a', 'm'));
// 有一个字符串 'abcoefoxyozzopp' 要求把里面所有的 o 替换为 *
var str1 = 'abcoefoxyozzopp';
while(str1.indexOf('o') !== -1){
str1 = str1.replace('o', '*');
}
console.log(str1);
// 2. 字符转换为数组 split('分隔符') Tips: 之前学过 join 把数组转换为字符串
var str2 = 'red, pink, blue';
console.log(str2.split(','));
var str3 = 'red&pink&blue';
console.log(str3.split('&'));
</script>
其他方法:
课后作业: