美文网首页
JS数组及数组中常用方法

JS数组及数组中常用方法

作者: Leonard被注册了 | 来源:发表于2019-11-15 18:59 被阅读0次

    数组

    数组是对象数据类型的，它属于特殊的对象

    • 根据索引获取指定项的内容
    • 通过array.length获取数组的长度
    • 通过array.length - 1获取最后一项的索引
    let arr = [2,3,4,5];
console.log(arr[0]);                // 2
console.log(arr.length);            // 4
console.log(arr[arr.length -1]);    // 5

    常用方法

    1.实现数组增删改查的方法

    这一部分方法均会修改原有数组

    • push()：向数组末尾增加内容

    @params
      多个任意类型
    @return
      新增后数组的长度

    let arr = [10,20];
console.log(arr.push(30,'aa'));  // 4
console.log(arr);                 // [10,20,30,"aa"]
// 当追加单项时，也可以通过索引的方式实现
arr[arr.length] = 11;
console.log(arr);    // [10, 20, 30, "aa", 11]
    • unshift()：向数组开始位置增加内容

    @params
      多个任意类型
    @return
      新增后数组的长度

    let arr = [10,20];
console.log(arr.unshift(30,'aa'));  // 4
console.log(arr);                 // [30, "aa", 10, 20]
    • shift()：删除数组中的第一项

    @params
    @return
      删除的那一项

    let arr = [10,20];
let res = arr.shift();
console.log(res,arr);                 // 10 [20]
// 基于原生JS的delete，把数组当作普通对象，确实可以删除某一项
// 但是不会影响数组本身的结构特点(length不会跟着修改)
delete arr[0];
console.log(arr);    // [empty]
    • pop()：删除数组中的最后一项

    @params
    @return
      删除的那一项

    let arr = [10,20];
let res = arr.pop();
console.log(res,arr);                 // 20 [10]
// 基于原生JS让数组长度减少一位，默认删除最后一项
arr.length--;
console.log(arr);    // []
    • splice()：实现数组的增删改

    @params
      n,m,x都是数字，从索引n开始删除m个元素（m不写，默认删到末尾），用x占用删除的部分
    @return
      把删除的部分用新数组存储起来返回

    let arr = [10,20,30,40,50,60,70,80,90];
let res = arr.splice(2,4);
console.log(res,arr);    // [30, 40, 50, 60]  [10, 20, 70, 80, 90]
// 删除最后一项或首项
arr.splice(arr.length-1);
console.log(arr);    // [10, 20, 70, 80]
arr.splice(0,1);     
console.log(arr);    // [20, 70, 80]
// 增加元素
res = arr.splice(1,0,'hhhh');
console.log(res,arr);    // []  [20, "hhhh", 70, 80]
// 替换元素
res = arr.splice(1,1,2333);
console.log(res,arr);    // ["hhhh"]  [20, 2333, 70, 80]
// 向数组头尾追加
res = arr.splice(arr.length,0,666);
console.log(res,arr);    // []  [20, 2333, 70, 80, 666]
// 基于这种方式可以清空数组
res = arr.splice(0);
console.log(res,arr);    // [20, 2333, 70, 80, 666] []

    2.实现数组查询和拼接的方法

    这一部分方法均不会修改原有数组

    • slice()：实现数组的查询

    @params
      n,m都是数字，从索引n开始，找到索引为m的地方（不包含该项）
    @return
      把找到的内容以一个新数组的形式返回

    let arr = [10,20,30,40,50];
let res = arr.slice(1,3); 
console.log(res,arr);    // [20, 30]  [10, 20, 30, 40, 50]
res = arr.slice(1);
console.log(res);    // [20, 30, 40, 50]

// 数组克隆（浅克隆）
res = arr.slice(0);
console.log(res);    // [10, 20, 30, 40, 50]

// 当参数为负数时，自动将其加上数组长度
res = arr.slice(-3,-1);
console.log(res);    // [30, 40]

// 当n>m时，返回空数组
res = arr.slice(3,1);
console.log(res);    // []

// 当参数为小数时，只舍不入
res = arr.slice(1.9,3);
console.log(res);   // [20, 30]
    • concat()：实现数组的拼接

    @params
      多个任意类型值
    @return
      拼接后的新数组

    let arr1 = [10,20,30];
let arr2 = [40,50,60];
let res = arr1.concat(arr2,'2333');
console.log(res);    // [10, 20, 30, 40, 50, 60, "2333"]

    3.把数组转换为字符串的方法

    原有数组不变

    • toString()：把数组转换为字符串

    @params
    @return
      转换后的字符串，每一项用逗号分隔

    let arr = [10,20,30];
