Array对象的方法

Array

Array对象定义有两种格式，一种是数组字面量（var arr = []），另一种是调用构造函数生成的数组（var arr =  new Array()）

我们在平时开发的时候，一般使用的是数组字面量。

var arr = [];  //数据原型

var arr =  new Array();  // 对象，比较耗内存

new关键字的使用  ------  除了在需要实例化一个对象，或罕见的需要延时加载数据的情况外，你基本上不需要使用new关键字。在Javascript里分配大量的new变量地址是一项很慢的操作，为了效率起见，你应该始终使用对象符号。

Array对象的方法的有很多种，有些功能相似，经常被搞混淆，现整理一下所有的方法： 

1.toString()/toLocalString()  ------- 把数组转化成字符串

这俩个方法都是将数组转化成字符串，但还是有区别的，主要体现在时间和超过三位数的数字上，

  时间格式：toString转化为标准格式，toLocaleString会转化为本地格式

  数值：toLocaleString会将长度超过三位数的数值从右边开始每三位用逗号间隔开，toString不会

var arr = [124578,new Date(),"1sfgfg"]

arr.toString()
//"124578,Fri Oct 15 2021 10:06:24 GMT+0800 (中国标准时间),1sfgfg"

arr.toLocaleString()
//"124,578,2021/10/15上午10:06:24,1sfgfg"

顺便了解一下：

     toLocaleDateString()    

       arr[1].toLocaleDateString()    //    "2021/10/15"

     toLocaleTimeString() 

        arr[1].toLocaleTimeString()   //    "上午10:17:27"

2.join() ------- 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 

var arr = [124578,"dsd","1sfgfg"]
var str = arr.join("-")
console.log(str) //124578-dsd-1sfgfg


//在textarea 中换行展示 ['雅思','托福','成人英语']
let arr = ['雅思','托福','成人英语']
let str = arr.join('\r\n')
console.log(str)

3.pop() -------  删除并返回数组的最后一个元素

pop相当于数据结构中的pop出栈，后进先出。打个比方，a,b,c,d排队进入只有一个入口的管道，要出来只能依次d,c,b,a出来。

   pop() 方法将删除 array 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则不改变数组，并返回 undefined 值。

var arr = [124578,dsd,"1sfgfg"]
var str = arr.pop()
console.log(str) //1sfgfg

4.push(ele1,ele2,....,eleX) ------- 向数组的末尾添加一个或更多元素，并返回新的长度。

var arr = [124578,"dsd","1sfgfg"]
var num = arr.push("true",987,null,NaN)
console.log(num) // 7

5.shift()  ------- 删除并返回数组的第一个元素

shift 和 pop 就相对于一个组合，shift负责开头，pop负责末尾。都不会创建新的数组，而是直接修改原有的数组

   shift () 方法将删除 array 的第一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则不改变数组，并返回 undefined 值。

var arr = ["dsd",124578,"1sfgfg"]
var str = arr.shift()
console.log(str) //dsd

6.unshift()  ------- 向数组的开头添加一个或更多元素，并返回新的长度。 

同样 unshift 和 push 就相对于一个组合，unshift负责开头添加，push负责末尾添加。都不会创建新的数组，而是直接修改原有的数组。

var arr = ["dsd",124578,"1sfgfg"]
var num = arr.unshift(true,{"name":"jqn"})
console.log(num) //5

7.slice(start,end) ------- 从某个已有的数组返回选定的元素 

 start : 必选，规定从何处开始，0表示第一个元素，如果为负数，表示从数组尾部开始算起的位置，-1为最后一个元素，-2为倒数第二个位置；

 end : 可选，规定从何处截止，不包含该处的元素，如果没有设置end值，就表示从起始位置到数组结尾的元素

 注意：slice不是改变原有的数组，而是新建一个新的数组

平时开发中我们要获取数组的最后一个元素，就可以使用 arr.slice(-1) 去获取。

var arr = ["dsd",124578,"1sfgfg",true,{"name":"jqn"}]
var newArr = arr.slice(2) // 或者 arr.slice(-3) 
console.log(newArr) //"1sfgfg",true,{"name":"jqn"}

 8.splice(start,delnum,addele1,addele2,...,addeleX) ------- 插入、删除或者替换一个数组元素

  start : 必需，为添加/删除项目的起始位置，如果为负数，表示从数组尾部开始算起的位置，-1为最后一个元素，-2为倒数第二个位置；

  delnum : 必需，删除数组元素的个数，如果设置为 0，则不会删除；

  addele : 可选，为需要添加的数组元素

  注意：splice改变了原有的数组，同时返回删除的元素，如何没有删除元素，则返回一个空数组

var arr = ["dsd",124578,"1sfgfg",true,{"name":"jqn"}]
var newArr = arr.splice(2,1)  
console.log(newArr) // ["1sfgfg"]

var arr = ["dsd",124578,"1sfgfg",true,{"name":"jqn"}]
var newArr = arr.splice(2,1,"abc","def")  
console.log(newArr) // ["1sfgfg"]

9.concat(arr1,arr2,...arrX) ------- 连接两个或更多的数组，并返回结果

 concat不会改变原有数组，而是返回一个新的数组

 var arr = ['dsd', 124578]
 var arr2 = ['abc', 'def', true]
 var arr3 = arr.concat(arr2)
console.log(arr3) // ['dsd', 124578, 'abc', 'def', true]

10.sort(sortFn) ------- 对数组进行排序操作,会改变原来的数组

  sortFn : 可选，对数组排序的函数，如果没有定义此函数，将按照数组元素的首字符编码的顺序进行排序

  sort该方法会改变原来的数组，而不会创建新的数组。

var arr=[11,13,45,23,56,78,43,98,5,8,6]
console.log(arr.sort()) // [11, 13, 23, 43, 45, 5, 56, 6, 78, 8, 98]

