js數(shù)組操作方法大全

  • 1)concat方法:不會(huì)改變?cè)瓟?shù)組徘公,會(huì)返回一個(gè)拼接后的新數(shù)組
  var arr1 = [1,2,3];
  var arr2 = [3,4];
  arr1.concat(arr2);
  console.log(arr1.length); // 3
  console.log(arr1); // [1, 2, 3]
  console.log(arr2); // [3, 4]
  console.log(arr1.concat(arr2)) // [1, 2, 3, 3, 4]
  • 2)slice方法:不會(huì)改變?cè)瓟?shù)組,會(huì)返回一個(gè)截取后的新數(shù)組
  var arr = [1,2,3,4,5,6];
  arr.slice(1,4);
  console.log(arr); // (6) [1, 2, 3, 4, 5, 6]
  console.log(arr.length); // 6
  console.log(arr.slice(1,4)); // (3) [2, 3, 4]
// slice方法的手動(dòng)實(shí)現(xiàn)研叫,不綁定到原型鏈上
  function my_slice(start, end) {
    var start = start || 0;
    var end = end || this.length; //this指向調(diào)用的對(duì)象锤窑,當(dāng)用了call后,能夠改變this的指向嚷炉,也就是指向傳進(jìn)來的對(duì)象渊啰,這是關(guān)鍵
    var result = [];
    for (var i = start; i < end; i++) {
      result.push(this[i]);
    }
    return result;
  }
  arr = [1, 2, 3, 4, 5, 6];
  console.log(my_slice.call(arr)); // [1, 2, 3, 4, 5, 6]
  console.log(my_slice.call(arr, 1, 4)); // [2, 3, 4]
  console.log(my_slice.call(arr, 1, 6)); // [2, 3, 4, 5, 6]
