ES6►array

array

一、拓展运算符号应用

1.当函数参数较多时，用来传一个数组，通过拓展运算：

1
2
3
4
5
6

let arrs = [3, 5, 6]
function add (a, b, c) {
  console.log(a, b, c)
}
add(...arrs)

2.配合Math,获取最大值。

1
2
let arrs = [1, 3, 5]
Math.max(...arrs)

另一种方式es5：

Math.max其实是Number的方法，数组通过apply调用。

Math.max.apply(Number, [1, 4, 5, 6, 2, 3])

3.合并数组，还是蛮方便的。

1
2
3
4

var a = [1, 3]
var b = [2, 4]
console.log([...a, ...b])
  1. 拓展运算符,仔细体会下面的代码，vue的mapGetters等用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let obj1 = {
  a: 3
}
let obj2 = {
  b: 3
}

let arrSub = [obj1, obj2]
let objSub = {obj1, obj2}

// 在自仔细体会一下拓展运算符的功能,数组拓展后索引被用来做属性名字
let obj4 = {
  ...arrSub
}

// 对象的拓展会直接取对象名字作为属性名字，对象属性简写
let obj5 = {
  ...objSub
}

5.解决数组复制的引用问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let aa = [1, 3]

let bb = aa

aa[0] = 3

console.log(bb)

=================

let arr = [3, 5]

const a2 = [...arr]  或者  const [...a2] = arr

arr[0] = 7

console.log(a2)

二、Array.from()

1.将类数组转化为数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let arr = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};

// ES5
var arr1 = [].slice.call(arr)

// ES6
let arr2 = Array.from(arr)

对于document.querySelectorAll()返回的节点集合和argments均可。

2.将字符串转为数组，然后返回字符串的长度。可以避免 JavaScript 将大于\uFFFF的 Unicode 字符，算作两个字符的 bug 。

1
2
3
function countSymbols(string) {
return Array.from(string).length
}

三、Array.of()

1.将一组值，转换为数组

Array.of用来避免Array()或new Array()的问题。

1
2
3
4
5
Array(3)             // [, , ,]
Array(3, 11, 8)      // [3, 11, 8]

Array.of(undefined)  // [undefined]
Array.of(1, 2)       // [1, 2]

四、find() 和 findIndex()

1、find(); 返回第一个满足条件的值，没有undefined。回调三个参数，当前值，当前索引，原数组

1
2
3
4
var ARR = [1, 4, 7, 33]
ARR.find(function(value, index, arr) {
  return value > 20
})

2、findIndex() 同上，只不过是返回了第一个的索引。能够识别NaN

1
[NaN].findIndex(e => Object.is(NaN, e))

五、数组常用方法

forEach:

  • 没有返回值

  • break，continue）不可以跳出

  • callback有三个参数, element, index, array。

1
2
3
4
5
6
7
8
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
let forEach = arr.forEach((a, n, i) => {})
console.log(forEach)

for (let i = 0; i< arr.length; i++) {
  // if (i === 3)  break
  if (i === 3)  continue
}

filter:

  • 返回符合条件的新数组

  • break，continue）不可以跳出

  • callback三个参数, element, index, array

1
2
let filter = arr.filter((a, n, i) => { return n > 3 })
console.log(filter)

every:

  • 返回布尔值，所有的满足条件为true，遇到一个不满足即刻退出, 返回false,

  • break，continue不可以跳出，

  • callback三个参数，element, index, array

1
2
let every = arr.every((a, n, i) => { return a > 3 })
console.log(every)

some：

  • 返回布尔值，遇到一个满足条件的值后即刻返回true，否则返回false

  • break，continue）不可以跳出

  • callback三个参数，element, index, array

1
2
let some = arr.some((a, n, i) => { return a > 3 })
console.log(some)

map：

  • 返回新的数组，数组的每一项是返回的值，没有return 则每一项都是undefined

  • break，continue 不可以跳出

  • callback三个参数，element, index, array

1
2
3
4
5
let map = arr.map((a, n, i) => {
  let val = a * 2 + 3
  return val
})
console.log(map)

