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

news/2024/11/6 14:53:36/

文章目录

  • 数组
  • 集合
  • 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 = namethis.#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 {namegenderconstructor(name, gender) {this.name = namethis.gender = gender}sleep() {return `${this.name} 休息中...`}
}//子类
class xiaoming extends Person {webconstructor(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())

http://www.ppmy.cn/news/1544838.html

相关文章

Linux高阶——1103——Signal信号机制

Linux高阶——1103——Signal信号机制

1、信号机制 在linux和unix系统下&#xff0c;如果想要处置(挂起&#xff0c;结束)进程&#xff0c;可以使用信号&#xff0c;经典消息机制&#xff0c;所以进程包括系统进程都是利用信号处置进程的 kill -l——查看所有系统支持的信号 1-31号信号——Unix经典信号&#xff…
阅读更多...
ARKit读取LiDAR点云

ARKit读取LiDAR点云

ARKit 是 Apple 强大的增强现实框架&#xff0c;允许开发人员制作专为 iOS 设备设计的沉浸式交互式 AR 体验。 对于配备 LiDAR 的设备&#xff0c;ARKit 充分利用了深度感应功能&#xff0c;大大提高了环境扫描精度。与许多体积庞大且价格昂贵的传统 LIDAR 系统不同&#xff0…
阅读更多...
每个人其实都很弱

每个人其实都很弱

没有人无缘无故的非常强大&#xff0c;每个人都有弱点&#xff0c;每个人都有情绪暴躁的时候。要不是每个人都很弱&#xff0c;社会上怎么会出现那么多的极端事件?正因为每个人都很弱&#xff0c;所以你更要保护好自己的磁场&#xff0c;不要让别人无缘无故入侵你的情绪&#…
阅读更多...
mysql之命令行基础指令

mysql之命令行基础指令

一&#xff1a;安装好mysql后&#xff0c;注册好账号密码。 二&#xff1a;在命令行进行登录的指令如下 mysql -u用户名 -p 例如&#xff1a;mysql -uroot -p; 然后按下回车&#xff0c;进入输入密码。 三&#xff1a;基本指令&#xff1a; 1&#xff1a;查看当前账户的所有…
阅读更多...
python实现tkinter解密剧情文本游戏

python实现tkinter解密剧情文本游戏

目录 需求 效果 代码实现 代码说明 需求 python实现tkinter解密剧情文本游戏 效果 代码实现 import tkinter as tkclass StoryGame:def __init__(self, master):self.master mastermaster.title("剧情游戏")# 初始化故事节点self.current_node 0# 故事节点数…
阅读更多...
微服务day03

微服务day03

导入黑马商城项目 创建Mysql服务 由于已有相关项目则要关闭DockerComponent中的已开启的项目 [rootserver02 ~]# docker compose down WARN[0000] /root/docker-compose.yml: version is obsolete [] Running 4/4✔ Container nginx Removed …
阅读更多...
huggingface利用bert-base-chinese实现中文情感分类

huggingface利用bert-base-chinese实现中文情感分类

利用pytorch模式 先做一些数据预处理工作&#xff0c;本文主要使用的数据集是lansinuote/ChnSentiCorp from transformers import BertTokenizer token BertTokenizer.from_pretrained(bert-base-chinese)import torch from datasets import load_datasetdataset load_data…
阅读更多...
黑客使用哪些编程语言？

黑客使用哪些编程语言？

我与其他科学家一起在德国混沌计算机俱乐部 (CCC) 进行了一项调查。我们的目标是找出黑客最常用的编程语言。本文对调查进行了跟进&#xff0c;并将调查结果与漏洞利用数据库的分析进行了比较。读者可以获得有关如何设置分析环境和结果摘要的分步说明。因此&#xff0c;本文不仅…
阅读更多...
最新文章

Copyright @ 2022~2023