操做字符、對象方法, 深淺拷貝

        在一個項目中，咱們一般會經過例如substring，slice，concat等一些方法來操做字符，數組，對象來獲取咱們想要的結果

深淺拷貝

         首先我以爲，全部的操做應該對深淺拷貝有一個認識，由於有時候咱們須要利用淺拷貝的特性來達到一些功能效果，更多的時候咱們須要深拷貝來複制對象和數組，在不影響原有數據的基礎上來對數據進行一些操做。

• 淺拷貝
  

        若是是基本元素，就會拷貝一份，互不影響              
        若是是對象或者數組，就只會拷貝對象和數組的引用，不管是對新仍是舊數組或對象操做，二者都會發生變化

• 深拷貝
  

        徹底拷貝了一個對象，即便嵌套了對象，二者也相互分離，修改一個對象的屬性，也不會影響另外一個

• 圖示
  

        對於引用數據類型，名存在棧內存中，值存在於堆內存中，可是棧內存會提供一個引用的地址指向堆內存中的值

對於數組和對象的一些拷貝方法（複製，合併，截取）

深拷貝的方法：

一、JSON.parse(JSON.stringify(obj))複製代碼

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

一、arr.concat() // 合併多個數組    
二、[...arr1, ...arr2] // ES6新增延展操做符，合併多個數組
三、arr.slice() // 截取數組中的一部分，不破壞原數組，返回新數組
四、Object.assign(target, ...sources) 複製代碼

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

一、string.substring([startIndex], endIndex)  // 截取字符
二、string.slice([startIndex], endIndex)  // 截取字符
二、string.charAt(index) // 返回指定位置的字符複製代碼

對於數組的操做 

一、arr.push()  // 添加至數組的末尾，並返回修改後的數組的長度
二、arr.unshift()  // 在數組的開始添加任意個新元素，並返回修改後的數組長度
三、arr.splice() // 刪除指定位置指定個數的元素，並返回
複製代碼

數組與字符之間的轉換

一、arr.join()   // 數組轉爲以特定符號分割的字符，默認以逗號分割
二、string.split(separator, howmany)  // 把一個字符串分割乘字符串數組
三、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]複製代碼

侷限性：一、不能解決循環引用的對象； 二、 會忽略undefined；三、會忽略symbol；四、不能序列化函數

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)

• 將全部可枚舉屬性的值從一個或多個源對象複製到目標對象，返回目標對象
• 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複製代碼

arr.toString()

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

string.split(separator, howmany) 

• 用於把一個字符串分割成字符串數組
  
• separator 字符串或正則表達式，從該參數指定的地方分割
  
• howmany 若指定，指定返回數組的最大長度
  

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