您的当前位置:首页正文

最实用的JS数组函数整理(图文教程)

2023-11-30 来源:博科教育

本篇文章小编给大家整理了非常全的JS数组函数以及相关的写法规则,希望能够对读者们起到帮助和参考。

脚本之家以前就给大家整理过关于JS数组相关的内容,这次我们给大家整理的是非常实用的JS数组操作技巧和写法,学习下吧。

instanceof

检测一个对象是否是数组;(用来对付复杂数据类型;)// 简单数据类型 typeof ;A instanceof B // A是不是B造出来的;例: var arr = [1,2,3]; console.log(arr instanceof Array); //arr属不属于Array类型;

Array.isArray( )

Array.isArray(参数); // 判断参数是不是数组,返回布尔值;例: var arr = [1,2,3]; var num = 123; console.log(Array.isArray(arr)); //true console.log(Array.isArray(num)); //false

toString( )

数组.toString(); // 把数组变成字符串,去除了[],内容用逗号链接;例: var arr = ["aaa","bbb","ccc"]; console.log(arr.toString()); //返回 aaa,bbb,ccc

valueOf( )

数组.valueOf(); //返回数组本身; 例: var arr = ["aaa","bbb","ccc"]; console.log(arr.valueOf()); //返回数组本身 ["aaa","bbb","ccc"]

数组.join(参数)

数组.join(参数); // 数组中的元素可以按照参数进行链接变成一个字符串;console.log(arr.join()); //和toString()一样用逗号链接console.log(arr.join("|")); //用参数链接console.log(arr.join("&")); //用参数链接console.log(arr.join(" ")); //如果是空格,真的用空格链接console.log(arr.join("")); //空字符是无缝连接

数组元素的添加和删除

push( )和pop( )

1. 数组.push() //在数组的最末尾添加元素;2. 数组.pop() //不需要参数;在数组的最末尾删除一项;例: var arr = [1,2,3]; var aaa = arr.push("abc");//在数组的最末尾添加一个元素; console.log(arr);//元素被修改了 console.log(aaa);//返回值是数组的长度; aaa = arr.pop();//不需要参数;在数组的最末尾删除一项; console.log(arr);//元素被修改了 console.log(aaa);//被删除的那一项

unshift( )和shift( )

1. 数组.unshift() //在数组的最前面添加一个元素;2. 数组.shift() //不需要参数;在数组的最前面删除一项;例: var arr = [1,2,3]; aaa = arr.unshift("abc");//在数组的最前面添加一个元素; console.log(arr);//元素被修改了 console.log(aaa);//返回值是数组的长度; aaa = arr.shift();//不需要参数;在数组的最前面删除一项; console.log(arr);//元素被修改了 console.log(aaa);//被删除的那一项

数组元素排序

reverse( )

reverse() //翻转数组例: var arr1 = [1,2,3,4,5]; var aaa = arr1.reverse(); // [5,4,3,2,1]

sort( )

sort() // 数组中元素排序;(默认:从小到大) // 默认:按照首个字符的Unicode编码排序;如果第一个相同那么就比较第二个...例: var arr = [4,5,1,3,2,7,6]; var aaa =arr.sort(); console.log(aaa); // [1, 2, 3, 4, 5, 6, 7] console.log(aaa === arr);// true 原数组被排序了(冒泡排序) //默认还可以排列字母; var arr2 = ["c","e","d","a","b"]; var bbb = arr2.sort(); console.log(bbb); // ["a", "b", "c", "d", "e"] console.log(bbb===arr2); // true 原数组被排序了(冒泡排序)sort() //数值大小排序方法,需要借助回调函数;例: var arr = [4,5,1,13,2,7,6]; //回调函数里面返回值如果是:参数1-参数2;升幂; 参数2-参数1;降幂; arr.sort(function (a,b) { return a-b; //升序 //return b-a; //降序 //return b.value-a.value; //按照元素value属性的大小排序; }); console.log(arr); // [1, 2, 4, 5, 6, 7, 13]

