操作字元、物件方法, 深淺拷貝

        在一個專案中，我們通常會通過例如substring，slice，concat等一些方法來操作字元，陣列，物件來獲取我們想要的結果

深淺拷貝

         首先我覺得，所有的操作應該對深淺拷貝有一個認識，因為有時候我們需要利用淺拷貝的特性來達到一些功能效果，更多的時候我們需要深拷貝來複制物件和陣列，在不影響原有資料的基礎上來對資料進行一些操作。

• 淺拷貝
  

• 深拷貝
  

• 圖示
  

        對於引用資料型別，名存在棧記憶體中，值存在於堆記憶體中，但是棧記憶體會提供一個引用的地址指向堆記憶體中的值

對於陣列和物件的一些拷貝方法（複製，合併，擷取）

1、JSON.parse(JSON.stringify(obj))複製程式碼

 淺拷貝的一些方法：
         對一級屬性沒有影響的，但對二級以及更深層次的拷貝會有影響：         

1、arr.concat() // 合併多個陣列    
2、[...arr1, ...arr2] // ES6新增延展操作符，合併多個陣列
3、arr.slice() // 擷取陣列中的一部分，不破壞原陣列，返回新陣列
4、Object.assign(target, ...sources) 複製程式碼

對於String的操作（ [ ] 表示可取到 ）

1、string.substring([startIndex], endIndex)  // 擷取字元
2、string.slice([startIndex], endIndex)  // 擷取字元
2、string.charAt(index) // 返回指定位置的字元複製程式碼

對於陣列的操作 

1、arr.push()  // 新增至陣列的末尾，並返回修改後的陣列的長度
2、arr.unshift()  // 在陣列的開始新增任意個新元素，並返回修改後的陣列長度
3、arr.splice() // 刪除指定位置指定個數的元素，並返回
複製程式碼

陣列與字元之間的轉換

1、arr.join()   // 陣列轉為以特定符號分割的字元，預設以逗號分割
2、string.split(separator, howmany)  // 把一個字串分割乘字串陣列
3、arr.toString()  //把陣列轉換為字串，並返回結果，每一項以逗號分割複製程式碼

以上是對一些常用的方法的一個總結，以下是各個函式的用法以及例子

JSON.parse(JSON.stringify(obj))  

• 深拷貝

var arr = [    
    { name: "test" },    
    { title: "flag" },    
    "string",   
    2
]
var deepClone = (obj) => {    
    return JSON.parse(JSON.stringify(obj))
}
var deepCopyArr = deepClone(arr)
deepCopyArr[0].name = 'test1'
console.log('deepCopyArr', deepCopyArr)   
console.log('arr', arr)

// deepCopyArr [{ name: 'test1' }, { title: 'flag' }, 'string', 2]
// arr [{ name: 'test' }, { title: 'flag' }, 'string', 2]複製程式碼

侷限性：1、不能解決迴圈引用的物件； 2、 會忽略undefined；3、會忽略symbol；4、不能序列化函式

arr.concat(array1,  array2, ....,  array3)  

• 淺拷貝（複製資料的更改對於原資料隻影響二級以上的屬性）
  
• 陣列的合併

Tip:  引數可以是具體的值，也可以是陣列物件

// 淺拷貝
var arr = [1, 2, 3]
var concatArrconcatArr = arr.concat()
console.log('concatArr', concatArr)  // [1, 2, 3]
console.log('arr', arr)  // [1, 2, 3]複製程式碼

// 複製物件若更改，對於原資料的一級屬性沒有影響，對二級以上的屬性有影響
var arr = [    
    { name: "test" },    
    { title: "flag" },    
    "string",  
    2
]
concatArr = arr.concat()
concatArr[0].name = "test2"
concatArr[3] = 10
console.log('concatArr', concatArr)
console.log('arr', arr)

// concatArr2 [ { name: 'test2' }, { title: 'flag' }, 'string', 10 ]
// arr [ { name: 'test2' }, { title: 'flag' }, 'string', 2 ]
複製程式碼

// 連線兩個或多個陣列
var arr = [1, 2, 3]
var concatArr = arr.concat('test')  // 連線具體的值
console.log('concatArr', concatArr)  // [1, 2, 3, 'test']

var concatArr2 = arr2.concat([4, 5, 6])  // 連線陣列
console.log('concatArr2', concatArr2)   // [1, 2, 3, 4, 5, 6]
console.log('arr2', arr2)  // [1, 2, 3]  // 原陣列未被破壞
複製程式碼

[...arr1, ...arr2] ES6新增延展操作符

