JavaScript重点笔记

学习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(1.99)