sort( )底层原理

 var aaa = bubbleSort([1,12,3], function (a,b) {// return a-b;//实参:array[j]-array[j+1]; return b-a;//实参:array[j+1]-array[j]; }); console.log(aaa); function bubbleSort(array,fn){ //外循环控制轮数,内循环控制次数,都是元素个数-1; for(var i=0;i<array.length-1;i++){ for(var j=0;j<array.length-1-i;j++){//次数优化,多比较一轮,少比较一次; //满足条件交换位置;// if(array[j]>array[j+1]){//大于升幂排序;否则降幂; //a-b>0 和 a>b是一个意思; //b-a>0 和 a<b是一个意思;// if(array[j]-array[j+1]>0){//升幂排序// if(array[j+1]-array[j]>0){//降幂排序 //把两个变量送到一个函数中; if(fn(array[j],array[j+1])>0){ var temp = array[j]; array[j] = array[j+1]; array[j+1] = temp; } } } //返回数组 return array; }

数组元素的操作

concat( )

数组1.concat(数组2); // 链接两个数组;var arr1 = [1,2,3];var arr2 = ["a","b","c"];var arr3 = arr1.concat(arr2);console.log(arr3) // [1, 2, 3, "a", "b", "c"]

slice( )

数组.slice(开始索引值,结束索引值); //数组截取;例 : var arr = [1, 2, 3, "a", "b", "c"]; console.log(arr.slice(3)); //从索引值为3截取到最后;["a", "b", "c"] console.log(arr.slice(0,3)); //包左不包右;[1, 2, 3] console.log(arr.slice(-2)); //负数是后几个;["b", "c"] console.log(arr.slice(3,0)); //如果前面的比后面的大,那么就是[];[] console.log(arr); //原数组不被修改;[1, 2, 3, "a", "b", "c"]

splice( )

数组.splice(开始索引值,删除几个,替换内容1,替换内容2,...); // 替换和删除; //改变原数组;返回值是被删除/替换的内容例: var arr = [1,2,3,4,5,6,"a", "b", "c"] arr.splice(5); //从索引值为3截取到最后;(删除) console.log(arr); // [1, 2, 3, 4, 5] arr.splice(1,2); //(删除指定个数)从索引为1的开始删除2个 console.log(arr); //[1, 4, 5]//替换 var arr = [1,2,3,4,5,6,"a", "b", "c"]; console.log(arr.splice(3,3,"aaa","bbb","ccc")); //(删除指定数并替换) console.log(arr); // [1, 2, 3, "aaa", "bbb", "ccc", "a", "b", "c"]// 添加 arr.splice(3,0,"aaa","bbb","ccc");//(删除指定个数)// console.log(arr);//截取或者替换之后的; [1, 2, 3, "aaa", "bbb", "ccc", "aaa", "bbb", "ccc", "a", "b", "c"]

indexOf / lastIndexOf

数组.indexOf(元素); // 给元素,查索引(从前往后)数组.lastIndexOf(元素); // 给元素,查索引(从后往前)例: var arr = ["a","b","c","d","c","b","b"]; console.log(arr.indexOf("b")); // 1 查到以后立刻返回 console.log(arr.lastIndexOf("b")); // 6 找到以后立刻返回 console.log(arr.indexOf("xxx")); // -1; 查不到就返回-1;

数组迭代(遍历)

every()

对数组中每一项运行回调函数,如果都返回true,every返回true,如果有一项返回false,则停止遍历 every返回false;不写默认返回false像保镖失误一次,游戏结束!!!例:1. var arr = [111,222,333,444,555]; arr.every(function (a,b,c) { console.log(a); //元素 console.log(b); //索引值 console.log(c); //数组本身; console.log("-----"); //数组本身; //数组中元素赋值:c[b] = 值; a=有时候无法赋值; return true; });2. //every返回一个bool值,全部是true才是true;有一个是false,结果就是false var bool = arr.every(function (element, index, array) { //判断:我们定义所有元素都大于200; //if(element > 100){ if(element > 200){ return true; }else{ return false; } }) alert(bool); //false

filter()

// 对数组中每一项运行回调函数,该函数返回结果是true的项组成的新数组// 新数组是有老数组中的元素组成的,return为ture的项;例: var arr = [111,222,333,444,555]; var newArr = arr.filter(function (element, index, array) { //只要是奇数,就组成数组;(数组中辨别元素) if(element%2 === 0){ return true; }else{ return false; } }) console.log(newArr); // [222, 444]

forEach()

// 和for循环一样;没有返回值;例: var arr = [111,222,333,444,555]; var sum = 0; var aaa = arr.forEach(function (element,index,array) { console.log(element); // 
输出数组中的每一个元素 console.log(index); // 数组元素对应的索引值 console.log(array); // 数组本身 [111, 222, 333, 444, 555] sum += element; //数组中元素求和; }); console.log(sum); // 数组元素加起来的和 console.log(aaa);//undefined;没有返回值 所以返回undefined

map()

// 对数组中每一项运行回调函数,返回该函数的结果组成的新数组// return什么新数组中就有什么; 不return返回undefined; 对数组二次加工例: var arr = [111,222,333,444,555]; var newArr = arr.map(function (element, index, array) { if(index == 2){ return element; // 这里return了 所以下面返回的值是333 } return element*100; // 返回的元素值都乘上100后的值 }) console.log(newArr); // [11100, 22200, 333, 44400, 55500]

some()

//对数组中每一项运行回调函数,如果该函数对某一项返回true,则some返回true; 像杀手,有一个成功,就胜利了!!!例: var arr = [111,222,333,444,555]; var bool = arr.some(function (ele,i,array) { //判断:数组中有3的倍数 if(ele%3 == 0){ return true; } return false; }) alert(bool); //true ; 有一个成功就是true

数组清空

 1. arr.length = 0; // (不好,伪数组无法清空) 2. arr.splice(0); // 伪数组没有这个方法; 3. arr = []; // 可以操作伪数组; (推荐!)
// 伪数组: 就是长的像数组,但是没有数组的方法;也不能添加和删除元素;例: // arguments fn(111,222,333); function fn(){ arguments.length = 0; // 无法清空 返回 [1, 2, 3] arguments.splice(0); // 会报错 arguments.splice is not a function arguments = []; // 可以清空,返回空数组[] console.log(arguments); }

数组案例

1.将一个字符串数组输出为|分割的形式,比如“刘备|张飞|关羽”。使用两种方式实现

 var arr = ["刘备","张飞","关羽"]; var separator = "|"; //通过for循环累加 var str = arr[0]; for(var i=1;i<arr.length;i++){ str += separator+arr[i]; } console.log(str); // 刘备|张飞|关羽 //join()可以把数组中的元素链接成字符串; console.log(arr.join("|")); // 刘备|张飞|关羽

2.将一个字符串数组的元素的顺序进行反转。["a", "b", "c", "d"] -> [ "d","c","b","a"]。使用两种种方式实现。提示:第i个和第length-i-1个进行交换

 // 数组.reverse() 方法 var arr = ["a", "b", "c", "d"]; console.log(arr.reverse()); // ["d", "c", "b", "a"] // 三种:1.正向遍历,反向添加; 2.反向遍历,正向添加; 3.元数组元素交换位置; for(var i=0;i<arr.length/2;i++){ var temp = arr[i]; arr[i] = arr[arr.length-1-i]; arr[arr.length-1-i] = temp; } console.log(arr);

3.工资的数组[1500, 1200, 2000, 2100, 1800],把工资超过2000的删除

 var arr = [1500, 1200, 2000, 2100, 1800]; //利用filter()形成一个数组;return true;组成的数组; var newArr = arr.filter(function (ele, i, array) { //2000以上返回false; if(ele<2000){ return true; }else{ return false; } }); console.log(newArr); // [1500, 1200, 1800]

4.["c", "a", "z", "a", "x", "a"]找到数组中每一个a出现的位置

 var arr = ["c", "a", "z", "a", "x", "a"]; //遍历数组(for/while/do...while) forEach(); arr.forEach(function (ele, index, array) { //如果元素等于“a”,那么就
输出索引值; if("a" === ele){ console.log(index); } });

5.编写一个方法去掉一个数组的重复元素 (数组去重)

 var arr = ["鸣人","鸣人","佐助","佐助","小樱","小樱"]; // 方法1: 思路:定义一个新数组,遍历老数组,判断,如果新数组里面没有老数组的元素就添加,否则就不添加; var newArr = []; //遍历老数组 arr.forEach(function (ele,index,array) { //检测老数组中的元素,如果新数组中存在就不添加了,不存在才添加; if(newArr.indexOf(ele) === -1){//不存在就添加;(去新数组中查找元素索引值,如果为-1就是没有) newArr.push(ele); } }); console.log(newArr); // ["鸣人", "佐助", "小樱"]

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

VueJs组件中父子相互通讯方法总结

JS中常出现哪些BUG和错误

JS中this的指向以及call、apply的作用_基础知识

小编还为您整理了以下内容,可能对您也有帮助:

js数组常用的几个函数总结

javascript中,数组是很常用的。数组的函数很多,下面分享几个常用的数组函数。每个函数都用浏览器测试过。

下面每个测试结果都是在google浏览器console上执行的。

length属性。 数组的length属性,返回数组的元素个数. JavaScript使用一个32位整数,保存数组的元素个数。 这意味着,数组成员最多只有4294967295个(2^32-1)个,也就是说length属性的最大值就是4294967295。 (1) var data = [1,3,6,89,9,100,35]; data.length; //7 (2) length属性是可写的。 如果人为设置一个小于当前成员个数的值,该数组的成员会自动减少到length设置的值。 var data = [1,3,6,89,9,100,35]; data.length = 4; //data = [1, 3, 6, 89] (3) 将数组清空的一个有效方法,就是将length属性设为0。 var data = [1,3,6,89,9,100,35]; data.length = 0; //data = []; (4) 如果人为设置length大于当前元素个数,则数组的成员数量会增加到这个值,新增的位置填入空元素。 var data = [1,3,6]; data.length = 5; //data = [1, 3, 6, undefined × 2] (5) 如果人为设置length为不合法的值,JavaScript会报错 var data = [1,3,6,89,9,100,35]; data.length = -1; //RangeError: Invalid array length var data = [1,3,6,89,9,100,35]; data.length = Math.pow(2,32); //RangeError: Invalid array length

sort函数 /* w3c说明 如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。 如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下: 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。 若 a 等于 b,则返回 0。 若 a 大于 b,则返回一个大于 0 的值。 */ var data = [1,3,6,89,9,100,35]; data.sort(); //[1, 100, 3, 35, 6, 89, 9] //此处若要按数字大小排序,需要提供一个比较函数 var data = [1,3,6,89,9,100,35]; data.sort(function(a,b){ return ab; }); //[1, 3, 6, 9, 35, 89, 100]

push函数 //向数组中添加元素,并返回数组长度 var data = [1,3,6,89,9,100,35]; data.push(4); //返回新数组的长度 8 //[1, 3, 6, 89, 9, 100, 35, 4]

pop函数 //删除数组最后一个元素,并返回这个元素的值 var data = [1,3,6,89,9,100,35]; data.pop(); //返回最后一个元素值 35 //data = [1,3,6,89,9,100];

unsfift函数 在数组开头添加一个或更多元素,并返回新的长度 var data = [1,3,6,89,9,100,35]; data.unshift(456); //返回8 //data = [456, 1, 3, 6, 89, 9, 100, 35];

splice函数 在数组中添加、删除或替换元素 var data = [1,3,6,89,9,100,35]; data.splice(2,0,4,5); //数组data第二个元素后面添加两个元素 //data = [1, 3, 4, 5, 6, 89, 9, 100, 35]; var data = [1,3,6,89,9,100,35]; data.splice(2,1); //从数组第3个元素开始删除1个元素,返回数组长度6 //data = [1, 3, 89, 9, 100, 35]; var data = [1,3,6,89,9,100,35]; data.splice(2,1,9); //替换数组第三个元素为9,返回替换的元素[6] //data = [1, 3, 9, 89, 9, 100, 35];

JS 中数组对象有哪些原生方法?

1. push():在数组末尾添加一个或多个元素,并返回新的长度。

2. pop():删除数组的最后一个元素并返回该元素。

3. shift():删除数组的第一个元素并返回该元素。

4. unshift():向数组开头添加一个或多个元素,并返回新的长度。

5. splice():向/从数组中添加/删除项目,然后返回被删除的项目。

6. concat():连接两个或更多的数组,并返回结果。

7. slice():选取数组的一部分,并返回一个新数组。

8. reverse():颠倒数组中元素的顺序。

9. sort():对数组的元素进行排序。

10. filter():检测数组元素,并返回符合条件的所有元素的数组。

11. map():通过指定函数处理数组的每个元素,并返回处理后的数组。

12. rece():将数组元素计算为一个值(从左到右)。

13. every():检测数组的所有元素是否都符合指定条件。

14. some():检测数组中是否有元素符合指定条件。

15. find():返回符合指定条件的第几个元素所在索引,否则返回 -1。

16. findIndex():返回符合指定条件的第几个元素所在索引,否则返回 -1。

JS数组方法

数组的创建方式
1.字面量的形式: var arr=[1,2,3];
1.构造函数: var arr1=new Array();//不常用

Array构造函数有一个很大的缺陷,就是不同的参数,会导致它的行为不一致。
1.单个数值作为参数,参数表示数组的元素个数

可以看到,Array作为构造函数,行为很不一致。因此,不建议使用它生成新数组,直接使用数组字面量是更好的做法。

push/pop/unshift/shift//增加、删除元素 (数组的方法,所以使用时应调用
数组名.方法名())

arr. slice/splice//截取元素
arr.slice(); 原数组不发生改变
无参数时,返回原数组,相当于数组的复制。
一个参数时,从参数作为下标的元素截取,至数组结束。
二个参数时,从第一个参数作为下标(索引)的元素开始截取,到第二个参数作为下标的元素结束,但不包括第二个参数作为下标的函数。 (起始元素包含,结尾元素不包含)
多个参数时,前两个参数起效,后边的参数无效。
arr.splice(); 原数组改变
无参数时,返回空数组。
一个参数时,从参数作为下标的元素截取,至数组结束。
二个参数时,从第一个参数作为下标(索引)的元素开始截取,即表示截取的起始位置,第二个参数表示截取的元素个数。
多个参数时,前两个参数起效,后边的参数从原数组的截取起始位置开始填充,填充到原数组。
reverse/sort//改变元素位置
arr.reverse(); //数组翻转(元素位置颠倒)
arr.sort(); 从小到大排序,但遵循的是字符串的按位比较规则,所以排序结果容易出现异常。

join();//不改变原数组
join() 以指定参数作为连接符,将所有数组成员连接为一个字符串返回。如果不提供参数,默认用逗号分隔。

concat();//拼接数组 不改变原数组

ES5新增数组操作方法
indexOf (item) 返回元素在数组中对应的索引值,找不到的话,返回-1,用以测试元素是否存在于数组中
forEach(function(item,index)) 遍历数组,没有返回值
map(function(item,index)) 遍历数组,存在返回值
filter(function(item)) {return item>2} 返回大于2的元素
some 返回布尔值,条件部分成立|| arr.some(function(item){return item>2} )
every 返回布尔值,条件全部成立&& arr.every(function(item){return item>2} )
rece (对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。)arr.rece(function(a,b){return a+b;});

toString()和toLocaleString()
功能:将数组的每个元素转化为字符串,并且输出用逗号分隔的字符串列表。功能类似join();
参数:无
输出:字符串

indexOf()和lastIndexOf()
功能:搜索整个数组中具有给定值的元素,返回找到的第一个元素的索引或者如果没有找到就返回-1;lastIndexOf为反向搜索。
参数:元素的值,起点索引(可选)
输出:索引值或-1

Array.from()
功能:将两类对象转为真正的数组:类似数组的对象和可遍历的对象
参数:待转换的对象,第二个参数可选,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
输出:数组

Array.of()
功能:将一组值,转换为数组。
参数:数组元素
输出:数组

copyWithin()
功能:在当前数组内部,将指定位置的成员复制到其他位置,返回变化后的数组。
参数:索引(从该位置开始替换数据);索引(从该位置开始读取数据,默认为0,负值表示倒数);索引(到该位置前停止读取,默认为最大索引)
输出:返回当前替换后的数组。
注意:改变了当前数组

find()和findIndex()
功能:找到第一个符合条件的数组成员。
参数:回调函数,所有数组成员依次执行该函数,直到找到第一个返回值为true的成员。回调函数可以接受三个参数,依次为值,位置,原数组。
输出:find()返回找到的成员;findIndex()返回成员的位置。

fill()
功能:使用给定的值,填充一个数组。
参数:第一个参数为待填充的值,第二和第三参数可选,分别表示填充的起始和结束位置(不包括)。
输出:填充后的数组

entries()、keys()、values()
功能:用于遍历数组,可以用for…of循环进行遍历。区别是keys()是对键名的遍历、values是对键值的遍历、entries()是对键值对的遍历。
参数:无
输出:遍历器对象

includes()
功能:表示某个数组是否包含给定的值
参数:第一个参数必选(待检查的给定值),第二个参数可选,表示搜索的起始位置,默认为0,负数表示倒数的位置。
输出:一个布尔值。
注意:和indexOf的区别,indexOf进行了运算符的强比对,会导致对NaN误判。

JS数组方法

数组的创建方式
1.字面量的形式: var arr=[1,2,3];
1.构造函数: var arr1=new Array();//不常用

Array构造函数有一个很大的缺陷,就是不同的参数,会导致它的行为不一致。
1.单个数值作为参数,参数表示数组的元素个数

可以看到,Array作为构造函数,行为很不一致。因此,不建议使用它生成新数组,直接使用数组字面量是更好的做法。

push/pop/unshift/shift//增加、删除元素 (数组的方法,所以使用时应调用
数组名.方法名())