• 淺拷貝（複製資料的更改對於原資料隻影響二級以上的屬性）
  
• 資料的合併（陣列，物件，基本型別）

var arr = [    
    { name: "test" },   
    { title: "flag" },    
    "string",    
    2
]
var arr2 = [3, 4, 5]
var arr3 = [...arr, ...arr2]
arr3[0].name = "test2"
arr3[2] = 6

// arr [{ name: 'test2' }, { title: 'flag' }, 'string', 2]
// arr2 [3, 4, 5]
// arr3 [{ name: 'test2' }, { title: 'flag' }, 6, 2, 3, 4, 5]複製程式碼

arr.slice(start, end) / string.slice(start, end)

• 淺拷貝
• 陣列擷取，從start處開始選取（可為負數，代表從尾部開始算起）,從end處結束選取（不包含， 可為負數），未指定，則到末尾
  

// 淺拷貝
var arr = [    
    { name: "test" },   
    { title: "flag" },   
    "string",    
    2
]

var arr1 = arr.slice()  // [{ name: 'test' }, { title: 'flag' }, 'string', 2]複製程式碼

// 複製物件若更改，對於原資料的一級屬性沒有影響，對二級以上的屬性有影響

arr1[0].name = 'test2'

// arr [{ name: 'test2' }, { title: 'flag' }, 'string', 2]
// arr1 [{ name: 'test2' }, { title: 'flag' }, 'string', 2]
複製程式碼

// 擷取, 不破壞原陣列，返回新陣列
var arr1 = [3, 4, 5]
var arr2 = arr2.slice(0, 1)  // [3]
var arr3 = arr2.slice(0, -1) // [3, 4]
var arr4 = arr2.slice(1)  // [4, 5]複製程式碼

Object.assign(target, ...source)

// 複製一個物件
var object = {    
    a: 1,    
    b: 2,    
    c: 3,    
    d: {        
        child: 4    
    }
}
var object2 = Object.assign({}, object)

// object2 {a: 1, b: 2, c: 3, d: { child: 4 }}複製程式碼

// 複製物件若更改，對於原資料的一級屬性沒有影響，對二級以上的屬性有影響
object2.a = 'test'
object2.d.child = 'test2'

// object2 {a: 'test', b: 2, c: 3, d: { child: 'test2' }}
// object {a: 1, b: 2, c: 3, d: { child: 'test2' }}複製程式碼

// 合併物件
var o1 = {a: 1, b: 2, c: 1}
var o2 = {b: 3, c: 4}
var obj = Object.assign({}, o1, o2)   // { a: 1, b: 3, c: 4 }複製程式碼

string.substring(start, end) string.slice(start, end)

• start（非負整數）要提取的字串的第一個字元的位置，end（非負整數）結束字元位置（不包含）
  

string.charAt(index)

• index 指定位置的字元
  

string = 'test'
var string2 = string.substring(1, 3)  // 'es'
var string3 = string.slice(1, 3)  // 'es'
var string4 = string.charAt(1)  // 'e'複製程式碼

arr.push() 在末尾新增元素 

arr.unshift() 在開始新增元素  

arr.splice(index, howmany, item1,....,itemX)  

• 向/從陣列中新增/刪除專案，然後返回被刪除的專案
  
• index 規定新增/刪除專案的位置，負數可從陣列結尾處規定位置； howmay 要刪除的專案數量，設定為0，則不會刪除，item1,...,itemX 可向陣列新增的新專案
  
• 以上操作都是在原陣列上操作，所以如果不想破壞原資料的話，可以對原資料進行深拷貝

var arr = [3, 4, 5]
arr.push(6)   // [3, 4, 5, 6]
arr.unshift(2) // [2, 3, 4, 5, 6]
arr.splice(1, 1) // [2, 4, 5, 6]
arr.splice(1, 0, 'test') // [2, 'test', 4, 5, 6]複製程式碼

arr.join(separator)  

• 把陣列中的所有元素通過指定的分隔符放入一個字串
  
• separator 指定要使用的分隔符。如果省略，使用逗號作為分隔
  

var arr = [3, 4, 5]
var arr1 = arr.join()  // 3, 4, 5
var arr2 = arr.join('/')  // 3/4/5複製程式碼

var arr3 = arr.toString()  // 3, 4, 5複製程式碼

var str = "how are you doing today"
var arr1 = str.split(" ")   // ['how', 'are', 'you', 'doing', 'today']
var arr2 = str.split(" ", 3)  // ['how', 'are', 'you']複製程式碼