Js基础回顾--Array常用的方法

本文主要是介绍Js基础回顾--Array常用的方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

数组常用方法

1 concat()

　　concat() 方法用于连接两个或多个数组。该方法不会改变原数组，返回连接生成的数组。

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

2 join()

　　join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的，默认使用','号分割，不改变原数组。

let arr = \[1,2,3\];
console.log(arr.join());   //1,2,3
console.log(arr.join('\-'));//1-2-3
console.log(arr);          //\[1,2,3\]

3 slice()

　　返回一个新的数组，包含从原数组从 start 到 end （包头不包尾）的元素。该方法不会修改原数组。

let arr = \[1,2,3,4,5\];
console.log(arr.slice(1,3));//\[2,3\]
console.log(arr);           //\[1,2,3,4,5\]

4 push()*

　　push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。会改变原数组。

let arr = \['a','b','c','d'\];
let x\=arr.push('e');
console.log(x);   //5
console.log(arr); //\['a','b','c','d','e'\];

5 pop()*

　　pop() 方法用于删除并返回数组的最后一个元素。会改变原数组。

let arr = \['a','b','c','d'\];
let x\=arr.pop();
console.log(x);   //d
console.log(arr); //\['a','b','c'\];

6 unshift()*

　　unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。改变原数组。

let arr = \['a','b','c','d'\];
let x\=arr.unshift('e');
console.log(x);   //5
console.log(arr); //\['e','a','b','c'\];

7 shift()*

　　shift() 方法用于删除并返回数组的第一个元素。改变原数组。

let arr = \['a','b','c','d'\];
let x\=arr.shift();
console.log(x);   //a
console.log(arr); //\['b','c','d'\];

8 splice()*

　　splice() 方法可删除从 index 处开始的零个或多个元素，并用参数列表中声明的一个或多个值来替换那些被删除的元素。返回被删除元素的数组。splice() 方法会直接对数组进行修改。

//不删除元素，相当于插入元素。从索引2开始删除0个元素，用'hello','world'替代
let arr = \['a','b','c','d'\];
let x\=arr.splice(2,0,'hello','world');
console.log(x);//\[\]
console.log(arr);//\['a','b','hello','world','c','d'\];

//删除元素，并替换。从索引2开始删除2个元素，用'hello','world'替代
let arr1 = \['a','b','c','d'\];
let x1\=arr1.splice(2,2,'hello','world');
console.log(x1);//\['c','d'\]
console.log(arr1);//\['a','b','hello','world'\];

9 substring() 和 substr()

　　substring()和substr()都用于截取字符串的一部分，用法如下：

let str='abcdefgh';
//当为一个参数时两个方法都返回从index截取到最后
console.log(str.substr(2))   //cdefgh
console.log(str.substring(2))//cdefgh

//substr(startindex,length),从startindex截取指定长度
console.log(str.substr(2,4));   //cdef
//substr(startindex,endindex),从startindex截取到endindex,包头不包尾
console.log(str.substring(2,4));//cd
console.log(str)                //abcdefgh

10 sort()*

　　sort()会按照元素首字母的 Unicode code 位置排序，默认升序。sort()会改变原数组。

    let arr=\['c','dddd','bbb','ee','aa'\];
    console.log(arr.sort());  //\['aa', 'bbb', 'c', 'dddd', 'ee'\]
    console.log(arr);         //\['aa', 'bbb', 'c', 'dddd', 'ee'\]
    let numArr\=\[10,2,30,15,23\];
    console.log(numArr.sort());//\[10, 15, 2, 23, 30\]
    console.log(numArr);       //\[10, 15, 2, 23, 30\]

　　有时候我们排序的规则并不是按照默认方式的，如上边的例子中需求是：arr按照字符串的长度排序，numArr按照大小进行排序。我们可以重写排序规则，如下：

    //按照字符串的长度排序
    let arr = \['c', 'dddd', 'bbb', 'ee', 'aa'\];
    arr.sort((str1, str2) \=> {
        return str1.length - str2.length;
    })
    console.log(arr);   //\["c", "ee", "aa", "bbb", "dddd"\]

    //按照大小进行排序
    let numArr = \[10, 2, 30, 15, 23\];
    numArr.sort((num1, num2) \=> {
        return num1 - num2;
    })
    console.log(numArr); // \[2, 10, 15, 23, 30\]

11 reverse()*

　　reverse() 方法用于颠倒数组中元素的顺序。返回的是颠倒后的数组，会改变原数组。

let arr=\["a", "b", "c", "d", "e"\]
console.log(arr.reverse());//\["e", "d", "c", "b", "a"\]
console.log(arr);          //\["e", "d", "c", "b", "a"\]

