【JS笔记】Java Script学习笔记

Java Script

输出语句

1. document.write()：将内容写入html文档
2. console.log()：将内容写入控制台
3. alert()：弹窗

变量

JS是弱类型语言，变量无类型

1. var：全局变量，可重复声明
2. let：局部变量，不可重复声明
3. const：常量，不可重复声明

数据类型

1. number：数字。整数、浮点数、NaN
2. string：字符串。
   • 单引号：'Hello'
   • 双引号："Hello"
   • 模板字符串：使用反引号 `Hello ${name}`
3. boolean：布尔值。
4. object：对象。
   • 数组：[1, 2, 3]
   • 函数：function() {} 或箭头函数 () => {}
   • 日期：new Date()
   • 正则表达式：/abc/
5. null：空值。
   • 用于表示空对象引用。
6. undefined：未定义。
   • 表示变量未初始化。
   • 函数未返回值时默认返回undefined。

使用typeof运算符可以判断变量的数据类型。

运算符

1. 算术运算符：+, -, *, /, %
2. 赋值运算符：=, +=, -=, *=, /=
3. 比较运算符：==, ===, !=, !==, <, >, <=, >=
   • ==：值相等，不考虑类型。
   • ===：值相等，且类型相同。
   • !=：值不相等。
   • !==：值不相等，或类型不同。

       var age=18;
       var age1="18";
       alert(age == age1); // true, 因为值相等
       alert(age === age1); // false, 因为类型不相等
       alert(age != age1); // false, 因为值相等
       alert(age !== age1); // true, 因为类型不相等
   

4. 逻辑运算符：&&, ||, !
5. 位运算符：&, |, ^, ~, <<, >>, >>>
6. 三元运算符：condition ? expr1 : expr2

类型转换

1. String转换成数字
   • Number()：将字符串转换为数字。
   • parseInt()：将字符串转换为整数。
   • parseFloat()：将字符串转换为浮点数。
   • 若字符串非数字，转换结果为NaN。

       var str1 = "123";
       var str2 = "12A3";
       var str3 = "A123";
       var str4 = "12.3";
       var num = Number(str1); // 123
       alert(num); // 输出 "123"
       num = parseInt(str2); // 12
       alert( num); // 输出 "12"
       num = parseInt(str3); // NaN
       alert( num); // 输出 "NaN"
       num = parseFloat(str4); // 12.3
       alert( num); // 输出 "12.3"
       num = parseInt(str4); // 12
       alert(num); // 输出 "12"
   

   • +：将字符串转换为数字。例：

       var str = "12.3";
       var num = +str; // 12.3
       alert(typeof num); // 输出 "number"
   

2. Number转换成字符串
   • toString()：将数字转换为字符串。
   • String()：将数字转换为字符串。
3. 其他类型转换成boolean
   • Boolean()：将其他类型转换为布尔值。
   • !!：将其他类型转换为布尔值。
   • Number：0和NaN为false，其余为true
   • String：空字符串为false，其余为true
   • null和undefined：均转为false

       var num = 123;
       var str = "12.3";
       var bool = true;
       var obj = { name: "张三" };
       alert(Boolean(num)); // 输出 "true"
       alert(Boolean(str)); // 输出 "true"
       alert(Boolean(bool)); // 输出 "true"
       alert(Boolean(obj)); // 输出 "true"
       alert(Boolean(null)); // 输出 "false"
       alert(Boolean(undefined)); // 输出 "false"
   

流程控制语句

用法与Java相同

函数

1. 声明函数

   function functionName(parameters) {
       // 函数体
   }
   

2. 表达式函数

    const functionName = function(parameters) {
         // 函数体
    };
   

3. 箭头函数

   const functionName = (parameters) => {
        // 函数体
   };
   

4. 函数参数
   • 默认参数：在函数定义时为参数设置默认值。

    function greet(name = "Guest") {
         console.log(`Hello, ${name}!`);
    }
    greet(); // 输出 "Hello, Guest!"
    greet("Alice"); // 输出 "Hello, Alice!"
   

   • 剩余参数：使用...表示剩余参数，将剩余参数收集为数组。

    function sum(a, b, ...rest) {
         console.log(a, b, rest);
    }
    sum(1, 2, 3, 4, 5); // 输出 "1 2 [3, 4, 5]"
   

   • 展开运算符：使用...将数组展开为单独的参数。

    function sum(a, b, c) {
         console.log(a, b, c);
    }
    const arr = [1, 2, 3];
    sum(...arr); // 输出 "1 2 3"
   

   • 函数参数解构：使用{}解构参数。

    function printPerson({ name, age }) {
         console.log(`Name: ${name}, Age: ${age}`);
    }
    const person = { name: "张三", age: 18 };
    printPerson(person); // 输出 "Name: 张三, Age: 18"
   

对象

数组对象

1. 创建数组

   //方法一
   var arr1 = new Array(1,2,3);
   //方法二
   var arr2 = [1, 2, 3];
   console.log(arr1[0]);
   