arr.sort((a,b)=>{ return a-b}) // [5, 6, 8, 11, 13, 23, 43, 45, 56, 78, 98]

arr.sort((a,b)=>{ return b-a }) // [98, 78, 56, 45, 43, 23, 13, 11, 8, 6, 5]

顺便了解一下： 随机排序

arr.sort(function() {return Math.random() < 0.5 ? 1:-1})

11.reverse() ------- 颠倒数组中元素的顺序 ，会改变原来的数组

var arr=[11,13,45,23,56,78,43,98,5,8,6]
console.log(arr.reverse()) // [6, 8, 5, 98, 43, 78, 56, 23, 45, 13, 11]

12.indexOf(searchvalue,fromindex) ------- 查找元素首次出现的位置

第一个参数为要检索的值，第二个参数为开始检索的位置，从前向后检索，返回首次出现的位置，找不到返回-1

var arr=["xiao",1,2,5,1,4]
console.log(arr.indexOf(1)) // 1

console.log(arr.indexOf(1,2)) // 4

13.lastIndexOf(searchvalue,fromindex) ------- 从后向前检索，返回从后往前第一次出现的位置

第一个参数为要检索的值，第二个参数为开始检索的位置，从后向前检索，返回从后往前第一次出现的位置，找不到返回-1

var arr=["xiao",1,2,5,1,4]
console.log(arr.lastIndexOf(1)) // 4

console.log(arr.lastIndexOf(1,-3)) // 1

14.find()

两个参数，第一个为回调函数，第二个为可选参数。表示回调函数中this的指向，假如没有的话，this指向为undefined。找到第一个符合条件的元素并返回。

var arr=[1,2,3,4,5];
arr.find(function(item,index,target){
    return item > this
},3);//4

15.findIndex() 

跟find用法一样，不过返回的是索引值，而不是元素的值

var arr=[1,2,3,4,5];
arr.findIndex(function(item,index,target){
    return item > this
},3);//3

16.map()

对应原数组生成对应的新数组，不改变原数组。 

var arr=[1,2,3,4,5];
var newArr = arr.map(function(item,index,target){
   return item + 1
})
console.log(newArr) //[2,3,4,5,6]
console.log(arr);//[1,2,3,4,5]

17.array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

 该参数有两个参数，第一个为回调函数,必填。

        total      必需。初始值, 或者计算结束后的返回值。

        currentValue     必需。当前元素

        currentIndex     可选。当前元素的索引

        arr        可选。当前元素所属的数组对象。

  第二个为可选参数。

var arr = [15.5, 2.3, 1.1, 4.7];
arr.reduce(function(pre,item,index,arr){
    console.log(item,index)
    return pre + item
},0) //23.6

有参数0 时，索引从0开始

一般用于数组求和。 

18.reduceRight() 

同 reduce ()用法一样，只不过是从数组末尾向前遍历，不改变原数组，对于空数组是不会执行回调函数的

var arr = [15.5, 2.3, 1.1, 4.7];
arr.reduceRight(function(pre,item,index,arr){ console.log(item,index)
    return pre + item
},0) //23.6 

有参数0时，索引从arr.length-1开始，无参数0 时，从 arr.length-2开始

19.every() 

判断数组中是否所有的元素都满足条件。全满足时，返回true，否则返回false。

var arr=[1,2,3,4];
arr.every(function(item,index,target){
    return item > 3
});//false

20.some()

判断数组中是否有元素满足条件，有元素满足条件，则返回true,否则返回false。回调函数的参数同上。

var arr=[1,2,3,4];
arr.some(function(item,index,target){
    return item > 3
});//true

21.filter() 

对数组进行过滤，遍历数组，依次将返回值为true的元素放在一个新的数组中，不改变原数组。回调函数的三个形参分别表示当前元素，当前元素的索引，数组。不会改变原数组。

var arr=[1,2,3,4,5,6];
var newArr = arr.filter(function(item,index,target){
      return item > 2
})//
console.log(newArr) // [3,4,5,6] 
console.log(arr);//[1,2,3,4,5,6]

22.forEach()

遍历数组，依次操作元素。不改变原数组，简洁了对数组的遍历。

var arr=[1,2,3,4,5,6],
     temp=[];
arr.forEach(function(item,index,target){
    temp.push(item);
})
console.log(temp);//[1,2,3,4,5,6]
console.log(arr);//[1,2,3,4,5,6]

23.includes()

两个参数，第二个为可选参数。includes(value,start) 判断是否包含某元素。start为起始位子。

var arr=[1,2,3,4,5];
arr.includes(3,3);//false
arr.includes(3);//true

24.Array.from()

将'类数组'转化为真正的数组

// 转化类数组对象
let arrayLike = {
    '0':1,
    '1':2,
    '2':3,
    length:3
}

let arr1 = Array.from(arrayLike);
console.log(arr1); // [1,2,3]

// 转化NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).foreach(function(p){
  console.log(p)
})

// 转化argument对象
function foo (){
 var args = Array.from(arguments);
}

25. Array.of() 

用于将一组值，转换为数组

Array.of(3,11,1) // [3,11,1]

26. copyWithin()

在当前数组内部，将指定位置的成员复制的指定位置

Array.prototype.copyWithin(target, start = 0, end = this.length)

target 目标位置  start 开始位置  end 结束位置 返回新数组 

// 将第3到最后一位成员,即[4,5]，复制到第0位，替换掉[1,2],得到新数组[4,5,3,4,5]
[1, 2, 3, 4, 5].copyWithin(0, 3) 
// [4,5,3,4,5]  

27. 数组中某个值复制N遍

let arr = ['$']
Array(5).fill(arr[0])

//['$', '$', '$', '$', '$']