reduce：

  • 返回任意内容

  • break，continue不可以跳出

  • callback四个参数，accumulator: 计算参数，每次计算得到的return值（下面指定了初始值10）, element, index, array,与callback同级的参数还有initialValue，作为callback第一个参数的初始参数。

1
2
3
4
5
let reduce = arr.reduce((a, n, i, j) => {
  console.log(a, n, i, j, 'reduce')
  return a + n
}, 10)
console.log(reduce)

find：

  • 返回第一个符合条件的数组元素

  • break，continue不可以跳出

  • callback三个参数， element, index, array。

1
2
3
4
let find = arr.find((a, n, i) => {
  return a > 4
})
console.log(find)

findIndex：

  • 返回第一个符合条件的元素索引，没有返回-1

  • break，continue不可以跳出

  • callback三个参数， element, index, array。

1
2
3
4
let find = arr.findIndex((a, n, i) => {
  return a > 4
})
console.log(find)

indexOf：

返回第一个符合条件的元素索引, 没有返回-1

1
[1, 3, 5, 8].indexOf(8)

fill:

填充数组，三个参数，填充内容，开始位置，结束位置。可以用来清空数组任意位置内容。

1
['a', 'b', 'c'].fill('', 1, 2)

PS:新建一个初始长度为n的数组

1
2
3
4
5
6
7
8
9
10
11
12
13
方式1:es6

let arr = Array.from({ length: 100 })
// Object.keys(arr)

方式2:es5
let arr = Array.apply(null,{ length: 100 })
// Object.keys(arr)

方式3:es6
Array.from(new Array(100).keys())
方式4:es6
[...Array(100).keys()]

includes：

  • 返回true 或 false

  • 两个参数：参数二是搜索的起始位置，默认为 0。如果为负数，则表示倒数的位置

1
2
3
4
[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(2, -1) // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

entries，keys，values：

  • 它们都返回一个遍历器对象，可以用for…of循环进行遍历

  • 唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 快速生成二维数组

let arr = ['a', 'b', 'c'].entries()
Array.from(arr)


let arrKey = ['a', 'b', 'c'].keys()
console.log(...arrKey)
console.log(Array.from(arrKey))


let arrVal = ['a', 'b', 'c'].values()
console.log(...arrVal)
console.log(Array.from(arrVal))

Array.isArray:

1
2
3
4
5
6
7
8
9
10
Array.isArray([1, 2, 3])   // true
Array.isArray({foo: 123})  // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]'
  }
}

六、操作数组

push：

  • 方法可向数组的末尾添加一个或多个元素，并返回新的长度

  • 新元素将添加在数组的末尾

  • 此方法改变原数组的长度

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

shift：

  • 把数组的第一个元素从其中删除，并返回第一个元素的值

  • 此方法改变原数组的长度

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

unshift：

  • 向数组的开头添加一个或更多元素，并返回新的长度

  • 该方法将改变原数组的数目

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

pop：

  • 用于删除数组的最后一个元素并返回删除的元素

  • 此方法改变原数组的长度

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

split：

  • 用于把一个字符串分割成字符串数组

  • 如果把空字符串 (“”) 用作分割参数，每个字符之间都会被分割

1
2
3
('a;b;c;d').split(';')  // ["a", "b", "c", "d"]

('a;b;c;d').split('')   // ["a", ";", "b", ";", "c", ";", "d"]

join：

  • join() 方法用于把数组中的所有元素转换一个字符串
1
2
[1, 2, 3].join(';')  // "1;2;3"
[1, 2, 3].join('')   // '123'

splice：

  • 如果从数组中删除了元素，则返回的是含有被删除的元素的数组

  • 用于添加或删除数组中的元素

  • 这种方法会改变原始数组

  • 参数：(index,howmany,item1,…..,itemX)

  • index：必需，规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字

  • 可选，规定应该删除多少元素。必须是数字，但可以是 “0”。如未规定，则删除从 index 开始到原数组结尾的所有元素

  • 可选，要添加到数组的新元素

1
2
3
4
5
6
7
8
9
let arr = ['a','b','c','d']
console.log(arr.splice(1, 1))    // b
console.log(arr)                 // ["a", "c", "d"]

// 添加

