JS的物件 陣列等處理方法 解構

2022-01-10 23:17:27 字數 2149 閱讀 3054

你可以在定義方法時省略function和 ::

const obj = ,

youcandothis()

}

請注意,以上不是箭頭函式,只是物件方法的簡寫語法。

物件解構是獲取物件並將其內部屬性提取到物件外部變數的一種方法:

const obj = 

// 不使用解構語法

const x = obj.x

const y = obj.y

// 使用解構語法

const = obj

x // 1

y // 2

// 你也可以在函式引數中使用解構

// 注意這裡函式的引數只有乙個

function add()

add() // 7

剛開始你可能會有點混亂,因為現在花括號不僅可以用來宣告物件,也可以用來根據上下文對其進行解構。

// 如果花括號在等式的右邊,那麼你正在宣告乙個物件

const obj =

// 如果花括號在等式左邊,那麼你正在解構乙個物件

const = obj;

陣列解構的工作原理與物件解構幾乎相同,但使用方括號而不是花括號:

const arr = ['michael', 'jackson']

const [first, last] = arr

first // michael

last // jackson

它們之間的另乙個區別是物件具有屬性名稱,因此必須在解構的時候使用這些屬性名稱。由於陣列值是按順序排列的,並且沒有名稱,因此,解構的順序與我們獲得的值是相關聯的。換句話說,first是解構中的第乙個變數,因此它獲取陣列的第乙個值。

如果屬性名稱與物件中的變數名稱相同,則可以使用屬性簡寫:

// 這裡需要寫兩遍 name

const name = 'michael'

const person =

// 物件屬性簡寫

const person =

建立物件或陣列時,一種從現有物件或陣列的屬性建立新屬性的方法。

// 定義乙個person陣列

const person = ['michael', 'jackson']

// 如果要把 person 陣列加到新的 profile 陣列裡,按下面這麼寫的話

const profile = [person, 'developer']

// 結果會是陣列裡包含著乙個陣列

profile // [['michael', 'jackson'], 'developer']

profile[0] // 這是個陣列 ['michael', 'jackson']

profile[1] // 這是字串 'developer'

// 現在 我們用 ...展開語法

const profile = [...person, 'developer']

// 結果就變成了

profile // ['michael', 'jackson', 'developer']

// 物件也可以用 ...展開語法

const person =

const profile =

profile //

剩餘語法(rest syntax) 看起來和展開語法完全相同,不同點在於, 剩餘引數用於解構陣列和物件。從某種意義上說,剩餘語法與展開語法是相反的:展開語法將陣列展開為其中的各個元素,而剩餘語法則是將多個元素收集起來並「凝聚」為單個元素。

const profile = 

const = profile

occupation // developer

rest //

剩餘語法用於函式引數

function myfunction(first, last, ...rest) 

console.log(myfunction('michael', 'jackson', 'developer', 'california'))

// output: ['developer', 'california']

JS中陣列與物件的解構

陣列的解構語法就是陣列的另一種使用呼叫方法,可以不通過語法或者不通過索引下標來呼叫使用陣列中的資料。用於將陣列中的資料一一對應的賦值給變數 const arr 北京 上海 廣州 重慶 天津 之前使用陣列的資料,必須要通過語法和索引下標 let str1 arr 0 let str2 arr 1 le...

js 物件 陣列等型別的判斷

一 判斷是否為物件 方法一 var a new object console.log a instanceof object true 二 判斷是否為陣列 方法一 var b console.log array.isarray b 方法二 var b console.log b instanceof...

JS陣列的處理的方法

一.增加 刪除 替換 原陣列改變 1.push 要增加的內容 末尾增加一項 返回 新增後陣列的長度 原陣列 改變 2.pop 刪除最後一項 返回值 被刪除的那一項 原陣列 改變 3.unshift 要增加的內容 在陣列開頭增加一項 返回值 增加後陣列的長度 原陣列 改變 4.shift 刪除第一項 ...