数组常用方法的总结

数组及数组中常用的方法

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

const arr = [12, 23, 34, 45];
console.log(typeof arr); //=>"object"
console.dir(arr);
/*
 * arr = {
 *    0:12,
 *    1:23,
 *    2:34,
 *    3:45,
 *    length:4	 
 * } 
 * 
 * 数字作为索引（KEY 属性名）
 * length代表长度
 * 
 * arr[0] 根据索引获取指定项的内容
 * arr.length 获取数组的长度
 * arr.length-1 最后一项的索引
 */

数组中常用的方法

• 方法的作用和含义
• 方法的实参（类型和含义）
• 方法的返回值
• 原来的数组是否会发生改变

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

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

push

/*
 * push : 向数组末尾增加内容
 * @params
 *   多个任意类型
 * @return
 *   新增后数组的长度 
 */
let arr = [10, 20];
let res = arr.push(30, 'AA');
// 基于原生JS操作键值对的方法，也可以向末尾追加一项新的内容
arr[arr.length] = 40;
console.log(res, arr); //=>4 [10,20,30,'AA',40]

unshift

/*
 * unshift : 向数组开始位置增加内容
 * @params
 *   多个任意类型
 * @return
 *   新增后数组的长度 
 */
let arr = [10, 20];
let res = arr.unshift(30, 'AA');
console.log(res, arr); //=>4  [30,'AA',10,20]

// 基于ES6展开运算符，把原有的arr拷贝一份，在新的数组中创建第一项，其余的内容使用原始arr中的信息即可，也算实现了向开始追加的效果
arr = [100, ...arr];
console.log(arr); //=>[100,30,'AA',10,20]

shift

/*
 * shift : 删除数组中的第一项
 * @params
 * @return
 *   删除的那一项 
 */
let arr = [10, 20, 30, 40];
let res = arr.shift();
console.log(res, arr); //=>10  [20, 30, 40]

// 基于原生JS中的DELETE，把数组当做普通的对象，确实可以删除掉某一项内容，但是不会影响数组本身的结构特点（length长度不会跟着修改）,真实项目中杜绝这样的删除使用
delete arr[0];
console.log(arr); //=>{1:30,2:40,length:3}

pop

/*
 * pop : 删除数组中的最后一项
 * @params
 * @return
 *   删除的那一项 
 */
let arr = [10, 20, 30, 40];
let res = arr.pop();
console.log(res, arr); //=>40  [10,20,30]

// 基于原生JS让数组数组长度减少一位，默认减少的就是最后一项
arr.length--; //=>arr.length = arr.length - 1;
console.log(arr);

splice

/*
 * splice : 实现数组的增加、删除、修改
 * @params
 * n,m 都是数字  从索引n开始删除m个元素（m不写，是删除到末尾）
 * @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]

// 基于这种方法可以清空一个数组，把原始数组中的内容以新数组存储起来（有点类似数组的克隆：把原来数组克隆一份一模一样的给新数组）
/* res = arr.splice(0);
console.log(res, arr);//=>[10, 20, 70, 80, 90] [] */

// 删除最后一项和第一项
arr.splice(arr.length - 1);
arr.splice(0, 1);
console.log(arr);

/*
 * splice : 实现数组的增加、修改
 * @params
 * 	 n,m,x  从索引n开始删除m个元素，用x占用删除的部分
 *   n,0,x  从索引n开始，一个都不删，把x放到索引n的前面
 * @return
 *   把删除的部分用新数组存储起来返回 
 */
let arr = [10, 20, 30, 40, 50];
let res = arr.splice(1, 2, 'summertzz', 'lsbbd');
console.log(res, arr); //=> [20,30] [10,'summertzz','lsbbd', 40, 50]

// 实现增加
arr.splice(3, 0, '呵呵呵');
console.log(arr); //=>[10, "summertzz", "lsbbd", "呵呵呵", 40, 50]

// 向数组末尾追加
arr.splice(arr.length, 0, 'AAA');

// 向数组开始追加
arr.splice(0, 0, 'BBB');

2.数组的查询和拼接

此组学习的方法，原来数组不会改变

slice

/*
 * slice : 实现数组的查询
 * @params
 * 	 n,m 都是数字 从索引n开始，找到索引为m的地方（不包含m这一项）
 * @return
 *   把找到的内容以一个新数组的形式返回 
 */
let arr = [10, 20, 30, 40, 50];
let res = arr.slice(1, 3);
console.log(res); //=>[20,30]

// m不写是找到末尾
res = arr.slice(1);
console.log(res); //=>[20, 30, 40, 50]

// 数组的克隆，参数0不写也可以
res = arr.slice(0);
console.log(res); //=>[10, 20, 30, 40, 50]

concat

/*
 * concat : 实现数组拼接
 * @params
 * 	 多个任意类型值
 * @return
 *   拼接后的新数组（原来数组不变） 
 */
