JavaScript - 内建对象 - 無.Flac's Blog

JavaScript 中的内建对象是由语言本身提供的一系列对象，无需实例化即可使用。这些对象覆盖了从数学计算、日期处理到数据结构操作等多种功能。常见的内建对象包括 Object, Array, Math, Date, JSON, RegExp 等。

内建对象

>解构赋值

ES6中引入的一种新的赋值方式，它允许我们从数组或对象中提取数据并赋值给新的变量。这种语法形式非常简洁，使得变量的赋值和声明更加直观和方便。

const arr = ["孙悟空", "猪八戒", "沙和尚"]

let a,
    b,
    c

    // a = arr[0]
    // b = arr[1]
    // c = arr[2]
;[a, b, c] = arr // 解构赋值

let [d, e, f, g] = ["唐僧", "白骨精", "蜘蛛精", "玉兔精"] // 声明同时解构

console.log(d, e, f, g)
// ;[d, e, f, g] = [1, 2, 3]
// ;[d, e, f = 77, g = 10] = [1, 2, 3]
;[d, e, f = 77, g = g] = [1, 2, 3]

let [n1, n2, ...n3] = [4, 5, 6, 7] // 解构数组时，可以使用...来设置获取多余的元素

// console.log(n1, n2, n3)


function fn(){
    return ["二郎神", "猪八戒"]
}

let [name1, name2] = fn()

// 可以通过解构赋值来快速交换两个变量的值
let a1 = 10
let a2 = 20

// let temp = a1
// a1 = a2
// a2 = temp

;[a1, a2] = [a2, a1] // [20, 10]

const arr2 = ["孙悟空", "猪八戒"]
// console.log(arr2)

;[arr2[0], arr2[1]] = [arr2[1], arr2[0]]
// console.log(arr2)


// console.log("a1 =", a1)
// console.log("a2 =", a2)


/* 
    数组中可以存储任意类型的数据，也可以存数组,
    如果一个数组中的元素还是数组，则这个数组我们就称为是二维数组
*/

const arr3 = [["孙悟空", 18, "男"], ["猪八戒" ,28, "男"]]

// for(let stu of arr3){
//     for(let v of stu){
//         console.log(v)
//     }
// }


let [[name, age, gender], obj] = arr3

console.log(name, age, gender)
console.log(obj)

>对象的解构

const obj = { name: "孙悟空", age: 18, gender: "男" }

// let { name, age, gender } = obj // 声明变量同时解构对象

let name, age, gender

;({ name, age, gender } = obj)

let { address } = obj // 没有的属性返回undefined

// console.log(name, age, gender)

let {name:a, age:b, gender:c, address:d="花果山"} = obj

console.log(a, b, c, d)

>对象的序列化

JSON.stringify() —— 可以将一个对象转换为 JSON 字符串

JSON.parse() —— 可以将一个 JSON 格式的字符串转换成 JS 对象

编写 JSON 的注意事项：
JSON 字符串有两种类型
JSON 对象{}
JSON 数组[]
JSON 字符串的属性名必须用双引号引起来
JSON 中可以使用的属性值（元素）
数字（Number）
字符串（String）必须使用双引号
布尔值（Boolean）
空值（Null）
对象（Object {}）
数组（Array []）
JSON的格式和JS对象的格式基本上一致的。
注意：JSON字符串如果属性是最后一个，则不要再加,

/* 
    对象的序列化
        - JS中的对象使用时都是存在于计算机的内存中的
        - 序列化指将对象转换为一个可以存储的格式
            在JS中对象的序列化通常是将一个对象转换为字符串（JSON字符串）
        - 序列化的用途（对象转换为字符串有什么用）：
            - 对象转换为字符串后，可以将字符串在不同的语言之间进行传递
                甚至人可以直接对字符串进行读写操作，使得JS对象可以不同的语言之间传递
            - 用途：
                1. 作为数据交换的格式
                2. 用来编写配置文字
        - 如何进行序列化：
            - 在JS中有一个工具类 JSON （JavaScript Object Notation） JS对象表示法
            - JS对象序列化后会转换为一个字符串，这个字符串我们称其为JSON字符串  
            
        - 也可以手动的编写JSON字符串，在很多程序的配置文件就是使用JSON编写的
*/

const obj = {
    name: "孙悟空",
    age: 18,
}

// 将obj转换为JSON字符串
const str = JSON.stringify(obj) //JSON.stringify() 可以将一个对象转换为JSON字符串

const obj2 = JSON.parse(str) // JSON.parse() 可以将一个JSON格式的字符串转换为JS对象

// console.log(obj)
// console.log(str) // {"name":"孙悟空","age":18}
// console.log(obj2)

const str2 = `{"name":"猪八戒","age":28}`
const str3 = "{}"
const str4 = '["hello", true, []]'

