一文詳解JavaScript中內(nèi)建對象
1.數(shù)組解構(gòu)
const arr = ["1","2","3"] let a,b,c // 解構(gòu)賦值 //將數(shù)組的第一個元素賦值給第一個變量,第二個元素賦值給第二個變量,依次類推 [a,b,c] = arr console.log(a,b,c) // 1 2 3
// 聲明變量同時解構(gòu) let [a,b,c] = ["1","2","3"] console.log(a,b,c) // 1 2 3
// 如果變量數(shù)大于元素數(shù)量,則超出的變量部分賦值為undefined const arr = ["1","2","3"] let [a,b,c,d] = arr console.log(a,b,c,d) // 1 2 3 undefined
// 默認(rèn)值,如果變量聲明了默認(rèn)值,解構(gòu)為undefined的時候,則會使用默認(rèn)值,否則使用對應(yīng)元素 const arr = ["1","2","3"] let [a,b,c=10,d=11] = arr console.log(a,b,c,d) // 1 2 3 11
// 解構(gòu)數(shù)組時可以使用...獲取剩余的元素 const arr = ["1","2","3","4","5"] // 第一個元素賦值給a,第二個元素賦值給b,其余元素賦值給c let [a,b, ...c] = arr console.log(a) // 1 console.log(b) // 2 console.log(c) // ['3','4','4']
// 解構(gòu)多維數(shù)組 const arr = [[1,2,3],[4,5,6]] let [[a,b,c],obj] = arr console.log(a,b,c) // 1 2 3 console.log(obj) // [4,5,6]
2.對象解構(gòu)
const user = {"name":"q",age:18}
// 聲明變量同時解構(gòu)對象
let {name,age} = user
console.log(name,age) // q 18
// 先聲明變量,再解構(gòu)對象
const user = {"name":"q",age:18}
let name,age
({name,age} = user) // {} 在js中是代碼塊,所以需要在外面使用()
console.log(name,age) // q 18
const user = {"name":"q",age:18}
// 如果變量名與屬性名不匹配,則解構(gòu)為undefined
let {a,b} = user
console.log(a,b) // undefined undefined
// 可以給變量起別名再解構(gòu)
// 可以給變量既起別名,又設(shè)置默認(rèn)值
let {name:c,age:d=20} = user
console.log(c,d) // q 18
3.對象的序列化
JS中的對象使用時都是存在于計算機的內(nèi)存中的,序列化指將對象轉(zhuǎn)換為一個可以存儲的格式,在JS中對象的序列化通常是將一個對象轉(zhuǎn)換為字符串(JSON字符串)
const user = {name:"l",age:18}
// 將一個對象轉(zhuǎn)換為json字符串
const strUser = JSON.stringify(user)
console.log(strUser)
// 將一個json字符串轉(zhuǎn)換為js對象
const objUser = JSON.parse(strUser)
console.log(objUser)
編寫JSON的注意事項:
JSON字符串有兩種類型:
- JSON對象 {}
- JSON數(shù)組 []
JSON字符串的屬性名必須使用雙引號引起來
JSON中可以使用的屬性值(元素)
- 數(shù)字(Number)
- 字符串(String) 必須使用雙引號
- 布爾值(Boolean)
- 空值(Null)
- 對象(Object {})
- 數(shù)組(Array [])
// 利用json完成深復(fù)制,將對象轉(zhuǎn)換成字符串,再將字符串轉(zhuǎn)換成一個新對象 const strUser = JSON.stringify(user) const objUser = JSON.parse(strUser)
4.Map
Map用來存儲鍵值對結(jié)構(gòu)的數(shù)據(jù)(key-value)
Object中存儲的數(shù)據(jù)就可以認(rèn)為是一種鍵值對結(jié)構(gòu)
Map和Object的主要區(qū)別:
- Object中的屬性名只能是字符串或符號,如果傳遞了一個其他類型的屬性名,JS解釋器會自動將其轉(zhuǎn)換為字符串
- Map中任何類型都可以稱為數(shù)據(jù)的key
4.1map的使用
const info = new Map()
// 設(shè)置鍵值對
info.set("name","l")
info.set({},"a")
info.set(NaN,"b")
console.log(info) // Map(3) { 'name' => 'l', {} => 'a', NaN => 'b' }
// 當(dāng)前map大小
console.log(info.size) // 3
// 獲取map的所有的key
console.log(info.keys()) // [Map Iterator] { 'name', {}, NaN }
// 獲取map所有的value
console.log(info.values()) // [Map Iterator] { 'l', 'a', 'b' }
// 檢查map是否包含指定key,包含true否則false
console.log(info.has(NaN)) // true
// 通過key獲取指定元素
console.log(info.get("name")) // l
// 刪除元素
info.delete("name")
console.log(info) // Map(2) { {} => 'a', NaN => 'b' }
// 清空map
info.clear()
console.log(info) // Map(0) {}
4.2map的轉(zhuǎn)換
const info = new Map()
info.set("name","l")
info.set({},"a")
info.set(NaN,"b")
// 使用Array.from將 map轉(zhuǎn)換為數(shù)組
const arr = Array.from(info)
console.log(arr) // [ [ 'name', 'l' ], [ {}, 'a' ], [ NaN, 'b' ] ]
const arr = [["name",1],["age",2]]
// 將二維數(shù)組轉(zhuǎn)換為map
const map = new Map(arr)
console.log(map) // Map(2) { 'name' => 1, 'age' => 2 }
4.3遍歷map
const info = new Map()
info.set("a",1)
info.set("b",2)
// 方式一
for (const entry of info){
const [key,value] = entry
console.log(key,value)
}
for (const [key,value] of info){
console.log(key,value)
}
// 方式二
info.forEach((key,value)=>{
console.log(key,value)
})
5.Set
- Set用來創(chuàng)建一個集合
- 它的功能和數(shù)組類似,不同點在于Set中不能存儲重復(fù)的數(shù)據(jù)
// 創(chuàng)建集合
const set = new Set()
// 添加數(shù)據(jù),如果集合中已經(jīng)存在要添加的元素,則不會添加
set.add("a")
set.add("b")
// 獲取集合的大小
console.log(set.size) // 2
// 檢查集合中是否包含指定元素,包含true否則false
console.log(set.has("a")) // true
// 讀取指定元素-需要將set轉(zhuǎn)換成數(shù)組,然后通過下標(biāo)讀取
const arr = [...set]
console.log(arr[0]) // a
// 刪除元素
set.delete("b")
// 遍歷集合
for (const v of set){
console.log(v)
}
// 通過數(shù)組創(chuàng)建集合,基于集合元素的唯一性,會對數(shù)組進行去重
const arr = [1,2,3,4,4,1,1,5]
const set = new Set(arr)
console.log(set) // Set(5) { 1, 2, 3, 4, 5 }
6.Math
Math是一個工具類,提供了數(shù)學(xué)運算的一些常量和方法
// 常量 圓周率 console.log(Math.PI) // 3.141592653589793 // 求一個數(shù)的絕對值 console.log(Math.abs(-123)) // 123 // 求多個值中的最小值 console.log(Math.min(1, 2, 3)) // 1 // 求多個值中的最大值 console.log(Math.max(1,2,3)) // 3 // 求指定數(shù)值的冪次方 console.log(Math.pow(2,3)) // 8 // 求一個數(shù)的平方根 console.log(Math.sqrt(4)) // 2 // 向下取整 console.log(Math.floor(1.5)) // 1 // 向上取整 console.log(Math.ceil(1.5)) // 2 // 四舍五入取整 console.log(Math.round(3.5)) // 4 // 去除小數(shù)位 console.log(Math.trunc(3.5)) // 3 // 生成0~1之間的隨機浮點數(shù),不包含0和1 console.log(Math.random()) // 0.11258771607929718 // 生成 0~5之間的隨機整數(shù) // Math.random范圍 是0~1,*5將范圍擴大5倍 0~5 默認(rèn)不包含0和5,然后四舍五入,根據(jù)四舍五入包含0和5 console.log(Math.round(Math.random() * 5)) // 生成 x ~ y 任意范圍的隨機數(shù) /* 1~6之間的隨機數(shù) 范圍擴大5倍,是0~5,然后+1是1~6,得出隨機小數(shù)后四舍五入,包含1和6 */ console.log(Math.round(Math.random() * 5 + 1)) // 11~20之間的整數(shù) // [0,1] -> [0,9] -> [0+11,9+11] // 先寫+號后面的部分,11,,20-11=9 console.log(Math.round(Math.random() * 9 + 11)) // 根據(jù) 四舍五入、取證等方法的規(guī)則,來決定左右數(shù)值是否包含
7.Date
在JS中所有的和時間相關(guān)的數(shù)據(jù)都由Date對象來表示
7.1Date使用
// 創(chuàng)建當(dāng)前的時間的對象
let date = new Date()
console.log(date) // 2024-10-30T10:48:29.454Z
// 創(chuàng)建指定時間對象-年,月(從下標(biāo)0開始),日,時,分,秒,毫秒
date = new Date(2024,9,30,13,13,13,13)
console.log(date) // 2020-01-01T05:13:13.000Z
// 創(chuàng)建指定時間的對象-通過時間字符串-年-月-日 時:分:秒
date = new Date("2024-10-30 12:00:00")
console.log(date) // 2024-10-30T04:00:00.000Z
// 創(chuàng)建指定時間的對象-通過時間戳
date = new Date(1730265193013)
console.log(date) // 2024-10-30T05:13:13.013Z
// 獲取時間對象的年份
console.log(date.getFullYear())
// 獲取時間對象的月份-返回的是月份的索引,索引從0開始
console.log(date.getMonth())
// 獲取時間對象的日
console.log(date.getDate())
// 獲取日期對象是周幾(0-6) 0表示周日
console.log(date.getDay())
// 返回當(dāng)前日期對象的時間戳
console.log(date.getTime())
// 返回當(dāng)前時間的時間戳
console.log(Date.now())
7.2Date格式化
let date = new Date()
// 將日期轉(zhuǎn)換為本地時間格式字符串
let time = date.toLocaleDateString()
console.log(time) // 10/31/2024
// 將時間轉(zhuǎn)換為本地時間格式字符串
time = date.toLocaleTimeString()
console.log(time) // 10:32:05 AM
// 日期時間轉(zhuǎn)換為本地時間格式字符串
time = date.toLocaleString()
console.log(time) // 10/31/2024, 10:32:50 AM
// 日期時間轉(zhuǎn)換為指定地區(qū)、格式字符串-指定國家時間
time = date.toLocaleString(
"en-US", // 指定語言和國家
{dateStyle: "full", timeStyle: "full"}
// dateStyle 日期的風(fēng)格
// timeStyle 時間的風(fēng)格
// full
// long
// medium
// short
// hour12 是否采用12小時值
// true
// false
// weekday 星期的顯示方式
// long
// short
// narrow
//
// year
// numeric
// 2-digit
)
console.log(time)
8.包裝類
在JS中,除了直接創(chuàng)建原始值外,也可以創(chuàng)建原始值的對象
// 通過 new String() 可以創(chuàng)建String類型的對象
// 通過 new Number() 可以創(chuàng)建Number類型的對象
// 通過 new Boolean() 可以創(chuàng)建Boolean類型的對象
// 注意:千萬不要這么做,通過該方式創(chuàng)建的是對象,無法與原始值做比較
let str = new String("hello world")
let num = new Number(10)
let bool = new Boolean(true)
num.max = 100 // 給num對象設(shè)置屬性
console.log(str) // [String: 'hello world']
console.log(num) // [Number: 10]
console.log(num.max) // 100
console.log(bool) // [Boolean: true]
console.log(num === 10) // false
包裝類:
- JS中一共有5個包裝類
- String --> 字符串包裝為String對象
- Number --> 數(shù)值包裝為Number對象
- Boolean --> 布爾值包裝為Boolean對象
- BigInt --> 大整數(shù)包裝為BigInt對象
- Symbol --> 符號包裝為Symbol對象
通過包裝類可以將一個原始值包裝為一個對象
當(dāng)我們對一個原始值調(diào)用方法或?qū)傩詴r,JS解釋器會臨時將原始值包裝為對應(yīng)的對象,然后調(diào)用這個對象的屬性或方法
// 原始值 let str = "hello world" // 給原始值添加屬性,會將原始值轉(zhuǎn)換為一次性臨時的原始值對象 str.name = "11111" // 賦值和讀取兩次調(diào)用str.name,是兩次臨時的原始值對象,無法通過該方法讀取 console.log(str.name) // undefined let num = 100 // 原始值number是沒有方法的,當(dāng)調(diào)用方法時,將num臨時的轉(zhuǎn)為number對象,調(diào)用number對象的toString方法 num = num.toString()
由于原始值會被臨時轉(zhuǎn)換為對應(yīng)的對象,這就意味著原始值對象中的方法都可以直接通過原始值來調(diào)用
// 字符串的本質(zhì)是一個字符數(shù)組, hello-->["h","e","l","l","0"]
let str = "hello"
// 可以通過操作數(shù)組的一些方法去操作字符串
// 索引讀取字符-不可以負(fù)索引
console.log(str[0]) // h
// 遍歷字符串
for (let char of str){
console.log(char)
}
// 獲取字符串長度
console.log(str.length) // 5
// 根據(jù)索引獲取字符串,可以接受負(fù)數(shù)索引
console.log(str.at(-1)) // o
// 索引讀取字符-不可以負(fù)索引
console.log(str.charAt(0)) // h
// 用來連接兩個或者多個字符串,返回一個新字符串
console.log(str.concat(" world"," !")) // hello world !
// 檢查字符串中是否包含某個內(nèi)容,返回true或者false
console.log(str.includes("ll")) //檢測全部字符串 true
console.log(str.includes("h",2)) // 從下標(biāo)2開始檢測 false
// 檢查指定字符第一次出的位置
console.log(str.indexOf("l")) // 2
// 檢查指定字符最后一次出現(xiàn)的位置
console.log(str.lastIndexOf("l")) // 3
// 檢查字符串是否以指定內(nèi)容開頭
console.log(str.startsWith("he")) // true
// 檢查字符串是否以指定內(nèi)容結(jié)尾
console.log(str.endsWith("o")) // true
// 給字符串補位 如果字符串長度不夠指定長度,從開頭開始補,返回一個新字符串,不指定補位字符,則默認(rèn)是空
console.log(str.padStart(7,"0")) // 00hello
// 給字符串補位 如果字符串長度不夠指定長度,從結(jié)尾開始補0,返回一個新字符串
console.log(str.padEnd(8,"0")) // hello000
// 使用一個新字符串替換字符串中的一個指定內(nèi)容,返回一個新字符串
console.log(str.replace("l","a")) // healo
// 使用一個新字符串替換所有指定內(nèi)容,返回一個新字符串
console.log(str.replaceAll("l","a")) // heaao
// 對字符串進行切片,左閉右開
console.log(str.slice(1,3)) // el
// 截取字符串,左閉右開
console.log(str.substring(1,3)) // el
// 將一個字符串拆分為一個數(shù)組,參數(shù)指定以什么字符間隔拆分
console.log(str.split("")) // [ 'h', 'e', 'l', 'l', 'o' ]
// 將字符串轉(zhuǎn)換為小寫
console.log(str.toLowerCase()) // hello
// 將字符串轉(zhuǎn)換為大寫
console.log(str.toLocaleUpperCase()) // HELLO
// 去除首尾空格
console.log(str.trim())
// 去除開始空格
console.log(str.trimStart())
// 去除結(jié)束空格
console.log(str.trimEnd())
9.正則表達式
- 正則表達式用來定義一個規(guī)則
- 通過這個規(guī)則計算機可以檢查一個字符串是否符合規(guī)則或者將字符串中符合規(guī)則的內(nèi)容提取出來
- 正則表達式也是JS中的一個對象,所以要使用正則表達式,需要先創(chuàng)建正則表達式的對象
9.1創(chuàng)建正則表達式對象
// 通過構(gòu)造函數(shù)創(chuàng)建正則表達式對象,RegExp() 接收兩個字符串參數(shù) 1.正則表達式 2.匹配模式
// 字符串轉(zhuǎn)義原因,表達式編寫注意轉(zhuǎn)義
let regObj = new RegExp("\\w","i")
// 使用字面量創(chuàng)建一個正則表達式對象, /正在表達式/匹配模式
// 字面量創(chuàng)建不用考慮轉(zhuǎn)義問題
let reg = /\w/i
let reg2 = new RegExp("a")
// test方法:get定的字符串str中測試是否存在與正則表達式re匹配的部分
console.log(reg2.test("abc")) // 字符串str 表達式a str中包含a 返回true
9.2正則表達式語法
// 在正則表達式中大部分字符都可以直接寫 // | 在正則表達式中表示或 // 字符串是否有abc或者bcd let re = /abc|bcd/ // [] 表示字符集 // 字符串是否包含字符集里面的任意字母,等同于 a | b | c re = /[abc]/ // 任意的小寫字母 re = /[a-z]/ // 任意的大寫字母 re = /[A-Z]/ // 任意的大小寫字母 re = /[a-zA-Z]/ // 任意的數(shù)字 re = /[0-9]/ // [^]表示排除 // 除了a以外的任意字符 re = /[^a]/ // .表示除了換行以外的任意字符 ,如果想匹配. 需要轉(zhuǎn)義 /\./ re = /./ // 其他字符集 // 任意的單詞字符 [A-Za-z0-9_] re = /\w/ // 排除單詞字符 [^A-Za-z0-9_] re = /\W/ // 任意數(shù)字 [0-9] re = /\d/ // 排除數(shù)字 [^0-9] re = /\D/ // 空格 re = /\s/ // 排除空格 re = /\S/ // 單詞邊界 re = /\b/ // 排除單詞邊界 re = /\B/ // 開頭和結(jié)尾,^表示字符串的開頭,$表示字符串的結(jié)尾 // 匹配開始位置的a re = /^a/ // 匹配結(jié)束位置的a re = /a$/ // 匹配字幕a,完全匹配,字符串和正則完全一致 re = /^a$/
9.3量詞
// 3個a
let re = /a{3}/
// 至少3個a
re = /a{3,}/
// 3~6個a
re = /a{3,6/
// 多字符匹配:兩次匹配只對量詞前面的一個字符生效,比如 /ab{3}/,只會檢測b,不會檢測ab,如果要檢測ab,需要使用()
re = /(ab){3}/
// 開頭任何個小寫字母
re = /^[a-z]{3}/
// + 表示一個以上,等同于{1,}
re = /a+/
// *表示任意數(shù)量
re = /a*/
// ?表示0-1次 等同于{0,1}
re = /a?/
9.4正咋表達式匹配模式
1.默認(rèn)(貪婪模式)
- 在 JavaScript 正則表達式中,默認(rèn)情況下量詞(如
*、+、?)是貪婪的。這意味著它們會盡可能多地匹配字符。 - 例如,對于正則表達式
/a.*b/和字符串"aabbbc",它會匹配從第一個a到最后一個b的整個字符串,即"aabbbc"。因為.*會盡可能多地匹配中間的字符,直到遇到最后一個b。
2.非貪婪模式(懶模式)
- 通過在量詞后面添加
?可以將其轉(zhuǎn)換為非貪婪模式。在非貪婪模式下,量詞會盡可能少地匹配字符。 - 例如,對于正則表達式
/a.*?b/和字符串"aabbbc",它會匹配"aab"。因為.*?會在遇到第一個b時就停止匹配,只匹配最少的字符來滿足表達式。
3.全局匹配模式(g)
- 當(dāng)在正則表達式末尾添加
g標(biāo)志(如/pattern/g)時,它會進行全局匹配。這意味著會在整個字符串中查找所有匹配的部分,而不是只找到第一個匹配就停止。 - 例如,對于正則表達式
/a/g和字符串"aaab",它會匹配所有的a,返回一個包含三個a的數(shù)組(在使用match方法時)。如果沒有g標(biāo)志,只會返回第一個a。
4.不區(qū)分大小寫匹配模式(i)
- 在正則表達式末尾添加
i標(biāo)志(如/pattern/i)會使匹配不區(qū)分大小寫。 - 例如,對于正則表達式
/a/i和字符串"Aa",它會匹配A,因為不區(qū)分大小寫。
5.多行匹配模式(m)
- 當(dāng)添加
m標(biāo)志(如/pattern/m)時,^和$的匹配行為會發(fā)生改變。^不僅可以匹配字符串開頭,還可以匹配每一行的開頭;$不僅可以匹配字符串結(jié)尾,還可以匹配每一行的結(jié)尾。 - 例如,對于正則表達式
/^a/m和字符串"a\nb",它會匹配第一行開頭的a,如果沒有m標(biāo)志,它只會匹配整個字符串開頭的a,對于這個例子就不會匹配
9.5正則表達式提取
exec()用于獲取字符串中符合正則表達式的內(nèi)容
let str = "abc123bcc456cbdd" let re = /\d+/ig // '123'是本次匹配到的結(jié)果,index是匹配到的字符串在原始輸入字符串中的起始索引位置是 3,input是原始字符串,group是組 console.log(re.exec(str)) // [ '123', index: 3, input: 'abc123bcc456cbdd', groups: undefined ] console.log(re.exec(str)) // [ '456', index: 9, input: 'abc123bcc456cbdd', groups: undefined ] // 每調(diào)用一次只會匹配一次,調(diào)用多次會依次向后匹配,為null說明匹配結(jié)束沒有了 console.log(re.exec(str)) // null // 使用()可以進行分組 str = "abcadcacc" // 匹配a*c,使用()把中間的字符分組 re = /a([a-z])c/ // abc是本次匹配到的內(nèi)容,b是分組內(nèi)的內(nèi)容 console.log(re.exec(str)) // [ 'abc', 'b', index: 0, input: 'abcadcacc', groups: undefined ]
9.6字符串的正則方法
let str = "llaacqqabcccaccdd"
// 可以根據(jù)正則表達式來對一個字符串進行拆分
console.log(str.split(/a[a-z]c/)) // [ 'll', 'qq', 'cc', 'dd' ]
// 根據(jù)正則表達式替換字符串中的指定內(nèi)容
console.log(str.replace(/a[a-z]c/g,"@")) // ll@qq@cc@dd
// 可以去搜索符合正則表達式的內(nèi)容第一次在字符串中出現(xiàn)的位置
console.log(str.search(/a[a-z]c/)) // 2
// 根據(jù)正則表達式去匹配字符串中所有符合要求的內(nèi)容
console.log(str.match(/a/g)) // [ 'a', 'a', 'a', 'a' ]
// 根據(jù)正則表達式去匹配字符串中符合要求的內(nèi)容(必須設(shè)置g 全局匹配),返回的是一個迭代器
console.log(str.matchAll(/a/g)) // Object [RegExp String Iterator] {}
10.垃圾回收機制
- 如果一個對象沒有任何的變量對其進行引用,那么這個對象就是一個垃圾對象
- 垃圾對象的存在,會嚴(yán)重的影響程序的性能
- 在JS中有自動的垃圾回收機制,這些垃圾對象會被解釋器自動回收,我們無需手動處理
- 對于垃圾回收來說,我們唯一能做的事情就是將不再使用的變量設(shè)置為null
let obj = { value: 1 };
let anotherObj = obj; // obj的引用次數(shù)增加到2
obj = null; // obj的引用次數(shù)減少到1
anotherObj = null; // obj的引用次數(shù)減少到0,可被垃圾收集器回收
以上就是一文詳解JavaScript中內(nèi)建對象的詳細(xì)內(nèi)容,更多關(guān)于JavaScript內(nèi)建對象的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Webpack中SplitChunksPlugin 配置參數(shù)詳解
這篇文章主要介紹了Webpack中SplitChunksPlugin 配置參數(shù)詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
js復(fù)制文本到粘貼板(Clipboard.writeText())
這篇文章主要介紹了js復(fù)制文本到粘貼板(Clipboard.writeText()),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07

