美文网首页
前端中数组方法的总结

前端中数组方法的总结

作者: LvHao | 来源:发表于2019-06-04 20:51 被阅读0次

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

数组: 有序的集合
定义数组:
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
  1. 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]
  1. 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]

  1. Array.every() 和 Array.some()
    every():每一项都返回true,则返回true
    some(): 某一项返回true,则返回true
  1. 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日

相关文章

  • 前端中数组方法的总结

    要想学好前端我们必须有一个好的态度和一个积极向上刻苦钻研的精神,最主要的就是把那些固定的知识点记住,然后我们再去把...

  • 前端数组常用方法总结

    slice和filter slice(start,end):用于截取数组的一段,包含从start到end(不包含该...

  • Javascript中数组常用方法总结

    Javascript中数组常用方法总结 创建方式:Array构造函数字面量Array创建数组的静态方法from: ...

  • js中数组方法的总结

    js中数组的方法非常的多,功能也很强大。今天来总结一下js中数组的方法: 首先创建一个数组,数组中可以包含各种类型...

  • Swift之数组

    swift中数组的一些用法。 数组的定义 数组的遍历 数组的增加 总结 主要说了数组的定义以及数组的遍历的方法。

  • JS中数组的方法总结

    首先我们定义一个数组,里面的内容是1,2,3,4。以这个数组为例 push() 作用: 在数组的末尾添加一个或多个...

  • 25个JavaScript数组方法代码示例

    摘要: 通过代码掌握数组方法。 原文:通过实现25个数组方法来理解及高效使用数组方法(长文,建议收藏) 译者:前端...

  • JS数组遍历

    本文针对JS中数组遍历做一个总结 普通 for 循环 forEach 循环(数组自带的方法) 注意: forEac...

  • 字符串中常用的方法

    0. 前言 在上一篇《数组中的常用方法)》中我总结了一些数组中的常用方法,字符串在开发中应用也比较广泛,所以,我也...

  • 总结Js里面 数组与对象的遍历方法

    总结Js里面 数组与对象的遍历方法 最近项目里面,后台对数据处理的不够完善,很多数据没有优化,直接丢给前端,于是数...

网友评论

      本文标题:前端中数组方法的总结

      本文链接:https://www.haomeiwen.com/subject/khnrxctx.html