一、JavaScript对象
数组对象（Array）
数组是一种特殊的对象，用于存储有序的集合数据。
let arr = []; // 使用字面量创建数组
let arr2 = new Array(); // 使用构造函数创建数组
特点：
- 数组的键（索引）是数字。
- 数组具有许多内置方法（如 push 、 pop 、 map 、 filter 等）。
- 数组的长度（ length ）会自动更新。
数组常用方法
数组操作
• push()：向数组末尾添加一个或多个元素，返回新长度。
• pop()：从数组末尾移除一个元素，返回被移除的元素。
• shift()：从数组开头移除一个元素，返回被移除的元素。
• unshift()：向数组开头添加一个或多个元素，返回新长度。
• splice()：从数组中添加或移除元素，返回被移除的元素组成的数组。
• slice()：返回数组的一个浅拷贝，不修改原数组。
查找元素
• indexOf()：返回指定元素在数组中的第一个索引，不存在时返回-1。
• lastIndexOf()：返回指定元素在数组中的最后一个索引，不存在时返回-1。
• find()：返回数组中满足条件的第一个元素。
• findIndex()：返回数组中满足条件的第一个元素的索引。
遍历数组
• forEach()：对数组中的每个元素执行一次给定的函数。
• for...of：遍历数组的值。
• for...in：遍历数组的索引。
数组转换
• map()：创建一个新数组，其元素是调用一次提供的函数后的返回值。
• filter()：创建一个新数组，包含通过测试的所有元素。
• reduce()：对数组中的元素执行一个由左到右的累加操作。
• reduceRight()：对数组中的元素执行一个由右到左的累加操作。
• concat()：合并两个或多个数组，返回一个新数组。
排序和反转
• sort()：对数组元素进行排序（默认按字符串顺序）。
• reverse()：反转数组中元素的顺序。
其他
• join()：将数组的所有元素连接成一个字符串。
• toString()：将数组转换为字符串。
• includes()：检查数组是否包含某个元素，返回布尔值。
• fill()：用一个固定值填充数组的指定部分。
• copyWithin()：将数组的一部分复制到同一数组中的另一个位置，不修改原数组长度。
• flat()：将多维数组平铺成一维数组。
• flatMap()：先对数组中的每个元素调用一次提供的函数，然后将结果平铺成一维数组。
字符串对象（String）
字符串对象定义的三种方法：
let str1 = 'hello world';
let str2 = new String('hello fanfan');
let str3 = ' hello ';
字符串常用的方法：
str.length
str.charAt(6) // 返回 str 中索引为 6 的字符
str.substring(1,3) // 返回所截取的字符串，左闭右开区间
str.indexOf('f') // 返回 f 字符的下标
str.trim() // 去除字符串两侧的空字符串
JSON对象
JSON 是一个内置对象，用于处理JSON 数据。
JSON 数据格式是一种轻量级的数据交换格式，常用于网络中传输数据。
// json字符串
let jsonStr='{"name":"fanfan","age":18,"sex":"男","height":1.75,"weight":70}';
// json字符串转对象
let jsonObj = JSON.parse(jsonStr);
// 对象转json字符串
let jsonStr1 = JSON.stringify(jsonObj);
自定义对象
自定义对象是通过用户定义的构造函数或类创建的对象，用于封装数据和行为，以满足特定的业务需求。它们是 JavaScript 中实现面向对象编程的核心方式之一。
特点：
- 封装数据和方法：将数据（属性）和操作数据的函数（方法）封装在一起。
- 可扩展性：可以通过原型链或类继承实现对象的扩展。
- 实例化：通过
new关键字调用构造函数或类来创建对象实例。
let student = {
name: "fanfan",
age: 18,
sex: "男",
height: 1.75,
weight: 70,
/* 两种函数定义方式 */
getName: function(){
return this.age;
},
getAge(){
return this.name;
}
}
函数对象
函数（Function）是一种特殊的对象，它既可以作为普通的函数被调用，也可以作为对象被操作。函数对象是 JavaScript 中实现高级编程模式（如高阶函数、闭包、面向对象编程等）的核心机制之一。
函数可以通过以下几种方式定义：
/* 标准函数 */
function add1(a,b){return a+b;}
/* 匿名函数 */
let add2 = function(a,b){return a+b;}
/* 箭头函数 */
let add3 = (a,b) => {return a+b;}
/* 箭头函数简写 */
let add4 = (a,b) => a+b;
函数的调用：
// 定义函数
function getAverScore(score1, score2, score3) {
let averScore = (score1 + score2 + score3) / 3;
return averScore;
}
// 调用函数
let num = getAverScore(10,20,30);
Window对象
window对象是 JavaScript 中的一个全局对象，代表浏览器的窗口或框架。它既是全局作用域的代理，也提供了与浏览器交互的接口。
常用的对象方法（window对象调用方法时，可以直接省略）
// 显示带有一段消息和一个确认按钮的警告框
window.alert('Hello World')
alert('Hello World')
// 显示带有一段消息以及确认按钮和取消按钮的对话框
window.confirm('你确定吗？')
confirm('你确定吗？')
// 显示一个带输入框的对话框
let age = window.prompt('年龄？')
let age = prompt('年龄？')
// 周期性定时器
setInterval(()=>{
console.log('周期性执行');
}, 2000)
// 定时器
setTimeout(function(){
console.log('只执行一次');
// window.location.href = 'http://www.bilibili.com'
location.href = 'http://baidu.com'
}, 2000)
二、DOM对象的选择和操作
DOM对象的选择
获取元素的方法：
document.querySelector(selector)获取单个元素，返回一个element。若是有多个匹配，则返回第一个elment。document.querySelectorAll(selector)获取多个元素的集合，返回一个NodeList。
以上两种方法参数可以是id、class、tabName。
document.getElementById(selector)通过id获取单个元素，返回一个element。若是有多个匹配，则返回第一个elment。document.getElementsByClassName(selector)获取多个元素的集合，返回一个NodeList。document.getElementsByTagName(selector)获取多个元素的集合，返回一个NodeList。
通过这些方法获取一个元素数组，可以通过下标访问其中的某个元素，但无法对数组进行push和pop操作。
示例：
document.querySelector('span');
document.querySelector('#id');
document.querySelector('.class');
// 获取到元素，就可以调用内置的方法，对元素进行操作。
document.querySelectorAll('span')[1].innerText = 'text';
document.getElementById('id').innerText = 'text';
document.getElementsByClassName('class')[1].innerText = 'text';
document.getElementsByTagName('span')[2].innerText = 'text';
遍历元素：使用forEach方法遍历NodeList或数组。
示例：
arr.forEach((element, index) => {
// 对每个元素进行操作
});
DOM对象的操作
常见的 DOM 元素操作函数
1.创建和插入元素
（1）document.createElement(tagName)
创建一个新的 DOM 元素。
const newElement = document.createElement("div");
（2）element.appendChild(child)
将一个子元素插入到父元素的末尾。
parentElement.appendChild(newElement);
（3）element.insertBefore(child, reference)
将一个子元素插入到指定位置（参考元素之前）。
parentElement.insertBefore(newElement, referenceElement);
（4）element.innerHTML和element.outerHTML
• innerHTML：获取或设置元素的内部 HTML 内容。
• outerHTML：获取或设置元素的外部 HTML 内容（包括自身标签）。
element.innerHTML = "<p>New content</p>";
element.outerHTML = "<div>New element</div>";
2.修改元素内容
（1）element.textContent
获取或设置元素的文本内容。
element.textContent = "New text content";
（2）element.value
获取或设置表单元素（如<input>、<textarea>）的值。
const input = document.querySelector("input");
input.value = "New value";
3.修改元素样式
（1）element.style
动态修改元素的 CSS 样式。
element.style.color = "red";
element.style.fontSize = "16px";
（2）element.classList
操作元素的类名。
• element.classList.add("className")：添加类名。
• element.classList.remove("className")：移除类名。
• element.classList.toggle("className")：切换类名。
• element.classList.contains("className")：检查是否包含类名。
element.classList.add("active");
element.classList.remove("inactive");
element.classList.toggle("highlight");
4.删除元素
（1）element.remove()
删除当前元素。
element.remove();
（2）parentElement.removeChild(child)
从父元素中删除子元素。
parentElement.removeChild(childElement);
5.事件监听
（1）element.addEventListener(event, callback)
为元素添加事件监听器。
element.addEventListener("click", function() {
console.log("Element clicked");
});
（2）element.removeEventListener(event, callback)
移除事件监听器。
element.removeEventListener("click", callbackFunction);
6.其他常用操作
（1）element.getAttribute(name)
获取元素的属性值。
const href = element.getAttribute("href");
（2）element.setAttribute(name, value)
设置元素的属性值。
element.setAttribute("href", "https://example.com");
（3）element.hasAttribute(name)
检查元素是否包含指定属性。
if (element.hasAttribute("disabled")) {
console.log("Element is disabled");
}
（4）element.cloneNode(deep)
克隆元素。deep参数为true时，克隆包括子元素的整个节点树。
const clone = element.cloneNode(true);
事件监听
<body>
<imput type="button" id="btn1">按钮1</imput>
<imput type="button" id="btn2">按钮2</imput>
<imput type="button" id="btn3" onclick="btn3(),btn4()">按钮3</imput>
</body>
<script>
// 事件监听的三种方式
// 方式一：采用的是事件监听事件方式（用的多）
document.querySelector('#btn1').addEventListener('click',()=>{
alert('点击按钮1')
})// 会执行
document.querySelector('#btn1').addEventListener('click',()=>{
alert('点击按钮11')
})// 会执行
// 方式二：采用的是事件监听事件方式
document.querySelector('#btn2').onclick = ()=>{
alert('点击按钮2')
}// 不会执行
document.querySelector('#btn2').onclick = ()=>{
alert('点击按钮22')
}// 会执行
// 方式三：使用onclick直接写在标签内部（用的多）
var btn3 = () => {
alert('点击按钮3')
}// 不会执行
var btn3 = () => {
alert('点击按钮33')
}// 会执行
let btn4 = () => {
alert('点击按钮4')
}// 会执行
</script>
常见的事件
// 鼠标移入和移出
document.querySelector('div').addEventListener('mouseenter',()=>{
console.log('鼠标移入')
})
document.querySelector('div').addEventListener('mouseleave',()=>{
console.log('鼠标移出')
})
// 获得焦点和失去焦点
document.querySelector('input').addEventListener('focus',()=>{
console.log('获得焦点')
})
document.querySelector('input').addEventListener('blur',()=>{
console.log('失去焦点')
})
// 键盘按下和抬起
document.querySelector('input').addEventListener('keydown',()=>{
console.log('keydown')
})
document.querySelector('input').addEventListener('keyup',()=>{
console.log('keyup')
})
// 输入事件
document.querySelectorAll('input')[1].addEventListener('input',()=>{
console.log('用户输入状态')
})
// 表单提交事件
document.querySelector('form').addEventListener('submit',()=>{
alert('用户提交信息')
})
// click 事件
document.querySelector('button').addEventListener('click',()=>{
alert('点击按钮')
})
三、查漏补缺
1.Math.random函数
Math.random()函数返回一个介于0（包含）和1（不包含）之间的伪随机数。该函数不接受任何参数，每次调用都会返回一个新的随机数。
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
// floor 向下取整所以需要 +1
}
var randomNumber = getRandomInt(1, 100); // 返回一个介于1和100之间的随机整数 console.log(randomNumber); // 输出类似于42
function getRandomFloat(min, max) {
return Math.random() * (max - min) + min;
}
var randomNumber = getRandomFloat(1, 10); // 返回一个介于1和10之间的随机浮点数 console.log(randomNumber); // 输出类似于3.456789
function getRandomBoolean() {
return Math.random() < 0.5;
}
var randomBoolean = getRandomBoolean(); // 返回一个true或false的随机布尔值
console.log(randomBoolean); // 输出类似于true或false