2. 数组的特点
   • 数组的长度可以动态改变。
   • 数组可以存储不同类型的数据。

   arr1.length=5;
   arr1[4]='A';
   console.log(arr1);
   

   length属性会获得数组的长度
   未赋值的索引的元素值为undefined
3. 数组方法
   • push()：向数组末尾添加元素。
   • pop()：删除数组末尾元素。

   //push
   var arr1 = [1, 2, 3, 4, 5];
   arr1.push('A');
   console.log(arr1); // 输出 [1, 2, 3, 4, 5, 'A']
   //pop
   arr1.pop();
   console.log(arr1); // 输出 [1, 2, 3, 4, 5]
   

   • unshift()：向数组开头添加元素。
   • shift()：删除数组开头元素。

   //unshift
   var arr1 = [1, 2, 3, 4, 5];
   arr1.unshift('A');
   console.log(arr1); // 输出 ['A', 1, 2, 3, 4, 5]
   //shift
   arr1.shift();
   console.log(arr1); // 输出 [1, 2, 3, 4, 5]
   

   • slice()：提取数组的一部分。

    var arr1 = [1, 2, 3, 4, 5];
    var newArr = arr1.slice(1, 4); // 从索引1开始提取到索引4（不包含）
    console.log(newArr); // 输出 [2, 3, 4]
   

   • splice(Index, DeleteCount)：删除、替换或添加数组元素。

    arr1.splice(1,2); // 从索引1开始删除2个元素
    console.log(arr1); // 输出 [1, 3, 4, 'A']
    arr1.splice(1,0,'B'); // 在索引1处插入'B'
    console.log(arr1); // 输出 [1, 'B', 3, 4, 'A']
   

   • forEach(function(item,index,arr))：遍历数组有值的元素，不会遍历未赋值的元素。每遍历一个元素，会调用一次函数。

   arr1.forEach(function(item){
    console.log(item);
   })
   

   • map()：创建新数组，每个元素都是调用函数后的结果。

    var newArr = arr1.map(function(item) {
         return item * 2; // 每个元素乘以2
    });
    console.log(newArr); // 输出 [2, 6, 8, 'A']
   

字符串

1. 创建字符串

   //方法一
   var str1 = new String('123');
   //方法二
   var str2 = '123';
   console.log(str1);
   

2. 字符串的属性
   length：字符串的长度
   • 字符串是不可变的，不能改变字符串的长度或特定索引的字符。
3. 字符串方法
   • charAt(index)：返回指定索引的字符。

   var str2 = '123';
   console.log(str2.charAt(1)); // 输出 '2'
   

   • indexOf(substring)：返回匹配到第一个子字符串的索引。

   var str2 = '123';
   console.log(str2.indexOf('23')); // 输出 1
   

   • lastIndexOf(substring)：返回匹配的最后一个子字符串的索引。

   var str2 = '12323';
   console.log(str2.lastIndexOf('23')); // 输出 3
   

   • substring(start, end)：返回子字符串。

   var str2 = '123';
   console.log(str2.substring(1, 3)); // 输出 '23'
   

   • slice(start, end)：返回子字符串。

   var str2 = '123';
   console.log(str2.slice(1, 3)); // 输出 '23'
   

   • replace(search, replacement)：替换字符串中的子字符串。

   var str2 = '123';
   console.log(str2.replace('23', '45')); // 输出 '145'
   

   • split(separator)：将字符串拆分为数组。

   var str2 = '123';
   console.log(str2.split('')); // 输出 ['1', '2', '3']
   

   • trim()：删除字符串开头和结尾的空格。

   var str2 = ' 123 ';
   console.log(str2.trim()); // 输出 '123'
   

JSON

自定义对象：

var person = {
    name: "张三",
    age: 18,
    sayName: function() {
        console.log("我的名字是：" + this.name);
    }
    /*或
    sayName() {
        console.log("我的名字是：" + this.name);
    }
    */
};
alert(person.name); // 输出 "张三"
person.sayName(); // 输出 "我的名字是：张三"

JSON对象

1. 定义
   • JSON是一种轻量级的数据交换格式，用于在不同系统之间传递数据。
   • JSON数据在语法上是JavaScript对象的子集，但是JSON数据是字符串格式，不能直接使用。
2. JSON格式
   • JSON数据由键值对组成，键值对之间用逗号隔开。
   • 键必须是字符串，值可以是字符串、数字、布尔值、数组、对象或null。
   • 键值对用冒号隔开。
   • 数组用方括号括起来。
   • 对象用花括号括起来。

   var jsonObj = {
       "name": "张三",
       "age": 18,
       "isStudent": false,
       "courses": ["数学", "英语"],
       "address": {
           "city": "北京",
           "zipCode": "100000"
       }
   };
   