let arr = ['a','b','c','d']
console.log(arr.splice(2,0, 77))   // []
console.log(arr)                   // ["a", "b", 77, "c", "d"]

slice：

  • slice() 方法可从已有的数组中返回选定的元素

  • slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分

  • slice() 方法不会改变原始数组

  • 参数： start 和 end

  • start：可选，如是负数，从数组尾部开始算起。-1 指最后一个元素，-2 指倒数第二个元素，以此类推

  • end： 可选，未指定，取start到数组结尾，负数，从数组尾部开始算

1
2
3
let arr = ['a','b','c','d']
console.log(arr..slice(2, 3))   // ['c']
console.log(arr)                // ['a','b','c','d']

reverse：

  • 该方法会改变原来的数组，而不会创建新的数组
1
2
let arr = ['a','b','c','d']
console.log(arr.reverse())  // ["d", "c", "b", "a"]

concat：

  • concat() 方法用于连接两个或多个数组

  • 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本

1
2
3
4
5
let arr = [1, 2, 3]
let arr2 = [4, 5, 5]
console.log(arr2.concat(arr)) // [4, 5, 6, 1, 2, 3]
console.log(arr2)             // [4, 5, 5]
console.log(arr)              // [1, 2, 3]

sort：

  • 对数组的引用。请注意，数组在原数组上进行排序，不生成副本

  • sort() 方法用于对数组的元素进行排序

  • 排序顺序可以是字母或数字，并按升序或降序

  • 默认排序顺序为按字母升序

  • 当数字是按字母顺序排列时”40”将排在”5”前面

  • 使用数字排序，你必须通过一个函数作为参数来调用

  • 函数指定数字是按照升序还是降序排列

  • 这种方法会改变原始数组

function的两个参数分别是数组的n+1和n的相邻两项

（n+1）- n ： 是按照从小到大排序， 反之从大到小。

1
2
3
let arr = [40,100,1,5,25,10]
arr.sort(function(a,b){return a-b})
console.log(arr)  // [1, 5, 10, 25, 40, 100]

基于sort的一个排序方法分离

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 分开数字和字符

function s(a, b) {
  if (a > b) return 1
    return -1
}

// 分开浮点数和整数

function m(a, b) {
  if (a > Math.floor(a)) return 1
  if (b > Math.floor(b)) return -1
}

// [1, 2, 3, 3, 4, 5, 9, "A", "B", "C", "a", "b", "c"]
let str = ['a', 'c', 'A', 'b', 'C', 'B', 1, 3, 2, 9, 4, 3, 5].sort(s)

// [1, 4, 2, 4.22, 1.21, 2.44]
let floor = [1, 4, 2, 4.22, 1.21, 2.44].sort(m)

copyWithin:

  • 改变原数组

  • 参数：target, start, end

  • target：必需。复制到指定目标索引位置

  • start：可选。元素复制的起始位置

  • end： 可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数

1
2
let arr = ['a', 'b', 'c']
arr.copyWithin(2, 0)     // ["a", "b", "a"]

lastIndexOf:

  • 返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找

  • 如果要检索的元素没有出现，则该方法返回 -1

  • 该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的

  • 如果在数组中没找到指定元素则返回 -1。

1
2
let arr = ['a', 'b', 'c', 'd', 'g', 'l']
arr.lastIndexOf('g')   // 4

toString：

1
['f', 'c'].toString()  // f,c

js类型判断：

Object.prototype.toString: Object.prototype下的toString是最原始方式，其他类型都或多或少重写了toString()方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Object.prototype.toString.call({})             // [object Object]

Object.prototype.toString.call([])             // [object Array]

Object.prototype.toString.call(function(){})   // [object Function]

Object.prototype.toString.call('')             // [object String]

Object.prototype.toString.call(1)              // [object Number]

Object.prototype.toString.call(true)           // [object Boolean]

Object.prototype.toString.call(null)           // [object Null]

Object.prototype.toString.call(undefined)      // [object Undefined]

Object.prototype.toString.call()               // [object Undefined]

Object.prototype.toString.call(new Date())     // [object Date]

Object.prototype.toString.call(/at/)           // [object RegExp]
返回
顶部