arr. slice/splice//截取元素
arr.slice(); 原数组不发生改变
无参数时,返回原数组,相当于数组的复制。
一个参数时,从参数作为下标的元素截取,至数组结束。
二个参数时,从第一个参数作为下标(索引)的元素开始截取,到第二个参数作为下标的元素结束,但不包括第二个参数作为下标的函数。 (起始元素包含,结尾元素不包含)
多个参数时,前两个参数起效,后边的参数无效。
arr.splice(); 原数组改变
无参数时,返回空数组。
一个参数时,从参数作为下标的元素截取,至数组结束。
二个参数时,从第一个参数作为下标(索引)的元素开始截取,即表示截取的起始位置,第二个参数表示截取的元素个数。
多个参数时,前两个参数起效,后边的参数从原数组的截取起始位置开始填充,填充到原数组。
reverse/sort//改变元素位置
arr.reverse(); //数组翻转(元素位置颠倒)
arr.sort(); 从小到大排序,但遵循的是字符串的按位比较规则,所以排序结果容易出现异常。

join();//不改变原数组
join() 以指定参数作为连接符,将所有数组成员连接为一个字符串返回。如果不提供参数,默认用逗号分隔。

concat();//拼接数组 不改变原数组

ES5新增数组操作方法
indexOf (item) 返回元素在数组中对应的索引值,找不到的话,返回-1,用以测试元素是否存在于数组中
forEach(function(item,index)) 遍历数组,没有返回值
map(function(item,index)) 遍历数组,存在返回值
filter(function(item)) {return item>2} 返回大于2的元素
some 返回布尔值,条件部分成立|| arr.some(function(item){return item>2} )
every 返回布尔值,条件全部成立&& arr.every(function(item){return item>2} )
rece (对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。)arr.rece(function(a,b){return a+b;});

