原生js对数组的操作

查看原生js数组的属性和方法

Array.prototype

Array构造函数：

from 方法

// Array.prototype 的 constructor

// from 将类似于数组的对象，或者可以迭代的对象转化为对象的实例 

from(arrLike, mapFn, thisArg ) 

arrLike：可转化为数组的伪数组或者可以迭代的对象，必传
mapFn: 对传入的 arrLike 进行map回调操作
thisArg: 对执行的回调 mapFn 指定的 this 对象

// 示例

// form 将对象转化为数组

let objArr_01 = { 'a':0, 'b':1 }; Array.from( objArr_01 ); // [ ] 此时的对象并不符合要求
let objArr_02 = { '0':0, '1':1 }; Arrry.from( objArr_02 ); // undefine 
let objArr_03 = { '0':0, '1':1, length:2 }; Array.from( objArr_03 ) // [ 0, 1 ]

isArray 方法

// Array.prototype constructor

// isArray( arr ) 接受一个变量判断改变脸是否为数组

// 示例情况

//返回 true

Array.isArray( [] );
Array.isArray( [1] );
Array.isArray( new Array() );
Array.isArray( Array.prototype );  // Array 的原型也是数组，Object的原型并不是数组


// 下面的情况会返回 false

Array.isArray( );
Array.isArray( { } );
Array.isArray( null );
Array.isArray( undefined );
Array.isArray( 17 );
Array.isArray( 'Array' );
Array.isArray( true );
Array.isArray( false );
Array.isArray( { __proto__: Array.prototype } );

// 注意事项
Array.isArray( arr ) 、 arr instanceof Array 两种方式都可以检测数组，但是，优先考虑isArray
isArray 可以检测出 iframe 的情况，instanceof 并不能

of 方法

// Array.prototype constructor

//  Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型

// of() 创建的数组，与直接创建数组的区别

new Array(4); // undefined
Array.of(4);  // [,,,]  length:4, value 0

concat 方法

// concat 将数组的数据抽离，拼接成新的数组

// arr.concat(a, b, b)  a, b, c 可以为一个数组，多个数组，或者是多个值

// concat 连接两个数组，并没有指向原数组的内存，所以不会影响原数组

let arr1 = [1, 2, 3] // 
let arr2 = arr1.concat( 4, 5 ); // 1, 2, 3, 4, 5
let arr3 = arr1.concat( arr2 ); // 1, 2, 3, 1, 2, 3, 4, 5

copyWithin

array.copyWithin(target, start, end) 

// target 赋值到指定目标的索引位置 必填
// start 元素复制的起始位置 
// end   元素复制的结束位置

// 传入的start, end 一般为正整数，当传入的数为小数或者负数的情况，小数会取整数部分，负数按倒叙来取

[1, 2, 3].copyWithin( 0, 1, 2 ) // [ 2, 2, 3]
[1, 2, 3].copyWithin( 0, 1.1, 2 ) // [ 2, 2, 3 ]
[1, 2, 3].copyWithin( 0, 1.9,2) // [ 2, 2, 3]
[1, 2, 3].copyWithin( 0, -1 ) // [ 3, 2, 3]

// 值得注意的是，copyWithin 也不会影响原先的数组

 

entries

// entries() 遍历数组的 key, value

let arr = [ 0, 1, 2];
for ( let [ key, value ] of arr.entries() ) { console.log( key, value ) };

0 0
1 1
2 2

every、some

// every() 遍历数组的所有对象，当所有的对象符合条件返回 true
相当于 &&

array.every( function( currentValue, index, arr ), thisValue )

function 必传：对数组元素进行遍历的操作

    currentValue: 当前元素的值，必须传入的参数
    index: 当前元素的索引
    arr: 当前元素所属于的数组

thisValue ：可选参数，执行回调函数的时候用作this，当什么都不传，则为undefined


array.some( function( currentValue, index, arr ), thisValue )

相当于 ||

fill

// fill 填充数组，将一个固定的值替换数组元素

fill( value, start, end ) 

value : 必选
start : 开始填充的起点位置
end : 填充的结束位置

let arr1 = [ 1, 2, 3] ;

let arr2 = arr1.fill( 'a' );  // arr1: 'a', 'a', 'a' , arr2: 'a', 'a','a'

let arr3 = [1, 2, 3].fill('a', 0.9, 2); // 'a', 'a', 3