console.log(str2)

>使用 JSON 进行深复制

const obj = {
    name: "孙悟空",
    friend: {
        name: "猪八戒",
    },
}

// 对obj进行浅复制
const obj2 = Object.assign({}, obj)

// 对obj进行深复制
const obj3 = structuredClone(obj)

// 利用JSON来完成深复制
const str = JSON.stringify(obj)
const obj4 = JSON.parse(str)

// const obj5 = JSON.parse(JSON.stringify(obj))

>Map

创建Map
new Map()
属性和方法
map.size() 获取map中键值对的数
map.set(key, value) 向map中添加键值对
map.get(key) 根据key获取值
map.delete(key) 删除指定数据
map.has(key) 检查map中是否包含指定键
map.clear() 删除全部的键值对
map.keys() - 获取map的所有的key
map.values() - 获取map的所有的value

/* 
- Map用来存储键值对结构的数据（key-value）
- Object中存储的数据就可以认为是一种键值对结构
- Map和Object的主要区别：
    - Object中的属性名只能是字符串或符号，如果传递了一个其他类型的属性名，JS解释器会自动将其转换为字符串
    - Map中任何类型的值都可以称为数据的key
*/

const obj2 = {}

const obj = {
    "name":"孙悟空",
    'age':18,
    [Symbol()]:"哈哈",
    [obj2]:"嘻嘻"
}

// console.log(obj)

// 创建一个Map
const map = new Map()

map.set("name", "孙悟空")
map.set(obj2, "呵呵")
map.set(NaN, "哈哈哈")

map.delete(NaN)
// map.clear()

console.log(map)
console.log(map.get("name"))
console.log(map.has("name"))

const map = new Map()

map.set("name", "孙悟空")
map.set("age", 18)
map.set({}, "呵呵")

// 将map转换为数组

const arr = Array.from(map) // [["name","孙悟空"],["age",18]]

const arr = [...map]

const map2 = new Map([
    ["name", "猪八戒"],
    ["age", 18],
    [{}, () => {}],
])


// 遍历map

// for (const [key, value] of map) {
//     // const [key, value] = entry
//     console.log(key, value)
// }

// map.forEach((key, value)=>{
//     console.log(key, value)
// })

for(const key of map.keys()){
    console.log(key)
}

>Set