toString()和toLocaleString()
功能:将数组的每个元素转化为字符串,并且输出用逗号分隔的字符串列表。功能类似join();
参数:无
输出:字符串

indexOf()和lastIndexOf()
功能:搜索整个数组中具有给定值的元素,返回找到的第一个元素的索引或者如果没有找到就返回-1;lastIndexOf为反向搜索。
参数:元素的值,起点索引(可选)
输出:索引值或-1

Array.from()
功能:将两类对象转为真正的数组:类似数组的对象和可遍历的对象
参数:待转换的对象,第二个参数可选,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
输出:数组

Array.of()
功能:将一组值,转换为数组。
参数:数组元素
输出:数组

copyWithin()
功能:在当前数组内部,将指定位置的成员复制到其他位置,返回变化后的数组。
参数:索引(从该位置开始替换数据);索引(从该位置开始读取数据,默认为0,负值表示倒数);索引(到该位置前停止读取,默认为最大索引)
输出:返回当前替换后的数组。
注意:改变了当前数组

find()和findIndex()
功能:找到第一个符合条件的数组成员。
参数:回调函数,所有数组成员依次执行该函数,直到找到第一个返回值为true的成员。回调函数可以接受三个参数,依次为值,位置,原数组。
输出:find()返回找到的成员;findIndex()返回成员的位置。