// // slice方法的手動(dòng)實(shí)現(xiàn),綁定到原型鏈上
  Array.prototype.my_slice = function(start, end) {
    var result = [];
    var start = start || 0;
    var end = end || this.length;
    for (var i = start; i < end; i++) {
      result.push(this[i]);
    }
    return result;
  }

  var arr = [1,2,3,4,5,6];
  console.log(arr.my_slice()); // [1, 2, 3, 4, 5, 6]
  console.log(arr.my_slice(1,4)); // [2, 3, 4]
  console.log(arr.my_slice(1,6)); // [2, 3, 4, 5, 6]
  • 3)join方法:不會(huì)改變?cè)瓟?shù)組申屹,會(huì)返回一個(gè)字符串
  var arr = [1,2,3,4,5];
  arr.join('-');
  console.log(arr); // [1, 2, 3, 4, 5]
  console.log(arr.length); // 5
  console.log(arr.join('-')); // '1-2-3-4-5'
  • 4)push/pop方法:會(huì)改變?cè)瓟?shù)組
  var arr = [1, 2, 3, 4, 5];
  arr.push(6);
  console.log(arr); // (6) [1, 2, 3, 4, 5, 6]
  console.log(arr.push(7)); // 7
  console.log(arr); // (7) [1, 2, 3, 4, 5, 6, 7]
  arr.pop();
  console.log(arr); // (6) [1, 2, 3, 4, 5, 6]
  console.log(arr.pop()); // 6
  • 5)shift/unshift方法:會(huì)改變數(shù)組
  var arr = [1,2,3,4,5];
  arr.shift();
  console.log(arr); // (4) [2, 3, 4, 5]
  console.log(arr.length); // 4
  arr.unshift(6);
  console.log(arr); // (5) [6, 2, 3, 4, 5]
  console.log(arr.length); // 5
  • 6)sort方法:會(huì)改變數(shù)組
  var arr = [21, 1, 3, 45, 2];
  arr.sort();
  console.log(arr); // (5) [1, 2, 21, 3, 45]
  arr.sort(function(a, b) {
    if (a < b) {
      return -1;
    } else if (a > b) {
      return 1;
    } else {
      return 0;
    }
  })
  console.log(arr); // (5) [1, 2, 3, 21, 45]
  • 7)reverse方法:會(huì)改變數(shù)組
  var arr = [21, 1, 3, 45, 2];
  arr.reverse();
  console.log(arr); // (5) [2, 45, 3, 1, 21]
  • 8)splice方法:會(huì)改變數(shù)組绘证,并以數(shù)組形式返回被刪除的部分,插入時(shí)返回空數(shù)組
  var arr = [1, 2, 3, 4, 5];
  console.log(arr.splice(1,3)); // (3) [2, 3, 4] 返回被刪除的數(shù)
  console.log(arr); // (2) [1, 5]
  var arr1 = [1,2,3,4,5];
  console.log(arr1.splice(1,0,7,8)); // [] 插入時(shí)返回空數(shù)組
  console.log(arr1); // (7) [1, 7, 8, 2, 3, 4, 5]
  var arr2 = [1,2,3,4,5];
  console.log(arr2.splice(1,1,7,8)); // [2] 返回被替換掉的數(shù)
  console.log(arr2); // (6) [1, 7, 8, 3, 4, 5]
  • 9)indexOf/lastIndexOf方法:不會(huì)改變數(shù)組哗讥,返回指定數(shù)值的數(shù)組下標(biāo)
  var arr = [1, 2, 3, 2, 5];
  console.log(arr.indexOf(2)); // 1 返回值為2的數(shù)組的下標(biāo)
  console.log(arr.indexOf(2,2)); // 3 第一個(gè)參數(shù)表示要查找的數(shù)嚷那,第二個(gè)參數(shù)表示查找起點(diǎn)位置的索引
  console.log(arr.indexOf(6)); // -1
  console.log(arr.lastIndexOf(2)); // 3 從數(shù)組的末尾開始向前查找,返回正序下標(biāo)
  console.log(arr.lastIndexOf(2,2)); // 1 從數(shù)組的末尾開始向前查找杆煞,返回正序下標(biāo)
  • 10)forEach方法:不會(huì)改變數(shù)組且方法沒有返回值
  var arr = [1, 2, 3, 2, 5];
  arr.forEach(function(a, index, array) { // 循環(huán)遍歷,對(duì)每一項(xiàng)運(yùn)行給定函數(shù),這個(gè)方法沒有返回值
  console.log(a, index, array === arr); // 參數(shù)分別為:遍歷的數(shù)組內(nèi)容,內(nèi)容對(duì)應(yīng)的數(shù)組索引,數(shù)組本身
    // 1 0 true
    // 2 1 true
    // 3 2 true
    // 2 3 true
    // 5 4 true
  })
  console.log(arr); // (5) [1, 2, 3, 2, 5]
  var arr = [1, 2, 3, 2, 5];
  var arr1 = arr.forEach(function(a) { // forEach方法沒有返回值
    return a * 2;
  })
  console.log(arr); // (5) [1, 2, 3, 2, 5]
  console.log(arr1); // undefined
  • 11)map方法:不會(huì)改變?cè)瓟?shù)組且返回一個(gè)新數(shù)組
  var arr = [1, 2, 3, 2, 5];
  var arr1 = arr.map(function(a) { // 對(duì)每一項(xiàng)運(yùn)行給定函數(shù)魏宽,返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組
    return a * 2;
  })
  console.log(arr); // (5) [1, 2, 3, 2, 5]
  console.log(arr1); // (5) [2, 4, 6, 4, 10]
  • 12)filter方法:不會(huì)改變?cè)瓟?shù)組,且返回一個(gè)新數(shù)組
  var arr = [1, 2, 3, 2, 5];
  var arr1 = arr.filter(function(a) { // 返回滿足過濾條件組成的數(shù)組
    return a > 2;
  })
  console.log(arr); // (5) [1, 2, 3, 2, 5]
  console.log(arr1); // (2) [3, 5]
  • 13)every方法:不會(huì)改變?cè)瓟?shù)組决乎,且返回一個(gè)布爾值
  var arr = [1, 2, 3, 2, 5];
  var arr1 = arr.every(function(a) { // 判斷數(shù)組中每一項(xiàng)都是否滿足條件队询,所有項(xiàng)都滿足條件才會(huì)返回true
    return a > 2;
  })
  console.log(arr); // (5) [1, 2, 3, 2, 5]
  console.log(arr1); // false
  • 14)some方法:不會(huì)改變?cè)瓟?shù)組,且返回一個(gè)布爾值
  var arr = [1, 2, 3, 2, 5];
  var arr1 = arr.some(function(a) { // 判斷數(shù)組中每一項(xiàng)都是否滿足條件构诚,只要有一項(xiàng)滿足條件就會(huì)返回true
    return a > 2;
  })
  console.log(arr); // (5) [1, 2, 3, 2, 5]
  console.log(arr1); // true
  • 15)reduce方法:不會(huì)改變?cè)瓟?shù)組娘摔,迭代數(shù)組的所有項(xiàng),然后構(gòu)建一個(gè)最終返回的值唤反,從數(shù)組的第一項(xiàng)開始凳寺,逐個(gè)遍歷到最后
  var arr = [1, 2, 3, 2, 5];
  // reduce方法有兩個(gè)參數(shù):在每一項(xiàng)上調(diào)用的函數(shù)和(可選的)作為歸并基礎(chǔ)的初始值
  // reduce方法的函數(shù)接收 4 個(gè)參數(shù):前一個(gè)值、當(dāng)前值彤侍、項(xiàng)的索引和數(shù)組對(duì)象
  // 這個(gè)函數(shù)返回的任何值都會(huì)作為第一個(gè)參數(shù)自動(dòng)傳給下一項(xiàng)
  // 第一次迭代發(fā)生在數(shù)組的第二項(xiàng)上肠缨,因此第一個(gè)參數(shù)是數(shù)組的第一項(xiàng),第二個(gè)參數(shù)是數(shù)組的第二項(xiàng)
  var sum = arr.reduce(function(pre, cur, index, array) { 
    return pre + cur;
  }, 10)
  console.log(arr); // (5) [1, 2, 3, 2, 5]
  console.log(sum); // 23
  • 16)reduceRight:不會(huì)改變?cè)瓟?shù)組盏阶,迭代數(shù)組的所有項(xiàng)晒奕,從數(shù)組的最后一項(xiàng)開始,向前遍歷到第一項(xiàng)
  var arr = [1, 2, 3, 2, 5];
  var sum = arr.reduceRight(function(pre, cur, index, array) { 
    return pre + cur;
  }, 10)
  console.log(arr); // (5) [1, 2, 3, 2, 5]
  console.log(sum); // 23
  • 17)fill:會(huì)改變?cè)瓟?shù)組,元素填充
