学习视频以及笔记参考来源:
JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili
一、概述
-
JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象。
-
前面两种对象是JS 基础 内容,属于 ECMAScript; 第三个浏览器对象属于我们JS 独有的, 我们JS API 讲解。
- 内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)。
-
JavaScript 提供了多个内置对象: Math 、 Date 、 Array 、 String 等。
-
查阅文档: MDN: https://developer.mozilla.org/zh-CN/
二、Math
Math 对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值 等)可以使用 Math 中的成员。
1、数学相关运算(绝对值 / 取整 / 最大值等)
Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值
<script>
// 1. Math.PI -- 圆周率
console.log(Math.PI);
// 2. Math.max() -- 取最大值
console.log(Math.max(2, 5, 6, 8)); // 8
console.log(Math.max(2, '字符串')); // NaN
console.log(Math.max()); // -Infinity
// 3. 三个取整方法
// (1) Math.floor() -- [ 向下取整:往最小值取]
console.log(Math.floor(-1.1)); // -2
console.log(Math.floor(1.9)); // 1
// (2) Math.ceil() -- [ 向上取整:往最大值取 ]
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(-1.9)); // -1
// (3) Math.round() -- [ 四舍五入:其他数字都是四舍五入, .5 特殊是往大了取 ]
console.log(Math.round(1.2)); // 1
console.log(Math.round(1.5)); // 2
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // -1
console.log(Math.round(-1.9)); // -2
</script>
2、随机数方法 random()
-
random() 方法可以随机返回一个小数,其取值范围是 [0,1),左闭右开 0 <= x < 1。
// 得到一个两数之间的随机整数,包括两个数在内
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
3、案例:猜数字游戏
要求:① 先随机生成一个数。② 让用户来猜数,并给出猜大猜小的提示。③ 只有10次机会。
<script>
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var temp1 = 1, temp2 = 50;
var count = 1;
// console.log(getRandom(1, 10));
var num = getRandom(temp1, temp2);
alert('猜数字游戏开始啦~您只有10次机会哦!')
do {
var guess = prompt('第' + count + '次机会:' + '输入' + temp1 + '~' + temp2 + '之间的一个数字');
if (guess > num) {
alert('您的数字猜大了。')
temp2 = guess;
} else if (guess < num) {
alert('您的数字猜小了。')
temp1 = guess;
} else {
alert('恭喜您猜对了!')
break;
}
count++;
} while (count <= 10)
</script>
三、Date 日期对象
-
Date 实例用来处理日期和时间。
-
Date 对象是一个构造函数 ,所以我们需要实例化后才能使用。
1、Date() 方法的使用
- 获取当前时间必须实例化(因为Date是一个构造函数)。
var now = new Date(); // 实例化
console.log(now); // 调用
var time1 = new Date(); // Date() 不写参数,就返回当前时间
var times = new Date('2022-05-09'); // Date() 写参数,就返回输入的时间
// 日期格式字符串:new Date('2019-5-1') 或者 new Date('2019/5/1')
2、日期格式化
2.1 案例:格式化当前日期
输出:2019年8月8日 星期四
<script>
function getDate() {
var times = new Date();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
console.log(times.getFullYear() + '年' + (times.getMonth() + 1) + '月' + times.getDate() + '日 ' + arr[times.getDay()]);
}
getDate();
</script>
2.2 案例:格式化当前时间
输出:HH : mm : ss 00 : 10 : 45
<script>
function getDate() {
var times = new Date();
var hour = times.getHours() < 10 ? '0' + times.getHours() : times.getHours();
var minute = times.getMinutes() < 10 ? '0' + times.getMinutes() : times.getMinutes();
var second = times.getSeconds() < 10 ? '0' + times.getSeconds() : times.getSeconds();
console.log(hour + ':' + minute + ':' + second);
}
getDate();
</script>
3、获取日期的总毫秒形式
-
Date 对象是基于1970年1月1日(世界标准时间)起的毫秒数。
// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf())
console.log(date.getTime())
// 2. 简单写可以这么做
var now = + new Date();
// 3. HTML5中提供的方法,有兼容性问题
var now = Date.now();
// 倒计时效果
<script>
function getMs() {
var now = +new Date();
var date = new Date('2022-05-09 18:00:00');
var sum_s = (date - now) / 1000; // 进行毫秒与秒之间的进制转换,求出秒数
d = parseInt(sum_s / 60 / 60 / 24); // 计算天数
d = d < 10 ? '0' + d : d; // 不足10前面加'0'
h = parseInt(sum_s / 60 / 60 % 24); // 计算小时
h = h < 10 ? '0' + h : h;
m = parseInt(sum_s / 60 % 60); // 计算分钟
m = m < 10 ? '0' + m : m;
s = parseInt(sum_s % 60); // 计算当前秒数
s = s < 10 ? '0' + s : s;
console.log(d + '天' + h + '时' + m + '分' + s + '秒');
}
getMs();
</script>
四、Array 数组对象
1、创建数组对象的两种方式
<script>
// 创建数组的两种方式
// 1. 利用数组字面量
var arr1 = [1, 2, 3];
// 2. 利用new Array()
var arr2 = new Array(); // 创建一个新的数组
var arr3 = new Array(2); // 这个 2 表示数组的长度为2,里面有2个空的数组元素
var arr3 = new Array(2, 3); // 等价于[2, 3]
</script>
2、检测是否为数组
-
instanceof 运算符,可以判断一个对象是否属于某种类型。
-
Array.isArray()用于判断一个对象是否为数组,isArray() 是 HTML5 中提供的方法。
var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false
3、添加删除数组元素的方法
<script>
// 1. push( 参数1,... ) 方法:在末尾添加元素
var arr1 = [1, 2, 3, 4, 5];
arr1.push(6);
console.log(arr1); // [1, 2, 3, 4, 5, 6]
console.log(arr1.push(1)); // 7 push(...)方法返回的是数组的长度
console.log(arr1); // [1, 2, 3, 4, 5, 6, 1]
// 2. unshift( 参数1,... ) 方法:在开头添加元素
var arr2 = [1, 2, 3];
arr2.unshift(6);
console.log(arr2); // [6, 1, 2, 3]
console.log(arr2.unshift(2)); // 5 unshift(...)返回的是数组的长度
console.log(arr2); // [2, 6, 1, 2, 3]
// 3. pop() 方法:删除数组最后一个元素
var arr3 = [1, 2, 3, 4];
arr3.pop();
console.log(arr3); // [1, 2, 3]
console.log(arr3.pop()); // 3 返回值是删除的元素
// 4. shift() 方法:删除数组的第一个元素
var arr4 = ['red', 'pink', 'blue'];
arr4.shift();
console.log(arr4); // ["pink", "blue"]
console.log(arr4.shift()); // pink 返回值是删除的元素
</script>
4、数组排序
<script>
// 1. reverse() 翻转数组,返回新数组
var arr1 = [1, 2, 3, 4, 5];
console.log(arr1.reverse()); // [5, 4, 3, 2, 1]
// 2. sort() 排序,返回新数组(但要注意,需要内置函数来实现特定的排序)
var arr2 = [1, 14, 12, 2, 45, 24];
// console.log(arr2.sort()); // [1, 12, 14, 2, 24, 45] 并没有实现排序,原因是按照第一位来排序。
arr2.sort(function (a, b) {
return b - a; // 降序 [45, 24, 14, 12, 2, 1]
// return a - b; // 升序
});
console.log(arr2);
</script>
5、数组索引方法
<script>
var arr = [1, 2, 3, 4, 3, 2, 1];
console.log(arr.indexOf(2)); // 1
console.log(arr.lastIndexOf(2)); // 5
console.log(arr.indexOf(7)); // -1
</script>
6、数组转换为字符串
<script>
var arr = ['red', 'blue', 'pink'];
console.log(arr); // ["red", "blue", "pink"]
console.log(arr.toString()); // red,blue,pink
console.log(arr.join('-')); // red-blue-pink 如果不给参数就默认逗号分隔
</script>
五、String 字符串对象
1、基本包装类型
2、字符串的不变形
3、根据字符返回位置
-
字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。
4、根据位置返回字符 (重点)
4.1 语法
<script>
var str = 'abcoefoxyozzopp';
console.log(str.charAt(3)); // o
console.log(str.charCodeAt(3)); // 111 - o对应的ASCII码
console.log(str[3]); // o
</script>
4.2 案例:判断字符串中出现次数最多的字符,并统计其次数。
<script>
var str = 'abcoefoxyozzopp';
var count = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i);
if (count[chars]) {
count[chars]++;
} else {
count[chars] = 1;
}
}
console.log(count);
var max = 0;
for (var k in count) {
if (count[k] > max) {
max = count[k];
var ch = k;
}
}
console.log('出现次数最多的字符是:' + ch + ', 出现的次数为:' + max);
</script>
5、字符串操作方法(重点)
replace()方法 :
replace() 方法用于在字符串中用一些字符替换另一些字符。其使用格式如下:
replace(被替换的字符串, 要替换为的字符串);
split()方法:split()方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。var str = 'a,b,c,d'; console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]
6、字符串作业
<script>
var str = 'abaasdffggghhjjkkgfddsssss3444343';
// 1. 字符串的长度
console.log(str.length); // 33
// 2. 取出指定位置的字符
console.log(str.charAt(3)); // a
// 3. 查找指定字符是否存在
console.log(str.indexOf('i')); // -1
// 4. 替换指定的字符
console.log(str.replace('a', '*')); // *baasdffggghhjjkkgfddsssss3444343
// 5. 截取指定位置的字符串
console.log(str.substr(0, 5)); // abaas
// 6. 找出以上字符串中出现次数最多的字符和出现的次数
var count = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i);
if (count[chars]) {
count[chars]++;
} else {
count[chars] = 1;
}
}
console.log(count);
var max = 0;
var ch = '';
for (var k in count) {
if (count[k] > max) {
max = count[k];
ch = k;
}
}
console.log('出现次数最多的字符是:' + ch + ', 出现的次数为:' + max);
// 7. 给字符两头添加 @
var str2 = '';
var temp = '';
for (var i = 0; i < str.length; i++) {
temp = '@' + str.charAt(i) + '@';
str2 = str2.concat(temp);
// str2 += temp;
}
console.log(str2);
</script>
六、简单数据类型与复杂数据类型
1、简单类型与复杂类型
-
值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型。string ,number,boolean,undefined,null。
-
引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型。通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等
2、堆和栈
-
栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈; 简单数据类型存放到栈里面。
-
堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。 复杂数据类型存放到堆里面。
- JavaScript中没有堆栈的概念,通过堆栈的方式,可以让大家更容易理解代码的一些执行方式,便于将来学习其他语言。
3、简单类型的数据分配
-
值类型(简单数据类型): string ,number,boolean,undefined,null。
-
值类型变量的数据直接存放在变量(栈空间)中。
4、复杂类型的数据分配
-
引用类型(复杂数据类型):通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等。
-
引用类型变量(栈空间)里存放的是地址,真正的对象实例存放在堆空间中。
5、简单类型传参
函数的形参也可以看做是一个变量,当我们把一个值类型变量作为参数传给函数的形参时,其实是把变量在栈空间里的值复制了一份给形参,那么在方法内部对形参做任何修改,都不会影响到的外部变量。
6、复杂类型传参
函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象。