let res = arr.toString();
console.log(res);               // "10,20,30"
console.log([].toString());     // ""
console.log([12].toString());   // "12"
    • join()：把数组转换为字符串

    @params
      指定的分隔符（字符串格式）
    @return
      转换后的字符串，每一项用逗号分隔

    let arr = [10,20,30];
let res = arr.join("");    
console.log(res);    // "102030"
res = arr.join(",");
console.log(res);    // "10,20,30"
res = arr.join("|");
console.log(res);    // "10|20|30"
res = arr.join("+");
console.log(res);    // "10+20+30"
console.log(eval(res));    // 60

    4.检测数组中是否包含某一项的方法

    原来数组不变

    • indexOf() / lastIndexOf()：检测当前项在数组中第一次或最后一次出现位置的索引（IE6~8不兼容）

    @params
      要检索的内容
    @return
      这一项出现的位置索引值（数字），没有则返回-1

    let arr = [10,20,30,10,20,30];
console.log(arr.indexOf(20));        // 1
console.log(arr.lastIndexOf(20));    // 4

    5.数组的排序或者排列

    原数组改变

    • reverse()：把数组倒过来排列

    @params
    @return
      排列后的新数组

    let arr = [12,15,9,28,10,22];
arr.reverse();
console.log(arr);    // [22, 10, 28, 9, 15, 12]
    • sort()：数组排序

    @params
      可以没有，也可以是个函数
    @return
      排列后的新数组

    let arr = [7,8,5,2,4,6,9];
arr.sort();
console.log(arr);    // [2, 4, 5, 6, 7, 8, 9]

// 不传参数的情况下无法处理10以上数字的排序
arr = [12,15,9,28,10,22];
arr.sort();
console.log(arr);    // [10, 12, 15, 22, 28, 9]

arr = [12,15,9,28,10,22];
arr.sort((a,b)=> a - b);
console.log(arr);    // [9, 10, 12, 15, 22, 28]

    6.遍历数组的方法

    原数组不变

    • forEach()：遍历数组中的每一项

    @params
      回调函数
    @return

    let arr = [12,15,9,28,10,22];
arr.forEach((item, index, array)=>{
    console.log(item, index, array);    // 元素，索引，原数组
})
    • every()：遍历数组中的每一项

    @params
      回调函数
    @return
      布尔值，函数中每一项都返回true，则为true，否则为false

    var arr = [1,2,3,4,5,4,3,2,1];
var res = arr.every(function(item, index, array){
  return (item > 2);
});
console.log(res);     // false
    • some()：遍历数组中的每一项

    @params
      回调函数

    @return
      布尔值，函数中任意一项返回true，则为true，否则为false

    var arr = [1,2,3,4,5,4,3,2,1];
var res = arr.some(function(item, index, array){
  return (item > 2);
});
console.log(res);     // true
    • filter()：遍历数组中的每一项，过滤出符合条件的元素

    @params
      回调函数
    @return
      回调函数中返回 true 的项组成的新数组

    var arr = [1,2,3,4,5,4,3,2,1];
var res = arr.filter(function(item, index, array){
  return (item > 2);
});
console.log(res);     // [3, 4, 5, 4, 3]
    • map()：遍历数组中的每一项并对其进行修改

    @params
      回调函数
    @return
      回调函数中处理后的项组成的新数组

    var arr = [1,2,3,4,5,4,3,2,1];
var res = arr.map(function(item, index, array){
  return item * 2;
});
console.log(res);     // [2, 4, 6, 8, 10, 8, 6, 4, 2]

    7.归并数组的方法

    原数组不改变

    • reduce()：遍历数组中的每一项并对其进行修改

    @params
      回调函数，初始化值（该值会作为第一次迭代时回调函数的第一个参数）
    @return
      归并处理后的新数组

    var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
  console.log(index);  // 输出：1 2 3 4
  return prev + cur;
});
console.log(sum); //15
    • reduceRight()：和reduce()作用类似，方向相反而已

    @params
      回调函数，初始化值（该值会作为第一次迭代时回调函数的第一个参数）
    @return
      归并处理后的新数组

    var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
  console.log(index);  // 输出：3 2 1 0
  return prev + cur;
});
console.log(sum); //15

    相关文章

      网友评论

          本文标题：JS数组及数组中常用方法

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

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|JS数组及数组中常用方法|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！