JS數(shù)組、對象、字符串與部分新屬性實例詳解
更新時間：2025年11月04日 11:53:39 作者：AAA 我不會前端開發(fā)
文章主要介紹了JavaScript中數(shù)組、對象、字符串、Symbol、Set、WeakSet、Map和WeakMap等數(shù)據(jù)結構和方法的使用,涵蓋了聲明、操作、迭代器、解構賦值等各個方面,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
一：數(shù)組,對象 部分常見方法可以去構造函數(shù)部分查看
(1) 數(shù)組
數(shù)組本質就是一個對象 所以對于一些對象的方法 數(shù)組也可以去使用 通過檢查數(shù)組的類型就會發(fā)現(xiàn)數(shù)組的類型就是Object
數(shù)組的聲明方法:
let arr = [1, 2, 3, 4, 5] let arr1 = new Array(1, 2, 3, 4, 5)//構造函數(shù)式聲明
數(shù)組常用方法:
let arr = [1, 2, 3]; //數(shù)組的賦值操作 arr[0] = 1 //將元素添加到數(shù)組的尾部 并返回數(shù)組的長度 arr.push(4); //彈出數(shù)組末尾元素 arr.pop(); //添加新內容到數(shù)組開頭 并且返回數(shù)組的長度 arr.unshift(0) //arr.shift 刪除第一個元素 arr.shift() //arr.splice(起始位置,刪除幾個元素) arr.splice(1, 1) //遍歷數(shù)組 arr.forEach(item => console.log(item)); //fill填充數(shù)組 arr=[]; arr.fill(1) //將數(shù)組全部填充為1 //copyWithin復制數(shù)組的元素 let hhh=[1,2,3,4,5,6,7,8] console.log(hhh.copyWithin(4,1,3));//（要粘貼的位置，復制目標的起始位置，復制目標的結束位置（不包括該位置））
常用方法：
push、pop、shift、unshift、slice、splice、map、filter、reduce
數(shù)組解構賦值:
//數(shù)組解構 將單元直批量賦值給變量的語法 本質是把數(shù)組元素賦值給變量 const arr=[100,60,80] const [max,min,avg]=arr console.log(max)//100 //交換兩個變量 let a=1 let b=0; [b,a]=[a,b] console.log(a,b);//1 //剩余參數(shù)解決 參數(shù)多 變量少問題 const [c,d,...arrr]=[1,2,3,4,5] console.log(arrr); //按需解構賦值 const [e,f,,r]=[1,3,4,5] console.log(r);//5 //多維數(shù)組解構 const arr1=[[1,2,3],1] console.log(arr1[0][0]);// 1 const [t,y]=arr1
數(shù)組的查找方法
數(shù)組的查找方法和字符串的查找是一樣的 可以理解為字符串本事就是一個字符數(shù)組 注意startsWith和endsWith方法不能使用
一些列用于檢索的數(shù)組方法 const hd=['h','e','i','m','a','c','h','e','g','n','x','v','y','a','u','n']提前定義字符串
indexOf返回字符所在位置 如果找不到就返回-1 從字符串的左邊開始查找
console.log(hd.indexOf('d'));//返回檢索字符所在的位置 找不到的返回負一 從左邊開始查找includes有兩個參數(shù) 參數(shù)一是要查詢的位置 參數(shù)二是開始查找的位置
console.log(hd.includes('h',8));//返回布爾類型 可以設置第二個參數(shù)從指定位置開始查找lastIndexOf返回字符串的位置
console.log(hd.lastIndexOf('o'));//從最右邊向左開始查找數(shù)組的迭代器
1.什么是迭代器
迭代器是js中一種特殊的對象,它允許我們按順序訪問數(shù)組中的元素,這個迭代器對象是按照迭代器協(xié)議創(chuàng)建的next()方法 該方法要求返回一個釣魚兩個屬性的對象: value屬性(當前迭代的值) done屬性(布爾值 表示迭代的狀態(tài) 是否完成)
2.理解迭代器
可以理解迭代器為一個智能的指針,他知道當前指向哪個元素(value)并且知道當前迭代有沒有完成(done)。
3.簡單使用迭代器
迭代器工作原理：
const arr = [1, 2, 3];
// 獲取數(shù)組的迭代器對象
let iterator = arr.values();
// 使用迭代器逐個訪問元素
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: undefined, done: true}利用迭代器包裝的方法：
const arr = [1, 2, 3];
// values() - 返回值的迭代器
for (let value of arr.values()) {
console.log(value); // 1, 2, 3
}
// keys() - 返回索引的迭代器
for (let key of arr.keys()) {
console.log(key); // 0, 1, 2
}
// entries() - 返回索引和值的迭代器
for (let [key, value] of arr.entries()) {
console.log(key, value); // 0 1, 1 2, 2 3
}4.迭代器的特點
- 一次性消費: 迭代器只能向前移動，不能后退
- 惰性計算: 每次調用
next方法才會計算下一個值 - 狀態(tài)保持: 迭代器會記住當前位置
(2) 對象
聲明對象
1.字面量直接創(chuàng)建：
let person = {
name: 'Tom',
age: 18,
sayHi() {
console.log('Hi, I am ' + this.name);
}
}
console.log(person.name);
person.sayHi();2.利用js內置方法構造對象
//2.new一個對象創(chuàng)建的是一個空對象
const obj2=new Object({name:2})3.利用構造函數(shù)創(chuàng)建對象
構造函數(shù)的本質：任何函數(shù)都可以作為構造函數(shù)，通過 new 關鍵字調用
//構造函數(shù)是一種特殊的函數(shù) 作用是用來初始化對象的
function Friden(name,age) {//第一個字母一定是大寫開頭 只能通過new執(zhí)行
this.name=name
this.age=age
}
const yuxuan=new Friden('yuxuan',18)//new的過程就是實例化
console.log(yuxuan);關于使用構造函數(shù)創(chuàng)建對象的一些問題
為什么能使用構造函數(shù)比如Friden()直接new 一個對象呢，當我們使用 new 關鍵字調用構造函數(shù)時，JavaScript 引擎會創(chuàng)建一個新對象，而構造函數(shù)內部使用的 this 就指向這個新創(chuàng)建的對象。因此，在構造函數(shù)中通過 this.xxx = xxx 設置的屬性確實是直接掛載到這個新對象上的。這個過程在ES6中被直接簡化成了語法糖Calss的形勢
//使用Class語法糖 是基于原型的構造函數(shù)機制
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, I'm ${this.name}`);
}
}
//本質上是一樣的是 基于原型的構造函數(shù)機制 、
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function() {
console.log(`Hello, I'm ${this.name}`);
};4.實例屬性與靜態(tài)屬性
實例屬性：
function Pig(name){
this.name = name; // 實例屬性
}
const peiqi = new Pig('peiqi');
// name 屬性屬于實例對象，每個實例都有自己獨立的副本實例成員：
- 通過
this.xxx在構造函數(shù)內定義 - 每個實例都有自己獨立的副本
- 通過實例對象訪問：
instance.property
靜態(tài)屬性：
靜態(tài)成員：
- 直接在構造函數(shù)上定義：
Constructor.property - 所有實例共享同一份（實際上不屬于實例）
- 只能通過構造函數(shù)訪問：
Constructor.property
function Person(name) {
this.name = name;
}
Person.eyes = 2; // 靜態(tài)屬性
Person.arms = 2; // 靜態(tài)屬性
// 這些屬性直接添加到構造函數(shù)本身，而不是實例對象原型鏈關系：
- 實例對象的
__proto__指向構造函數(shù)的prototype - 靜態(tài)成員不在原型鏈上，無法通過實例訪問，靜態(tài)成員只是掛載到對象上的，根本就不存在原型鏈關系
對象的基本使用：
let phone = {
"goods-name": `xiaomi14`,
money: 4000,
address: `中國`
}
//查找對象的屬性
document.write(phone.address)
//修改對象屬性
phone.name = `xiaomi15`
document.write(phone.name)
//增加對象屬性
phone.color = `白色`
document.write(phone.color)
//刪除對象屬性
delete phone.money//和c++很像
document.write(phone.money)//打印是undefind
//查找對對象
console.log(phone["goods-name"])
console.log(phone.money);
//遍歷對象與數(shù)組
for (let key in game) {//key是變量名可以隨便取 但是要和后面的game[key]對應
console.log(game[key])
}//此方法也可以遍歷數(shù)組
let arr = [1, 2, 3, 4, 5]
for (let k in arr) {
console.log(arr[k])
}對象的解構賦值：
//解構時屬性名和對象名相同
const{uanme,age}={uanme:'你好',age:18}
console.log(uanme);
//對象解構變量名更改
const{uanme:username,age:age1}={uanme:'你好',age:19}
//解構數(shù)組對象
const pig =[{uname:'佩奇',age:6}]
const[{uname,age}]=pig
// 多級對象解構
const pig={
name:'pigs',
family:{
mother:'mama',
father:'baba'
},
age:6
}
const {name,family:{mother,father},age}=pig二: 字符串與新增屬性
(1) 字符串
1. 字符串轉義符
轉義符： “ \ ” 后面沒跟需要轉義的字符
" 這中間是"一個分號 " 如果我們想打印出這個字符串 中間存在一個“ 這就導致不能直接打印出這串字符 這時候需要使用轉義符號
let str="我是一個 \" 分號" console.log(str);
2. 字符串拼接與模板字符串，截取，替換
（1）字符串的拼接
拼接字符可以使用+來拼接左右兩個字符，或者使用模板字符串。
let obj=[{title:'1'},{title:'2'},{title:'3'}]
function title(){
return `${
obj.map((item)=>{
return `<li>`+item.title+`</li>`
}).join('')
}`
}
function title2(){
return `${obj.map((item)=>{
return `<li>${item.title}</li>`
}).join('')}`
}
// 兩種寫法（2）字符串的截取
let hd='heimachegnxvyaun'
字符串的截取有三個方法
- slice
hd.slice(-3,-1)
slice(從哪開始截取)
hd.slice(0)
slice(從哪開始截取,到哪停止)
hd.slice(0,3)
slice(負數(shù))從后面開始算- substr 已經(jīng)被廢棄?。?！
substr(截取位置)
hd.substr(0)
substr(截取位置，到哪停止)
hd.substr(0,3)
substr(負數(shù)沒有意義)- substring
substring(截取位置)
hd.substring(0)
substring(截取位置，截取個數(shù))
hd.substring(0,3)
substring(截取位置，截取個數(shù))
hd.substring(-3,6)
3. 標簽模版
其實就是一個函數(shù) 但是存在兩個參數(shù) 一個是字符串 一個是一個數(shù)組
字符串存儲的是未填充的字符串 數(shù)組存儲的是填充的值
function tag(String,...vars){
// vars 接收所有插值變量組成的數(shù)組 所以前一個String是用來存儲要被輸出的字符串的 然后字符串里面的插入值存在vars里面
console.log(vars); // 輸出: ["houdenren.com", "后盾人"]
// String 接收模板字符串被插值分割后的部分
console.log(String); // 輸出: ["在線編程網(wǎng)", ",作者", ""]
}
let uname='后盾人'
let web ='houdenren.com'
tag(`在線編程網(wǎng)${web},作者${uname}`);
// 其實主要的作用是對標簽中的變量或者字符進行二次處理4. 字符串檢索
一些列用于在字符串中做檢索的字符串方法 const hd='houdunren'提前定義字符串
indexOf返回字符所在位置 如果找不到就返回-1 從字符串的左邊開始查找
console.log(hd.indexOf('d'));//返回檢索字符所在的位置 找不到的返回負一 從左邊開始查找includes有兩個參數(shù) 參數(shù)一是要查詢的位置 參數(shù)二是開始查找的位置
console.log(hd.includes('h',8));//返回布爾類型 可以設置第二個參數(shù)從指定位置開始查找lastIndexOf返回字符串的位置
console.log(hd.lastIndexOf('o'));//從最右邊向左開始查找startsWith判斷字符是否是字符串的起始值
console.log(hd.startsWith('h'));//判斷字符串起始值 endsWith判斷字符串結束符
console.log(hd.endsWith('h'));//判斷字符串結束符(2)Symbol
Symbol 是 ES6 引入的一種新的原始數(shù)據(jù)類型，主要用于創(chuàng)建唯一的標識符?？梢宰鳛橐恍傩悦臉俗R符,比如為對象添加唯一的屬性名,也可以對屬性進行私有化 不讓外部來遍歷該屬性. 可以有效避免屬性重名的問題
特點:
- 唯一性：每個
Symbol值都是唯一的，即使使用相同的描述創(chuàng)建 - 隱藏性：
Symbol屬性不會出現(xiàn)在常規(guī)的遍歷中（如for...in或Object.keys) - 不可枚舉：
Symbol屬性默認不可枚舉，不會被JSON.stringify()序列化
let symbol = Symbol();
let obj = {
name: "李四",
[symbol]: "張三",
};
// 普通遍歷遍歷不到 symbol 屬性
for (let key in obj) {
console.log(key); //name
}
// 通過for of Reflect.ownKeys()可以遍歷到對象里面的 symbol 屬性
for (let key of Reflect.ownKeys(obj)) {
console.log(key);//name Symbol()
}屬性私有化:
let site = Symbol();
class User {
constructor(name) {
this.name = name;
this[site] = "houdunren";
}
getName() {
return `${this.name} ${this[site]}`;
}
}
let newuser=new User("lisi")
console.log(newuser.getName()); //lisi houdunren
// 不能獲取到symbol屬性
for (let key in newuser) {
console.log(newuser[key]); // lisi
}基本用法:
聲明symbol變量 訪問的時候需要使用symbol變量的description屬性來訪問
// 創(chuàng)建 Symbol
let yf = Symbol("我是逸飛");
console.log(yf); // Symbol(我是逸飛)
console.log(yf.description); // 提取Symbol的描述
// 全局共享的 Symbol
let gs1 = Symbol.for('global');
let gs2 = Symbol.for('global');
console.log(gs1 === gs2); // true(3)Set與__WeakSet__
set:
set是一個集合數(shù)據(jù)類型 和數(shù)組相似 但是set中不能存在重復的數(shù)據(jù) 本質和數(shù)組一樣是一個引用類型的數(shù)據(jù)結構
set列表定義及其常見方法:
- 通過set構造函數(shù)直接構造set列表對象 可以在構造函數(shù)中傳入一個數(shù)組 初始化set
- add增加元素
- delete刪除某個具體元素 clear刪除全部元素
- size返回元素個數(shù)
- '…'和數(shù)組一樣可以展開列表
- has方法判斷某個元素否存在
// set是一個集合數(shù)據(jù)類型 和數(shù)組很類似 但是set中不能含有重復的數(shù)據(jù)
let set =new Set([1,2,3,4,5])
set.add(1);
set.add(1);
set.add(1);
console.log(set);
// 如果定義的時候 set里面是字符串就會把字符串的個字符當作元素
let sets=new Set("hdcms")
console.log(sets);//Set(5) { 'h', 'd', 'c', 'm', 's' }
//增
set.add(1);
set.add(2);
//刪
// 單個刪除
set.delete(1);
// 清空全部
// set.clear();
// 查詢方法
// 查詢set里面的元素個數(shù)
console.log(set.size); // 2
// 展開語法查看set
console.log([...set]); // [1,2]
// 判斷某個元素是否存在,返回布爾類型
console.log(set.has(1)); // trueset的遍歷
let set=new Set([1,2,3,4,5,6])
set.forEach(function(value,index,set){//使用forEach遍歷set
console.log(value);
})
for (const value of set) {//使用forof遍歷set
console.log(value);
}weakset:
weakset和set類型一樣都是只能存儲唯一值的列表 區(qū)別就是weakset是一個弱引用類型的數(shù)據(jù)結構,并且weakset不能夠遍歷,并且weakset只能存儲對象引用，不能存儲基本類型值.
什么是弱引用:
先觀察一下set與weakset的區(qū)別
Set: 對象即使不再被其他地方引用，只要還在Set中就不會被垃圾回收WeakSet: 對象如果只被WeakSet引用，會被垃圾回收機制自動清理
不難理解出 弱引用就是不用阻止垃圾回收器去回收被weakset引用的對象
如果我們定義一個對象a 分別用不同的變量去引用a 每一次引用都會標記一次引用次數(shù) 但是用weakset去引用這個對象就不會添加引用次數(shù) 當變量都被清除之后對象a的引用次數(shù)也會歸零 weakset不會阻止a被垃圾回收
使用示例
let nodes=new WeakSet()
let divs=[{div:1},{div:2}]
divs.forEach(element => {
nodes.add(element)
});
console.log(nodes);
//刪除
nodes.delete(divs[0])
console.log(nodes);
//同樣使用has判斷元素是否存在
console.log(nodes.has(divs[1]));
//weakset不可遍歷 并且只能儲存對象(4)Map與weakMap
Map:
簡單理解map
map就是鍵值對的集合 可以近似理解為用鍵名代替數(shù)組索引的類數(shù)組
map類型和obj類型的區(qū)別:對象的鍵只能是字符串類型，map的鍵名可以是各種類型
聲明Map:
- 通過Map構造函數(shù)直接構造map變量
- 使用set方法設置鍵值對 參數(shù)一是鍵名 參數(shù)二是值
- map的鍵名可以是任意類型
// 聲明Map類型
let map = new Map();
// 鍵名為字符串 Map方法添加數(shù)據(jù)不是添加 叫設置數(shù)據(jù)
map.set("name", "李四");
// 鍵名為數(shù)字
map.set(1, "數(shù)字");
// 鍵名為方法
map.set(function() {}, "方法作為鍵名");
// 對象鍵名
map.set({}, "對象鍵名");
console.log(map);
//或者直接來定義
let map2=new Map([[{},"對象"],[[],'數(shù)組'],[function(){},'函數(shù)']])
console.log(map2);Map的增刪改查
- set增
- delete刪除某個具體鍵值對 clear全部刪除
let map = new Map();
// 增
map.set('name','張三')
map.set('age',18)
// 刪除
// 單個刪除，返回布爾值
console.log(map.delete('age'));
// 全部刪除，沒有返回值
// map.clear()
// 查詢
console.log(map.get('name'));遍歷Map變量:
- map可以和數(shù)組一樣進行遍歷,也可以使用forEach方法
- keys方法 返回所有的鍵
- values方法 返回所有的值
- entries方法 返回鍵值對
let map = new Map();
map.set("name", "李四");
map.set("age", "15");
// 遍歷所有的key
console.log(map.keys());//返回所有的鍵
// 返回所有的值
console.log(map.values());
// 返回值和鍵
console.log(map.entries());
// for of 遍歷鍵名
for (let key of map.keys()) {
console.log(key);
}
// for of 遍歷值
for (let val of map.values()) {
console.log(val);
}
// 對象同時接收鍵和值
for (let [key, val] of map.entries()) {
console.log(key, val);
}
// forEach 遍歷 map,第一個值是鍵值，第二個值是鍵名
map.forEach((item, key) => {
console.log(item, key);
});將Map類型轉換為數(shù)組:
map雖然作為鍵值對的集合,也可以將鍵和值單獨轉換成兩個單獨的數(shù)組 使用展開語法配合不同的方法即可
let hd=new Map([['中文','chinese'],['nihao','hello']])
console.log([...hd]);//將鍵值對轉化為二維數(shù)組
console.log([...hd.keys()]);//單獨轉換鍵
console.log([...hd.entries()]);//將鍵值對轉化為數(shù)組
console.log([...hd.values()]);//將值轉化為數(shù)組
let newhd=[...hd].filter((item)=>{
return item[1].includes('chinese')
})
console.log(newhd);WeakMap:
WeakMap和Map基本類似,不一樣的是WeakMap的鍵只能是對象,而且不會增加對象的引用. 和WeakSet一樣 WeakMap不能遍歷 沒有size屬性 不能cleat直接清除 不能使用foreach方法
常見的使用
驗證弱引用特性
let obj={
name:'list'
}
let weakmap=new WeakMap();
weakmap.set(obj,'houdunren')
// 驗證WeakMap中是否有這個鍵
console.log(weakmap.has(obj)); // 會輸出 true
// 獲取值
console.log(weakmap.get(obj)); // 會輸出 'houdunren'
obj = null;
console.log(weakmap);
setTimeout(() => {
// 倒計時一秒后再打印結果為空
console.log(weakmap);
}, 1000);到此這篇關于JS數(shù)組、對象、字符串與部分新屬性實例詳解的文章就介紹到這了,更多相關js 數(shù)組對象字符串內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了JavaScript中的垃圾回收機制，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-09-09
js實現(xiàn)簡易的單數(shù)字隨機抽獎（0-9）
這篇文章主要介紹了js實現(xiàn)簡易的單數(shù)字0-9隨機抽獎，可以控制抽取隨機數(shù)開始與停止，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
javascript檢查瀏覽器是否已經(jīng)啟用XX功能
本文給大家分享的是檢測瀏覽器是否支持cookie功能，檢查瀏覽器是否已經(jīng)啟用Java支持功能以及獲取當前瀏覽器的信息，十分的實用，有需要的小伙伴可以參考下。2015-07-07
js實現(xiàn)的點擊div區(qū)域外隱藏div區(qū)域
這篇文章主要介紹了通過js實現(xiàn)點擊div區(qū)域外隱藏div區(qū)域，原理及示例代碼如下2014-06-06
通過javascript的匿名函數(shù)來分析幾段簡單有趣的代碼
想起自己很久以前學習javascript的經(jīng)歷，也曾經(jīng)碰到過幾個由匿名函數(shù)造成的困擾（其中一個就是由閉包引起的），下面就整理幾段簡單代碼討論一下，讓我們大家一起進步。2010-06-06
bootstrap-table實現(xiàn)表頭固定以及列固定的方法示例
這篇文章主要介紹了bootstrap-table實現(xiàn)表頭固定以及列固定的方法示例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要帶領大家學習JavaScript設計模式，其中重點介紹代理模式，對代理模式進行詳細剖析，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要給大家介紹了關于js動態(tài)設置關鍵偵@keyframes的方法技巧,@keyframes規(guī)則通過在動畫序列中定義關鍵幀(或waypoints)的樣式來控制CSS動畫序列中的中間步驟,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
這篇文章介紹了復制到剪切板js代碼，有需要的朋友可以參考需要2013-06-06
JavaScript具有類似Lambda表達式編程能力的代碼(改進版)
在之前的一篇博文中我介紹了一種方法可以讓JavaScript具有一種近似于Lambda表達式的編程能力——但是它有一些缺點，其中妨礙它的使用的最主要的一條就是多了一層括號，讓代碼變得難以閱讀。2010-09-09