[toc]

JavaScript 提供了多種新增,移除,替換數組元素的方法,但是有些會影響原來的數組;有些則不會,它是新建了一個數組。
注意:區分以下兩個方法的不同點:
- array.splice() 影響原來的數組
- array.slice() 不影響原來的數組
## 1.新增:影響原數組
使用 `array.push()` 和 `array.ushift()` 新增元素會影響原來的數組。
```js
var arr = ['a','b','c','d','e'];
arr.push('f'); // ['a','b','c','d','e','f']
arr.unshift('z'); // ['z','a','b','c','d','e','f']
```
## 2. 新增:不影響原數組
兩種方式新增元素不會影響原數組,第一種是 `array.concat()`。
```js
var arr1 = ['a','b','c','d','e'];
var arr2 = arr1.concat('f'); // ['a','b','c','d','e','f']
console.log(arr1); // ['a','b','c','d','e']
```
第二種方法是使用 JavaScript 的展開(spread)操作符,展開操作符是三個點(`…`)
```js
var arr1 = ['a','b','c','d','e'];
var arr2 = [...arr1, 'f']; // ['a','b','c','d','e','f'];
var arr3 = ['z', ...arr1]; // ['z','a','b','c','d','e']
console.log(arr1); // ['a','b','c','d','e']
```
展開操作符會復制原來的數組,從原數組取出所有元素,然后存入新的環境。
## 3.移除:影響原數組
使用 `array.pop()` 和 `array.shift()` 移除數組元素時,會影響原來的數組。
```js
var arr = ['a','b','c','d','e'];
arr.pop(); // ['a','b','c','d']
arr.shift(); // ['b','c','d']
```
`array.pop()` 和 `array.shift()`返回被移除的元素,你可以通過一個變量獲取被移除的元素
```js
let arr = ['a','b','c','d','e'];
const removeKey1 = arr.pop();
console.log(arr1); // ['a','b','c','d'];
console.log(removeKey1); // e
const removeKey2 = arr.shift(); // ['b','c','d']
console.log(arr1); // ['b','c','d'];
console.log(removeKey1); // a
```
`array.splice()` 也可以刪除數組的元素
```js
let arr = ['a','b','c','d','e'];
arr.splice(0, 2); // ['c','d','e']
```
像 array.pop() 和 array.shift() 一樣,`array.splice()` 同樣返回移除的元素
```js
let arr = ['a','b','c','d','e'];
const returnItems = arr.splice(0, 2);
console.log(arr); // ['c','d','e']
console.log(returnItem); // ['a','b']
```
## 4.移除:不影響原數組
JavaScript 的 `array.filter()` 方法基于原數組創建一個新數組,新數組僅包含匹配特定條件的元素
```js
const arr = ['a','b','c','d','e'];
const arr2 = arr.filter(a = > a !== 'e'); // ['a','b','c','d']
```
以上代碼的條件是“不等于 ‘e’ ”,因此新數組(arr2)里面沒有包含 ‘e’。
箭頭函數的獨特性:
- 單行箭頭函數,`return` 關鍵字是默認自帶的,不需要手動書寫。
- 可是,多行箭頭函數就需要明確地返回一個值。
另一種不影響原數組的方式是 `array.slice()`(不要與 `array.splice()` 混淆)。
```js
const arr = ['a','b','c','d','e'];
const arr2 = arr.slice(1, 5); // ['b','c','d','e']
const arr3 = arr.slice(2); // ['c','d','e']
```
## 5.替換:影響原數組
如果知道替換哪一個元素,可以使用 `array.splice()`
```js
let arr = ['a','b','c','d','e'];
arr.splice(2, 1, 30); // ['a','b',30,'d','e']
arr.splice(2, 1, 30, 31); // ['a','b',30,31,'d','e']
```
## 6.替換:不影響原數組
可以使用 `array.map()` 創建一個新數組,并且可以檢查每一個元素,根據特定的條件替換它們。
```js
const arr1 = ['a','b','c','d','e'];
const arr2 = arr1.map(item => {
if(item === 'c') item = 'CAT';
return item;
}); // ['a','b','CAT','d','e']
```
使用 array.map() 轉換數據。array.map() 是個強力方法,可以用于轉換數據,而不污染原先的數據源
```js
const origArr = ['a','b','c','d','e'];
const transformArr = origArr.map(n => n + 'Hi!'); // ['aHi!','bHi!','cHi!','dHi!','eHi!']
console.log(origArr); // ['a','b','c','d','e']; 原數組毫發無損
```
- 說明
- CSS與HTML
- BFC的特性及其常見應用
- CSS深入理解之margin
- CSS深入理解之line-height
- CSS盒模型相關知識
- CSS知識總結
- HTML知識總結
- 三欄布局五種方式
- JavaScript內置對象
- 1.循環
- 2.數組方法對比
- 3.字符串實用常操紀要
- JavaScript核心
- var、let、const定義變量
- this 的指向問題詳解
- 箭頭函數
- ES6部分知識歸納
- ES6的Class
- Promise和Async/await
- 面向對象的概念及JS中的表現
- 創建對象的九種方式
- JS的繼承
- 閉包總結
- 構造函數與作用域
- 原型與原型鏈
- 函數的四種調用模式
- apply、call、bind詳解
- JavaScript應用
- 1.JavaScript實現深拷貝與淺拷貝
- 2.函數防抖與節流
- 3.無阻塞腳本加載技術
- DOM
- 如何寫出高性能DOM?
- 事件探秘
- 事件委托
- 操作DOM常用API詳解
- 重排和重繪
- 運行機制與V8
- 瀏覽器的線程和進程
- Vue.js
- Vue.js知識點總結
- Vue-Router知識點總結
- 父子組件之間通信的十種方式
- 優化首屏加載
- 關于Vuex
- 前端路由原理及實現
- 在Vue.js編寫更好的v-for循環的6種技巧
- 12個Vue.js開發技巧和竅門
- 網絡協議
- HTTP緩存機制
- UDP協議
- TCP協議
- HTTPS協議
- HTTPS的背景知識、協議的需求、設計的難點
- HTTPS與HTTP的區別
- 框架與架構
- MVC、MVP、MVVM
- Gulp與Webpack的區別
- Angular React 和 Vue的比較
- 虛擬DOM和實際的DOM有何不同?
- 架構問題
- 工程化
- npm link命令
- npm scripts 使用指南
- 前端工程簡史
- 常見的構建工具及其對比
- Webpack基本配置與概念
- 設計模式
- 工廠設計模式
- 單例設計模式
- 適配器模式
- 裝飾器模式