arr數組的方法(js小知識)

arr數組的方法
  1. 檢測數組Array.isArray(value),如果是數組返回true,否則返回false
	if (Array.isArray(value)) {
		//do something...
	}
  1. 轉換方法 toString valueOf toLocaleString join
	var colors = ['red', 'green', 'blue'];
	// toString 返回由逗號分隔的數組項
    console.log(colors.toString()) // red,green,blue
	// valueOf 返回數組
    console.log(colors.valueOf()) // ["red", "green", "blue"]
	// toLocaleString 返回由逗號分隔的數組項
    console.log(colors.toLocaleString()) // red,green,blue
	// join 不穿參數時,返回由逗號分隔的數組項
	// 傳參數時,返回有參數分隔的數組項
    console.log(colors.join()) // red,green,blue
    console.log(colors.join('||')) // red||green||blue
  1. 棧方法 push pop
	// push 接受任意數量的參數,把他們逐個添加在末尾,返回修改後的數組長度。
    var colors = ['red', 'green', 'blue'];
    var pushLength = colors.push('yellow', 'green');
    console.log(pushLength); // 5
    console.log(colors); // ['red', 'green', 'blue','yellow', 'green']

    // pop 從數組末尾移除最後一項,並返回移除的值。
    var colors = ['red', 'green', 'blue'];
    var popitem = colors.pop();
    console.log(popitem); // 'bule'
    console.log(colors); // ['red', 'green']
    
  1. 隊列方法 shift unshift
    // shift 從數組起始移除第一項,並返回移除的值。
    var colors = ['red', 'green', 'blue'];
    var shiftitem = colors.shift(); 
    console.log(shiftitem); // 'red'
    console.log(colors); // ['green', 'blue']
    
    // unshift 從數組起始添加任意數量的項,並返回修改後數組的長度。
    var colors = ['red', 'green', 'blue'];
    var unshiftitem = colors.unshift('yellow', 'green'); 
    console.log(unshiftitem); // 5
    console.log(colors); // ['yellow', 'green', 'red', 'green', 'blue']
  1. 重排序方法reverse sort
    // reverse() 將反轉數組項的順序
    var arr = [1, 2, 3, 4];
    arr.reverse();
    console.log(arr); // [4, 3, 2, 1]

    // sort() 一般配合函數compare使用,將數組項進行排序。
    var arr = [9, 11, 25, 5, 45]
    function compare(value1, value2) {
      if (value1 < value2) {
        return -1;
      } else if (value1 > value2) {
        return 1;
      } else {
        return 0;
      }
    }
    arr.sort();
    console.log(arr); // [11, 25, 45, 5, 9]
    arr.sort(compare);
    console.log(arr); // [5, 9, 11, 25, 45]
  1. 操作方法concat slice splice
    // concat 不傳參數的時候,會複製數組到返回新的副本
    // 在傳遞參數的時候,如果參數時數組的話,會將每一項都添加到數組的末尾,如果不是數組,就直接添加,最後返回一個新的數組。
    var colors1 = ['red', 'green', 'blue'];
    var colors2 = colors1.concat();
    console.log(colors2); // ["red", "green", "blue"]
    var colors3 = colors1.concat(colors2);
    console.log(colors3); // ["red", "green", "blue", "red", "green", "blue"] 
    var colors4 = colors1.concat('yellow', ['gray', 'black']);
    console.log(colors4); // ["red", "green", "blue", "yellow", "gray", "black"]

    // slice可以接受一或者兩個參數,即要返回的起始和結束位置。
    // 如果是一個參數,即從當前位置,到數組末尾。
    // 如果是兩個參數,即從開始位置,到結束位置,不包括結束位置。
    var colors1 = ['red', 'green', 'blue'];
    var colors2 = colors1.slice(1);
    console.log(colors2); // ['green', 'blue']
    var colors3 = colors1.slice(1,2)
    console.log(colors3) // ['green']

    // splice可以接受兩個或多個參數,第一個參數是刪除位置,第二個參數是刪除項,後面參數是需要在被刪除的位置添加的項,最後並返回被刪除項組成的數組
    var colors1 = ['red', 'green', 'blue'];
    var colors2=  colors1.splice(0, 1);
    console.log(colors2); // ['red']
    console.log(colors1); // ['green', 'blue']

    var colors1 = ['red', 'green', 'blue'];
    var colors2=  colors1.splice(0, 1, 'white', 'black');
    console.log(colors2); // ['red']
    console.log(colors1); // ['white', 'black', 'green', 'blue']
  1. 位置方法indexOf lastIndexOf
   	// indexOf() 和 lastIndexOf() 。這兩個方法都接收兩個參數:要查找的項和(可選的)表示查找起點位置的索引。
    // indexOf() 方法從數組的開頭(位置 0)開始向後查找
    // lastIndexOf() 方法則從數組的末尾開始向前查找。
    var arr =[1, 2, 3, 4, 5, 4, 3, 2, 1]
    var index = arr.indexOf(4) // 3
    console.log(index) // 3
    var index1 =arr.indexOf(4, 4) // 5
    console.log(index1) // 5
    var index2 = arr.lastIndexOf(4) // 3
    console.log(index2) // 5
    var index3 =arr.lastIndexOf(4, 4) 
    console.log(index3) // 3
  1. 迭代方法every some filter map forEach
    // every 對數組中的每一項運行給定函數,如果該函數對每一項都返回 true ,則返回 true
    var arr = [1,2,3,4,5];
    var everyArrF = arr.every(function(item, index, array){
      return (item > 3);
    })
    console.log(everyArrF) // false
    var everyArrT = arr.every(function(item, index, array){
      return (item > 0);
    })
    console.log(everyArrT) // true

    // some 對數組中的每一項運行給定函數,如果該函數對任一項返回 true ,則返回 true 
    var arr = [1,2,3,4,5];
    var someArrT = arr.some(function(item, index, array){
      return (item > 3);
    })
    console.log(someArrT) // true

    // filter 對數組中的每一項運行給定函數,返回該函數會返回 true 的項組成的數組
    var arr = [1,2,3,4,5];
    var filterArr = arr.filter(function(item, index, array){
      return (item > 3);
    })
    console.log(filterArr) // [4, 5]

    // map 對數組中的每一項運行給定函數,返回每次函數調用的結果組成的數組。
    var arr = [1,2,3,4,5];
    var mapArr = arr.map(function(item, index, array){
      return (item * 2);
    })
    console.log(mapArr) // [2, 4, 6, 8, 10]

    // forEach 對數組中的每一項運行給定函數。這個方法沒有返回值
    var arr = [1,2,3,4,5];
    var mapArr = arr.forEach(function(item, index, array){
      // do something...
    })
  1. 歸併方法reduce reduceRight
    // reduce reduceRight 這兩個方法都會迭代數組的所有項,然後構建一個最終返回的值
    // 函數接收 4 個參數:前一個值、當前值、項的索引和數組對象。
    var values = [1,2,3,4,5];
    var sum = values.reduce(function(prev, cur, index, array){
      return prev + cur;
    });
    console.log(sum); //15
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章