let arr1 = [10, 20, 30];
let arr2 = [40, 50, 60];
let res = arr1.concat('summer', arr2);
console.log(res);  // [10, 20, 30, 'summer', 40, 50, 60]

3.把数组转换为字符串

原有数组不变

toString

/*
 * 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

/*
 * 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  eval把字符串变为JS表达式执行

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

indexOf / lastIndexOf / includes

/*
 * 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

// 想验证arr中是否包含'summertzz'
if (arr.indexOf('summertzz') === -1) {
	// 不包含
}
// 也可以直接使用ES6新提供的includes方法判断
if (arr.includes('summertzz')) {
	// 包含：如果存在返回的是TRUE
}

5.数组的排序或者排列

reverse

/*
 * reverse : 把数组倒过来排列
 * @params
 * @return
 *   排列后的新数组
 * 原来数组改变
 */
let arr = [12, 15, 9, 28, 10, 22];
arr.reverse();
console.log(arr); //=>[22, 10, 28, 9, 15, 12]

sort

/*
 * sort : 实现数组的排序
 * @params
 *   可以没有，也可以是个函数
 * @return
 *   排序后的新数组
 * 原来数组改变
 */
let arr = [7, 8, 5, 2, 4, 6, 9];
arr.sort();
console.log(arr); //=>[2, 4, 5, 6, 7, 8, 9]

// SORT方法中如果不传递参数，是无法处理10以上数字排序的(它默认按照每一项第一个字符来排，不是我们想要的效果)
/* arr = [12, 15, 9, 28, 10, 22];
arr.sort();
console.log(arr); //=> [10, 12, 15, 22, 28, 9] */

// 想要实现多位数正常排序，需要给SORT传递一个函数，函数中返回 a-b 实现升序，返回 b-a 实现降序
arr = [12, 15, 9, 28, 10, 22];
arr.sort((a, b) => a - b);
console.log(arr);

6.遍历数组中每一项的方法

forEach

/*
 * forEach：遍历数组中的每一项内容
 * @params
 * 回调函数
 * @return
 * 原来数组不变 
 */
let arr = [12, 15, 9, 28, 10, 22];

/* // 基于原生JS中的循环可以实现
for (let i = 0; i < arr.length; i++) {
	// i:当前循环这一项的索引
	// arr[i]:根据索引获取循环的这一项
	console.log('索引：' + i + ' 内容：' + arr[i]);
} */

arr.forEach((item, index) => {
	// 数组中有多少项，函数就会被默认执行多少次
	// 每一次执行函数：item是数组中当前要操作的这一项，index是当前项的索引
	console.log('索引：' + index + ' 内容：' + item);
});

数组去重

// 基于ES6的Set（对应的Map）实现去重
let arr = [12, 23, 12, 15, 25, 23, 25, 14, 16];
arr = [...new Set(arr)];
// [12, 23,15, 25, 14, 16];

// 利用for嵌套，然后splice去重（ES5中最常用）
// 双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。
function uniqueArr(arr) {
  for(let i = 0; i < arr.length; i++) {
    for(let j = i + 1; j < arr.length; j++) {
      if(arr[i] == arr[j]) {
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}

uniqueArr([1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}])
 //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {}, {}]     //NaN和{}没有去重，两个null直接消失了

//  利用indexOf去重
// 新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则push进数组
function uniqueArr(arr) {
  if(!Array.isArray(arr)) {
    return;
  }
  let arr1 = [];
  for(let i = 0; i < arr.length; i++) {
    if(arr1.indexOf(arr[i]) === -1){
      arr1.push(arr[i]);
    }
  }
  return arr1;
}

uniqueArr([1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}])
  //  [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]  //NaN、{}没有去重

  // 利用sort()
  // 利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对。
  function uniqueArr(arr) {
    if(!Array.isArray(arr)) {
      return;
    }
   arr = arr.sort();
   let arr1 = [arr[0]];
   for(let i = 0; i < arr.length; i++) {
     if(arr[i] !== arr[i -1]) {
       arr1.push(arr[i]);
     }
   }
   return arr1;
}
uniqueArr([1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}])
  //  [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]  //NaN、{}没有去重

  // 利用includes
  function uniqueArr(arr) {
    if(!Array.isArray(arr)) {
      return;
    }
   let arr1 = [];
   for(let i = 0; i < arr.length; i++) {
     if(!arr1.includes(arr[i])) {
       arr1.push(arr[i]);
     }
   }
   return arr1;
}
uniqueArr([1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}])
  //  [1, "true", true, 15, false, undefined, null, NaN, 0, "a", {…}, {…}]  // {}没有去重

  // 利用filter
  function uniqueArr(arr) {
    return arr.filter((item, index, arr)=> {
      //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
      return arr.indexOf(item, 0) === index;
    })
  }
  uniqueArr([1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}])
  //  [1, "true", true, 15, false, undefined, null, NaN, 0, "a", {…}, {…}]  // {}没有去重