js 数组方法总结

时间:2022-04-04 15:06:42

Array数组:

length属性

    可通过array.length增加或者减少数组的长度,如;array.length=4(数组长3,第四位为undefined),也可单纯获得长度。array[array.length]=’’赋值。

检测数组

检测是否数组ES3  instanceof array  ES5新增的Array.isArray(),支持的IE9+,Opera 10.5+,ChromeSafari5+

 

一:原数组不变  [,start],表示01个参数

concat()

无参,返回数组副本;参数为数组,将两个数组连接;不是数组,添加到结果数组末尾。在concat拷贝原数组的过程中,对象引用时会复制对象引用到组合的新数组中,原数组和新数组中的对象引用都指向同一个实际变量。所以,实际对象被修改时,两数组同时被修改。

粒:js 数组方法总结js 数组方法总结

                            

 

includes()

ES7。返回一个布尔值,表示数组中是否包含给定的值,与字符串includes方法类似。

Includes(searchElement,fromIndex),fromIndex可选,表示开始位置,如果为负值,按升序从array.length+fromIndex索引开始搜索。

Includes()作为一个通用方法,也可以用于其他类型对象,栗子:

(function() {

  console.log([].includes.call(arguments, 'a')); // true

  console.log([].includes.call(arguments, 'd')); // false

})('a','b','c');

兼容性(IE未实现)

 

join()

只接受一个参数,分隔符的字符串,然后返回所有项的字符串,array.join(“||”)//1||2||3

如果参数为空,将数组中的元素直接拼接。Undefied or null 转化为空字符串

slice()

将数组的一部分浅复制(shallow copy)存入新的数组并返回,不改变原数组。

1参或两参;1个参返回的是从该参数指定位置到数组末尾项;2个参返回起始和结束位置之间项,不包括结束位置项。

 

indexOf(searchElement,fromIndex)

要查找的项,(可选)表示查找起点位置的索引。没有找到返回-1,从头开始查找;第二参数表示开始查找的位置,返回的结果依然是数组中的排位。故作用不大。

 

lastIndexOf()从尾开始查找;

toString()返回由数组中每个值得字符串形式拼接而成的一个逗号分隔的字符串,

valueOf()返回的还是数组。

toLocaleString()和前两者差不多。

   

二、改变自身方法

arr.copyWithin(target[, start[, end]])     兼容问题

数组内部替换操作,负数,倒数开始

[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] 

 

array.fill(value [,statrt [, end ]])

将指定区间元素填充

[1, 2, 3].fill(4);               // [4, 4, 4]

[1, 2, 3].fill(4, 1);            // [1, 4, 4]

[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]

[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]

[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]

[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]

Array(3).fill(4);                // [4, 4, 4]

[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}

 pop()

从数组末尾移除最后一项,减少数组的length值,返回移除的项。

push()

可以接受任意数量的参数,把它们逐个添加到数组的末尾,并返回修改后数组的长度

reverse()

反转数组项的顺序

shift()

移除数组中的第一项并返回第一项,数组长度减1

unshift()

在数组前端添加任意个项,并返回新数组的长度

 

sort()

默认是按升序排列数组,比较的是字符串。要想按自己想法排序,写方法。Sort(方法名) a>b return 1,反之-1,相等 return 0

 

 splice()最强大的数组方法。向数组的中部插入项。

    1:删除,2个参数,要删除的第一项位置和项数,splice(0,2)删除数组中的前两项。

    2:插入,3个参数,起始位置、要删除的项数、要插入的项数,如果是多项,继续传入参数,第4,5更多。Splice(2,0,’1’,’2’),当前数组位置2插入字符串1,2

3:替换,可以向指定位置插入任意数量的项,同时删除任意数量的项。用法同第二条,第二个参数不是0

栗子:

删除给定数组中的第二项和第三项,并且在得到的新的数组中第一项后面添加一个新的值

var arr1 = ['a','b','c','d','e'];

var arr2 = arr1. splice ( 1 , 2 ,'newvalue');

 

 

 三、遍历方法

forEach((v, i, a) => {})
让数组的每一项都执行一次给定的函数
v表示当前项的值,i表示当前索引,a表示数组本身
forEach遍历的范围在第一次调用 callback前就会确定。调用forEach后添加到数组中的项不会被 callback访问到。如果已经存在的值被改变,则传递给 callback的值是 forEach遍历到他们那一刻的值。已删除的项不会被遍历到。

 

entries();

返回一个array

栗子:

var arr = ["a", "b", "c"];

var eArr = arr.entries();

console.log(eArr.next().value); // [0, "a"]

console.log(eArr.next().value); // [1, "b"]

console.log(eArr.next().value); // [2, "c"]

 

every(),对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true

some()是对数组中每一项运行指定函数,如果该函数对任一项返回true,则返回true

   

 filter()

使用指定的函数测试所有元素,并创建一个包含所有测试通过的元素的新数组
callback函数返回一个布尔值,true即通过测试
不会改变原数组

栗子1

function traverse(){//输出所有页面宽度和高度大于50像素的节点

    return Array.prototype.filter.call(document.querySelectorAll('body *'), function(node){

        return node.offsetWidth > 50 && node.offsetHeight > 50;

    });

}

栗子2

var a1 = ['a', 10, 'b', 20, 'c', 30];var a2 = a1.filter(function(item) {

    return typeof item == 'number';

});console.log(a2); // logs 10,20,30

 

find()

查询到第一个符合条件的就返回             IE不支持

 

   

keys()                                    IE不支持

返回一组数组索引的迭代器(类似于entries

var arr = ['a', , 'c'];

var sparseKeys = Object.keys(arr);

var denseKeys = [...arr.keys()];

console.log(sparseKeys); // ['0', '2']

console.log(denseKeys);  // [0, 1, 2]

 

array.map((v, i, a) => {})                       IE9+
返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
map 不修改调用它的原数组本身(当然可以在 callback 执行时改变原数组)

var numbers = [1, 4, 9];

var roots = numbers.map(Math.sqrt);

// roots is now [1, 2, 3]

// numbers is still [1, 4, 9]

 

 

    

var number = [1,2,3,4,5,4,3,2,1];

   Var everyResult = number.every(function(item,index,array){

//函数

})

Alert(everyResult);

 

reduce()reduceRight() (反方向)                    IE9+

对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。

从第一项开始,接收四个参数:例

Var values = [1,2,3,4,5];

Var sum = values.reduce(function(prev, cur, index, array){

Return prev + cur;

});

 

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(

  function(a, b) {

    return a.concat(b);

  },

  []);// flattened is [0, 1, 2, 3, 4, 5]

 

 

Array.prototype.slice.call

真实数组具有slice方法,可以对数组进行浅复制(不影响原数组),返回的依然是数组。类似数组虽然有length属性,可以使用for循环遍历,却不能直接使用slice方法,会报错!但是通过Array.prototype.slice.call则不会报错,本身(类似数组)被从头到尾slice复制了一遍——变成了真实数组!

将类似数组的对象(比如arguments)转换为真实的数组

 

Array.prototype.slice.call(arguments)