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);
    }

---