前端中数组方法的总结

要想学好前端我们必须有一个好的态度和一个积极向上刻苦钻研的精神，最主要的就是把那些固定的知识点记住，然后我们再去把这些固定的知识灵活应用，就这样我们一步一步提升，接下来就让我们一起看看数组的方法吧：

数组： 有序的集合

定义数组：
var arr = [1, 2, 3, 4]; // (4) [1, 2, 3, 4]
var arr2 = new Array(4); // (4) [empty × 4] // 长度
var arr3 = new Array(1, 2, 3, 4); // (4) [1, 2, 3, 4]

数组的长度 (可读可写)

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

// 修改原数组长度

arr.length = 3;

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

数组的遍历方式

// 第一种遍历的方式

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

// 第二种遍历的方式 （会将数组定义的属性枚举出来）

for (var k in arr) {
    console.log(arr[k]);
}

数组方法

Array.join()
// 参数： 拼接符 默认为逗号
将数组中所有元素都转化为字符串并连接在一起，返回最后生成的字符串

var arr = [1, 2, 3, 4];
console.log(arr.join()); // '1,2,3,4'
console.log(arr.join('-')); // '1-2-3-4'

字符串转数组
String.split()
参数： 分隔符 默认不分割

var str = 'abc';
console.log(str.split()); // ['abc'];
console.log(str.split('')); // ['a', 'b', 'c'];

Array.reverse()

将数组中的元素倒序
改变原数组

Array.sort();
元素排序
改变原数组

Array.concat()
创建并返回一个新数组
不会改变原数组

截取方法：

Array.slice();
起始下标 <= 范围 < 结束下标
同字符串套路
不会改变原数组
Array.splice();
第一个参数： 起始下标
第二个参数： 删除的个数
第三个参数..... : 需要插入的元素

数组的栈方法与队列方法

Array.unshift()
从前面添加元素
返回数组的长度
Array.shift()
删除前面元素
返回删除的元素
Array.push()
从末尾添加元素
返回长度
Array.pop()
删除末尾元素
栈方法：后进先出（汽车开进死胡同）
push() + pop()
队列方法 （先进先出）
在数组的末端添加项，从数组的前端删除项
push() + shift()
在数组的前端添加项，从列表的末端删除项
unshift() + pop()

数组的遍历方法

Array.forEach() （遍历）
从头到尾遍历数组（只能通过try/catch终止循环）
不改变原数组
第一个参数： 元素
第二个参数： 下标
第三个元素： 原数组
例子：

    var arr = [2, 4, 5, 6];

    var res = arr.forEach(function (ele, index, array) {
        console.log(ele, index, array);
    });

    console.log(res); // undefined

2. Array.map(); (映射)
   返回新数组，不改变原数组
   要有return
   返回被加工后的新元素

例子：

var res = arr.map(function (ele, index, arr) {
    console.log(ele, index, arr);
    return ele + 1;
});

console.log(res); // [3, 5, 6, 7]

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

3. Array.filter() 过滤
   返回满足条件的元素组成的新数组
   return 条件; // 元素是否满足你定义的条件

例子：

var res = arr.filter(function (ele, index, arr) {
    console.log(ele, index, arr);
    return ele >= 4;
});

console.log(res); // [4, 5, 6]
console.log(arr); // [2, 4, 5, 6]

4. Array.every() 和 Array.some()
   every()：每一项都返回true，则返回true
   some(): 某一项返回true，则返回true

5. reduce()和reduceRight()
   使用指定的函数将数组元素进行组合，生成单个值
   指定函数中第一个参数为 前一个值
   第二个参数为 前一个值
   array.reduce(function (上一个值, 当前元素) {}, 起始值)
   reduce()：从数组的第一项开始，逐个遍历到最后一个
   reduceRight() 则从数组的最后一项开始，向前遍历到第一项

例子：

var arr = [2, 4, 5, 6];

var res = arr.reduce(function (pre, cur, index) {
    // pre: 上一次循环的结果
    // cur: 当前的元素
    // index: 下标
    console.log(pre, cur, index);
    return cur + pre;
}, 10);

console.log(res);

Array.toString()
该方法将其每个元素转化为字符串
如有必要将调用元素的toString()方法
并且输出用逗号分隔的字符串列表
与不使用任何参数调用join()方法返回的字符串是一样的

作者：LH

时间：2019年6月4日