12 indexOf() 和 lastIndexOf()

　　indexOf()和lastIndexOf()用于查找元素的位置，可以接受1/2个参数，用法如下：

let arr=\["a", "b", "c", "d", "e","a"\]
//indexOf
console.log(arr.indexOf("a"));//查找第一个a的索引 0
console.log(arr.indexOf("a",2));//在索引2(包含)之后查找 5
//lastIndexOf
console.log(arr.lastIndexOf("a"));//查找最后一个a的索引 5
console.log(arr.lastIndexOf("a",2));//在索引2(包含)之前查找 0

13 every()和some()

　　every:所有元素都满足给定条件的话返回true；some：只要有一个元素满足给定条件就返回true，用法如下：

let arr=\[5,12,6,7,9\];
//判断是否所有元素都大于10，只有所有元素都满足条件才返回true
let res1=arr.every((ele,index,array)=>{
    return ele<10
})
console.log(res1);//false

//判断是否有元素大于10，只要有一个元素满足条件就返回true
let res2=arr.some((ele,index,array)=>{
    return ele<10
})
console.log(res2);//true

14 filter()

　　筛选数组中满足给定条件的元素，返回满足条件元素组成的数组。不会改变原数组。

let arr=\[5,12,6,7,9\];
//过滤数组，返回满足条件的元素组成的数组
let res=arr.filter((ele,index,array)=>{
    return ele<10;
})
console.log(res);// \[5, 6, 7, 9\]
console.log(arr);//\[5,12,6,7,9\]

15 map()

　　数组的每个元素都执行指定操作，返回各个元素执行结果组成的数组。该方法不改变原数组。

let arr=\[5,12,6,7,9\];
//遍历数组，每一个元素都执行指定操作，返回一个新的数组
res=arr.map((ele,index,array)=>{
    return ele+1;
})
console.log(res);//\[6, 13, 7, 8, 10\]
console.log(arr);//\[5,12,6,7,9\]

16 forEach()

　　纯粹的遍历数组，无返回值。该方法不改变原数组。

let arr=\[5,12,6,7,9\];
//单纯的进行数组遍历,打印数组中的每一个元素
arr.forEach((ele,index,arrya)=>{
    console.log(ele);
})
//打印：5,12,6,7,9

ES6新增方法

01 find()和findIndex()

let arr=\[15,12,6,7,9\];
//查找第一个小于10的元素并返回该元素
res=arr.find((ele,index,array)=>{
    return ele<10;
})
console.log(res);//6

//查找第一个小于10的元素并返回该元素的索引
resindex=arr.findIndex((ele,index,array)=>{
    return ele<10;
})
console.log(resindex);//2

02 fill()*

　　用固定值替换数组中的元素，可以指定替换元素的索引范围。该方法会改变原数组。

//不指定索引范围
let arr=\["apple","peer","banana","orange"\]
arr.fill("mango");
console.log(arr);//\["mango", "mango", "mango", "mango"\]

//指定索引范围  arr.fill(value,startindex,endindex)
let arr1=\["apple","peer","banana","orange"\]
arr1.fill("mango",2,4);
console.log(arr1);//\["apple", "peer", "mango", "mango"\]

03 includes()

　　判断数组中是否存在某元素，参数：查找的值、起始位置。使用indexOf 不能判断是否包含NaN。

let arr=\[2,1,5,4,3,NaN\];
console.log(arr.includes(2));//true
//arr.includes(ele,startindex) 从索引1开始搜索元素
console.log(arr.includes(2,1)); //false
console.log(arr.includes(6));   //false
console.log(arr.indexOf(NaN));//\-1，因为NaN!==NaN
console.log(arr.includes(NaN)); //true

04 Array.from()

　　将类似数组的对象（array-like object）和可遍历（iterable）的对象转为真正的数组。

//1.类数组转为数组
function foo(){
   let arr\= Array.from(arguments);
   console.log(arr);
}
foo(1,2,3,4,5) //\[1, 2, 3, 4, 5\]

//2.可遍历对象转成数组
let myset=new Set();
myset.add("a");
myset.add("b");
myset.add("c");
let arr\=Array.from(myset);
console.log(arr);//\["a", "b", "c"\]

//3.数组去重小技巧
let res=Array.from(new Set(\[1,1,2,2,2,3\]))
console.log(res);//\[1,2,3\]

本文转自 https://www.cnblogs.com/wyy1234/p/11372134.html，如有侵权，请联系删除。

这篇关于Js基础回顾--Array常用的方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！