Array

一、创建数组

new操作符：

1
2
const arr = new Array(5)
const arr1 = new Array('w','e','s','l','e','y')

省略new操作符：

1
2
const arr = Array(5)
const arr1 = Array('w','e','s','l','e','y')

数组字面量

1
2
const arr = []
const arr1 = ['w','e','s','l','e','y']

[es6]Array.of()

  • 和Array构造函数之间的区别在于处理参数中的整数
1
2
const arr = Array(5)		//[ , , , , ]
cosnt arr1 = Array.of(5)	//[5]

[es6]Array.from()

  • 将一个类数组(拥有length属性的对象) 和 可遍历对象(部署iterable接口的对象，包括 Set/Map) 转为真正的数组

  • 参数：

    arrayLike: 想要转换成数组的伪数组对象或可迭代对象。

    mapFn 可选: 如果指定了该参数，新数组中的每个元素会执行该回调函数。

    thisArg 可选: 可选参数，执行回调函数 mapFn 时 this 对象

二、数组方法

1.转换方法

toString()

  • 返回数组的字符串形式
  • 该字符串由数组中的每个元素的 toString() 返回值经调用 join() 方法连接（由逗号隔开）组成
  • 不改变原数组
1
2
3
const arr = ['w','e','s','l','e','y']
console.log(arr.toString())		//w,e,s,l,e,y
console.log(typeof arr.toString())//string

toLocaleString()

  • 该字符串由数组中的每个元素的 toLocaleString() 返回值经调用 join() 方法连接（由逗号隔开）组成
  • 数组中的元素将调用各自的 toLocaleString 方法
  • 不改变原数组
1
2
3
const arr= [{name:'zz'}, 123, "abc", new Date()];
console.log(arr.toLocaleString())
//[object Object],123,abc,2020/11/17 上午11:19:44

join()

  • 将数组中的所有元素连接成一个字符串
  • 不改变原数组，返回新字符串
1
2
3
4
const arr = ['w','e','s','l','e','y']
console.log(arr.join())		//w,e,s,l,e,y
console.log(arr.join(''))		//wesley
console.log(arr.join(' '))	//w e s l e y

2.栈/队列方法

push()

  • 向数组的尾部追加项
  • 返回的是数组的新长度
  • 改变原数组
1
2
3
const arr1 = ['wesley']
console.log(arr1.push('deborah'))		//2
console.log(arr1)			//['wesley','deborah']

pop()

  • 删除一个数组中的最后的一个元素，并且返回这个元素
  • 改变原数组
1
2
3
const arr1 = ['wesley','deborah','lalala']
console.log(arr1.pop())	//lalala
console.log(arr1)			//['wesley','deborah']

shift()

  • 移除数组第一项，并返回该项
  • 改变原数组
1
2
3
const arr1 = ['lalala','wesley','deborah']
console.log(arr1.shift())	//lalala
console.log(arr1)			//['wesley','deborah']

unshift()

  • 在数组最前端添加项，并返回数组新长度
  • 改变原数组
1
2
3
const arr1 = ['love','deborah']
console.log(arr1.unshift('wesley'))	//3
console.log(arr1)		//["wesley", "love", "deborah"]

3.排序方法

reverse()

  • 颠倒数组中元素的位置，该方法返回对数组的引用
  • 改变原数组
1
2
3
4
5
6
const arr = ['w','e','s','l','e','y']
console.log(arr)			//['w','e','s','l','e','y']
const arr2 = arr.reverse()	
console.log(arr)			//["y", "e", "l", "s", "e", "w"]
console.log(arr2)			//["y", "e", "l", "s", "e", "w"]
console.log(arr===arr2)	//true

sort()

  • 对数组进行排序，默认情况下，按照升序排序，sort方法调用每个数组项的 toString() 方法，进行字符串比较
  • 语法：arr.sort([comparefn])
  • 返回排序后的数组
  • 改变原数组
  • 如果指明了comparefn，数组将按照调用该函数的返回值来排序。若 a 和 b 是两个将要比较的元素：
    • 若 comparefn(a, b) < 0，那么a 将排到 b 前面；
    • 若 comparefn(a, b) = 0，那么a 和 b 相对位置不变；
    • 若 comparefn(a, b) > 0，那么a , b 将调换位置；

