外貿(mào)流程詢盤發(fā)盤seo168小視頻
? ? ? ? 上篇我們學(xué)習(xí)了，一些基礎(chǔ)語法和函數(shù)，現(xiàn)在我們學(xué)習(xí)下篇，主要包括,對象和事件。而對象又包括，數(shù)組Arrays，String字符串，BOM，DOM等
JS對象
Arrays數(shù)組
????????數(shù)組是一種特殊的對象，用于存儲有序的值集合。了解數(shù)組的創(chuàng)建方式、遍歷方式、屬性和方法是掌握J(rèn)avaScript的重要部分。以下是關(guān)于JavaScript數(shù)組的詳細(xì)介紹。
數(shù)組的創(chuàng)建
JavaScript中可以使用多種方式創(chuàng)建數(shù)組，最常見的方法有：
-
數(shù)組字面量： 這是創(chuàng)建數(shù)組的最簡單和推薦的方式。通過中括號
[]可以直接初始化數(shù)組。
const fruits = ['蘋果', '香蕉', '橘子'];2.?Array構(gòu)造函數(shù)： 可以使用new Array()構(gòu)造函數(shù)來創(chuàng)建數(shù)組，雖然不推薦這種方法，但它仍然有效。
const fruits = new Array('蘋果', '香蕉', '橘子');
?注意，如果只傳入一個(gè)數(shù)字作為參數(shù)，則會創(chuàng)建一個(gè)指定長度的空數(shù)組。
const arrayLength = new Array(5); // 創(chuàng)建一個(gè)長度為5的空數(shù)組
3.?使用Array.of()：?Array.of()方法可以創(chuàng)建一個(gè)新的數(shù)組實(shí)例，其參數(shù)是數(shù)組的元素。
const numbers = Array.of(1, 2, 3, 4, 5);
數(shù)組的遍歷方式
遍歷有好幾種方法，我這里介紹常用的兩種。
-
for循環(huán)： 使用經(jīng)典的for循環(huán)可以通過索引遍歷數(shù)組。
const fruits = ['蘋果', '香蕉', '橘子'];
for (let i = 0; i < fruits.length; i++) {console.log(fruits[i]);
}
?2.forEach()方法：?forEach()是一個(gè)數(shù)組方法，可以對數(shù)組中的每個(gè)元素執(zhí)行提供的函數(shù)。
fruits.forEach(function(fruit) {console.log(fruit);
});
數(shù)組的屬性和方法?
????????作為后端開發(fā)者，我們不需要了解那么多方法和屬性，簡單了解即可，這里只介紹常用的屬性和方法
?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS 對象-Arrays</title>
</head>
<body><script>//創(chuàng)建數(shù)組var arr = new Array(1, 2, 3, 4, 5);for (let i = 0; i < array.length; i++) {console.log(array[i]); }var arr = [1, 2, 3, 4, 5];arr[10] = 50; //即使沒有10這個(gè)索引，也不會報(bào)錯，因?yàn)殚L度可以動態(tài)變化//訪問數(shù)組元素console.log(arr[0]); //1console.log(arr[1]); //2console.log(arr[10]);//50log(arr[9]); //沒有定義的索引元素是undefined//數(shù)組可以存儲不同類型的值arr[8] = "hello";//為8索引位置添加字符串元素/* JS 中的數(shù)組與Java中的集合類似，可以存儲不同類型的數(shù)據(jù)，可以動態(tài)添加和刪除元素，可以對數(shù)組進(jìn)行排序等操作。 *///數(shù)組的遍歷for (let i = 0; i < arr.length; i++) {console.log(arr[i]); //1 2 3 4 5 hello}//forEach方法 arr.forEach(function(e) {console.log(e); //1 2 3 4 5 hello});/* forEach方法可以對數(shù)組中的每一個(gè)元素進(jìn)行操作, 如果是undefined,會跳過不會打印。for循環(huán)會遍歷所有元素，包括undefined。*///forEach方法,ES6引入了箭頭函數(shù)，和Java中l(wèi)ambda表達(dá)式類似，可以簡化代碼。arr.forEach(e => console.log(e)); //1 2 3 4 5 hello//數(shù)組的屬性和方法arr.push(6,7,8); //在數(shù)組末尾添加元素arr.splice(2, 2); //在索引為2的位置開始刪除2個(gè)元素arr.pop(); //刪除數(shù)組末尾的元素arr.shift(); //刪除數(shù)組第一個(gè)元素arr.unshift(0); //在數(shù)組開頭添加元素arr.sort(); //對數(shù)組進(jìn)行排序arr.reverse(); //對數(shù)組進(jìn)行反轉(zhuǎn)arr.join("-"); //將數(shù)組元素用-連接成字符串a(chǎn)rr.slice(1, 4); //從索引1到索引3的元素組成一個(gè)新數(shù)組arr.map(function(e) {return e * 2; //對數(shù)組元素進(jìn)行映射}); //返回一個(gè)新數(shù)組，元素是原數(shù)組元素的兩倍arr.filter(function(e) {return e > 3; //返回一個(gè)新數(shù)組，元素是原數(shù)組元素大于3的元素}); //返回一個(gè)新數(shù)組，元素是原數(shù)組元素大于3的元素arr.reduce(function(pre, cur) {return pre + cur; //對數(shù)組元素進(jìn)行求和}); //返回一個(gè)值，是數(shù)組元素的求和arr.indexOf(3); //返回元素3的索引，如果不存在返回-1arr.lastIndexOf(3); //返回元素3的最后一個(gè)索引，如果不存在返回-1arr.includes(3); //判斷元素3是否存在，存在返回true，不存在返回false</script></body>
</html>String字符串
字符串創(chuàng)建
在JavaScript中，可以通過多種方式創(chuàng)建字符串：
1.使用字符串字面量： 最常見的方式是使用單引號'或雙引號"括起來的字符。
var str1 = "Hello, world!";
var str2 = 'Hello, world!';
2.使用String構(gòu)造函數(shù)： 使用new String()來創(chuàng)建字符串對象，盡管這種方式不常用，因?yàn)樗鼤梢粋€(gè)字符串對象，而不是一個(gè)簡單的字符串。
var str3 = new String("Hello, world!");
注意：使用構(gòu)造函數(shù)創(chuàng)建的字符串對象和字面量字符串在某些情況下表現(xiàn)會不同，因此一般推薦使用字面量。
字符串的屬性
- length： 字符串的
length屬性返回字符串中的字符數(shù)，包括空格和標(biāo)點(diǎn)符號。
console.log(str1.length); // 輸出 13
字符串的方法
????????JavaScript中的字符串對象提供了許多有用的方法，有Java基礎(chǔ)的同學(xué)會覺得非常簡單，因?yàn)榇蟛糠址椒ǘ际且幻粯印Ｒ韵率且恍┏Ｓ玫姆椒?#xff1a;
1.indexOf()： 返回指定字符或子字符串在字符串中第一次出現(xiàn)的位置，未找到則返回-1。
console.log(str1.indexOf("o")); // 輸出 4
2.charAt()： 返回字符串中指定位置的字符。
console.log(str1.charAt(0)); // 輸出 "H"
3.substring()： 返回字符串的一部分。第一個(gè)參數(shù)為開始索引，第二個(gè)參數(shù)為結(jié)束索引。
console.log(str1.substring(0, 5)); // 輸出 "Hello"
4.replace()： 替換字符串中匹配的部分，返回替換后的新字符串。
console.log(str1.replace("world", "JavaScript")); // 輸出 "Hello, JavaScript!"
5.trim()： 去掉字符串兩端的空格。
var str4 = " Hello, world! ";
console.log(str4.trim()); // 輸出 "Hello, world!"
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS對象-string</title>
</head>
<body><script>// 字符串創(chuàng)建var str1 = "hello string";var str2 = new String("hello string");//屬性console.log(str1.length); // 12console.log(str2.length); // 12//方法console.log(str1.toUpperCase()); // HELLO STRINGconsole.log(str2.toUpperCase()); // HELLO STRINGconsole.log(str1.toLowerCase()); // hello stringconsole.log(str2.toLowerCase()); // hello stringconsole.log(str1.indexOf("l")); // 2console.log(str2.indexOf("l")); // 2console.log(str1.lastIndexOf("l")); // 9console.log(str2.lastIndexOf("l")); // 9console.log(str1.charAt(2)); // lconsole.log(str2.charAt(2)); // lconsole.log(str1.substring(2, 5)); // lloconsole.log(str2.substring(2, 5)); // lloconsole.log(str1.slice(2, 5)); // lloconsole.log(str2.slice(2, 5)); // lloconsole.log(str1.replace("l", "L")); // heLLo stringconsole.log(str2.replace("l", "L")); // heLLo stringconsole.log(str1.trim()); // "hello string"console.log(str2.trim()); // "hello string"console.log(str1.split(" ")); // ["hello", "string"]console.log(str2.split(" ")); // ["hello", "string"]console.log(str1.concat(" world")); // "hello string world"console.log(str2.concat(" world")); // "hello string world"console.log(str1.localeCompare("hello")); // 1console.log(str2.localeCompare("hello")); // 1console.log(str1.match(/l/g)); // ["l", "l", "l", "l", "l", "l", "l", "l", "l", "l"]console.log(str2.match(/l/g)); // ["l", "l", "l"]console.log(str1.search("l")); // 2console.log(str2.search("l")); // 2console.log(str1.replace(/l/g, "L")); // heLLo stRingconsole.log(str2.replace(/l/g, "L")); // heLLo stRingconsole.log(str1.localeCompare("hello")); // 1console.log(str2.localeCompare("hello")); // 1console.log(str1.localeCompare("hello", "en", { sensitivity: "base" })); // 1console.log(str2.localeCompare("hello", "en", { sensitivity: "base" })); // 1console.log(str1.localeCompare("hello", "en", { sensitivity: "accent" })); // 1console.log(str2.localeCompare("hello", "en", { sensitivity: "accent" })); // 1console.log(str1.localeCompare("hello", "en", { sensitivity: "case" })); // 1console.log(str2.localeCompare("hello", "en", { sensitivity: "case" })); // 1</script></body>
</html>JSON對象
自定義對象的創(chuàng)建
在 JavaScript 中，我們可以使用對象字面量的語法來創(chuàng)建自定義對象。以下是一個(gè)簡單的示例：
var person = {name: "John",age: 30,city: "New York",eat: function() {alert("干飯！");}
};
在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為?person?的對象，它有三個(gè)屬性（name、age?和?city）以及一個(gè)方法（eat）。這個(gè)?eat?方法在被調(diào)用時(shí)會彈出一個(gè)消息框，顯示“干飯！”。
調(diào)用自定義對象的方法
我們可以通過對象的名稱加上點(diǎn)操作符來調(diào)用方法。例如，調(diào)用?eat?方法和輸出?name?屬性的值。
person.eat(); // 調(diào)用 eat 方法
alert(person.name); // 輸出 name 屬性的值
這段代碼將彈出“干飯！”的提示框，并且接著顯示當(dāng)前對象的?name?屬性。?
JSON 對象定義
????????JSON 是一種輕量級的數(shù)據(jù)交換格式，它是基于 JavaScript 對象表示法的。我們可以將 JSON 看作是字符串形式的 JavaScript 對象。以下是兩種定義 JSON 對象的方式：
字符串形式的 JSON 對象
首先，我們可以使用字符串來定義 JSON 對象：
var jsonObj = '{"name": "John", "age": 30, "city": "New York"}'; // 字符串形式的 JSON 對象
這種方式使用了 JSON 格式的字符串，但這并不是一個(gè)真正的對象，而只是一個(gè)字符串
JavaScript 對象的表示
我們也可以直接使用 JavaScript 對象的形式來定義一個(gè) JSON 對象：
var jsonObj = {"name": "John","age": 30,"city": "New York"
};
?在這里，jsonObj?是一個(gè)有效的 JavaScript 對象。?
JSON 對象與字符串JSON對象的轉(zhuǎn)換
轉(zhuǎn)換為字符串形式的JSON
var jsonStr = JSON.stringify(jsonObj);
轉(zhuǎn)換為JSON對象
var newObj = JSON.parse(jsonStr);
兩者區(qū)別?
????????JSON（JavaScript Object Notation）是一種輕量級的數(shù)據(jù)交換格式，常用于在不同的編程語言之間傳輸和存儲數(shù)據(jù)。JSON有兩種基本形式：JSON對象和JSON字符串，這兩者之間存在顯著的區(qū)別。
JSON對象：JSON對象是一個(gè)數(shù)據(jù)結(jié)構(gòu)，可以通過“對象.屬性”的方式來訪問其值。在JavaScript中，JSON對象是一個(gè)鍵值對集合。JSON對象直接可以被程序使用，它是適合代碼處理的原始數(shù)據(jù)類型。
JSON字符串：JSON字符串在存儲和傳輸數(shù)據(jù)時(shí)使用，它提供了一種將對象序列化為文本的方式，以便在網(wǎng)絡(luò)上傳輸或者存儲到文件中。
?BOM
????????BOM（瀏覽器對象模型）是JavaScript的一個(gè)重要組成部分，使得開發(fā)者能夠通過腳本控制瀏覽器窗口。與DOM（文檔對象模型）不同，BOM并不直接涉及HTML或CSS，而是與瀏覽器本身的行為及功能相關(guān)。
作為一個(gè)Java程序員，我們只需重點(diǎn)關(guān)注這兩個(gè)，Window和Location
Window
/* 重點(diǎn)了解 window 對象 和 Location 對象 *///獲取Window.alert("Hello BOM!");alert("Hello BOM!"); //方法confirm("你確定要刪除嗎？");//返回true或false//定時(shí)器var i =0;setInterval(function(){console.log("定時(shí)器執(zhí)行"+i);i++;},1000 //每隔1秒執(zhí)行一次 ); //周期性的執(zhí)行函數(shù)setTimeout(function(){alert("JS");},2000 //2秒后執(zhí)行一次 ); //延遲執(zhí)行函數(shù)Location
//Location對象//獲取當(dāng)前頁面的URLvar url = window.location.href;console.log(url);location.href = "https://www.baidu.com"; //跳轉(zhuǎn)到指定頁面DOM
????????DOM是文檔對象模型的縮寫，它將整個(gè)HTML或XML文檔視為一個(gè)樹形結(jié)構(gòu)。每一個(gè)元素、屬性和文本都成為這個(gè)結(jié)構(gòu)中的一個(gè)節(jié)點(diǎn)。這樣，我們就能通過JavaScript來訪問和修改這些節(jié)點(diǎn)，從而更新網(wǎng)頁的內(nèi)容和樣式，而不需要重新加載整個(gè)頁面。
獲取DOM元素
在JavaScript中，我們可以使用多種方法來獲取DOM元素。以下是一些常用的方法：
改變元素的內(nèi)容和樣式
例如，我們可以通過DOM改變某個(gè)元素的顏色和背景：
element.style.color = "red";
element.style.backgroundColor = "yellow";
訪問和修改元素的屬性
我們可以訪問元素的屬性，如復(fù)選框的狀態(tài)：
var checkboxes = document.getElementsByName("my_hobby");
for (var i = 0; i < checkboxes.length; i++) {if (checkboxes[i].checked) {alert(checkboxes[i].value); // 顯示被選中的愛好}
}
????????DOM不僅是網(wǎng)頁的結(jié)構(gòu)框架，也是我們與網(wǎng)頁交互的重要通道。學(xué)習(xí)如何有效使用DOM可以幫助我們開發(fā)出更動態(tài)、互動豐富的網(wǎng)頁。?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS對象-DOM</title>
</head>
<body><img src="../web_html/images/20240604hlag8k.webp" alt=""> <br><div id="bro_cat">Bro_cat</div><div class="001"> JS </div><div class="002"> DOM </div><input type="checkbox" name="my_hobby"> 電影<input type="checkbox" name="my_hobby"> 音樂<input type="checkbox" name="my_hobby"> 旅行<script>/* DOM 文檔對象模型 */// 獲取元素// 通過id獲取元素var bro_cat = document.getElementById("bro_cat");// 通過標(biāo)簽名獲取元素var dvs = document.getElementsByTagName("div");for (let i = 0; i < array.length; i++) {alert(dvs[i]); }//通過name屬性獲取元素var hobby = document.getElementsByName("my_hobby");for (let i = 0; i < hobby.length; i++) {alert(hobby[i].value);}// 通過類名獲取元素var js = document.getElementsByClassName("001")[0];var dom = document.getElementsByClassName("002")[0];// 改變元素的樣式bro_cat.style.color = "red";js.style.backgroundColor = "yellow";dom.style.fontSize = "20px";// 獲取元素的屬性var input_hobby = document.getElementsByName("my_hobby");for (var i = 0; i < input_hobby.length; i++) {if (input_hobby[i].checked) {alert(input_hobby[i].value);}}</script></body>
</html>事件
事件監(jiān)聽
事件綁定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS事件</title>
</head>
<body><input type="button" id="btn1" value="按鈕1" onclick="on()"> <input type="button" id="btn2" value="按鈕2"><script>//事件綁定//通過標(biāo)簽屬性綁定事件function on() {console.log("按鈕1被點(diǎn)擊了");}//通過DOM對象綁定事件var btn2 = document.getElementById("btn2");btn2.onclick = function() {console.log("按鈕2被點(diǎn)擊了");}</script></body>
</html>常見事件
總結(jié)
????????在現(xiàn)代前端開發(fā)中，JavaScript（JS）已經(jīng)成為了構(gòu)建動態(tài)網(wǎng)頁和應(yīng)用的重要工具。掌握其基本語法和概念是第一步，包括變量聲明、數(shù)據(jù)類型、控制結(jié)構(gòu)、函數(shù)和DOM操作等。隨著深入學(xué)習(xí)，理解其原型繼承、閉包和異步編程的機(jī)制將有助于編寫出高效、可維護(hù)的代碼。
? ? ? ? 我寫的有很多東西都沒有涉及全面，想深入了解的可以參考下面官方手冊學(xué)習(xí)……
參考手冊