fill()
功能:使用给定的值,填充一个数组。
参数:第一个参数为待填充的值,第二和第三参数可选,分别表示填充的起始和结束位置(不包括)。
输出:填充后的数组

entries()、keys()、values()
功能:用于遍历数组,可以用for…of循环进行遍历。区别是keys()是对键名的遍历、values是对键值的遍历、entries()是对键值对的遍历。
参数:无
输出:遍历器对象

includes()
功能:表示某个数组是否包含给定的值
参数:第一个参数必选(待检查的给定值),第二个参数可选,表示搜索的起始位置,默认为0,负数表示倒数的位置。
输出:一个布尔值。
注意:和indexOf的区别,indexOf进行了运算符的强比对,会导致对NaN误判。

Javascript中数组的常用方法有哪些?

concat()连接两个或更多的数组,并返回结果。

join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

pop()删除并返回数组的最后一个元素

push()向数组的末尾添加一个或更多元素,并返回新的长度。

reverse()颠倒数组中元素的顺序。

shift()删除并返回数组的第一个元素

slice()从某个已有的数组返回选定的元素

sort()对数组的元素进行排序

splice()删除元素,并向数组添加新元素。

toSource()返回该对象的源代码

toString()把数组转换为字符串,并返回结果。

toLocaleString()把数组转换为本地数组,并返回结果。