创建Set
new Set()
new Set([...]
方法
size 获取数量
add() 添加元素
has() 检查元素
delete() 删除元素

/* 
    Set
        - Set用来创建一个集合
        - 它的功能和数组类似，不同点在于Set中不能存储重复的数据                        
*/

// 创建一个Set
const set = new Set()

// 向set中添加数据
set.add(10)
set.add("孙悟空")
set.add(10)

// console.log(set)

// for(const item of set){
//     console.log(item)
// }

const arr = [...set]

// console.log(arr)

const arr2 = [1,2,3,2,1,3,4,5,4,6,7,7,8,9,10]

const set2 = new Set(arr2)

console.log([...set2])

>Math

Math是一个工具类，它为我们提供了数学运算相关的一些常量和方法

常量
Math.PI 圆周率
方法
Math.abs( ) 求一个数的绝对值
Math.min( ) 求多个值中的最小值
Math.max( ) 求多个值中的最大值
Math.pow( ) 求x的y次幂
Math.sqrt( ) 求一个数的平方根
Math.floor( ) 向下取整
Math.ceil( ) 向上取整
Math.round( ) 四舍五入取整
Math.trunc( ) 直接去除小数位
Math.random( ) 生成一个0-1之间的随机数

// console.log(Math.PI)

let result = Math.abs(10)
result = Math.abs(-10)

result = Math.min(10, 20, 30, 44, 55, -1)
result = Math.max(10, 20, 30, 44, 55, -1)
result = Math.pow(4, 2) // 4 ** 2
result = Math.sqrt(4) // 4 ** .5

result = Math.floor(1.2)
result = Math.ceil(1.2)
result = Math.round(1.4)
result = Math.trunc(1.5)

for (let i = 0; i < 50; i++) {
    /* 
        生成0-5之间的随机数
            Math.random() --> 0 - 1
            生成 0-x之间的随机数：
                Math.round(Math.random() * x)
                Math.floor(Math.random() * (x + 1))

            生成 x-y 之间的随机数
                Math.round(Math.random() * (y-x) + x)
    */
    // result = Math.round(Math.random() * 5)
    // result = Math.floor(Math.random() * 6)

    // 1-6
    // result = Math.round(Math.random() * 5 + 1)

    // 11 - 20
    result = Math.round(Math.random() * 9 + 11)

    console.log(result)
}

>Date

在 JS 中所有的和时间有关的数据都由 Date 对象来表示

创建Date

let d = new Date() //直接通过new Date()创建时间对象时，它创建的是当前时间的对象

// 可以在 Data()的构造函数中，传递一个表示时间的字符串
// 字符串的格式：月/日/年 时:分:秒
d = new Date("12/31/2024 00:00:00")
// 字符串的格式：年-月-日T时:分:秒
d = new Date("2024年12月31日T00:00:00")
// new Date(年份, 月, 日, 时, 分, 秒, 毫秒)
d = new Date("2024,11,31,00,00,00")

方法
getFullyear( )获取4 位年份
getMonth( ) 返回当前日期的月份( 0 - 11 ）
getDate( ) 返回当前几日
getDay( ) 返回当前日期是周几（0 - 6) 0 表示周日
getHours( ) 返回当前时间的小时（0-23）
getMinutes( ) 返回当前时间的分钟（0-59）
getSeconds( ) 返回当前时间的秒数（0-59）
getMilliseconds( ) 返回当前时间的毫秒数（0-999）
getTime( ) 返回当前日期对象的时间戳
时间戳：自 1970年1月1日0时0分0秒到当前时间所经历的毫秒数
Date.now( ) 获取当前的时间戳

>日期格式化

toLocaleDateString( ) —— 将日期转换为本地的字符串

toLocaleTimeString( ) —— 将时间转换为本地的字符串

toLocaleString( ) —— 可以将一个日期转换为本地时间格式的字符串

参数
描述语言和国家信息的字符串
zh-CN 中文中国
zh-HK 中文香港
en-US 美国
以对象作为参数，通过对象的属性对日期配置
dateStyle 日期 : full , long , medium , short
timeStyle 时间 : full , long , medium , short
hour12 时制 : ture , false
weekday 星期 : long , narrow , short
year 年份 : numeric , 2-digit

let d =  new Date()

let result = d.toLocaleString("zh-CN", {
    year: "numeric",
    month: "long",
    day: "2-digit",
    weekday: "short",
})

console.log(result)

>包装类

在 JS 中，除了直接创建原始值外，也可以创建原始值的对象。

不推介的做法：
new String( ) 创建 String 类型的对象
new Number( ) 创建 Number 类型的对象
new Boolean( ) 创建 Boolean 类型的对象

let str = new String("hello")
let num = new Number(11)
let bool = new Boolean(true)
let bool2 = new Boolean(true)

alert(bool == bool2) // 比较的是内存地址，所以会判断 false

在 JS 中一共有 5 个包装类：
String --> 字符串包装为 String 对象
Number --> 数值包装为 Number 对象
Boolean --> 布尔值包装为 Boolean 对象
BigInt --> 大整数包装为 BigInt 对象
Symbol --> 符号包装为 Symbol 对象

通过包装类可以将一个原始值包装为一个对象，当我们对一个原始值调用方法或属性时，JS解释器会临时将原始值包装为对应的对象，然后调用这个对象的属性或方法。

由于原始值会被临时转换为对应的对象，这就意味着对象中的方法都可以直接通过原始值来调用。

>字符串的方法

字符串其本质就是一个字符数组，例如："hello" --> ["h","e","l","l","o"]

字符串的很多方法都和数组是非常类似的。

ength 获取字符串的长度
字符串[索引] 获取指定位置的字符

let str = "hello"  
console.log(str.length)
console.log(str[0])

属性和方法
请注意！字符串是不可变属性！
str.at( ) 根据索引获取字符，可以接受负索引
let str = "hello"  
console.log(str.at(0)) //输出 H
console.log(str.at(3)) //输出 l
console.log(str.at(-4)) //输出 e
str.charAt( ) 根据索引获取字符，不接受负索引
str.concat( ) 用来连接两个或多个字符串
str.includes( ) 用来检查字符串中是否包含某个内容
let str = "hello hello how are you"
console.log(str.includes("hello")) //输出 true
console.log(str.includes("hello",13)) //第二个参数为字符串的起始位置
str.indexof( )
str.lstIndexOf( )
str.startsWith( ) 检查一个字符串是否以指定内容开头
str.endsWith( ) 检查一个字符串是否以指定内容结尾
str.padStart( ) 通过添加指定的内容，使字符串保持某个长度
str.padEnd( ) 通过添加指定的内容，使字符串保持某个长度
str.replace( ) 使用一个新字符串替换一个指定内容
str.replaceAll( ) 使用一个新字符串替换所有指定内容
str.slice( ) 对字符串进行切片
str.substring( ) 截取字符串
str.split( ) 用来将一个字符串拆分为一个数组
str.toLowerCase( ) 将字符串转换为小写
str.toUpperCase( ) 将字符串转换为大写
str.trim( ) 去除前后空格
str.trimStart( ) 去除开始空格
str.trimEnd( )去除结束空格
查看更多...

無.Flac