js中的几种操作添加Array数组元素的方法

162 阅读4分钟

这是我参与8月更文挑战的第6天,活动详情查看:8月更文挑战

1、push()

push() 的方法就是可把一个参数顺序添加到 数组对象的的尾部,它直接修改 了数组对象,而不是创建一个新的数组,返回新的长度。

push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

let arr = [3,5,13,14,1]
console.log(arr.push(7))   // 6 数组的长度
console.log(arr) // [3,5,13,14,1,7]
let arr = [3,5,13,14,1]
console.log(arr.pop())   // 1 
console.log(arr) // [3,5,13,14]

2、shift()

shift() 方法就是从前面删除元素,只能删除一个 返回值是删除的元素。

let arr = [3,5,13,14,1]
console.log(arr.shift())   // 3 
console.log(arr) // [5,13,14,1]

3、unshift()

unshift() 方法就是可把一个参数顺序添加到 数组对象的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。该方法可以添加多个参数,第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。

请注意,unshift() 方法不创建新的创建,而是直接修改原有的数组。

let arr = [3,5,13,14,1]
console.log(arr.unshift(2))   // 6 
console.log(arr) // [6,3,5,13,14,1]

4、splice()

splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 数组对象中删除了元素,则返回的是含有被删除的元素的数组。

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

5、concat()

concat() 连接两个数组,接收的参数可以是数组或数组元素,返回值为连接后的新数组

let arr = [3,5,13,14,1]
console.log(arr.concat(2,2))     // [3, 5, 13, 14, 1, 2, 2]
console.log(arr.concat([10,66]))     // [3, 5, 13, 14, 1, 10, 66]
console.log(arr.concat([10,16],7))  //  [3, 5, 13, 14, 1, 10, 16, 7]
console.log(arr)    // [3,5,13,14,1]

6.sort() 

sort() 将数组进行排序,返回值是排好的数组,默认是按照最左边的数字进行排序,即排序顺序是根据字符串UniCode码不是按照数字大小排序的。 如果要得到自己想要的结果,不管是升序还是降序,就需要提供比较函数了。该函数比较两个值的大小,然后返回一个用于说明这两个值的相对顺序的数字。

比较函数应该具有两个参数 a 和 b,其返回值如下: 若 a 小于 b,即 a - b 小于零,则返回一个小于零的值,数组将按照升序排列。 若 a 等于 b,则返回 0。 若 a 大于 b, 即 a - b 大于零,则返回一个大于零的值,数组将按照降序排列。

let arr = [2,10,6,1,4,22,3]
console.log(arr.sort())   // [1, 10, 2, 22, 3, 4, 6]
let arr1 = arr.sort((a, b) =>a - b)  
console.log(arr1)   // [1, 2, 3, 4, 6, 10, 22]
let arr2 = arr.sort((a, b) =>b-a)  
console.log(arr2)  // [22, 10, 6, 4, 3, 2, 1]

7. reverse()

reverse() 该方法是将数组进行反转,然后返回值是反转后的数组

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

8. flat()

flat() 该方法是将多维数组进行扁平化处理,然后返回值是扁平处理后的数组

 let arr = [[1,2],[3,4],[5,6]].flat();

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

如果是多维数组,则flat()将达不到效果,

需要给flat()传一个参数,var newArray = arr.flat([depth]),

参数:depth ,可选,指定要提取嵌套数组的结构深度,默认值为 1。

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

9. slice()

slice() 用于数组方法可从已有的数组中返回选定的元素,也就是在该方法中指定的元素。该方法不会改变原数组,,返回值是一个新的数组。

let arr = [1,2,3,4,5]

// 选取的范围是 从 当前位(1) 开始(索引从1开始,),到 尾部位(3) 的前一位结束
console.log(arr.slice(1,3))   // [2,3]
console.log(arr)    //  [1,2,3,4,5]

10. forEach()

forEach()遍历数组,无return。即使有return,也不会返回任何值,并且会影响原来的数组

var arr = [1,2,3,4]
var res = arr.forEach((item,index,arr)=>{     
 arr[index] = item * 2
 return arr 
})

console.log(arr); // [2,4,6,8]
console.log(res); // undefined

11. map()

map()遍历数组,有return,返回的是一个新的数组

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]

12. every()

every() 该方法会依据判断条件,数组的元素是否全满足,若满足则返回ture

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

13. some()

some() 该方法依据判断条件,数组的元素是否有一个满足,若有一个满足则返回ture

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

14. filter()

filter() 该方法过滤数组,返回一个满足要求的数组

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