unshift()向数组的开头添加一个或更多元素,并返回新的长度。

valueOf()返回数组对象的原始值

JS Array(数组)所有操作方法,改变数组方法、不改变数组方法

定义:返回由所有参数值组成的数组,如果没有参数,就返回一个空数组。

目的:Array.of() 出现的目的是为了解决上述构造器因参数个数不同,导致的行为有差异的问题。

参数:

第一个参数(必需):要转化为真正数组的对象。

第二个参数(可选): 类似数组的map方法,对每个元素进行处理,将处理后的值放入返回的数组。

第三个参数(可选): 用来绑定this。

ps:splice方法从数组中添加/删除项目,然后返回被删除的项目

语法: array.splice(index,howmany,item1,.....,itemX)

参数:

index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

howmany:必需。要删除的项目数量。如果设置为 0,则不会删除项目。

item1, …, itemX: 可选。向数组添加的新项目。

返回值: 如果有元素被删除,返回包含被删除项目的新数组。

删除元素

删除并添加

不删除只添加

ps:方法接受两个参数,一个从哪里开始,一个是到哪里结束(但是不包括这个结束的元素本身)。如果是负数,就从倒数第几个。

参数可选: 规定排序顺序的比较 函数 。

默认情况下sort()方法没有传比较函数的话,默认按字母升序,如果不是元素不是字符串的话,会调用toString()方法将元素转化为字符串的Unicode(万国码)位点,然后再比较字符。

