数组方法总结

数组方法总结

总结下数组方法的使用

---

一、toString()

作用：

将数组转成字符串

语法：

array.toString()

示例代码如下

var arr1 = ['yy', 'ww', 'cc', 'aa'];
var arr2 = [ 2, 3, 4, 5];
console.log(arr1.toString()); // yy,ww,cc,aa
console.log(arr2.toString()); // 2,3,4,5

二、join()

作用：

将数组转成字符串，且能插入特定字符

语法：

array.join('*')

示例代码如下

var arr1 = ['yy', 'ww', 'cc', 'aa'];
var arr2 = [ 2, 3, 4, 5];
console.log(arr1.join('*')); // yy*ww*cc*aa
console.log(arr2.join('%')); // 2%3%4%5

三、pop()

作用：

将数组最后一位删除，改变了原数组

语法：

array.pop('*')

示例代码如下

var arr1 = ['yy', 'ww', 'cc', 'aa'];
console.log(arr1.pop()); // aa
console.log(arr1); // ['yy', 'ww', 'cc'];

四、push()

作用：

将数组最后插入新的元素(可以是任意数据类型)，改变了原数组

语法：

array.push('*')

示例代码如下

//  这里我只列举了插入字符串，其实还能插入对象/数组等常见数据类型
var arr1 = ['yy', 'ww', 'cc', 'aa'];
var arr2 = [ 2, 3, 4, 5];
arr1.push('bb');
console.log(arr1); // ['yy', 'ww', 'cc', 'aa', 'bb']

五、shift()

作用：

将数组第一个元素删除，改变了原数组

语法：

array.push('*')

示例代码如下

var arr1 = ['yy', 'ww', 'cc', 'aa'];
arr1.shift();
console.log(arr1); // ['ww', 'cc', 'aa']

六、unshift()

作用：

将数组开头添加一个元素，改变了原数组

语法：

array.unshift('*')

示例代码如下

var arr1 = ['yy', 'ww', 'cc', 'aa'];
arr1.unshift('1');
console.log(arr1); // ["1", "yy", "ww", "cc", "aa"]

七、splice()

作用：

1.能删除数组中某一段元素
2.能增加数组元素
3.改变原数组

语法：

array.splice(m , n, ...)

参数m表示要删除（第一个）元素的索引值 (必填)
参数n表示要删除元素的长度（非必填，不填的情况下默认删除后面所有元素）
后面的参数，表示要增加的元素（非必填）
示例代码如下

var arr1 = ['yy', 'ww', 'cc', 'aa'];
var arr2 = [ 2, 3, 4, 5];
var arr3 = [ 'a', 'b', 'c'];
arr1.splice(1,2);
console.log(arr1); // ["yy", "aa"]
arr2.splice(1);
console.log(arr2); // [2]
arr3.splice(1, 1, 'd', 'e');
console.log(arr3); //  ["a", "d" , "e", "c"];

八、slice()

作用：

剪切出数组中某一片段，但不改变原数组

语法：

array.splice(m , n)

参数m表示要删除（第一个）元素的索引值 (必填)
参数n表示要删除（末位）元素的索引值（非必填，不填的情况下默认剪切后面所有元素）
示例代码如下

var arr1 = ['yy', 'ww', 'cc', 'aa'];
console.log(arr1.slice(1,2)); // ['ww']
console.log(arr1.slice(1)); // ['ww', 'cc', 'aa']
console.log(arr1); // ['yy', 'ww', 'cc', 'aa']

九、contact()

作用：

合并数组，生成新数组，但不改变原数组

语法：

array.contact(m ,...)

参数m表示要合并的数组变量 (必填)

示例代码如下

var arr1 = ['yy', 'ww', 'cc', 'aa'];
var arr2 = [ 2, 3, 4, 5];
var arr3 = arr1.concat(arr2);
console.log(arr3); // ["yy", "ww", "cc", "aa", 2, 3, 4, 5]

十、filter

数组的方法，用来过滤出符合条件的数据，并存入数组;filer 方法的参数方法里，我们可以加入正则的校验；筛选符合特定条件的数据
适用情形：

1. 筛选出符合条件的对象数组
2. 筛选出符合条件的数字数组
3. 筛选出符合条件的字符串数组

语法：

array.filter(function(currentValue, index, arr),thisValue)

currentValue： 必选。 当前元素
index：可选。当前元素所在的索引
arr: 可选。当前元素所在的数组
thisValue:可选。 传递给函数的值一般用 “this” 值。如果这个参数为空， “undefined” 会传递给 “this” 值
代码如下（示例）：我列举了筛选对象的示例代码；数字，字符串的筛选大同小异

let arra = [
    {age: 10, name: 'ywc'},
    {age: 20, name: 'fff'},
    {age: 30, name: 'ggg'},
    {age: 40, name: 'hhh'},
];
let theData = arra.filter((item) => { return item.age > 10});
console.log(theData); // 打印出年龄大于10的对象数据

小结： 通常情况下，我们只传function(currentValue)这个参数，如果需要对索引进行逻辑处理的话，可在function中增加index参数及相应逻辑代码。 thisValue 这个参数未见使用。该方法主要用于筛选符合条件的数据并以数组的形式返回

十一、find

和filter方法类似，只不过filter返回的是一个数组而find返回的是单个元素

语法：

array.find(function(currentValue, index, arr),thisValue)

currentValue： 必选。 当前元素
index：可选。当前元素所在的索引
arr: 可选。当前元素所在的数组
thisValue:可选。 传递给函数的值一般用 “this” 值。如果这个参数为空， “undefined” 会传递给 “this” 值

代码如下（示例）：

let arra = [
    {age: 10, name: 'ywc'},
    {age: 20, name: 'fff'},
    {age: 30, name: 'ggg'},
    {age: 40, name: 'hhh'},
];
let theData = arra.find((item, index , arr) => { 
    if (item.age === 20) {
        console.log(index); // 当前元素的索引值
        console.log(arr); //  当前元素所属的数组对象
    }
    return item.age > 10;
});
console.log(theData);  // {age: 20, name: 'fff'},

小结： 通常情况下，我们只传function(currentValue)这个参数，如果需要对索引进行逻辑处理的话，可在function中增加index参数及相应逻辑代码。thisValue 这个参数未见使用。该方法主要用于返回数组中符合条件的第一个元素。