10-JavaScript数组常用方法

数组常用方法

  • 在JS中数组是一个引用类型, 也就是一个对象
  • 判断一个对象是否是数组
    • 可以利用instanceof判断某个对象时候是某个构造函数创建出来的
    • 可以利用Array提供的内置方法isArray来判断某个对象时候是Array构造函数创建出来的

注意点:isArray有兼容性的问题, 支持H5标签的浏览器才支持

    var arr2 = new Array();
    var arr3  = [1,3,5];
    var arr4 = new Array(2,4,6);

    console.log(arr4);
    console.log(arr4.length);//数组长度

    // 2.判断一个对象是否是数组
    // 2.1可以利用instanceof判断某个对象时候是某个构造函数创建出来的
    // 2.2可以利用Array提供的内置方法isArray来判断某个对象时候是Array构造函数创建出来的
    // 注意点: isArray有兼容性的问题, 支持H5标签的浏览器才支持
    console.log(arr4 instanceof Array);
    console.log(Array.isArray(arr4));

数组增加元素方法

  • push方法可以将指定的数据添加到数组中,返回数组的新长度
    先push的数据会添加到前面, 后push的数据会添加到后面
  var arr = [1,3,5];
  var len = arr.push(7,9,11);
  console.log(arr);
  console.log(len);
  • unshift()方法将一个或多个元素添加到数组的开头,并返回该数组的新长度
  var array = [1, 2, 3];
  array.unshift(666,777,888);
  console.log(array);

数组的元素删除方法

  • pop方法可以从数据中取出最后一个元素返回给我们
    pop方法不仅可以从数据中取出数据, 还会将取出的数据从数组中删除
  var arr = [1,3,5];
  console.log(arr.pop());
  console.log(arr.pop());
  console.log(arr.pop());
  console.log(arr);
  • shift方法可以从数据中取出最前面一个元素返回给我们
    shift方法不仅可以从数据中取出数据, 还会将取出的数据从数组中删除
  var arr = [1,3,5];
  console.log(arr.shift());
  console.log(arr.length);
  console.log(arr.shift());
  console.log(arr.shift());
  console.log(arr);
  • 清空数组
var arr = [1,2,3,4,5,6];
arr = [];
  • splice方法用于删除数组中的元素
    第一个参数: 从什么地方开始删除
    第二个参数: 需要删除多少个
arr.splice(0,3);

数组的拼接

  • concat() 方法用于合并两个或多个数组,此方法不会更改现有数组,而是返回一个新数组
var res = arr1.concat(arr2);
console.log(arr1);

注意点:
数组不支持直接用于+号来拼接
如果使用+号来拼接数组, 会先调用数组的toString方法,
然后再将转换后的字符串进行拼接

  • 数组toString方法和valueOf方法
    Array的toString方法会返回数组中保存的内容的字符串
    Array的valueOf方法会返回数组本身
var arr = [2,3,5,6];
console.log(arr.toString());
console.log(arr.valueOf());

数组的截取

  • slice() 方法返回一个新的数组对象
    第一个参数: 从什么地方开始截取
    第二个参数: 截取到什么地方位置, 不包括这个结束的元素,如果不指定就代表直接截取到数组末尾
var res = arr.slice(1);
console.log(res);
var res = arr.slice(0,3);

数组元素查找

  • indexOf()返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1
    第二个参数可以指定从第几个索引开始查找
var arr = [1, 2, 6, 4, 5, 6];
console.log(arr.indexOf(6));//2
console.log(arr.indexOf(6, 3));//5

注意点: 默认是从左至右的查找, 一旦找到就会自动停止继续查找

  • lastIndexOf会从右至左的查找, 其余和indexOf()一样
  • find方法需要传递一个函数, 内部会遍历调用者(数组), 取出每一个元素
    取出一个元素就调用一次传入的函数, 将取出的元素传递给这个函数
    只要有一个元素满足函数中的条件就会停止查找

注意点: 在IE浏览器中会有问题

var res = arr.find(function (ele) {
      return ele === 6;
 });
console.log(res);
  • filter函数会创建一个新的数组
    当执行回调函数的时候, 返回的是true, 就会将当前遍历到的元素放到新的数组中
var res = arr.filter(function (ele,idx) {
      return ele === 6;
});
  console.log(res);
  • some函数接收一个函数,判断当前数组中的某个元素是否满足函数的条件,满足就返回true,否则为false
var arr = [1,2,3,6,7,6];
var flag = arr.some(function (ele) {
     return ele === 0
 });
 console.log(flag);
  • every函数接收一个函数,判断当前数组中的所有元素是否满足函数的条件,全部满足条件就返回true,否则为false
var arr = [1,2,3,6,7,6];
var flag = arr.every(function (ele) {
      return ele < 6
  });
console.log(flag);

数组转换为字符串

join()方法可以将数组中的元素用指定的字符进行拼接,转化成字符串

    var arr = ["wwww","it666","com"];
    console.log(arr.toString());//是用逗号连接数组中的元素
    // console.log(arr.join('.'));
    console.log(arr.join("-"));

数组元素排序

  • sort函数会对数组排序并返回数组

注意点:
默认排序顺序是根据字符串Unicode码,会对调用者进行排序, 会直接修改调用者

var arr = [3, 1, 5, 4, 2, 31];
    arr.sort(function (a,b) {
        // 直接return, 用第一个参数减去第二个参数的结果, 就是升序排序
        // return a- b;
        // 直接return, 用第二个参数减去第一个参数的结果, 就是降序排序
        return b - a;
    });
console.log(arr);
var arr = ["abcd", "abc", "abcdef", "abcdefg"];
    arr.sort(function (a,b) {
        // return a.length - b.length;
        return b.length - a.length;
    });

console.log(arr);
  • reverse可以对数组进行翻转,并返回翻转后的数组
var arr = [1,2,3,4,5,6];
console.log(arr.reverse());

数组的遍历

  • 普通for循环遍历(推荐使用)
for (var i = 0; i < arr.length; i++){
        console.log(arr[i]);
}
  • forEach会依次取出调用者的每一个元素, 每取出一个元素就会执行一次回调函数,并且会将当前取出的元素传递给回调函数
arr.forEach(function (ele) {
        console.log(ele);//ele是数组中的元素
});
  • map函数遍历数组
    和filter函数差不多, 都用于过滤元素, 只有满足添加的元素才会被添加到新的数组中
    但是和filter函数的区别是, filter返回的数组中只有满足添加的元素
    而map返回的数组中不满足条件的元素会存储一个undefined
var res = arr.map(function (ele) {
        if (ele < 3){
            return ele;
        }
    });
console.log(res);

数组元素删除注意点

// 注意点:
    // 1.数组中的元素被删除之后, 数组的length属性获取的长度会变化
    // 2.数组中前面的元素被删除之后, 后面的元素会自动往前移动
    //   也就是后面元素的索引会发生变化
    //所以说删除数组从数组最后一个元素删除
    var arr = [1,3,5,6,7];
    for (var i = arr.length;i > 0; i--){
        arr.splice(i,1);
        console.log(arr);
        console.log(arr.length);
    }

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,509评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,806评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,875评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,441评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,488评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,365评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,190评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,062评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,500评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,706评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,834评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,559评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,167评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,779评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,912评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,958评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,779评论 2 354

推荐阅读更多精彩内容