【JavaScript】数组-集合-Map-对象-Class用法一览

文章目录

数组

javascript 复制代码
//定义数组
let arrInit = [10, 11]
console.log("arrInit", arrInit)

//向数组末尾添加一个或多个元素, 并返回修改后数组的长度
let arrInitLength = arrInit.push(12, 13)
console.log("arrInit", arrInit) //[10, 11, 12, 13]
console.log("arrInitLength", arrInitLength)

//向数组开头添加一个或多个元素, 并返回修改后数组的长度
arrInitLength = arrInit.unshift(8, 9)
console.log("arrInit", arrInit) //[8, 9, 10, 11, 12, 13]
console.log("arrInitLength", arrInitLength)

//删除数组中第一个元素, 并返回被删除元素
let delFstElement = arrInit.shift()
console.log("arrInit", arrInit) //[9, 10, 11, 12, 13]
console.log("delElement", delFstElement) //8

//删除数组最后一个元素, 并返回被删除元素
delLstElement = arrInit.pop()
console.log("arrInit", arrInit) //[9, 10, 11, 12]
console.log("delElement", delLstElement) //13

//删除元素, 并返回包含被删除元素的数组 splice(要删除元素的索引位置, 要删除的元素数量)
//let delarrInit = arrInit.splice(2, 1) // 删除第3个元素 [数组的索引是从 0 开始]
let delarrInit = arrInit.splice(2, 2) // 删除第3和第4个元素
console.log("arrInit", arrInit) //[9, 10]
console.log("delarrInit", delarrInit) //[11, 12]

//颠倒数组中元素的顺序
arrInit.reverse()
console.log("arrInit", arrInit) //[10, 9]

//数组中的元素按照首字母顺序排序
let arrInit2 = ['peach', 'apple', 'orange']
arrInit2.sort()
console.log("arrInit2", arrInit2) //['peach', 'banana', 'orange']

//数组中的元素按照数字排序
let arrInit3 = [5, 20, 13, 1, 4]
//arrInit3.sort() //默认情况下 sort() 方法使用字符串排序, 导致并没有按照数字大小排序
/*
	比较函数 (a, b) => a - b 接收两个参数 a 和 b, 用于比较这两个元素的大小, 返回 a - b 的结果决定了 sort() 方法的排序顺序
	若 a < b, 则 a - b 是一个负数, 表示 a 应该在 b 前面
	若 a = b, 则 a - b 是 0, 位置保持不变
	若 a > b, 则 a - b 是一个正数, 表示 a 应该在 b 后面
*/
arrInit3.sort((a, b) => a - b)
console.log("arrInit3", arrInit3) //[1, 4, 5, 13, 20]

//筛选符合条件的元素, 返回一个新的数组
let arrInit4 = [10, 11, 13, 12, 14, 15];
let newarrInit = arrInit4.filter((value, index) => {
    return value > 12 && index % 2 === 0; // 只保留偶数索引的元素
});
console.log("newarrInit", newarrInit);

//将多个数组或值合并为一个新数组
let arrInit5 = ["十六", "十七", "十八"]
//newarrInit = arrInit3.concat(arrInit5) //[1, 4, 5, 13, 20, '十六', '十七', '十八']
newarrInit = arrInit4.concat(arrInit5, 19, 20) //[10, 11, 12, 13, 14, 15, '十六', '十七', '十八', 19, 20]
console.log("newarrInit", newarrInit)

//使用for...of循环遍历数组
let arrInit6 = ["demo", "baidu.com", 100] //数组可以包含不同的数据类型
for (let item of arrInit6) {
	console.log("for...of", item)
}

//使用forEach方法来遍历数组
arrInit6.forEach((value,index) => {
	console.log("forEach", value,"index", index)
})

集合

javascript 复制代码
//创建Set集合
//let colors = new Set() //创建一个空的Set集合
let colors = new Set(['red', 'orange', 'green']) //创建一个包含初始值的Set集合

//向Set集合中添加新的元素
colors.add('mango')
//colors.add("orange") //若该元素已经存在, 则不会重复添加, 因为 Set 中的元素必须唯一
console.log("colors", colors)

//从Set集合中删除元素
colors.delete('green')
console.log("colors", colors)

//检查Set集合是否包含指定元素
console.log("colors.has", colors.has('green'))

//获取Set集合的大小
console.log("colors.size", colors.size)

//使用 Array.from() 方法将 Set集合 转换为 数组
let arr = Array.from(colors)
console.log("arr", arr)

//使用扩展运算符将 Set集合 转换为 数组
let arr2 = [...colors]
console.log("arr2", arr2)

//扩展运算符是用于展开可迭代对象(如数组、字符串等)
//let web = 'baidu.com'
let web = '百度一下'
let webArr = [...web] //使用扩展运算符将 字符串 转换为 数组
console.log("webArr", webArr) //['百', '度', '一', '下']

//使用for...of循环遍历 Set集合
for (let item of colors) {
    console.log("for...of", item)
}

//使用forEach方法来遍历 Set集合
colors.forEach(value => {
    console.log("forEach", value)
})

//清空 Set
colors.clear()
console.log("colors.size", colors.size)