let arr4 = [1, 2, 3].fill( 'a', -2 ); // 1, "a", "a"

filter

// 过滤出数组中符合条件的值，不会检测空数组，也不会改变原先的数组


array.filter( function( currentValue, index, arr ), thisValue )

function: 必传, 过滤数组执行的方法
    currentValue： 当前元素值
    index: 当前元素索引
    arr : 当前遍历的数组
thisValue: 选填，函数执行时候，传给函数的，用作 this 的值
  
使用示例：

[ 1, 2, 3, 4 ].filter( function ( currentValue ) { return currentValue<3 } ) // 1, 2

 find 

array.find( function( currentValue, index, arr ), thisValue)

// 传入的参数与前面的 every 类似

// find 返回符合条件的第一个值，没有则返回 undefined

[ 1, 2, 3, 4 ].find( function ( item  ){ return item > 2 } )  // 3

findIndex

array.findIndex( function( currentValue, index, arr ), thisValue )

// 传参方式与 every 方式一样

返回符合条件的第一个值在数组中的索引，当没有符合条件的值，返回 -1

forEach、map

array.map (function ( currentValue, index, arr), thisValue)
array.forEach ( function ( currentValue, index, arr), thisValue)

//对数组中的元素进行遍历操作，传参的方式与every类似

// 对数组的遍历 ，for > forEach > map 性能的比较 map 会返回一个等长的数组

// 需要进行 break 的操作，用for

// 对数组进行简单的数据操作，用forEach

// 需要映射新的数组，则用 map

includes

// arr.includes( val )

判断一个值 val 是否在 arr 中

存在返回 true, 不存在返回 false

判断用的是 ‘===’ 区别在于，includes() 能够判断出 NaN

indexOf、lastIndexOf

array.indexOf(item, start)
array.lastIndexOf(item, start)

indexOf : 查找数组中，item在数组中，从左到右，第一个出现的位置，不存在则返回 -1
lastIndexOf : 查找数组，item在数组中，从右到左，第一个出现的位置，不存在返回 -1

 

join

// Array.prototype constructor 

// join 的方法 将数组转化为字符串

// 使用示例

Array.join('')

[1,2,3].join(',')  1,2,3
[1,2,3].join('')   123

 

 

pop、shift、push、unshift

// 数组的队列，栈方法

// push() 在数组中末尾添加新的元素，一个或者多个,返回数组的新长度
// pop()  删除数组的最后一个元素，返回被删除的元素，改变数组的长度
// unshift() 在数组的开头添加新的元素，一个或者多个，返回数组的新长度
// shifr() 删除数组的第一个元素，返回数组被删除的值，改变数组的长度

 

reduce、reduceRight

// reduce 接受一个函数作为累加器，对数组元素从左到右进行遍历，最终形成一个累加值

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

function 必须：
    total: 初始值，也是最后返回的值，必传
    currentValue: 当前的元素值， 必传
    currentIndex: 当前元素值的索引
    arr: 当前元素所属的对象
initialValue: 初始值，可选

array.reduceRight( function( total, currentValue, currentIndex, arr), initialValue )
// 从右到左进行遍历

reverse

arr.reverse(); // 将数组进行倒叙排列

[1, 2, 3, 4].reverse() // 4, 3, 2, 1

slice

arr.slice( start, end )//选取数组的一部分，返回一个新的数组，不会改变原先的数组

let arr1 = [ 1, 2, 3];
let arr2 = arr1.slice(0);
arr2[ 0 ] = 'a';
arr1 // 1, 2, 3 

sort

// 对数组进行排序，会影响原数组，sort 按照字符的编码进行排序

// 应当传入一个函数

// arr.sort( function (a, b) { return a - b } )  升序进行排列

[ 1, 435, 12, 56].sort( function( a, b ){ return a - b } )  // [1, 12, 56, 435]

// arr.sort( function (a, b) { return b - a } )  倒序进行排列

splice

array.splice( index, howmany, item1,.....,itemX )

//注意改方法会改变原先数组

// index 删除/添加的起始位置，必须是数字
// howmany 删除多少项，可以为0, 当不存在的时候，则从index 开始往后一直删除到数组的结尾
// item1。。。 添加进去的数

toString

// arr.toString() 把数组转为字符串

[ 1, 2, 3, 4 ].toString() // '1, 2, 3, 4'