超详细的JavaScript Array数组相关汇总

前言

在RN中涉及到比较多的数组的相关操作,所以在这里对这块内容进行一个整理总结,也是对这块知识的学习!
本文前一部分内容,根据菜鸟教程整理!

创建数组

创建数组一般来说有下边三种方式:

var array = new Array();
var array = new Array(length);
var array = new Array(element0, element1, ..., elementn);
//或者
var array = [element0, element1, ..., elementn];

Array()是构造函数,一般来说使用 new Array()来返回新创建并被初始化了的数组。当它做为函数调用时,跟它使用new 运算符调用一样!

第一个没有参数,就返回一个空数组。
第二个一个参数,那么这个参数就表示你想要创建的数组的长度length,返回一个长度为指定参数的空位数组。
比如:

Array(3)
//[,,,]

第三个多个参数(最少2个),这些参数就表示数组中的元素,返回一个以这些参数为元素的数组。

属性

属性没什么好说的,有下边3个属性:

  • constructor 返回对创建此对象的数组函数的引用。
  • length 设置或返回数组中元素的数目。
  • prototype 向数组对象添加属性和方法。

方法

  • concat() 连接两个或更多的数组,并返回一个新的数组
    语法:array1.concat(array2,array3,...,arrayX)
    参数可以是一个或者多个数组,也可以是一个或者多个元素。
    注意:array1并不会变化,返回的是一个新的数组。

  • copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中,返回当前数组
    语法:array.copyWithin(target, start, end)
    第一个参数target必需。复制到指定目标索引位置。
    第二个参数start可选。元素复制的起始位置。(默认为0)如果为负值,表示倒数。
    第三个参数end可选。到该位置前停止读取数据 (默认为 array.length)如果为负值,表示倒数。
    注意:这个方法是ES6新加入的!

  • every() 检测数值元素的每个元素是否都符合条件。返回true或者false,并不改变当前数组中的元素
    语法:array.every(function(currentValue,index,arr), thisValue)
    首先every()的第一个参数是一个函数,也就是所说的指定条件!这个参数是必需的。数组中的每一个元素都会执行这个函数,来检测是否符合条件。如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。如果所有元素都满足条件,则返回 true。函数中第一个参数currentValue 必需。表示当前元素的值。第二个参数index 可选。当前元素的索引值。第三个参数arr 可选。当前元素属于的数组对象。
    然后every()的第二个参数thisValue是可选的。对象作为该执行回调时使用,传递给函数,用来绑定回调函数的this对象。如果省略了 thisValue ,”this” 的值为 “undefined”

  • fill() 使用一个固定值来填充数组。返回当前数组
    语法:array.fill(value, start, end)
    第一个参数value必需。填充的值。
    第二个参数start可选。开始填充位置。(默认为0)
    第三个参数end 可选。停止填充位置(不包含) 。(默认为 array.length)
    注意:这个方法是ES6新加入的!

  • filter() 检测数值元素,并返回符合条件所有元素的一个新的数组。
    语法:array.filter(function(currentValue,index,arr), thisValue)
    这个方法中所有参数跟every()方法相同!

  • find() 返回第一个符合传入测试(函数)条件的数组元素。如果没有则返回undefined并没有改变数组的原始值。
    语法:array.find(function(currentValue, index, arr),thisValue)
    这个方法中所有参数跟every()方法相同!
    注意:这个方法是ES6新加入的!

  • findIndex() 返回第一个符合传入测试(函数)条件的数组元素索引。如果没有则返回-1。并没有改变数组的原始值。
    语法:array.findIndex(function(currentValue, index, arr), thisValue)
    这个方法中所有参数跟every()方法相同!
    注意:这个方法是ES6新加入的!

  • forEach() 数组每个元素都执行一次回调函数,常用来遍历数组中的元素
    语法:array.forEach(function(currentValue, index, arr), thisValue)
    这个方法中所有参数跟every()方法相同!

  • indexOf() 搜索数组中的元素,并返回它第一个所在的位置。如果没有该元素则返回-1。
    语法:array.indexOf(item,start)
    第一个参数item 必须。查找的元素。
    第二个元素start 可选的整数参数(默认为0)。规定在字符串中开始检索的位置。它的合法取值是 0 到 array.length - 1。

  • join() 把数组的所有元素放入一个字符串。返回转换后的字符串
    语法:array.join(separator)
    参数separator是可选的,指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

  • lastIndexOf() 返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索
    语法:array.lastIndexOf(item,start)
    参数和indexOf()相同,不过因为是从后往前搜索,第二个参数start的默认值为array.length - 1。

  • map() 通过指定函数处理数组的每个元素,并返回处理后的新的数组,并不会改变源数组的值
    语法:array.map(function(currentValue,index,arr),thisValue)
    这个方法中所有参数跟every()方法相同!

  • pop() 删除数组的最后一个元素并返回删除的元素。会更改原始数组的长度
    语法:array.pop()

  • push() 向数组的末尾添加一个或更多元素,并返回新的长度。会更改原始数组的长度
    语法:array.push(item1, item2, ..., itemX)

  • reduce() 将数组元素计算为一个值(从左到右)。
    语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
    reduce()接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
    第一个参数为function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。函数中第一个参数total 必需。初始值, 或者计算结束后的返回值。第二个参数currentValue必需。当前元素。第三个参数currentIndex可选。当前元素的索引。第四个参arr可选。当前元素所属的数组对象。
    第二个参数initialValue可选。传递给函数的初始值。

  • reduceRight() 将数组元素计算为一个值(从右到左)。
    语法:array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
    这个方法参数和reduce()相同。不同的是它从数组的末尾向前将数组中的数组项做累加。

  • reverse() 反转数组的元素顺序。会将原数组元素顺序反转。
    语法:array.reverse()

  • shift() 删除并返回数组的第一个元素。会更改原始数组的长度
    语法:array.shift()

  • slice() 选取数组的的一部分,并返回一个新数组,并不会更改原始数组的值。常用来截取数组。
    语法:array.slice(start, end)
    第一个参数start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
    第二个参数end 可选(默认为数组长度)。规定从何处结束选取(不包含)。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

  • some() 检测数组元素中是否有元素符合指定条件。返回ture或者false,并不改变当前数组中的元素
    语法:array.some(function(currentValue,index,arr),thisValue)
    这个方法中所有参数跟every()方法相同!
    但是我们需要注意其与every()方法的区别:
    some() 方法会依次执行数组的每个元素:如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。

  • sort() 对数组的元素进行排序。会改变原始数组
    语法:array.sort(sortfunction)
    参数sortfunction是可选的,是一个函数,来规定排序顺序。
    排序顺序可以是字母或数字,并按升序或降序。默认排序顺序为按字母升序。

  • splice() 从数组中添加,替换或删除元素。会改变原始数组
    语法:array.splice(index,howmany,item1,.....,itemX)
    第一个参数index 必需。规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
    第二个参数howmany必需。规定应该删除多少元素。必须是数字,但可以是 “0”。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
    第三个参数item1, ..., itemX可选。要添加到数组的新元素。

  • toString() 把数组转换为字符串,并返回结果。数组中的元素之间用逗号分隔。
    语法:array.toString()

  • unshift() 向数组的开头添加一个或更多元素,并返回新的长度。会更改原始数组的长度
    语法:array.unshift(item1,item2, ..., itemX)

  • valueOf() 返回数组对象的原始值。并不改变原始数组。
    语法:array.valueOf()
    valueOf() 方法返回 Array 对象的原始值。
    该原始值由 Array 对象派生的所有对象继承。
    valueOf() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中。

ES6中数组的拓展

除了上边方法中提到的ES6中新添加的之外,还有一些其他的关于数组的拓展,下边是根据阮一峰老师的ECMAScript 6 入门 数组的扩展做的笔记!

扩展运算符

扩展运算符(spread)就是是三个点...,主要用于函数调用,作用就是将一个数组,变为参数序列
比如:

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

function push(array, ...items) {
  array.push(...items);
}

由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。

// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

其他相关的内容,可以去上边链接中查看!

Array.from()

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。
比如:

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

另外上边说的扩展运算符...,是可以将部署了遍历器接口(Symbol.iterator)的对象转换为数组。Array.from方法还支持类似数组的对象。所谓类似数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过Array.from方法转为数组,而此时扩展运算符就无法转换。

Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

Array.of()

Array.of方法用于将一组值,转换为数组。这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。
Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。

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

Array.of总是返回参数值组成的数组。如果没有参数,就返回一个空数组。

数组实例的 entries(),keys() 和 values()

ES6 提供三个新的方法——entries(),keys()和values()——用于遍历数组。它们都返回一个遍历器对象,可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
比如:

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b

数组实例的 includes()

Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。ES2016 引入了该方法。

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

该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:上身试试 返回首页