摘要:返回值包含被刪除項目的新數組,如果有的話。該參數可指定返回的數組的最大長度。返回值一個字符串數組。該數組是通過在指定的邊界處將字符串分割成子串創(chuàng)建的。元素是通過指定的分隔符進行分隔的。。也是改變原數組,返回的是刪除的值。
數組擴展運算符
含義:
擴展運算符是三個點(...);好比rest參數的逆運算,將一個數組轉為用逗號分割的參數序列。
console.log(...[1,2,3]); //1,2,3 console.log(1,...[2,3,4],5); //1,2,3,4,5 [...document.querySelectorAll("div")] //[,]該運算符主要用于函數調用。
function pushs(array,...items){ array.push(...items); return array; } console.log(pushs([1,2],...[4,5,6])); //[1, 2, 4, 5, 6] function add(x,y){ return x+y; } const numbers = [4,38]; var b = add(...numbers); //b=42擴展運算符與正常的函數可以結合使用,非常靈活。
function f(v,w,x,y,z){} const args = [0,1]; f(-1,...args,2,...[3]);擴展運算符后面還可以放置表達式
const arr =[ ...(x>0?["a"]:[]), "b", ]如果擴展運算符后面是一個空數組,則不產生任何效果。
[...[],1]注意:擴展運算符如果放在括號中,JavaScript引擎就會認為是函數調用,否則就會報錯。
(...[1,2]); console.log((...[1,2]))上面兩種情況都會報錯,因為擴展運算符所在的括號不是函數調用,而console.log(...[1,2])就不會報錯,因為這時是函數的調用。
替代函數的apply方法
//ES5的寫法 function f(x,y,z){ //... } var args = [0,1,2]; f.apply(null,args); //ES6的寫法 function f(x,y,z){ //... } let args = [0,1,2]; f(...args);下面是擴展運算符取代apply方法的一個實際的例子,應用Math.max方法,簡化求出一個數組最大元素的寫法。
// ES5 的寫法 Math.max.apply(null, [14, 3, 77]) // ES6 的寫法 Math.max(...[14, 3, 77]) // 等同于 Math.max(14, 3, 77);另一個例子是通過push函數,將一個數組添加到另一個數組的尾部。
//ES5的寫法 var arr1 = [0,1,2]; var arr2 = [3,4,5]; Array.prototype.push.apply(arr1,arr2); //ES6的寫法 let arr1 = [0,1,2]; let arr2 = [3,4,5]; arr1.push(...arr2);下面是另一個例子。
//ES5 new (Date.bind.apply(Date,[null,2015,1,1])); //ES6 new Date(...[2015,1,1])擴展運算符的應用
(1)復制數組
const a1 = [1,2]; //寫法一 const a2 = [...a1]; //寫法二 const [...a2] = a1; //上面的兩種寫法,a2都是a1的克隆,改變互相不影響。(2)合并數組
const a1 = [{ foo: 1 }]; const a2 = [{ bar: 2 }]; const a3 = a1.concat(a2); const a4 = [...a1, ...a2]; a3[0] === a1[0] // true a4[0] === a1[0] // true //上面代碼中,a3和a4是用兩種不同方法合并而成的新數組,但是它們的成員都是對原數組成員的引用,這就是淺拷貝。如果修改了原數組的成員,會同步反映到新數組。 (3)與解構賦值結合 擴展運算符可以與解構賦值結合起來,用于生成數組。//ES5
a=list[0],rest=list.slice(1);
//ES6
[a,...rest] = listconst [first, ...rest] = [1, 2, 3, 4, 5]; first // 1 rest // [2, 3, 4, 5] const [first, ...rest] = []; first // undefined rest // [] const [first, ...rest] = ["foo"]; first // "foo" rest // []如果將擴展運算符用于數組賦值,只能放在參數的最后一位,否則會報錯。
const [...butLast, last] = [1, 2, 3, 4, 5]; // 報錯 const [first, ...middle, last] = [1, 2, 3, 4, 5]; // 報錯如何從數組中按順序取每5個元素為一組放到新數組中,最后不夠5個也存為一個數組//1. var SplitArray = function(cont,arr){ var newArr =[]; var f; for(f=0;f斐波那契數列 //1.使用generator函數和for...of實現 function*fibonaci(){ let[prev,curr] = [0,1]; for(;;){ yield curr; [prev,curr] = [curr,prev+curr]; } } for(let n of fibonaci()){ if(n>1000)break; console.log(n); } //2.遞歸方法基礎上進行尾調用優(yōu)化: function fb(n,res1=1,res2=1){ if(n<=2){ return res2; }else{ return fb(n-1,res2,res1+res2); } } var a = fb(10); //3.迭代 function fb(n){ var res1=1; var res2=1; var sum = res2; for(var i=2;islice()和splice()區(qū)別 slice(start,end)
start:必需。規(guī)定從何處開始選取。如果是負數,那么它規(guī)定從數組尾部開始算起的位置。也就是說,-1指最后一個元素,-2指倒數第二個元素,以此類推。
end:可選。規(guī)定從何處結束選取。該參數是數組片段結束處的數組下標。如果沒有指定該參數,那么切分的數組包含從start到數組結束的所有元素。如果這個參數是負數,那么它規(guī)定的是從數組尾部開始算起的元素。
返回一個新的數組,包含從start到end(不包括該元素)的arrayObject中的元素。
注意:該方法并不會修改數組,而是返回一個子數組。如果想刪除數組中的一段元素,應該使用方法Array.splice().var a =[1,2,3,4,5,6] //如果不傳入參數二,那么將從參數一的索引位置開始截取,一直到數組尾 console.log(a.slice(0,3))//1,2,3 console.log(a.slice(2))//3,4,5,6 //如果兩個參數中的任何一個是負數,array.length會和它們相加,試圖讓它們成為非負數,舉例說明: //當只傳入一個參數,且是負數時,length會與參數相加,然后再截取 //當只傳入一個參數,是負數時,并且參數的絕對值大于數組length時,會截取整個數組 console.log(a.slice(-1))//6 console.log(a.slice(-2))//5,6 console.log(a.slice(-3))//4,5,6 //當傳入兩個參數一正一負時,length也會先于負數相加后,再截取 console.log(a.slice(-3,6))//4,5,6 console.log(a.slice(-3,5))//4,5 console.log(a)//1,2,3,4,5,6 //當傳入一個參數,大于length時,將返回一個空數組splice()方法向/從數組中添加/刪除項目,然后返回被刪除的項目。
該方法會改變原始數組。
arrayObject.splice(index,howmany,item1,...,itemX)
index:必需,整數,規(guī)定添加/刪除項目的位置,使用負數可從數組結尾處規(guī)定位置。
howmany:必需。要刪除的項目數量。如果設置為0,則不會刪除項目。
item1,...,itemX:可選。向數組添加的新項目。
返回值:包含被刪除項目的新數組,如果有的話。var arr = ["a","b","c","d","e"]; // console.log(arr.splice(1,2));//[b,c] // console.log(arr);//[a,d,e] // console.log(arr.splice(1,2,"bb","cc"));//[b,c] // console.log(arr)//[a,bb,cc,d,e] console.log(arr.splice(1,2,"bb","cc","dd","ee"));//[b,c] console.log(arr)//["a", "bb", "cc", "dd", "ee", "d", "e"]split與joinsplit()方法用于把一個字符串分割成字符串數組。stringObject.split(separator,howmany)。
map遍歷
separator:必需。字符串或正則表達式,從該參數指定的地方分割stringObject。
howmany:可選。該參數可指定返回的數組的最大長度。如果設置了參數,返回的子串不會多于這個參數指定的數組。如果沒有設置該參數,整個字符串都會被分割,不考慮它的長度。
返回值:一個字符串數組。該數組是通過在separator指定的邊界處將字符串stringObject分割成子串創(chuàng)建的。返回的數組中的字串不包括separator自身。
但是,如果separator是包含子表達式的正則表達式,那么返回的數組中包括與這些子表達式匹配的字串(但不包括與整個正則表達式匹配的文本)
join()方法用于把數組中的所有元素放入一個字符串。元素是通過指定的分隔符進行分隔的。
arrayObject.join(separator)。
separator:可選。指定要使用的分隔符。如果省略該參數,則使用逗號作為分隔符。
返回值:返回一個字符串。該字符串是通過把arrayObject的每個元素轉換為字符串,然后把這些字符串鏈接起來,在兩個元素之間插入separator字符串而生成的。array.map(callback,[thisObject]);
map方法的作用不難理解,映射,也就是原數組被映射成對應新數組。下面這個例子是數值項求平方:var data = [1,2,3,4]; var arrayOfSquares = data.map(function(item){return item*item}); alert(arrayOfSquares)//1,4,9,16callback需要有return值,如果沒有,就像下面這樣:
var data = [1,2,3,4]; var arrayOfSquares = data.map(function(){}); arrayOfSquares.forEach(console.log());concat()Array.concat(),創(chuàng)建并返回一個新數組。
var a = [1,2,3]; var b = a.concat(4,5); var c = a.concat([4,5]); console.log(a);//[1,2,3]; console.log(b);//[1,2,3,4,5]; console.log(c);//[1,2,3,4,5];這個方法還可以用來復制數組。
var a = [1,2,3]; var b = a.concat(); console.log(a)//[1,2,3]; console.log(b)//[1,2,3];push()方法與pop()方法push()方法在數組的尾部添加一個或多個元素,并返回數組的新長度。注意的是,改變的是原數組的值,返回的是新數組的長度。
unshift()方法與shift()方法
pop()方法刪除數組的最后一個元素,并返回它的刪除值。也是改變原數組,返回的是刪除的值。unshift()方法類似于push()不同的是,它是在數組的頭部添加,其它都一樣。
toString()和toLocaleString()
shift()方法則類比pop()方法。toString()方法將每個元素轉化為字符串,類似于不傳參數的join()方法。
forEach()方法,從頭至尾遍歷數組,為每個元素調用指定的函數
toLocaleString()方法是toString()的本地化版本。var a =[1,2,3,4,5]; var sum = 0; a.forEach(function(value){ sum+=value; }) console.log(sum);//sum = 15;filter()方法,返回的是調用數組的一個子集var a = [1,2,3,4,5]; var b = a.filter(function(value){ return value > 3; }) console.log(b)//返回[4,5]; 注意:如果使用map()方法,返回的是[false,false,false,true,true] filter()會跳過悉數數組中缺少的元素,它的返回數組總是稠密的。所以可以用以下方法來壓縮稀疏數組的空缺。 var a = [1,2,,,5]; var b = a.filter(function(value){ return true; }) console.log(b)//返回[1,2,5]every()和some()every()方法是只有數組中所有元素都滿足某個條件才會返回true;some()方法是只要有滿足條件的值,就返回true。
var a = [1,2,3,4,5]; a.every(function(value){ return value <10; })//true a.every(function (value){ return value%2 ===0; })//falseindexOf()和lastIndexOf()這兩個方法都是用來搜索整個數組中具有給定值的元素,返回找到的第一個元素的索引,如果沒找到,則返回-1.區(qū)別在于indexOf()從頭至尾搜索,而后者則是反向搜索。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://www.ezyhdfw.cn/yun/99567.html
相關文章
JavaScript 實現數組更多的高階函數
摘要:實現數組更多的高階函數吾輩的博客原文場景雖說人人平等,但有些人更加平等。若是有一篇適合萌新閱讀的自己實現數組更多操作的文章,情況或許會發(fā)生一些變化。類似于的初始值,但它是一個函數,避免初始值在所有分組中進行累加。 JavaScript 實現數組更多的高階函數 吾輩的博客原文: https://blog.rxliuli.com/p/fc... 場景 雖說人人平等,但有些人更加平等。 為...
Vue.js 實踐(2):實現多條件篩選、搜索、排序及分頁的表格功能
摘要:基礎布局的中主要為部分,分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數據的。這也是前瞻發(fā)布之后,提出廢棄部分功能后許多人反應較為強烈的原因。 與上周的第一篇實踐教程一樣,在這篇文章中,我將繼續(xù)從一種常見的功能——表格入手,展示Vue.js中的一些優(yōu)雅特性。同時也將對filter功能與computed屬性進行對比,說明各自的適用場景,也為vue2.0版本中即將刪除的部...
Vue.js 實踐(2):實現多條件篩選、搜索、排序及分頁的表格功能
摘要:基礎布局的中主要為部分,分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數據的。這也是前瞻發(fā)布之后,提出廢棄部分功能后許多人反應較為強烈的原因。 與上周的第一篇實踐教程一樣,在這篇文章中,我將繼續(xù)從一種常見的功能——表格入手,展示Vue.js中的一些優(yōu)雅特性。同時也將對filter功能與computed屬性進行對比,說明各自的適用場景,也為vue2.0版本中即將刪除的部...
深入探究immutable.js的實現機制(一)
摘要:本文會集合多方資料以及我自己的一些理解,深入一些探究實現機制。位分區(qū)實際上是數字分區(qū)的一個子集,所有以的整數次冪,,,,為基數的數字分區(qū)前綴樹,都可以轉為位分區(qū)。其實舉個例子最好理解比如數字的二進制形式是,這是一個位的二進制數。 Immutable.js 采用了持久化數據結構和結構共享,保證每一個對象都是不可變的,任何添加、修改、刪除等操作都會生成一個新的對象,且通過結構共享等方式大幅...
發(fā)表評論
0條評論
閱讀 1418·2021-09-01 10:30
閱讀 2349·2021-07-23 10:38
閱讀 1051·2019-08-29 15:06
閱讀 3293·2019-08-29 13:53
閱讀 3420·2019-08-26 11:54
閱讀 1984·2019-08-26 11:38
閱讀 2515·2019-08-26 10:29
閱讀 3265·2019-08-23 18:15