JavaScript基础 | 内置函数知识梳理

本文已收录于专栏 ⭐️ 《JavaScript》⭐️

此专栏适用于已经入门JavaScript的同学做复习回顾使用，因为讲解具有跳跃性不推荐零基础的新手学习~

内置对象

Math

Math.abs 绝对值

Math.abs(-1)  	--> 1
Math.abs('-1')  --> 1
Math.abs('one') --> NaN
1
2
3

Math.floor 地板 下取整

Math.cell 天花板 向上取整

Math.round 四舍五入

Math.floor(1.9) // 1

Math.ceil(1.1) // 2

Math.round(1.9) // 2
1
2
3
4
5

注意：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 之间的一个整数
1
2
3
4
5
6
7

Date

日期对象，可以用来处理日期和时间，得到时分秒。

Date 是个构造函数，必须使用 new 来调用创建我们的日期对象。

如果没有参数，返回系统当前时间。

var date = new Date();
console.log(date);
Wed May 01 2019 10:20:56 GMT+800 (中国标准时间)
1
2
3

带参数常见写法：

数字型： 2019,10,01

var date = new Date(2019,10,1);
console.log(date);
Wed Nov 01 2019 00:00:00 GMT+800(中国标准时间)
返回的是 11月
1
2
3
4

字符串型：’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(中国标准时间)
1
2
3

日期格式化

获取当前日期的年份：getFullyear（）

var date = new Date();

console.log(date.getFullyear())// 打印当前的年份 2022
1
2
3

获取当前日期的月份：getMonth（）

注意：返回值是 0 ~ 11，所以需要加 1 才能与真实月份对应上。

var date = new Date();
console.log(date.getMonth())// 因为返回值 是 从 0 ~ 11 ,所以返回的少一个月。实际是九月返回值则是 8。 
console.log(date.getMonth() + 1)// 加一即可 返回当前月份 9  
1
2
3

获取当前日期是几号：getDate（）

var date = new Date();
console.log(date.getDate()) // 返回当前是几号 
1
2

获取当前日期是周几：getDay（）

注意：返回值是 0 ~ 6 ，周日是 0，周一 ~ 周六 对应着 1 ~ 6

var date = new Day();
console.log(date.getDay()) // 返回当前是几号 
1
2

返回当前的时分秒：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());
1
2
3
4
5
6
7
8
9

获取当前时间距离 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());
1
2
3

②简单写法：+new Date（）返回的就是总的毫秒数

var date = +new Date()
console.log(Date.now());
1
2

③H5 新增的 获取总的毫秒数

console.log(Date.now());
1

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'));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Arry

方式一

let = new Arry(1,2,3)
1

方式二

let arr2 = [1,2,3];
1

访问

arr2[0] = 10;

alert(arr2);
1
2
3

JS 数组是变长变类型的。

var arr3 = [1,2,3];

arr3[10] =10;

alert(arr3[9]) undefine
1
2
3
4
5

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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

splice:删除元素

arr5.splice(0,1)//从0开始删，删1个。
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;
1
2
3
4
5

添加数组元素

push()在数组的末尾添加一个或者多个元素

返回值：变化之后的数组长度

var arr = [1,2,3];
arr.push(4,5);
console.log(arr); 新增后的数组 1 2 3 4 5

console.log(arr.push(i)); 直接打印push后的数组，返回的是数组的个数
1
2
3
4
5

unshift() 在数组的开头，添加一个或者多个元素。

返回值：变化之后的数组长度

arr.unshift('red');

console.log(arr);
1
2
3

pop()删除数组的最后一个元素，一个只能删除一个元素。

返回值：删除的元素

arr.pop();
1

shift删除数组的第一个元素，一个只能删除一个元素。

返回值：删除的元素

arr.shift()
1

数组排序

resverse 反转数组

var arr = [1,2,3,4,5];

arr.reverse();

console.log(arr); 
1
2
3
4
5

sort 数组排序

var arr = [1,4,2,5,3]

arr.sort()

console.log(arr); //1 2 3 4 5
1
2
3
4
5

sort 在处理双位数时默认会先比较 最高位，把最高位的放在一起 一次排列。

即 sort 的排序规则是按字典序排列的。

var arr = [1,123,2,234,3,345];