//将 数组 转换为 Set集合 实现数组去重
let numberArr = [1, 2, 3, 3, 2, 1]
let numberSet = new Set(numberArr)
console.log(numberSet)

Map

javascript 复制代码
//创建Map集合
//let person = new Map() //创建一个空的Map集合
let person = new Map([
    ["name", "小明"],
    ["gender", "男"],
    ["web", "baidu.com"]
])

//向Map集合中添加新的元素
person.set('height', 180)
//在Map集合中, 每个键都是唯一的, 当使用相同的键再次调用 set() 方法时, 会替换原来键对应的值
person.set('web', "www.baidu.com")
console.log("person", person)

//删除元素
person.delete('gender')
console.log("person", person)

//检查Map集合是否包含指定元素
console.log("person.has", person.has('gender'))

//获取Map集合的大小
console.log("person.size", person.size)

//将Map集合转换为数组
let arr = Array.from(person)
console.log("arr", arr)

//使用扩展运算符将 Map集合 转换为 数组
let arr2 = [...person]
console.log("arr2", arr2)

//使用for...of循环遍历Map集合
//解构可以从数组或对象中提取值并赋给变量
//[key, value] 就是一种解构语法, 用于将 Map 集合中的键值对解构为 key 和 value 两个变量
for (let [key, value] of person) {
    console.log("for...of", key, value)
}

//使用forEach方法遍历Map集合的键值对
person.forEach((value, key) => {
    console.log("forEach", key, value)
})

//清空Map集合
person.clear()
console.log("person.size", person.size)

对象

javascript 复制代码
let person = {
    name: "小明",
    gender: "男",
    web: "baidu.com",
}

//向对象中添加新的属性
person.height = 180
//在对象中,每个键都是唯一的,当使用相同的键再次赋值时,会替换原来键对应的值
person.web = "www.baidu.com"
console.log("person", person)

//删除属性
delete person.gender
console.log("person", person)

//检查对象是否包含指定属性
let has = "gender" in person
console.log("has", has)

//获取对象的属性数量
console.log("keysArr", Object.keys(person)) //Object.keys() 用于获取对象属性名的数组
console.log("length", Object.keys(person).length)

//将对象转换为数组
let arr = Object.entries(person) //Object.entries() 用于获取对象的键值对数组
console.log("arr", arr)

//使用for...in循环遍历对象 
//for...of 用于遍历可迭代对象[如数组、Set、Map、字符串等]
//for...in 用于遍历对象的可枚举属性
for (let key in person) {
    console.log("for...in", key, person[key])
}

//使用forEach方法遍历对象的属性和值
Object.entries(person).forEach(([key, value]) => {
    console.log("forEach", key, value)
})

//清空对象
person = {}
console.log("length", Object.keys(person).length)

Class

javascript 复制代码
class Person {
    // 若在类中没有显式声明属性, 但在构造函数或方法中引用了未声明的属性, 会自动将其视为实例属性
    name; // 姓名
    web;  // 个人网站

    // 构造函数,用于初始化属性
    constructor(name, web) {
        this.name = name;
        this.web = web;
    }

    // 方法,返回个人信息
    info() {
        // return "姓名:" + this.name + " 个人网站:" + this.web;
        return `姓名:${this.name} 个人网站:${this.web}`; // 模板字符串
    }
}

// 在面向对象编程中,实例(instance) 是根据类(class) 创建的具体对象,使用关键字 new 可以创建一个类的实例
// 创建 Person 类实例,传入 "姓名"、"个人网站" 参数
let person = new Person("小明", "baidu.com");

console.log("person", person);
console.log("web", person.web);
console.log("info", person.info());

私有属性及get set方法

javascript 复制代码
class Person {
    name
    #web //私有属性是指仅在类内部可访问和操作的属性, 外部无法直接访问和修改
    
    constructor(name, web) {
        this.name = name
        this.#web = web
    }
    
    //使用存取器 getter 获取私有属性
    get web() {
        return this.#web
    }
    
    //使用存取器 setter 设置私有属性
    set web(value) {
        this.#web = value
    }
    
    info() {
        return `姓名:${this.name} 个人网站:${this.web}`
    }
}

let person = new Person("小明", "baidu.com")

console.log("person", person)
console.log("web", person.web) //使用存取器 getter 获取私有属性
console.log("info", person.info())

person.web = "www.baidu.com" //使用存取器 setter 设置私有属性
console.log("web", person.web)

继承

javascript 复制代码
//父类
class Person {
    name
    gender

    constructor(name, gender) {
        this.name = name
        this.gender = gender
    }

    sleep() {
        return `${this.name} 休息中...`
    }
}

//子类
class xiaoming extends Person {
    web

    constructor(name, gender, web) {
        super(name, gender) //调用父类构造函数

        this.web = web
    }

    eat() {
        return `${this.name} 正在吃饭...`
    }
}

let xiaoming = new xiaoming("小明", "男", "baidu.com")

console.log("xiaoming", xiaoming)
console.log("web", xiaoming.web)
console.log("eat", xiaoming.eat())

console.log("gender", xiaoming.gender)
console.log("sleep", xiaoming.sleep())
相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰6 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪6 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy7 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom8 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom8 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom8 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom8 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试