比较函数的两个参数

sort的比较函数有两个默认参数,要在函数中接收这两个参数,这两个参数是数组中两个要比较的元素,通常我们用 a 和 b 接收两个将要比较的元素:

sort排序常见用法

数组元素为数字的升序、降序:

数组多条件排序

自定义比较函数

定义: 在当前数组内部,将指定位置的成员复制到其他位置,并返回这个数组。

语法: array.copyWithin(target, start = 0, end = this.length)

参数:

三个参数都是数值,如果不是,会自动转为数值.

target(必需):从该位置开始替换数据。如果为负值,表示倒数。

start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示倒数。

end(可选):到该位置前停止读取数据,默认等于数组长度。使用负数可从数组结尾处规定位置。

浏览器兼容(MDN): chrome 45,Edge 12,Firefox32,Opera 32,Safari 9, IE 不支持

从上述例子:

第一个参数是开始被替换的元素位置

要替换数据的位置范围:从第二个参数是开始读取的元素,在第三个参数前面一个元素停止读取

数组的长度不会改变

读了几个元素就从开始被替换的地方替换几个元素

参数:

第一个元素(必须): 要填充数组的值

第二个元素(可选): 填充的开始位置,默认值为0

第三个元素(可选):填充的结束位置,默认是为this.length

使用join方法或者下文说到的toString方法时,当数组中的元素也是数组或者是对象时会出现什么情况?

join()/toString()方法在数组元素是数组的时候,会将里面的数组也调用join()/toString(),如果是对象的话,对象会被转为[object Object]字符串。

如上述栗子:调用数组的toLocaleString方法,数组中的每个元素都会调用自身的toLocaleString方法,对象调用对象的toLocaleString,Date调用Date的toLocaleString。

该方法的效果和join方法一样,都是用于数组转字符串的,但是与join方法相比没有优势,也不能自定义字符串的分隔符,因此不推荐使用。

ps:当数组和字符串操作的时候,js 会调用这个方法将数组自动转换成字符串

ps:字符串也有一个slice() 方法是用来提取字符串的,不要弄混了。

参数:

begin(可选): 索引数值,接受负值,从该索引处开始提取原数组中的元素,默认值为0。

end(可选):索引数值(不包括),接受负值,在该索引处前结束提取原数组元素,默认值为数组末尾(包括最后一个元素)。

如上:新数组是浅拷贝的,元素是简单数据类型,改变之后不会互相干扰。

