1. 程式人生 > >前端陣列的基本操作

前端陣列的基本操作

既然講到了陣列,那就必須想到了陣列的增刪改查。那就首先講陣列的增刪改查。

1.增刪改查

1>刪 

刪除陣列的第一個元素並返回刪除的元素(改變原陣列)
pop() 刪除陣列的最後一個元素並返回刪除的元素(改變原陣列)
刪除元素,並向陣列新增新元素。(改變原陣列)

var arr= [0, 1, 2, 3, 4, 5]

var f1= arr.shift();

console.log(f1);// 0

console.log(arr);//[1, 2, 3, 4, 5]

............................................................

var arr= [0, 1, 2, 3, 4, 5]

var f2= arr.pop();//5

console.log(f2);// [0, 1, 2, 3, 4]

.............................................................

var arr= [0, 1, 2, 3, 4, 5]

var f3= arr.splice(2,1);//“2”從下標為2開始,“1”刪除一個  splice(index,howmany,[item])

console.log(f3);// [2]

console.log(arr);//[1, 2, 3, 4, 5]

.............................................................................

方法1:建構函式進行刪除陣列中的元素(splice())

function remove(arr, val) {
   for (var i = 0; i < arrq.length; i++) {
        if (arr[i] == val) {
            arr.splice(i, 1);
            break;
        }
   }
}
var somearray = ["mon", "tue", "wed", "thur"]
removeByValue(somearray, "wed"); 
console.log(somearray);// ["mon", "tue", "thur"]

方法2:陣列物件增加相應的的方法刪除(splice())

Array.prototype.remove = function(val) {
   for (var i = 0; i < this.length; i++) {
       if (this[i] == val) {
           this.splice(i, 1);
           break;
       }
   }
}
var somearray = ["mon", "tue", "wed", "thur"]
somearray.remove("tue");
console.log(somearray);//["mon", "wed", "thur"]

方法3:通過元素的索引去刪除這個元素(indexOf(),splice())

Array.prototype.remove = function(val) { 
    var index = this.indexOf(val); 
    if (index > -1) { 
        this.splice(index, 1); 
    } 
}; 
var arr = ['abd', 'abd', 'abe', 'abf']
arr.remove('abd');
console.log(arr);//["abd", "abe", "abf"]

方法4:使用delete刪除,陣列長度不變,有一項為undefined

var arr = [1, 2, 3, 4, 5];
delete arr[1];//刪除陣列中下標為1的專案,代替為undefined
console.log(arr); //[1, empty, 3, 4, 5]

2>增

向陣列的末尾新增一個或更多元素,並返回新的長度。(改變原陣列)
向陣列的開頭新增一個或更多元素,並返回新的長度。(改變原陣列)
刪除元素,並向陣列新增新元素。(改變原陣列)不能為負數

 var arr = [1, 2, 3, 4, 5, 6]
 var f5 = arr.push('a', 'b');
 console.log(f5); //8
 console.log(arr); // [1, 2, 3, 4, 5, 6, "a", "b"]

.....................................................................................

var arr = [1, 2, 3, 4, 5, 6]

var f5 = arr.unshift('a', 'b'); 

console.log(f5); //8

console.log(arr); // [1, 2, 3, 4, 5, 6, "a", "b"]

...........................................................................................

var arr = [1, 2, 3, 4, 5, 6]

var f5 = arr.splice(2,0,'a', 'b'); //從下標為2開始,刪除0個,向其中新增一個或多個

console.log(arr); // [1, 2, "a", "b", 3, 4, 5, 6]

3>查

從某個已有的陣列返回選定的元素(不改變原陣列)。splice(start,end);值可以為負數
indexOf() 返回某個指定的字串值在字串中首次出現的位置的下標。

var arr = ['a', 'b', 'c', 'd','a'];

var f2 = arr.indexOf('a');

console.log(f2);//0

var f3=arr.indexOf('a',2);

console.log(f3);//4 從下標為2開始查詢 ‘a’,找到則輸出‘a'的下標

var f4 = arr.slice(2, 4);//從陣列中找到下標值以,開頭->結尾,輸出你中間項(可以為負數:-1為倒數第一,-2為倒數第二)

console.log(f4); //

方法1:使用函式判斷取得下標

function search(arr, item) {
   var index = -1; // 先定義一個下標
      arr.forEach(function(res, i) { // 元素  下標
        if (res === item && index === -1) {
            index = i;
        }
     );
  return index;
};
var arr = [1, 2, 3, 4, 5, 6];
var f5 = search(arr, 4)
console.log(f5);//3

方法2:簡單的寫法 ,在支援indexOf的瀏覽器執行

function search(arr,item) {
    return arr.indexOf(item); // 直接返回index下標
}     
var arr = [1, 2, 3, 4, 5, 6];
var f5 = search(arr, 4);
console.log(f5);//3

方法3:在陣列中查詢所有出現的x,並返回一個包含匹配索引的陣列

function findall(arr, x) {
    var results = [],
    len = a.length,
    pos = 0;
    while (pos < len) {
        pos = a.indexOf(x, pos);
        if (pos === -1) { //未找到就退出迴圈完成搜尋
           break;
        }
        results.push(pos); //找到就儲存索引
        pos += 1; //並從下個位置開始搜尋
    }
    return results;
}

var arr = [1, 2, 3, 1, 4, 1, 4, 1];
var f1=findall(arr, 1); //返回[0,3,5,7]
console.log(f1);//[0, 3, 5, 7]

4>改

刪除元素,並向陣列新增新元素。(改變原陣列)

var arr = ['a', 'b', 'c', 'd', 'a'];

arr.splice(1, 2, "f", "h");

console.log(arr);//["a", "f", "h", "d", "a"]

2.常用的其他方式運算元組

對陣列的元素進行排序.(返回新陣列)
顛倒陣列中元素的順序。(返回新陣列)
把陣列轉換為本地陣列,並返回結果。(常用與本地時間轉換)

var arr = [1, 2, 5, 4, 8, 9, 6];

var f1 = arr.sort();

console.log(f1);//[1, 2, 4, 5, 6, 8, 9]

var f2 = f1.reverse();

console.log(f2);//[9, 8, 6, 5, 4, 2, 1]

var f3 = arr.valueOf();

console.log(f3)//9, 8, 6, 5, 4, 2, 1]

var date = new Date();

var f4 = date.toLocaleString();

console.log(f4)//2018/9/5 下午11:56:36

3.陣列轉字串操作

join() 用指定分隔符將陣列分割成字串並返回,預設為逗號分割。
toString()

將陣列轉化為字串

var arr = [1, 2, 5, 4, 8, 9, 6];

var f1 = arr.join();

console.log(f1);//9,8,6,5,4,2,1

var f2 = arr.toString();

console.log(f2);//9,8,6,5,4,2,1

4.字串轉陣列的操作

split() 將字串以某個符號分割成字串,並返回以陣列的形式展示。(必須要加預設分割符)

var str = 'abcdefg';

var f 1=str.split('');

console.log(f1);//["a", "b", "c", "d", "e", "f", "g"];

在這裡感謝大家,希望大家多多支援。點波關注再走吧,如果幫到你了,也可以給個贊哦。
版權宣告:版權所有,轉載請註明原址。 https://blog.csdn.net/weixin_41316842/article/details/82421864