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]

 

posted @ 2019-09-13 15:46  捞月亮的猴子  阅读(229)  评论(0编辑  收藏  举报