arr.sort()

console.log(arr); 
1
2
3
4
5

输出的结果是：

1, 123, 2, 234, 3, 345
1

为了保证 sort 是按升序或者降序来排序的。

可以采用下面这种写法来修改sort的排序规则：

升序写法：

arr.sort(function(a,b)){
	return a - b; 
}
1
2
3

降序写法：

arr.sort(function(a,b)){
	return b - a; 
}
1
2
3

获取元素下标

indexOf （数组元素） ，作用就是返回数字元素的索引号

它只能返回从前面开始找第一个满足条件的索引号。

若数组里面没有符合条件的元素，则返回的是 -1

var arr = ['red','green','blue','pink'];

console.log(arr.indexOf('blue'));  // 2

console.log(arr.indexof('bleak')); // -1
1
2
3
4
5

lastindexOf（数组元素），从前面开始查找

var arr = ['red','green','blue','pink' blue];

console.log(arr.indexOf('blue'));  // 2 从前面开始找

console.log(arr.lastindexof('blue')); // 4 从后面开始找
1
2
3
4
5

数组转化为字符串

// 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
1
2
3
4
5
6
7
8

String

基本包装类型

为了方便操作基本数据类型，JS 提供了三个特殊的引用类型：String 、 Number 和 Boolean

基本包装类型还是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

var str = 'andy';
console.log(str.length);
1
2

基本数据类型是没有属性和方法的。

而对象才有属性和方法，但上面代码却可以执行，这是因为 JS 会将基本数据类型包装为复杂数据类型,其执行过程如下：

//1.生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
//将我们声明的字符变量赋值
str = temp;
//销毁临时变量
temp = null;
1
2
3
4
5
6

字符串的不可变

意思是里面的值不可变。

当新的字符串覆盖旧的字符串时，其实变量只是改变了指向。

旧的字符串还储存在原先的那块内存，只不过现在变量指向的是新的字符串新的内存地址了。

var str = 'abc';
str = 'hello';

var str ='';

for(var i = 0; i < 10000; i ++){
	str += i;
}
console.log(str);
1
2
3
4
5
6
7
8
9

根据字符返回位置

字符串所有的方法，都不会修改字符串本身，操作完成会返回一个新的字符串。

 // 字符串对象  根据字符返回位置  str.indexOf('要查找的字符', [起始的位置])
        var str = '改革春风吹满地，春天来了';
        console.log(str.indexOf('春')); //默认从0开始查找 ，结果为2
        console.log(str.indexOf('春', 3)); // 从索引号是 3的位置开始往后查找，结果是8
1
2
3
4

根据位置返回字符

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

字符串操作方法

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>
1
2
3
4
5
6
7
8
9
10
11

split（）方法

用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。

var str = 'a,b,c,d';
console.log(str.split(','));
1
2

返回的是一个数组 ['a', 'b', 'c', 'd']
1

前面我们学过的split 正好与 join作用相反，

其作用是将 数组转换为字符串。

 	var str2 = 'red, pink, blue';
    console.log(str2.split(','));
    var str3 = 'red&pink&blue';
    console.log(str3.split('&'));
1
2
3
4

大小写转换

• toUpperCase() 转换大写
• toLowerCase() 转换小写

基本包装类型

简单类型也被叫做基本数据类型或者值类型，复杂类型又被叫做引用类型。

• 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型。
  • string number boolean undefined null。
• 引用类型：复杂数据类型，在存储时变量中的存储的仅仅是地址，也就是引用。
  • 通过new 关键字创建的对象 ，系统对象，自定义对象， 如 Object 、Array 、Date。

为了方便操作基本数据类型，JS 提供了三个特殊的引用类型：String 、 Number 和 Boolean

基本包装类型还是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

var str = 'andy';
console.log(str.length);
1
2

基本数据类型是没有属性和方法的。

而对象才有属性和方法，但上面代码却可以执行，这是因为 JS 会将基本数据类型包装为复杂数据类型,其执行过程如下：

完结散花

ok以上就是对 JavaScript 知识梳理基础篇 的全部讲解啦，很感谢你能看到这儿。如果有遗漏、错误或者有更加通俗易懂的讲解,欢迎小伙伴私信我，我后期再补充完善。

参考文献

pink老师入门视频教程