如果是复杂数据类型(对象,数组)的话,改变其中一个,另外一个也会改变

原因在定义上面说过了的:slice()是浅拷贝,对于复杂的数据类型浅拷贝,拷贝的只是指向原数组的指针,所以无论改变原数组,还是浅拷贝的数组,都是改变原数组的数据。

ES6扩展运算符...合并数组:

因为ES6的语法更简洁易懂,所以现在合并数组我大部分采用...来处理,...运算符可以实现cancat的每个栗子,且更简洁和具有高度自定义数组元素位置的效果。

参数:

searchElement(必须):被查找的元素

fromIndex(可选):开始查找的位置(不能大于等于数组的长度,返回-1),接受负值,默认值为0。

严格相等的搜索:

数组的indexOf搜索跟字符串的indexOf不一样,数组的indexOf使用严格相等===搜索元素,即数组元素要完全匹配才能搜索成功。

注意:indexOf()不能识别NaN

参数:

searchElement(必须): 被查找的元素

fromIndex(可选): 逆向查找开始位置,默认值数组的长度-1,即查找整个数组。

关于fromIndex有三个规则:

正值。如果该值大于或等于数组的长度,则整个数组会被查找。

负值。将其视为从数组末尾向前的偏移。(比如-2,从数组最后第二个元素开始往前查找)

负值。其绝对值大于数组长度,则方法返回 -1,即数组不会被查找。

参数:

searchElement(必须):被查找的元素

fromIndex(可选):默认值为0,参数表示搜索的起始位置,接受负值。正值超过数组长度,数组不会被搜索,返回false。负值绝对值超过长数组度,重置从0开始搜索。

includes方法是为了弥补indexOf方法的缺陷而出现的:

indexOf方法不能识别NaN

indexOf方法检查是否包含某个值不够语义化,需要判断是否不等于-1,表达不够直观

博科教育还为您提供以下相关内容希望对您有帮助:

js数组常用的几个函数总结

unsfift函数 在数组开头添加一个或更多元素,并返回新的长度 var data = [1,3,6,89,9,100,35]; data.unshift(456); //返回8 //data = [456, 1, 3, 6, 89, 9, 100, 35];splice函数 在数组中添加、删除...

JS数组方法

数组的创建方式 1.字面量的形式: var arr=[1,2,3]; 1.构造函数: var arr1=new Array();//不常用 Array构造函数有一个很大的缺陷,就是不同的参数,会导致它的行为不一致。 1.单个数值作为参数,参数...

js数组对象常用的方法

array.push(value,[value[,...]])   //将一个或多个元素添加到数组的结尾,并返回新的长度。array.pop()   //从数组中删除最后一个元素,并返回该元素的值,改变了数组的长度 array.unshif...

Javascript中数组的常用方法有哪些?

concat()连接两个或更多的数组,并返回结果。join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。pop()删除并返回数组的最后一个元素 push()向数组的末尾添加一个或更多元素,并返回新的长度。reverse()...

JS Array(数组)所有操作方法,改变数组方法、不改变数组方法

sort排序常见用法 数组元素为数字的升序、降序:数组多条件排序 自定义比较函数 定义: 在当前数组内部,将指定位置的成员复制到其他位置,并返回这个数组。 语法: array.copyWithin(target, start = 0, end = this.leng...

JS几种数组遍历方法总结及对比

以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代码如下:for(j = 0; j &lt; arr.length; j++) {}简要说明: 最简单的一种,也是使用频率最高的一种,虽然性能不弱,但仍有优化空间第二...

JS删除数组重复元素有哪些方法

这里就 js 如何实现数组去重整理出5种方法,并附上演示Demo 以及 源码。1.遍历数组法 最简单的去重方法,实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中;注意点:判断值是否在数组的方法“indexOf...

js数组排序的几种方法

一、 冒泡排序 平均复杂度:o(n^2) 空间复杂度:o(1) 稳定性:稳定 步骤: 1、比较相邻的元素。如果第一个比第二个大,就交换他们两个;2、对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对,...

JS数组reduce()方法详解及高级技巧

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。先看第一个例子:这里可以看出,...

在js中怎样把数组转为列表?

1、用 join() 函数,但我发现使用join函数要求列表中的元素都是字符串,所以需要将列表中的元素都转换为字符串。a = [1,2,3,4,5]a = [str(i) for i in a]b = int(''.join(a))print(b)2、用 sum() ...

Top