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

文章目录

数组
集合
Map
对象
Class

数组

//定义数组
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)
})

集合

//创建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

//创建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)

对象

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

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方法

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)

继承

//父类
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())