数组中常用的方法

分为四个维度记忆

方法的作用

方法的参数

方法的返回值

原有数组是否改变

push

作用：向数组”末尾“添加新的内容。
参数：追加的内容可以是一个或者是多个。
返回值：新增数据后的长度
原有的数据发生了改变

pop

作用：删除数组最后一项
参数：不需要传递任何参数
返回值：返回被删除那一项的数值
原有的数组被改变

shift

作用：删除数组中的第一项
参数：不用传递任何参数
返回值：返回被删除的那一项的值
原有的数组被改变

基于shift删除数组中的第一项，删除后原有数组后面每一项的索引都要减1(往前移动一位)

unshift

作用：向数组开始位置追加新的内容
参数：要新增的内容
返回值：新增数组后的长度
原有的数组发生改变

splice

基于splice对数组可以进行很多操作，比如：
删除数组指定位置的内容
向数组指定位置新增内容
还可以修改数组指定位置的内容
删除：splice(n.m)
从索引n开始，删除m个内容，把删除掉的部分以新的数组返回，原有的数组被改变。

新增:ary.splice(n,0,x,...)
从索引n开始往前删除零项（没删除），或者把x的内容放入到数组中索引n位置的前面。

修改:ary.splice(n,m,x,...)
修改的原理就是把原有的内容删除掉，然后把需要修改的内容这部分被删除信息的位置。返回的是以数组的形式被修改了的内容（也就是被删掉的内容）

案例：

删除数组最后一项，有几种方法？

除了上面的三种方式之外，还可以用delete删除数组中的某一项，但是不建议用delete删除，虽然内容没了，但是数组的长度依然没有改变。

向数组末尾追加新的内容，有几种方法？

slice

作用：在一个数组中，按照条件查找出其中其部分的内容。
参数：两个参数（n/m），从索引n开始，找到m处，但是不包含m。
返回：以一个新数组存储查找的内容
原有数组不会变

如果不写参数，可以实现数组的克隆，克隆出一个新的数组出来，和原来数组的内容一样，但是不在相同的堆内存空间，两个数组是不相等独立的。
slice还支持负数索引，负数运算规则：数组总长度+负数索引

concat

作用：实现多个数组（或者值）的拼接
参数：数组或者值
返回：拼接后的新数组
原有数组不变

var ary1 = [12,23];
var ary2 = [100,200];
 var ary3 = [2000,3000];
 console.log(ary1.concat(ary2,"xiaoKge",ary2));
// [12, 23, 100, 200, "xiaoKge", 100, 200]

可以基于空数组作为拼接的开始，在小括号中排列拼接的顺序，空数组不会占据内容的位置。

[].concat(ary1,'xiaoKge',ary2,ary3);
(7) [12, 23, "xiaoKge", 100, 200, 2000, 3000]

tostring

作用：把数组转换为字符串
参数：没有任何参数
返回值：数组中的每一项用逗号分隔的字符串
原有的数组不变

join

作用：和toString类似，也是吧数组转换为字符串，但是我们可以设置为字符串后每一项之间的链接符
参数：指定的链接符
返回值：字符串
原有的数组不变

 var ary1 = [12,23];
 var ary2 = [100,200];
console.log(ary1.join("+"));  //'12+23'

reverse

作用：把数组倒过来排列
参数：无
返回值：排列后的新数组
原有的数组不变

var ary = [12,23,34,45];
console.log(ary.reverse());  //[45, 34, 23, 12]

sort

作用：给数组排序
参数：无/函数
返回值：排序后的新数组
原有的数组不变

var ary = [2,4,5,3,2,4,5,6,7,8,4,9];
console.log(ary.sort());
//[2, 2, 3, 4, 4, 4, 5, 5, 6, 7, 8, 9]

其中，在真实项目中，基于sort排序，我们都需要传递参数（函数）

ary.sort(function (a,b){
    return a-b;  //升序

    // return b-a;  //降序
})

ES6中数组新增的方法

from

作用：from()方法是从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。把类数组转成数组
参数；

arrayLike：想要转换成数组的伪数组对象或可迭代对象
mapFn(可选)：如果指定了该参数，新数组中的每个元素会执行该回调函数。
thisArg (可选)：执行回调函数 mapFn 时 this 对象。
返回值：一个新的数组

  <div>
    <ul id="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul> 
  </div>

  <script>
    let lis = document.querySelectorAll("#list li");
    let arr = Array.from(lis);
    console.log(lis);
    console.log(arr);
  </script>

from()方法的三个参数

    // Array.from(类数组,回调函数,执行回调函数的this)
    let data = Array.from(lis,function(item,index) {
      console.log("item: "+ item + "\nindex: " + index + "\nthis: " + this);
      return item;
    },document);
    console.log(data);

isArray

作用：检测数据是否是一个数组
参数：data 要检测的数据
返回值: true 数组，false 非数组

    let lis = document.querySelectorAll("#list li");
    let arr = [1,2,3,4];
    console.log(Array.isArray(lis));  //false
    console.log(Array.isArray(arr));   //true

Array.of

作用：将参数转成一个数组
参数：elementN 要放入数组中的数据
返回值：新数组

let res1 = Array.of(2); 
console.log(res1);  // //[ 2 ]

let res2 = Array.of(1,2,3,4);
console.log(res2);  //[ 1, 2, 3, 4 ]

如果原生不支持的话，在其他代码之前执行以下代码会创建 Array.of()

if(!Array.of) {
  return function() {
    return Array.prototype.slice.call(arguments);
  }
}

Array.flat

作用：扁平化多维数组
参数：指定要提取嵌套数组的结构深度，默认值为 1。
返回值：一个包含将数组与子数组中所有元素的新数组

let arr = [
  1,2,
  [
    3,
    [4,5]
  ]
]
console.log(arr.flat(1));  //[ 1, 2, 3, [ 4, 5 ] ]
console.log(arr.flat(2)); //[ 1, 2, 3, 4, 5 ]
console.log(arr.flat(Infinity));  //到最后一层： [ 1, 2, 3, 4, 5 ]

Array.flatMap

Array arr.flatMap(function callback(currentValue[, index[, array]]) {
    // 返回新数组的元素
}[, thisArg])

参数：

回调函数 (callback），可以生成一个新数组中的元素的函数，可以传入三个参数：
- currentValue 当前正在数组中处理的元素
- index可选数组中正在处理的当前元素的索引。
- array可选被调用的 map 数组
可选参数：thisArg
- 执行 callback 函数时使用的this 值

返回值：一个包含将数组与子数组中所有元素的新数组

let arr = [
  [1,2],
  [3,4],
  [6,8]
];
let arr2 = arr.flatMap(item => {
  item = item.filter(item => item >= 2);
  return item;
});
console.log(arr2);  //[ 2, 3, 4, 6, 8 ]

Array.fill

Array arr.fill(value[, start[, end]]);
用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引

参数：
用来填充数组元素的值。
可选参数：

start 起始索引，默认值为0。
end 终止索引，默认值为 arr.length

let arr = ["a","b","c","d","e"];
arr.fill("f",1,3);
console.log(arr); //[ 'a', 'f', 'f', 'd', 'e' ]

arr.includes

Boolean arr.includes(valueToFind[, fromIndex])
作用：判断数组中是否包含一个指定的值
参数：

valueToFind 需要查找的值
可选参数：从 fromIndex 处开始向后查找

返回值： true 代表数组中包含 valueToFind， false 代表数组中不包含 fromIndex

let arr = ["a","b","c","d"];
console.log(arr.includes('a'));  //true
console.log(arr.includes("a",-3));  //false

随笔记录--JS数组中常用的方法