【JS笔记】Java Script学习笔记
Java Script
输出语句
document.write()：将内容写入html文档console.log()：将内容写入控制台alert()：弹窗
变量
JS是弱类型语言，变量无类型
- var：全局变量，可重复声明
- let：局部变量，不可重复声明
- const：常量，不可重复声明
数据类型
number：数字。整数、浮点数、NaNstring：字符串。- 单引号：
'Hello' - 双引号：
"Hello" - 模板字符串：使用反引号
`Hello ${name}`
- 单引号：
boolean：布尔值。object：对象。- 数组：
[1, 2, 3] - 函数：
function() {}或箭头函数() => {} - 日期：
new Date() - 正则表达式：
/abc/
- 数组：
null：空值。- 用于表示空对象引用。
undefined：未定义。- 表示变量未初始化。
- 函数未返回值时默认返回undefined。
使用typeof运算符可以判断变量的数据类型。
运算符
- 算术运算符：
+,-,*,/,% - 赋值运算符：
=,+=,-=,*=,/= - 比较运算符：
==,===,!=,!==,<,>,<=,>===：值相等，不考虑类型。===：值相等，且类型相同。!=：值不相等。!==：值不相等，或类型不同。
var age=18;var age1="18";alert(age == age1); // true, 因为值相等alert(age === age1); // false, 因为类型不相等alert(age != age1); // false, 因为值相等alert(age !== age1); // true, 因为类型不相等 - 逻辑运算符：
&&,||,! - 位运算符：
&,|,^,~,<<,>>,>>> - 三元运算符：
condition ? expr1 : expr2
类型转换
- String转换成数字
Number()：将字符串转换为数字。parseInt()：将字符串转换为整数。parseFloat()：将字符串转换为浮点数。- 若字符串非数字，转换结果为NaN。
var str1 = "123";var str2 = "12A3";var str3 = "A123";var str4 = "12.3";var num = Number(str1); // 123alert(num); // 输出 "123"num = parseInt(str2); // 12alert( num); // 输出 "12"num = parseInt(str3); // NaNalert( num); // 输出 "NaN"num = parseFloat(str4); // 12.3alert( num); // 输出 "12.3"num = parseInt(str4); // 12alert(num); // 输出 "12"+：将字符串转换为数字。例：
var str = "12.3";var num = +str; // 12.3alert(typeof num); // 输出 "number" - Number转换成字符串
toString()：将数字转换为字符串。String()：将数字转换为字符串。
- 其他类型转换成boolean
Boolean()：将其他类型转换为布尔值。!!：将其他类型转换为布尔值。Number：0和NaN为false，其余为trueString：空字符串为false，其余为truenull和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相同
函数
- 声明函数
function functionName(parameters) {// 函数体 } - 表达式函数
const functionName = function(parameters) {// 函数体}; - 箭头函数
const functionName = (parameters) => {// 函数体 }; - 函数参数
- 默认参数：在函数定义时为参数设置默认值。
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"
对象
数组对象
- 创建数组
//方法一 var arr1 = new Array(1,2,3); //方法二 var arr2 = [1, 2, 3]; console.log(arr1[0]); - 数组的特点
- 数组的长度可以动态改变。
- 数组可以存储不同类型的数据。
arr1.length=5; arr1[4]='A'; console.log(arr1);length属性会获得数组的长度
未赋值的索引的元素值为undefined - 数组方法
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']
字符串
- 创建字符串
//方法一 var str1 = new String('123'); //方法二 var str2 = '123'; console.log(str1); - 字符串的属性
length：字符串的长度- 字符串是不可变的，不能改变字符串的长度或特定索引的字符。
- 字符串方法
charAt(index)：返回指定索引的字符。
var str2 = '123'; console.log(str2.charAt(1)); // 输出 '2'indexOf(substring)：返回匹配到第一个子字符串的索引。
var str2 = '123'; console.log(str2.indexOf('23')); // 输出 1lastIndexOf(substring)：返回匹配的最后一个子字符串的索引。
var str2 = '12323'; console.log(str2.lastIndexOf('23')); // 输出 3substring(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对象
- 定义
- JSON是一种轻量级的数据交换格式，用于在不同系统之间传递数据。
- JSON数据在语法上是JavaScript对象的子集，但是JSON数据是字符串格式，不能直接使用。
- JSON格式
- JSON数据由键值对组成，键值对之间用逗号隔开。
- 键必须是字符串，值可以是字符串、数字、布尔值、数组、对象或null。
- 键值对用冒号隔开。
- 数组用方括号括起来。
- 对象用花括号括起来。
var jsonObj = {"name": "张三","age": 18,"isStudent": false,"courses": ["数学", "英语"],"address": {"city": "北京","zipCode": "100000"} }; - 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前缀。
- 常用属性：
window.location：获取或设置当前文档的URL。window.history：访问浏览器历史记录。window.navigator：获取浏览器信息。
- 常用方法：
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）是文档对象模型，用于操作文档的内容。
- 获取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>
- 操作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 Worldconsole.log(element.textContent); // 输出 Hello Worldelement.innerHTML = 'Hello JS'; // 修改HTML内容
</script>
更多操作详见：
- MDN文档
- W3C文档
事件监听
事件监听是指在特定事件发生时执行指定的函数。
事件绑定
- 通过HTML标签中的事件属性进行绑定
<button onclick="alert('按钮被点击')">点击我</button>
<!--或-->
<button oncliick="f()">点击我</button>
<script>
function f() {alert('按钮被点击');
}
</script>
- 通过DOM元素属性进行绑定
document.getElementById('myButton').addEventListener('click', function() {alert('按钮被点击');
});
常见事件
onclick：点击事件，当用户点击元素时触发。onblur：失去焦点事件，当元素失去焦点时触发。onfocus：获得焦点事件，当元素获得焦点时触发。onchange：改变事件，当元素的值发生改变时触发。onsubmit：提交事件，当表单提交时触发。onreset：重置事件，当表单重置时触发。onselect：选择事件，当用户选择文本时触发。onmouseover：鼠标悬停事件，当鼠标悬停在元素上时触发。onmouseout：鼠标移出事件，当鼠标移出元素时触发。onmousedown：鼠标按下事件，当用户按下鼠标按钮时触发。onmouseup：鼠标松开事件，当用户松开鼠标按钮时触发。onkeydown：键盘按下事件，当用户按下键盘键时触发。onkeyup：键盘松开事件，当用户松开键盘键时触发。onkeypress：键盘按下事件，当用户按下键盘键时触发。