// arr.fill(value, start, end)
  var arr = [1, 2, 3, 2, 5];
  arr.fill(1,2,4); // 用1填充數(shù)組中從起始索引到終止索引內(nèi)的全部元素
  console.log(arr); // (5) [1, 2, 1, 1, 5]
  • 18)find:不會(huì)改變?cè)瓟?shù)組脑慧,返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的值
  function big(element) {
    return element >= 2;
  }
  var arr = [1, 2, 3, 2, 5];
  var arr1 = arr.find(big); // 返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的值
  console.log(arr1); // 2 
  console.log(arr); // (5) [1, 2, 3, 2, 5]
  • 19)includes方法:用來判斷一個(gè)數(shù)組是否包含一個(gè)指定的值魄眉,返回 true或 false
  var arr = [1, 2, 3, 2, 5];
  console.log(arr.includes(2)); // true
  console.log(arr.includes(6)); // false
  • 20)toLocaleString:不會(huì)改變?cè)瓟?shù)組,返回一個(gè)字符串表示數(shù)組中的元素闷袒,數(shù)組中的元素將使用各自的 toLocaleString 方法轉(zhuǎn)成字符串坑律,這些字符串將使用一個(gè)特定語言環(huán)境的字符串(例如一個(gè)逗號(hào) “,”)隔開
  var arr = [11111111, 2222222];
  console.log(arr.toLocaleString()); // 11,111,111,2,222,222
  console.log(arr); // (2) [11111111, 2222222]
  • 21)toString:不會(huì)改變?cè)瓟?shù)組,返回一個(gè)字符串囊骤,表示指定的數(shù)組及其元素
  var arr = [1,2,3];
  arr.toString();
  console.log(arr.toString()); // '1,2,3'
  console.log(arr); // (3) [1, 2, 3]
  • 22)Array.from:將偽數(shù)組或可迭代對(duì)象(包括arguments Array,Map,Set,String…)轉(zhuǎn)換成數(shù)組對(duì)象
// arrayLike:想要轉(zhuǎn)換成數(shù)組的偽數(shù)組對(duì)象或可迭代對(duì)象
// mapFn (可選參數(shù)):如果指定了該參數(shù)晃择,新數(shù)組中的每個(gè)元素會(huì)執(zhí)行該回調(diào)函數(shù)
// thisArg (可選參數(shù)):可選參數(shù),執(zhí)行回調(diào)函數(shù) mapFn 時(shí) this 對(duì)象
// 返回值:一個(gè)新的數(shù)組實(shí)例
Array.from(arrayLike, mapFn, thisArg)

toString()方法與toLocalString()方法區(qū)別:

??????1)toLocalString()是調(diào)用每個(gè)數(shù)組元素的 toLocaleString() 方法也物,然后使用地區(qū)特定的分隔符把生成的字符串連接起來宫屠,形成一個(gè)字符串;

??????2)toString()方法獲取的是String(傳統(tǒng)字符串),而toLocaleString()方法獲取的是LocaleString(本地環(huán)境字符串)滑蚯;

??????3)如果你開發(fā)的腳本在世界范圍都有人使用浪蹂,那么將對(duì)象轉(zhuǎn)換成字符串時(shí)請(qǐng)使用toString()方法來完成;

