文章目录
学习JavaScript这一篇就够了
1、JavaScript的使用
1.1 标签引用
在HTML中使用script标签就可以编写JavaScript代码
<script>
alert("Hello,World!");
</script>
1.2 文件引用
第一步:在单独的js文件中编写JavaScript代码
main.js
alert("Hello,World!");
第二步:在HTML文件中使用script标签进行引用
main.html
<script src="main.js"></script>
2. JavaScript的输出
2.1 页面输出 document.write()
使用JavaScript向HTML页面中输出一句话
<script>
document.write("Hello,World!");
</script>
2.2 页面弹窗输出 alter()
使用JavaScript向HTML页面弹出窗口输出一句话
<script>
alert("Hello,World!");
</script>
2.3 控制台输出 console.log()
使用JavaScript向控制台输出一句话
<script>
console.log("输出一条日志"); //最常用
console.info("输出一条信息");
console.warn("输出一条警告");
console.error("输出一条错误");
</script>
3、 运算符
3.1 typeof运算符
使用typeof操作符可以用来检查一个变量的数据类型。`
console.log(typeof 123);
console.log(typeof "Hello,World!");
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);
运行结果:
4、 强制类型转换
4.1 转换为Number类型
有三个函数可以把非数值转换为数值:Number()、parseInt() 和parseFloat()。Number()可以用来转换任意类型的数据,而后两者只能用于转换字符串。parseInt()只会将字符串转换为整数,而parseFloat()可以将字符串转换为浮点数。
方式一:使用Number()函数
- 字符串 --> 数字
如果是纯数字的字符串,则直接将其转换为数字 如果字符串中有非数字的内容,则转换为NaN
如果字符串是一个空串或者是一个全是空格的字符串,则转换为0
- 布尔 --> 数字
true 转成 1
false 转成 0
- null --> 数字
null 转成 0
- undefined --> 数字
undefined 转成 0
方式二:parseInt()这种方式专门用来对付字符串, 把一个字符串转换为一个整数
方式三:parseFloat()这种方式专门用来对付字符串, 把一个字符串转换为一个浮点数
注意:如果对非String使用parseInt()或parseFloat(),它会先将其转换为String然后在操作
5、JavaScript对象基础
5.1 创建对象
创建对象有两种方式:
- 第一种方式:使用new
var person = new Object();
person.name = "孙悟空";
person.age = 18;
console.log(person);
- 第二种方式:使用{key:value}
var person = {
name: "孙悟空",
age: 18
};
console.log(person);
5.2 遍历对象
语法格式:
for (let 变量 in 对象) {
}
案例演示:
let persons = [
{
name: "zhangsan",
age: 18
},
{
name: "lisi",
age: 19
}]
for (let person in persons) {
let name= person[name];
let age=person[age]
console.log("姓名:"+name+",年龄:"+age);
}
5.3 函数
5.3.1 函数创建
- 使用 函数声明 来创建一个函数
function fun(){
console.log("这是我的第二个函数");
}
- 使用 函数表达式 来创建一个函数
var fun = function() {
console.log("这是我的第三个函数");
}
6、JavaScript常用对象
6.1 数组对象Aarrry
创建数组
var arr = new Array();
arr[0] = 1;
arr[1] = "hello";
arr[2] = 3;
遍历数组
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
数组方法
方法名 | 作用 | 返回值 |
---|---|---|
push() | 向数组的末尾添加一个或多个元素 | 新的数组长度 |
unshift() | 向数组的开头添加一个或多个元素 | 新的数组长度 |
pop() | 删除数组的最后一个元素 | 被删除的元素 |
shift() | 删除数组的第一个元素 | 被删除的元素 |
concat() | 连接两个或多个数组 | 新的数组 |
join() | 将数组转换为一个字符串,可以指定一个字符串作为连接符 | 转换后的字符串 |
reverse() | 反转数组 | 修改后的数组 |
sort() | 排序 | 排序后的数组 |
splice() | 删除数组中的指定元素 | 被删除的元素作 |
6.2 this 对象指向
- 以函数形式调用时,this永远都是window
- 以方法的形式调用时,this是调用方法的对象
- 以构造函数的形式调用时,this是新创建的那个对象
- 使用call和apply调用时,this是传入的那个指定对象
6.3 时间对象Date
var date = new Date();
console.log(date);
console.log(date.getFullYear());//获取当前日期对象的年份(四位数字年份)
console.log(date.getMonth());//获取当前日期对象的月份(0 ~ 11)
console.log(date.getDate());//获取当前日期对象的日数(1 ~ 31)
console.log(date.getHours());//获取当前日期对象的小时(0 ~ 23)
console.log(date.getMinutes());//获取当前日期对象的分钟(0 ~ 59)
console.log(date.getSeconds());//获取当前日期对象的秒钟(0 ~ 59)
console.log(date.getMilliseconds());//获取当前日期对象的毫秒(0 ~ 999)
6.4 Math数学运算对象(工具类)
/*固定值*/
console.log("PI = " + Math.PI);
console.log("E = " + Math.E);
console.log("===============");
/*正数*/
console.log(Math.abs(1)); //可以用来计算一个数的绝对值
console.log(Math.ceil(1.1)); //可以对一个数进行向上取整,小数位只有有值就自动进1
console.log(Math.floor(