前端基础之关于数组的方法整理

1、arr.push() 从后面添加元素，返回值为添加完后数组的长度,改变原数组

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

2、arr.pop() 删除数组最后一项，返回值是删除的元素,改变原数组

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

3、arr.shift() 删除数组第一项，返回值是删除的元素,改变原数组

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

4、arr.unshift() 从前面增加元素，返回值是添加完后的数组的长度，改变原数组

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

5、arr.splice(i,n) 删除从i（索引值）开始之后的n个元素（包括arr.[i]），返回值是删除的元素组成的数组，改变原数组

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

6、arr.concat() 连接两个数组，返回值为连接后的新数组，不改变原数组

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

7、arr.split() 将字符串转化为数组,不改变原字符串

let str = '12345';
console.log(str.split('')); // ['1', '2', '3', '4', '5']
console.log(str.split('2')); //['1', '345']
console.log(str); //12345

8、arr.sort() 将数组进行排序,改变原数组

let arr = [2,5,1,78,4,22,54];
console.log(arr.sort()); //[1, 2, 22, 4, 5, 54, 78]
console.log(arr.sort((a,b) => a-b)); //[1, 2, 4, 5, 22, 54, 78]
console.log(arr.sort((a,b) => b-a)); //[78, 54, 22, 5, 4, 2, 1]
console.log(arr); //[78, 54, 22, 5, 4, 2, 1]

9、arr.reverse() 将数组反转，返回值是反转后的数组,改变原数组

let arr = [5,7,3,6,8];
console.log(arr.reverse())；// [8, 6, 3, 7, 5]
console.log(arr)；// [8, 6, 3, 7, 5]

10、arr.slice(start, end) 截取arr[start]到arr[end-1]的数组，不包含索引值为end的值，返回值是截取的数组，不改变原数组

let arr = [8, 6, 3, 7, 5];
console.log(arr.slice(1,3)); //[6, 3]
console.log(arr.slice(1)); // [6, 3, 7, 5]
console.log(arr); //[8, 6, 3, 7, 5]

11、arr.forEach(callback) 遍历数组，无return，即使return，也不会返回任何值，并且会影响原来的数组
callback的参数：value（当前索引的值） index（索引）array（原数组）

扫描二维码关注公众号，回复： 11691833 查看本文章

let arr = [1,2,3,4,5];
arr.forEach((value,index,arr) => {value = value+2});
console.log(arr); // [1, 2, 3, 4, 5]
arr.forEach((value,index,arr) => {value = value + 2; return value})
console.log(arr); // [3, 4, 5, 6, 7]

12、arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组。
callback的参数：value（当前索引的值） index（索引）array（原数组）

let arr = [1,2,3,4,5]
arr.map( (value,index,array)=>{
        value = value * 2
        console.log(`value:${value}    index:${index}     array:${array}`)
})   
console.log(arr)

var arr1 = [1,2,3,4]; 
var res1 = arr1.map((item,index,arr)=>{ 
 item = item * 3; 
 return item; 
})
console.log(arr1); // [1,2,3,4]
console.log(res1); // [3,6,9,12]

13、arr.filter(callback) 过滤数组，返回一个满足要求的数组
callback的参数：value（当前索引的值） index（索引）

let arr = [1,2,3,4,5]
  let arr1 = arr.filter( (value, index) => value<3)
  console.log(arr1)    // [1, 2]

14、arr.every(callback) 根据判断条件，若数组里的元素全满足，返回true,不改变原数组
callback参数：value（当前索引的值） index（索引）

let arr = [1,2,3,4,5];
console.log(arr.every((value,index)=>value>3)) //false
console.log(arr.every((value,index)=>value<6)) //true
console.log(arr) // [1, 2, 3, 4, 5]

15、arr.some(callback) 根据判断条件，若数组里的元素有一个满足条件则返回true
callback的参数：value(当前索引的值) index(索引)

let arr = [1,2,3,4,5];
console.log(arr.some((value,index)=>value>3)) //true
console.log(arr.some((value,index)=>value>6)) //false
console.log(arr) // [1, 2, 3, 4, 5]

前端基础之关于数组的方法整理

猜你喜欢