??????4)LocaleString()會(huì)根據(jù)你機(jī)器的本地環(huán)境來返回字符串告材,它和toString()返回的值在不同的本地環(huán)境下使用的符號(hào)會(huì)有微妙的變化乌逐;

??????5)使用toString()是保險(xiǎn)的,返回唯一值的方法,它不會(huì)因?yàn)楸镜丨h(huán)境的改變而發(fā)生變化创葡;如果是為了返回時(shí)間類型的數(shù)據(jù)浙踢,推薦使用LocaleString();若是在后臺(tái)處理字符串灿渴,請(qǐng)務(wù)必使用toString()洛波;

###toString()、toLocaleString()骚露、valueOf()方法的區(qū)別
// JS Array
  var arr = [12421,22232,3333];
  console.log(arr.valueOf()); // (3) [12421, 22232, 3333] 返回?cái)?shù)組本身
  console.log(arr.toString()); // '12421,22232,3333' 把數(shù)組轉(zhuǎn)換為字符串蹬挤,并返回結(jié)果,每一項(xiàng)以逗號(hào)分割
  console.log(arr.toLocaleString()); // '12,421,22,232,3,333' 把數(shù)組轉(zhuǎn)換為本地?cái)?shù)組棘幸,并返回結(jié)果
// JS Boolean
  var boolean = new Boolean();
  console.log(boolean.valueOf()); // false 返回 Boolean 對(duì)象的原始值
  // 根據(jù)原始布爾值或者 booleanObject 對(duì)象的值返回字符串 "true" 或 "false",默認(rèn)為"false"
  console.log(boolean.toString()); // 'false'
  // Boolean對(duì)象沒有toLocalString()方法,但是在Boolean對(duì)象上使用這個(gè)方法也不會(huì)報(bào)錯(cuò)
// JS Math
console.log(Math.PI.valueOf()); // 3.141592653589793
// JS Number
  var num = new Number(11337);
  console.log(num.valueOf()); // 11337
  console.log(num.toString()); // '11337'
  console.log(num.toLocaleString()); // '11,337'
// JS String
  var str = 'fsflgs';
  console.log(str.valueOf()); // 'fsflgs'
  console.log(str.toString()); // 'fsflgs'
  console.log(str.toLocaleString()); // 'fsflgs'
// JS Date
  var date = new Date();
  console.log(date); // Thu Sep 13 2018 21:51:58 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
  console.log(date.toLocaleString()); // 2018/9/13 下午9:51:58

會(huì)改變?cè)瓟?shù)組的方法

pop焰扳、push、shift误续、unshift吨悍、fill、sort蹋嵌、reverse育瓜、splice

參考鏈接:
js數(shù)組方法大全
Javascript toString()、toLocaleString()栽烂、valueOf()三個(gè)方法的區(qū)別

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末躏仇,一起剝皮案震驚了整個(gè)濱河市恋脚,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌焰手,老刑警劉巖糟描,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異书妻,居然都是意外死亡船响,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門驻子,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人估灿,你說我怎么就攤上這事崇呵。” “怎么了馅袁?”我有些...
    開封第一講書人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵域慷,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我汗销,道長(zhǎng)犹褒,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任弛针,我火速辦了婚禮叠骑,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘削茁。我一直安慰自己宙枷,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開白布茧跋。 她就那樣靜靜地躺著慰丛,像睡著了一般。 火紅的嫁衣襯著肌膚如雪瘾杭。 梳的紋絲不亂的頭發(fā)上诅病,一...
    開封第一講書人閱讀 51,165評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音粥烁,去河邊找鬼贤笆。 笑死,一個(gè)胖子當(dāng)著我的面吹牛讨阻,可吹牛的內(nèi)容都是我干的苏潜。 我是一名探鬼主播,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼变勇,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼恤左!你這毒婦竟也來了贴唇?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤飞袋,失蹤者是張志新(化名)和其女友劉穎戳气,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體巧鸭,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瓶您,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了纲仍。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片呀袱。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖郑叠,靈堂內(nèi)的尸體忽然破棺而出夜赵,到底是詐尸還是另有隱情,我是刑警寧澤乡革,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布寇僧,位于F島的核電站,受9級(jí)特大地震影響沸版,放射性物質(zhì)發(fā)生泄漏嘁傀。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一视粮、第九天 我趴在偏房一處隱蔽的房頂上張望细办。 院中可真熱鬧,春花似錦蕾殴、人聲如沸蟹腾。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽娃殖。三九已至,卻和暖如春议谷,著一層夾襖步出監(jiān)牢的瞬間炉爆,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工卧晓, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留芬首,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓逼裆,卻偏偏與公主長(zhǎng)得像郁稍,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子胜宇,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容