不改變原數組(8個) · record

**不改變原數組的方法(8個):** **ES5:** 1. `join` 2. `toLocateString` 3. `toStrigin` 4. `slice` 5. `cancat` 6. `indexOf` 7. `lastIndexOf`、 **ES7:** `includes` 1. **join() 數組轉字符串** 定義： `join()`方法用于把數組中的所有元素通過指定的分隔符進行分隔放入一個字符串，返回生成的字符串。語法： array.join(str) 參數: `str`(可選): 指定要使用的分隔符，默認使用逗號作為分隔符。 ~~~ let a = ['hello','world']; let str = a.join(); // 'hello,world' let str2 = a.join('+'); // 'hello+world' ~~~ 使用join方法或者下文說到的toString方法時，當數組中的元素也是數組或者是對象時會出現什么情況？ ~~~ let a = [ ['OBKoro1','23'],'test' ]; let str1 = a.join(); // OBKoro1,23,test let b = [{name:'OBKoro1',age:'23'},'test']; let str2 = b.join(); // [object Object],test // 對象轉字符串推薦JSON.stringify(obj); ~~~ 所以，`join()`/`toString()`方法在數組元素是數組的時候，會將里面的數組也調用join()/toString(),如果是對象的話，對象會被轉為\[object Object\]字符串。 2. **toLocaleString() 數組轉字符串** 定義：返回一個表示數組元素的字符串。該字符串由數組中的每個元素的`toLocaleString()`返回值經調用 join() 方法連接（由逗號隔開）組成。語法： array.toLocaleString() 參數：無。 ~~~ let a = [ {name:'OBKoro1'},23,'abcd',new Date() ]; let str=a.toLocaleString(); // [object Object],23,abcd,2018/5/28 下午1:52:20 ~~~ 如上述栗子：調用數組的`toLocaleString`方法，數組中的每個元素都會調用自身的`toLocaleString`方法，對象調用對象的`toLocaleString`,`Date`調用`Date`的`toLocaleString`。 3. **toString() 數組轉字符串不推薦** 定義： `toString()`方法可把數組轉換為由逗號鏈接起來的字符串。語法： array.toString() 參數: 無。該方法的效果和join方法一樣，都是用于數組轉字符串的，但是與join方法相比沒有優勢，也不能自定義字符串的分隔符，因此不推薦使用。值得注意的是：當數組和字符串操作的時候，js 會調用這個方法將數組自動轉換成字符串 ~~~ let b = [ 'toString','演示'].toString(); // toString,演示 let a= ['調用toString','連接在我后面']+'啦啦啦'; // 調用toString,連接在我后面啦啦啦 ~~~ 4. **slice() 淺拷貝數組的元素** 定義：方法返回一個從開始到結束（不包括結束）選擇的數組的一部分淺拷貝到一個新數組對象，且原數組不會被修改。注意：字符串也有一個`slice()`方法是用來提取字符串的，不要弄混了。語法： array.slice(begin, end); 參數: `begin`(可選)：索引數值,接受負值，從該索引處開始提取原數組中的元素,默認值為0。 `end`(可選)：索引數值(不包括),接受負值，在該索引處前結束提取原數組元素，默認值為數組末尾(包括最后一個元素)。 ~~~ let a = ['hello','world']; let b = a.slice(0,1); // ['hello'] a[0] = '改變原數組'; console.log(a,b); // ['改變原數組','world'] ['hello'] b[0] = '改變拷貝的數組'; console.log(a,b); // ['改變原數組','world'] ['改變拷貝的數組'] ~~~ 如上：新數組是淺拷貝的，元素是簡單數據類型，改變之后不會互相干擾。如果是復雜數據類型(對象,數組)的話，改變其中一個，另外一個也會改變。 ~~~ let a = [{name:'OBKoro1'}]; let b = a.slice(); console.log(b,a); // [{"name":"OBKoro1"}] [{"name":"OBKoro1"}] // a[0].name = '改變原數組'; // console.log(b,a); // [{"name":"改變原數組"}] [{"name":"改變原數組"}] // b[0].name = '改變拷貝數組',b[0].koro='改變拷貝數組'; // [{"name":"改變拷貝數組","koro":"改變拷貝數組"}] [{"name":"改變拷貝數組","koro":"改變拷貝數組"}] ~~~ 原因在定義上面說過了的：`slice()`是淺拷貝，對于復雜的數據類型淺拷貝，拷貝的只是指向原數組的指針，所以無論改變原數組，還是淺拷貝的數組，都是改變原數組的數據。 **深拷貝** ~~~ this.brandsAss = JSON.parse(JSON.stringify(res.brands))   ~~~ 5. **cancat** 定義：方法用于合并兩個或多個數組，返回一個新數組。語法： var newArr =oldArray.concat(arrayX,arrayX,......,arrayX) 參數： `arrayX`（必須）：該參數可以是具體的值，也可以是數組對象。可以是任意多個。 eg1: ~~~ let a = [1, 2, 3]; let b = [4, 5, 6]; // 連接兩個數組 let newVal = a.concat(b); // [1,2,3,4,5,6] // 連接三個數組 let c = [7, 8, 9] let newVal2 = a.concat(b, c); // [1,2,3,4,5,6,7,8,9] // 添加元素 let newVal3 = a.concat('添加元素',b, c,'再加一個'); // [1,2,3,"添加元素",4,5,6,7,8,9,"再加一個"] // 合并嵌套數組會淺拷貝嵌套數組 let d = [1,2 ]; let f = [3,[4]]; let newVal4 = d.concat(f); // [1,2,3,[4]] ~~~ ES6擴展運算符...合并數組：因為ES6的語法更簡潔易懂，所以現在合并數組我大部分采用...來處理，...運算符可以實現cancat的每個栗子，且更簡潔和具有高度自定義數組元素位置的效果。 ~~~ let a = [2, 3, 4, 5] let b = [ 4,...a, 4, 4] console.log(a,b); // [2, 3, 4, 5] [4,2,3,4,5,4,4] ~~~ 更多關于擴展符的詳細內容移步阮一峰大神的[ECMAScript 6 入門](http://es6.ruanyifeng.com/#docs/array#%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6) 6. **indexOf() 查找數組是否存在某個元素，返回下標** 定義：返回在數組中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。語法： array.indexOf(searchElement,fromIndex) 參數: `searchElement`(必須):被查找的元素 `fromIndex`(可選):開始查找的位置(不能大于等于數組的長度，返回-1)，接受負值，默認值為0。嚴格相等的搜索: 數組的`indexOf`搜索跟字符串的`indexOf`不一樣,數組的`indexOf`使用嚴格相等===搜索元素，即數組元素要完全匹配才能搜索成功。 #### **注意：indexOf()不能識別NaN** eg: ~~~ let a = ['啦啦',2,4,24,NaN] console.log(a.indexOf('啦')); // -1 console.log(a.indexOf('NaN')); // -1 console.log(a.indexOf('啦啦')); // 0 ~~~ 使用場景： 1. [數組去重](https://juejin.im/post/5aad40e4f265da237f1e12ed#heading-10) 2. 根據獲取的數組下標執行操作，改變數組中的值等。 3. 判斷是否存在，執行操作。 7. **lastIndexOf() 查找指定元素在數組中的最后一個位置** 定義：方法返回指定元素,在數組中的最后一個的索引，如果不存在則返回 -1。（從數組后面往前查找）語法： arr.lastIndexOf(searchElement,fromIndex) 參數: `searchElement`(必須): 被查找的元素 `fromIndex`(可選): 逆向查找開始位置，默認值數組的長度-1，即查找整個數組。關于fromIndex有三個規則: 1、正值。如果該值大于或等于數組的長度，則整個數組會被查找。 2、負值。將其視為從數組末尾向前的偏移。(比如-2，從數組最后第二個元素開始往前查找) 3、負值。其絕對值大于數組長度，則方法返回 -1，即數組不會被查找。 ~~~ let a = ['OB',4,'Koro1',1,2,'Koro1',3,4,5,'Koro1']; // 數組長度為10 // let b = a.lastIndexOf('Koro1',4); // 從下標4開始往前找返回下標2 // let b = a.lastIndexOf('Koro1',100); // 大于或數組的長度查找整個數組返回9 // let b = a.lastIndexOf('Koro1',-11); // -1 數組不會被查找 let b = a.lastIndexOf('Koro1',-9); // 從第二個元素4往前查找，沒有找到返回-1 ~~~ 8. **ES7 includes() 查找數組是否包含某個元素返回布爾** 定義：返回一個布爾值，表示某個數組是否包含給定的值語法： array.includes(searchElement,fromIndex=0) 參數： `searchElement`(必須):被查找的元素 `fromIndex`(可選):默認值為0，參數表示搜索的起始位置，接受負值。正值超過數組長度，數組不會被搜索，返回false。負值絕對值超過長數組度，重置從0開始搜索。 includes方法是為了彌補indexOf方法的缺陷而出現的: 1. indexOf方法不能識別NaN 2. indexOf方法檢查是否包含某個值不夠語義化，需要判斷是否不等于-1，表達不夠直觀 eg: ~~~ let a = ['OB','Koro1',1,NaN]; // let b = a.includes(NaN); // true 識別NaN // let b = a.includes('Koro1',100); // false 超過數組長度不搜索 // let b = a.includes('Koro1',-3); // true 從倒數第三個元素開始搜索 // let b = a.includes('Koro1',-100); // true 負值絕對值超過數組長度，搜索整個數組 ~~~ #### **兼容性(MDN): chrome47, Firefox 43,Edge 14,Opera 34, Safari 9,IE 未實現。**