3. JSON解析
   • JSON.parse(jsonString)：将JSON字符串解析为JavaScript对象。

   var jsonString = '{"name":"张三","age":18,"isStudent":false}';
   var obj = JSON.parse(jsonString);
   console.log(obj.name); // 输出 张三
   

   • JSON.stringify(obj)：将JavaScript对象转换为JSON字符串。

   var obj = {name: "张三", age: 18, isStudent: false};
   var jsonString = JSON.stringify(obj);
   console.log(jsonString); // 输出 {"name":"张三","age":18,"isStudent":false}
   

BOM

BOM（Browser Object Model）是浏览器对象模型，用于操作浏览器窗口和文档。

window对象

window对象是BOM的核心，代表浏览器窗口。

• window对象包含浏览器窗口的属性和方法。
• window对象的属性和方法可以直接调用，不需要使用window前缀。

1. 常用属性：

• window.location：获取或设置当前文档的URL。
• window.history：访问浏览器历史记录。
• window.navigator：获取浏览器信息。

2. 常用方法：

• window.alert(message)：显示警告信息。
• window.prompt(message, defaultValue)：显示输入对话框。
• window.confirm(message)：显示确认对话框，确认返回true，取消返回false。
• window.open(url, windowName, features)：打开新窗口。
• window.close()：关闭当前窗口。
• window.setTimeout(function, delay)：设置定时器，在指定时间后执行函数，执行一次。

setTimeout(function() {
  console.log('定时器执行');
}, 2000); // 2000毫秒后执行

• window.setInterval(function, delay)：设置重复定时器，在指定时间间隔后重复执行函数。

  setInterval(function() {
      console.log('定时器执行');
  }, 1000); // 每1000毫秒执行一次

Location对象

Location对象表示地址栏。

• location.href：获取或设置当前文档的URL。

alert(location.href); // 输出当前URL
location.href = 'https://www.example.com'; // 跳转到新URL

DOM

DOM（Document Object Model）是文档对象模型，用于操作文档的内容。

1. 获取DOM元素：

• document.getElementById(id)：根据ID获取元素。

<div id="myElement">Hello World</div>
<script>
    var element = document.getElementById('myElement');
    console.log(element); // 输出 <div id="myElement">Hello World</div>
</script>

• document.getElementsByClassName(className)：根据类名获取元素集合，返回所有类名相同的元素。

<div class="myClass">Hello World</div>
<script>
    var elements = document.getElementsByClassName('myClass');
    console.log(elements); // 输出 <div class="myClass">Hello World</div>
</script>

• document.getElementsByTagName(tagName)：根据标签名获取元素集合，返回所有标签名相同的元素。

<div class="myClass">Hello World</div>
<script>
    var elements = document.getElementsByTagName('div');
    console.log(elements); // 输出 <div class="myClass">Hello World</div>
</script>

• document.getElementsByName(name)：根据元素的name属性获取元素集合，返回所有name属性相同的元素。

<div class="myClass">Hello World</div>
<script>
    var elements = document.getElementsByName('div');
    console.log(elements); // 输出 <div class="myClass">Hello World</div>
</script>

2. 操作DOM元素：
   获取div元素的内容：

• element.innerHTML：获取或设置元素的HTML内容。
• element.textContent：获取或设置元素的文本内容。

<div class="myClass">Hello World</div>
<script>
    var element = document.getElementsByClassName('myClass')[0];
    console.log(element.innerHTML); // 输出 Hello World
    console.log(element.textContent); // 输出 Hello World
    element.innerHTML = 'Hello JS'; // 修改HTML内容
</script>

更多操作详见：

• MDN文档
• W3C文档

事件监听

事件监听是指在特定事件发生时执行指定的函数。

事件绑定

1. 通过HTML标签中的事件属性进行绑定

<button onclick="alert('按钮被点击')">点击我</button>
<!--或-->
<button oncliick="f()">点击我</button>
<script>
function f() {
    alert('按钮被点击');
}
</script>

2. 通过DOM元素属性进行绑定

document.getElementById('myButton').addEventListener('click', function() {
    alert('按钮被点击');
});

常见事件

• onclick：点击事件，当用户点击元素时触发。
• onblur：失去焦点事件，当元素失去焦点时触发。
• onfocus：获得焦点事件，当元素获得焦点时触发。
• onchange：改变事件，当元素的值发生改变时触发。
• onsubmit：提交事件，当表单提交时触发。
• onreset：重置事件，当表单重置时触发。
• onselect：选择事件，当用户选择文本时触发。
• onmouseover：鼠标悬停事件，当鼠标悬停在元素上时触发。
• onmouseout：鼠标移出事件，当鼠标移出元素时触发。
• onmousedown：鼠标按下事件，当用户按下鼠标按钮时触发。
• onmouseup：鼠标松开事件，当用户松开鼠标按钮时触发。
• onkeydown：键盘按下事件，当用户按下键盘键时触发。
• onkeyup：键盘松开事件，当用户松开键盘键时触发。
• onkeypress：键盘按下事件，当用户按下键盘键时触发。