前端数组的基本操作

既然讲到了数组,那就必须想到了数组的增删改查。那就首先讲数组的增删改查。

1.增删改查

1>删 

shift() 删除数组的第一个元素并返回删除的元素(改变原数组)
pop() 删除数组的最后一个元素并返回删除的元素(改变原数组)
splice() 删除元素,并向数组添加新元素。(改变原数组)

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>增

push() 向数组的末尾添加一个或更多元素,并返回新的长度。(改变原数组)
unshift() 向数组的开头添加一个或更多元素,并返回新的长度。(改变原数组)
splice() 删除元素,并向数组添加新元素。(改变原数组)不能为负数

 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>查

slice() 从某个已有的数组返回选定的元素(不改变原数组)。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>改

splice() 删除元素,并向数组添加新元素。(改变原数组)

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

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

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

2.常用的其他方式操作数组

sort() 对数组的元素进行排序.(返回新数组)
reverse() 颠倒数组中元素的顺序。(返回新数组)
valueOf() 返回数组对象的原始值
toSource()

返回该对象的源代码。

toLocaleString() 把数组转换为本地数组,并返回结果。(常用与本地时间转换)

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"];

在这里感谢大家,希望大家多多支持。点波关注再走吧,如果帮到你了,也可以给个赞哦。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章