探究数组方法的使用技巧

转字符方法

Array.prototype.toString

Array.prototype.toString 数组无论被嵌套多少层都会被转成 String

let arr = [1, [2, [3, 4], 4], 1];
arr.toString(); //1,2,3,4,4,1

Array.prototype.join

Array.prototype.join 将数组各成员按照某字符串进行连接并且装换成 String，与String.prototype.split 相对应

let arr = [1, 2, 3];
console.log(arr.join()); //1,2,3
console.log(arr.join("")); //123
console.log(arr.join(" ")); //1 2 3
console.log(arr.join("-")); //1-2-3

堆栈方法

Array.prototype.push Array.prototype.pop

Array.prototype.push 数组末尾添加元素 ，返回长度

Array.prototype.pop 数组末尾去除元素 ，返回去除项

let arr = [1, 2, 3];
console.log(arr, arr.push(5)); //[ 1, 2, 3, 5 ] 4
console.log(arr, arr.pop()); //[ 1, 2, 3 ] 5

Array.prototype.unshift Array.prototype.shift

Array.prototype.unshift 数组头部添加元素 ，返回长度

Array.prototype.shift 数组头部去除元素 ，返回去除项

let arr = [1, 2, 3];
console.log(arr, arr.unshift(5)); //[ 5, 1, 2, 3 ] 4
console.log(arr, arr.shift()); //[ 1, 2, 3 ] 5

堆栈方法均改变原数组

排序方法

Array.prototype.reverse

Array.prototype.reverse 排序和其中元素大小无关，反转数组，改变原数组 ， 视觉上反转数组

let arr = ["a", 12, 3];
console.log(arr, arr.reverse()); //[ 3, 2, 'a' ] [ 3, 2, 'a' ]

Array.prototype.sort

Array.prototype.sort

当arr.sort()不传入函数时，会将数组数组中的各元素转成 String , 再按照每个 String 的 Unicode 编码大小比较，进行升序排列，改变原数组

let arr = ["a", "c", 1, 50];
console.log({
  a: "a".charCodeAt(),
  c: "c".charCodeAt(),
  1: "1".charCodeAt(),
  50: "50".charCodeAt(), //{ '1': 49, '50': 53, a: 97, c: 99 }
});
console.log(arr.sort()); //[ 1, 50, 'a', 'c' ]

针对元素为数字字符串和数字的排序

Array.prototype.sort 为 高阶函数 ，给其传入一个 回调函数 ，根据返回值不同可以控制 升序 或者 降序

let arr = ["20", "1", 1, 50];
console.log(
  arr.sort(
    (a, b) => a - b // 返回a-b，即为从小到大，升序排列  //返回b-a，即为从大到小，降序排列
  )
);

拼接方法

Array.prototype.concat

Array.prototype.concat 主要用于拼接数组，返回新数组，不改变原数组

let arr =[1,2]
console.log(arr.concat(1,2)，arr); // [ 1, 2, 1, 2 ] [ 1, 2 ]
console.log(arr.concat([1,2])，arr); // [ 1, 2, 1, 2 ] [ 1, 2 ]
console.log(arr.concat([1,[2])，arr); // [ 1, 2, 1,[ 2 ]] [ 1, 2 ]

等价于使用 展开运算符 拼接数组

let arr = [1, 2];
let arr1 = [1, 2];
console.log([...arr, ...arr1]); //[ 1, 2, 1, 2 ]

删改方法

Array.prototype.slice

Array.prototype.slice(start,end) 从数组start项截取到end项，左闭右开，返回截取元素组成的新数组，不改变原数组

let arr = [1, 2, 3, 4];
console.log(arr.slice(), arr); //[ 1, 2, 3, 4 ] [ 1, 2, 3, 4 ]
console.log(arr.slice(0), arr); //[ 1, 2, 3, 4 ] [ 1, 2, 3, 4 ]
console.log(arr.slice(1), arr); //[ 2, 3, 4 ] [ 1, 2, 3, 4 ]
console.log(arr.slice(-1), arr); //[ 4 ] [ 1, 2, 3, 4 ]
console.log(arr.slice(1, 3), arr); //[ 2, 3 ] [ 1, 2, 3, 4 ]
console.log(arr.slice(-3, -1), arr); //[ 2, 3 ] [ 1, 2, 3, 4 ]
console.log(arr.slice(3, 1), arr); //[] [ 1, 2, 3, 4 ] end>start则返回空数组

Array.prototype.splice

Array.prototype.splice(start,删除的个数,添加的值) 可以删除或添加值，返回删除的值，改变原数组

let arr = [1, 2, 3];
console.log(arr.splice(0, 2, 4), arr); //[ 1, 2 ] [ 4, 3 ]

查找方法

Array.prototype.indexOf & Array.prototype.lastIndexOf

Array.prototype.index 正向查询某值在数组中的位置，有即返回索引

Array.prototype.lastIndexOf 反向查询某值在数组中的位置，有即返回索引

let arr = [1, 2, 3, 2];
console.log(arr.indexOf(2)); // 1
console.log(arr.lastIndexOf(2)); // 3

Array.prototype.includes

Array.prototype.includes 查询是否有值，有即返回 true

let arr = [1, 2, 3, 2];
console.log(arr.includes(2)); //true