concat()

  • 将传入的数组或者元素与原数组合并，组成一个新的数组并返回，可以实现浅拷贝
  • 不改变原数组
1
2
3
const arr1 = ['my','name']
const arr2 = ['wesley']
console.log(arr1.concat('is',arr2))   //["my", "name", "is", "wesley"]

slice()

  • 将数组中一部分元素浅拷贝存入新的数组对象，并且返回这个数组对象
  • 接收一或两个参数，分别是返回项的起始和结束位置
  • 返回一个新的数组对象
  • 不改变原数组
1
2
3
const arr = ['w','e','s','l','e','y']
console.log(arr.slice())		//["w", "e", "s", "l", "e", "y"]
console.log(arr.slice(2,4))	//["s", "l"]

splice()

  • 对数组的项进行 删除、插入、替换 等操作，功能十分强大
  • 第一个参数：要删除的第一项的位置
    第二个参数：要删除的项数
    第三个参数（第四个、第五个……）：插入的项
  • 返回由删除的项组成的数组
  • 改变原数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var array = ["apple","boy"];
var splices = array.splice(1,1);
console.log(array); // ["apple"]
console.log(splices); // ["boy"] 
//可见是从数组下标为1的元素开始删除,并且删除一个元素,由于itemN缺省,故此时该方法只删除元素

array = ["apple","boy"];
splices = array.splice(2,1,"cat");
console.log(array); // ["apple", "boy", "cat"]
console.log(splices); // []
//可见由于start超过数组长度,此时从数组末尾开始添加元素,并且原数组不会发生删除行为

array = ["apple","boy"];
splices = array.splice(-2,1,"cat");
console.log(array); // ["cat", "boy"]
console.log(splices); // ["apple"]
//可见当start为负值时,是从数组末尾开始的第-start位开始删除,删除一个元素,并且从此处插入了一个元素

array = ["apple","boy"];
splices = array.splice(-3,1,"cat");
console.log(array); // ["cat", "boy"]
console.log(splices); // ["apple"]
//可见即使-start超出数组长度,数组默认从首位开始删除

array = ["apple","boy"];
splices = array.splice(0,3,"cat");
console.log(array); // ["cat"]
console.log(splices); // ["apple", "boy"]
//可见当deleteCount大于数组start之后的元素总和时,start及之后的元素都将被删除

删除数组中指定元素

1
2
const array = ['a','b','c'];
array.splice(array.indexOf('b'),1);

[ES6]copyWithin()

  • 在数组内部，将指定位置的成员拷贝到其他位置（会覆盖原有成员）

  • 参数copyWithin(target, start, end)

    复制序列到该位置，开始复制元素的起始位置，开始复制元素的结束位置(不包括这个位置的元素)

  • 改变原数组

1
2
3
4
5
6
7
8
9
10
11
[1, 2, 3, 4, 5].copyWithin(-2)
// [1, 2, 3, 1, 2]

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(-2, -3, -1)
// [1, 2, 3, 3, 4]

[ES6]fill()

  • 将数组指定区间内的元素替换为某个值
  • arr.fill(value, start, end = this.length)
  • 改变原数组
1
2
const arr = ['w', 'e', 's', 'l', 'e', 'y']
console.log(arr.fill('s',0,3))	//["s", "s", "s", "l", "e", "y"]

4.查找/位置方法

indexOf()

  • 查找元素在数组中正向第一次出现时的索引，如果没有，则返回-1
  • 不改变原数组
1
2
3
4
5
const array = ['abc', 'def', 'ghi','123'];
console.log(array.indexOf('def')); // 1
console.log(array.indexOf('def',-1)); // -1 此时表示从最后一个元素往后查找,因此查找失败返回-1
console.log(array.indexOf('def',-4)); // 1 由于4大于数组长度,此时将查找整个数组,因此返回1
console.log(array.indexOf(123)); // -1, 由于是严格匹配,因此并不会匹配到字符串'123'

