此专栏适用于已经入门JavaScript的同学做复习回顾使用,因为讲解具有跳跃性不推荐零基础的新手学习~
内置对象
Math
Math.abs 绝对值
Math.abs(-1) --> 1
Math.abs('-1') --> 1
Math.abs('one') --> NaN
Math.floor 地板 下取整
Math.cell 天花板 向上取整
Math.round 四舍五入
Math.floor(1.9) // 1
Math.ceil(1.1) // 2
Math.round(1.9) // 2
注意:Math.round( ) 其他数字都是四舍五入,但是 .5 特殊 ,它往大了取。
Math.round(-1.1); 结果是 -1
Math.round(-1.5); 结果是 -1
Math.random随机数方法
random()方法可以随机返回一个小数,其取值范围是[0,1] 左闭右开 0<= x <1;
得到一个两数之间的随机整数,包括第一个数,不包括第二个数。
得到两个数之间的随机整数,左闭右闭。
function getRandom(min,max){
return Math.floor(Math.random() * (max - min + 1) + min);
}
getRandom(1,10) //得到1 ~10 之间的一个整数
Date
日期对象,可以用来处理日期和时间,得到时分秒。
Date 是个构造函数,必须使用 new 来调用创建我们的日期对象。
如果没有参数,返回系统当前时间。
var date = new Date();
console.log(date);
Wed May 01 2019 10:20:56 GMT+800 (中国标准时间)
带参数常见写法:
数字型: 2019,10,01
var date = new Date(2019,10,1);
console.log(date);
Wed Nov 01 2019 00:00:00 GMT+800(中国标准时间)
返回的是 11月
字符串型:’2019-10-1 8:8:8‘
var date = new Date(’2019-10-1‘);
console.log(date);
Wed Oct 01 2019 08:08:08 GMT+800(中国标准时间)
日期格式化
获取当前日期的年份:getFullyear()
var date = new Date();
console.log(date.getFullyear())// 打印当前的年份 2022
获取当前日期的月份:getMonth()
注意:返回值是 0 ~ 11,所以需要加 1 才能与真实月份对应上。
var date = new Date();
console.log(date.getMonth())// 因为返回值 是 从 0 ~ 11 ,所以返回的少一个月。实际是九月返回值则是 8。
console.log(date.getMonth() + 1)// 加一即可 返回当前月份 9
获取当前日期是几号:getDate()
var date = new Date();
console.log(date.getDate()) // 返回当前是几号
获取当前日期是周几:getDay()
注意:返回值是 0 ~ 6 ,周日是 0,周一 ~ 周六 对应着 1 ~ 6
var date = new Day();
console.log(date.getDay()) // 返回当前是几号
返回当前的时分秒:getHours()、getMinutes()、getSeconds()
function getTime(){
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h :h; // 小于 10 ,补上前导0
var m = time.getMinutes();
var s = time.getSeconds();
return h + ':'+m +':' + s;
}
console.log(getTime());
获取当前时间距离 1970年1月1号 总的毫秒数(时间戳)
因为用32位来表示时间的最大间隔是68年,而最早出现的UNIX操作系统考虑到计算机产生的年代和应用的时限综合取了1970年1月1日作为UNIX TIME的纪元时间(开始时间)
每时每刻的时间戳都是独一无二,永不重复的。
通常可以用来做倒计时的效果。
①通过 valueOf()getTime()
var date = new Date();
console.log(date.ValueOf());// 返回当前时间 距离 1970.1.1 总的毫秒数。
console.log(date.getTime());
②简单写法:+new Date()返回的就是总的毫秒数
var date = +new Date()
console.log(Date.now());
③H5 新增的 获取总的毫秒数
console.log(Date.now());
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-10-1 18:00:00'));
Arry
方式一
let = new Arry(1,2,3)
方式二
let arr2 = [1,2,3];
访问
arr2[0] = 10;
alert(arr2);
JS 数组是变长变类型的。
var arr3 = [1,2,3];
arr3[10] =10;
alert(arr3[9]) undefine
length 数组个数
length可以随着数组元素个数的增加而增长。
for(let i = 0 ; i < array.length ;i ++)
{
if(array[i]>10)
//新数组索引号应该从0开始,依次递增
ans[ans.length]=array[i];
}
alert(ans);
```js
push:添加元素
```js
var arr5 = [1,2,3];
arr5.push(10)
alert(arr5);
splice:删除元素
arr5.splice(0,1)//从0开始删,删1个。
判断是否为数组
①instanceof
运算符,可以判断一个对象是否属于某种类型。
②Arry.isArray()
用来判断一个对象是否为数组,isArray 是HTML5 中提供的方法。
var arr = [1,23];
var obj = {
};
console.log(arr instanceof Array) //true;
console.log(obj instanceof Array) //false;
console.log(Array.isArry(arr)); //true;
添加数组元素
方法名 | 说明 | 返回值 |
---|---|---|
push(参数1…) | 末尾添加一个或多个元素,注意修改原数组 | 并返回新的长度 |
pop() | 删除数组最后一个元素 | 返回它删除的元素的值 |
unshift(参数1…) | 向数组的开头添加一个或更多元素,注意修改原数组 | 并返回新的长度 |
shift() | 删除数组的第一个元素,数组长度减1,无参数,修改原数组 | 并返回第一个元素 |
push()
在数组的末尾添加一个或者多个元素
返回值:变化之后的数组长度
var arr = [1,2,3];
arr.push(4,5);
console.log(arr); 新增后的数组 1 2 3 4 5
console.log(arr.push(i)); 直接打印push后的数组,返回的是数组的个数
unshift()
在数组的开头,添加一个或者多个元素。
返回值:变化之后的数组长度
arr.unshift('red');
console.log(arr);
pop()
删除数组的最后一个元素,一个只能删除一个元素。
返回值:删除的元素
arr.pop();
shift
删除数组的第一个元素,一个只能删除一个元素。
返回值:删除的元素
arr.shift()
数组排序
方法名 | 说明 | 是否修改原数组 |
---|---|---|
reverse() | 颠倒数组中元素的顺序,无参数 | 该方法会改变原来的数组,返回新数组 |
sort() | 对数组的元素进行排序 | 该方法会改变原来的数组,返回新数组 |
resverse 反转数组
var arr = [1,2,3,4,5];
arr.reverse();
console.log(arr);
sort 数组排序
var arr = [1,4,2,5,3]
arr.sort()
console.log(arr); //1 2 3 4 5
sort 在处理双位数时默认会先比较 最高位,把最高位的放在一起 一次排列。
即 sort 的排序规则是按字典序排列的。
var arr = [1,123,2,234,3,345];
arr.sort()
console.log(arr);
输出的结果是:
1, 123, 2, 234, 3, 345
为了保证 sort 是按升序或者降序来排序的。
可以采用下面这种写法来修改sort的排序规则:
升序写法:
arr.sort(function(a,b)){
return a - b;
}
降序写法:
arr.sort(function(a,b)){
return b - a;
}
获取元素下标
indexOf (数组元素) ,作用就是返回数字元素的索引号
它只能返回从前面开始找第一个满足条件的索引号。
若数组里面没有符合条件的元素,则返回的是 -1
var arr = ['red','green','blue','pink'];
console.log(arr.indexOf('blue')); // 2
console.log(arr.indexof('bleak')); // -1
lastindexOf(数组元素),从前面开始查找
var arr = ['red','green','blue','pink' blue];
console.log(arr.indexOf('blue')); // 2 从前面开始找
console.log(arr.lastindexof('blue')); // 4 从后面开始找
数组转化为字符串
方法名 | 说明 | 返回值 |
---|---|---|
toString() | 把数组转换成字符串,逗号分隔每一项 | 返回一个字符串 |
join(‘分隔符’) | 方法用于把数组中的所有元素转换为一个字符串 | 返回一个字符串 |
// 1.toString() 将我们的数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
// 2.join('分隔符')
var arr1 = ['green', 'blue', 'red'];
console.log(arr1.join()); // 不写默认用逗号分割
console.log(arr1.join('-')); // green-blue-red
console.log(arr1.join('&')); // green&blue&red
String
基本包装类型
为了方便操作基本数据类型,JS 提供了三个特殊的引用类型:String 、 Number 和 Boolean
基本包装类型还是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。
var str = 'andy';
console.log(str.length);
基本数据类型是没有属性和方法的。
而对象才有属性和方法,但上面代码却可以执行,这是因为 JS 会将基本数据类型包装为复杂数据类型,其执行过程如下:
//1.生成临时变量,把简单类型包装为复杂数据类型
var temp = new String('andy');
//将我们声明的字符变量赋值
str = temp;
//销毁临时变量
temp = null;
字符串的不可变
意思是里面的值不可变。
当新的字符串覆盖旧的字符串时,其实变量只是改变了指向。
旧的字符串还储存在原先的那块内存,只不过现在变量指向的是新的字符串新的内存地址了。
var str = 'abc';
str = 'hello';
var str ='';
for(var i = 0; i < 10000; i ++){
str += i;
}
console.log(str);
根据字符返回位置
字符串所有的方法,都不会修改字符串本身,操作完成会返回一个新的字符串。
方法名 | 说明 |
---|---|
indexOf(‘要查找的字符’,开始的位置) | 返回指定内容在元字符串中的位置,如果找不到就返回-1,开始的位置是index索引号 |
lastIndexOf() | 从后往前找,只找第一个匹配的 |
// 字符串对象 根据字符返回位置 str.indexOf('要查找的字符', [起始的位置])
var str = '改革春风吹满地,春天来了';
console.log(str.indexOf('春')); //默认从0开始查找 ,结果为2
console.log(str.indexOf('春', 3)); // 从索引号是 3的位置开始往后查找,结果是8
根据位置返回字符
方法名 | 说明 | 使用 |
---|---|---|
charAt(index) | 返回指定位置的字符(index字符串的索引号) | str.charAt(0) |
charCodeAt(index) | 获取指定位置处字符的ASCII码(index索引号) | str.charCodeAt(0) |
str[index] | 获取指定位置处字符 | HTML,IE8+支持和charAt()等效 |
<script>
// 有一个对象 来判断是否有该属性 对象['属性名']
var o = {
age: 18
}
if (o['sex']) {
console.log('里面有该属性');
} 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(max);
console.log('最多的字符是' + ch);
</script>
字符串操作方法
方法名 | 说明 |
---|---|
concat(str1,str2,str3…) | concat() 方法用于连接两个或对各字符串。拼接字符串 |
substr(start,length) | 从 start 位置开始(索引号), length 取的个数。 |
slice(start,end) | 从 start 位置开始,截取到 end 位置 ,end 取不到 (两个都是索引号) |
substring(start,end) | 从 start 位置开始,截取到 end 位置 ,end 取不到 (基本和 slice 相同,但是不接受负) |
replace()方法
用于在字符串中用一些字符替换另一些字符。
其使用格式:replace(被替换的,要替换的);
<script>
// 1. 替换字符 replace('被替换的字符', '替换为的字符') 它只会替换第一个字符
var str = 'andyandy';
console.log(str.replace('a', 'b'));
// 有一个字符串 'abcoefoxyozzopp' 要求把里面所有的 o 替换为 *
var str1 = 'abcoefoxyozzopp';
while (str1.indexOf('o') !== -1) {
str1 = str1.replace('o', '*');
}
console.log(str1);
</script>
split()方法
用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。
var str = 'a,b,c,d';
console.log(str.split(','));
返回的是一个数组 ['a', 'b', 'c', 'd']
前面我们学过的split 正好与 join作用相反,
其作用是将 数组转换为字符串。
var str2 = 'red, pink, blue';
console.log(str2.split(','));
var str3 = 'red&pink&blue';
console.log(str3.split('&'));
大小写转换
toUpperCase()
转换大写toLowerCase()
转换小写
基本包装类型
简单类型也被叫做基本数据类型或者值类型,复杂类型又被叫做引用类型。
- 值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型。
- string number boolean undefined null。
- 引用类型:复杂数据类型,在存储时变量中的存储的仅仅是地址,也就是引用。
- 通过new 关键字创建的对象 ,系统对象,自定义对象, 如 Object 、Array 、Date。
为了方便操作基本数据类型,JS 提供了三个特殊的引用类型:String 、 Number 和 Boolean
基本包装类型还是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。
var str = 'andy';
console.log(str.length);
基本数据类型是没有属性和方法的。
而对象才有属性和方法,但上面代码却可以执行,这是因为 JS 会将基本数据类型包装为复杂数据类型,其执行过程如下:
完结散花
ok以上就是对 JavaScript 知识梳理基础篇 的全部讲解啦,很感谢你能看到这儿。如果有遗漏、错误或者有更加通俗易懂的讲解,欢迎小伙伴私信我,我后期再补充完善。
参考文献
pink老师入门视频教程