lastIndexOf()

  • 查找元素在数组中逆向第一次出现时的索引，如果没有，则返回-1
  • 不改变原数组
1
2
3
4
5
const array = ['abc', 'def', 'ghi', '123'];
console.log(array.lastIndexOf('def')); // 1
console.log(array.lastIndexOf('def', -1)); // 1
console.log(array.lastIndexOf('def', -4)); // -1 
console.log(array.lastIndexOf(123)); // -1,

[es6]find()

[es6]findIndex()

  • find()返回数组中第一个满足条件的元素（如果有的话）， 如果没有，则返回undefined
  • findIndex()返回数组中第一个满足条件的元素的索引（如果有的话）否则返回-1
1
2
3
4
5
6
7
8
9
10
11
var array = [1, 3, 5, 7, 8, 9, 10];
function f(value, index, array){
  return value%2==0; // 返回偶数
}
function f2(value, index, array){
  return value > 20; // 返回大于20的数
}
console.log(array.find(f)); // 8
console.log(array.find(f2)); // undefined
console.log(array.findIndex(f)); // 4
console.log(array.findIndex(f2)); // -1

[es7]includes()

  • 判断当前数组是否包含某个指定的值，如果是，则返回 true，否则返回 false。
  • arr.includes(element, fromIndex=0)
1
2
3
4
var array = [-0, 1, 2];
console.log(array.includes(+0)); // true
console.log(array.includes(1)); // true
console.log(array.includes(2,-4)); // true

5.迭代方法

forEach()

every()

some()

filter()

map()

  • 描述：迭代数组，对数组的每一项执行给定函数
  • 参数：第一个参数：函数func
                函数接收三个参数
                1、数组的项`currentValue`
                2、该项在数组中的位置`index`
                3、数组对象本身`array`
        第二个参数：第一个参数的执行环境(this指向)
  • 返回值：
        forEach() 无返回值(undefined)
    every() 对数组运行给定函数，如果该函数对每一项都返回true，则返回true
    some() 对数组运行给定函数，如果该函数对任意一项返回true，则返回true
    filter() 对数组执行给定函数，返回该函数返回true的项组成的数组
    map() 对数组执行给定函数，返回每次函数调用结果组成的数组

例：在数组 arr 中，查找值与 item 相等的元素出现的所有位置

1
2
3
4
5
arr.map((curitem,index)=>{
       if(curitem===item){
           return index
       }
   })

例：为数组 arr 中的每个元素求二次方。不要直接修改数组 arr，结果返回新的数组

1
arr.map((item)=> item*item)

例：找出数组 arr 中重复出现过的元素

1
2
3
arr.filter((item,index,arr)=>{
      return arr.indexOf(item) !== arr.lastIndexOf(item) && index === arr.indexOf(item)
   })

例：统计数组 arr 中值等于 item 的元素出现的次数

1
2
3
4
5
6
arr.reduce((count,currentitem)=>{
       if(currentitem === item) {
           count++
       }
       return count
   },0)

例：给定字符串 str，检查其是否包含连续重复的字母（a-zA-Z），包含返回 true，否则返回 false

1
2
3
4
const arr = str.split('')
   return arr.some((item,index,arr)=>{
       return arr.indexOf(item) === arr.lastIndexOf(item)-1 && (item >= 'a' && item <= 'z' || item >= 'A' && item <= 'Z')
   })

6.归并方法

reduce()

  • 对数组中的每个元素执行一个callback函数(升序执行)，将其结果汇总为单个返回值

  • arr.reduce(callback(accumulator, currentValue, index, array), initialValue])

  • callback函数接收4个参数:

    1. accumulator (acc) (累计器)
    2. current Value (cur) (当前值)
    3. current Index (idx) (当前索引)
    4. source Array (src) (源数组)

    initialValue: 作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错

1
2
3
4
5
6
7
const PaymentsList = storePayments.reduce(
	(result, currentPayment) => {
		if (selected.includes(currentPayment.paymentCode)) 
            result.push(currentPayment.paymentTitle)
        return result
     }, [],
)