数组的基本用法

  1. concat() 拼接数组,原数组不变
let arr = [1,2,3,4,5]
let arrCopy = arr.concat(6, [7,8,9])
console.log(arrCopy) // [1,2,3,4,5,6,7,8,9]
console.log(arr) // [1,2,3,4,5]
  1. join() 、toString() 数组转字符串

let arr = [1,2,3,4]
console.log(arr.join('-'))  // 1-2-3-4
console.log(arr.toString())  // 1,2,3,4
  1. pop() 删除并返回数组的最后一个元素,数组变化,返回数组的最后一个元素
let arr = [1,2,3,4]
console.log(arr.pop())  // 4
console.log(arr)  // [1,2,3]
  1. push() 向数组的末尾添加一个或者多个元素,并返回数组的长度

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

  1. shift() 删除并返回数组的第一个元素
let arr = [1,2,3,4]
console.log(arr.shift())  // 1
console.log(arr)  // [2,3,4]
  1. unshift() 向数组的开头添加一个或更多的元素,并返回新的长度
let arr = [1,2,3,4]
console.log(arr.unshift(a)) // 5
console.log(arr)  // [a,1,2,3,4]
  1. reverse() 颠倒数组中的元素序列
let arr = [1,2,3,4]
console.log(arr.reverse()) // [4,3,2,1]
  1. slice() 截断数组,返回新数组,原数组不变
let arr = [1,2,3,4]
let arr2 = arr.slice()
console.log(arr2)  // [1,2,3,4]
let arr3 = arr.slice(0, 2)
console.log(arr3)  // [1,2]
arr2.shift()
console.log(arr2)  // [2,3,4]
console.log(arr)  // [1,2,3,4]
注:slice() 有复制数组的作用,在js中数组是引用类型存储在堆中,不可以直接赋值给其他变量,如果赋值给其他变量,两个变量共用一个数组地址,其中一个变量改变,两一个变量数组也会改变;所以slice()这个方法解决了数组的复制性,除了slice()这个方法,还有concat()方法也可复制数组

  1. sort() 按升序排列数组项
let numberArr = [12,34,25,54,7,9]
console.log(numberArr.sort())  // [12,25,34,54,7,9]
let stringArr = ['a','d','b']
console.log(stringArr.sort())  // ['a','b','d']
  • 注:在排序时,sort()方法会调用每个元素的toString()方法,然后比较字符串,根据字符串进行排序
  • 注:sort()方法可以接受一个函数作为参数,比较的函数接受两个参数,通过返回正数,0,负数进行排序决定。
function compareArr(value1, value2) {
  if (value1 > value2) {
    return -1
  } else if (value1 < value2) {
    return 1
  } else {
    return 0
  }
}
let numberArr = [12,34,25,54,7,9]
console.log(numberArr.sort(compareArr))  // [54, 34, 25, 12, 9, 7]
  1. splice() 向数组指定位置删除、添加元素
  • 注:splice(位置,删除个数,插入元素) 三个参数的意义
et arr = [1,2,3,4,5,6,7,8]
console.log(arr.splice(0, 1))  // 1
console.log(arr)  // [2,3,4,5,6,7,8]
let a = [1,2,3,4,5,6,7,8]
a.splice(2,1,2,3,4)
console.log(a) //  [1,2,2,3,4,5,6,7,8]
  1. indexOf() 、lastIndexOf() 定位数组元素,可以接受两个参数,第一个是查找的元素,第二个参数是起始点

let arr = [1,2,3,4,6,2,3,7,8,9];
console.log(arr.indexOf(2)); // 1
console.log(arr.lastIndexOf(4)); // 3
console.log(arr.indexOf(2,5)); // 5
console.log()arr.lastIndexOf(4, 2) // -1  从第三位开始查找(向前查找)
console.log(arr.lastIndexOf(3)); // 6
console.log(arr.indexOf(3))  // 2
  1. forEach() 、map() 、filter() 、every() 、some() 数组遍历循环
  • forEach() 没有返回值
let arr = [1,2,3,4,5,6,7]
arr.forEach((value, index) => {
  console.log(value, index)
})
// 1, 0  2,1  3,2  4,3  5,4  6,5  7,6
  • map() 返回每次函数调用的结果组成的数组,映射

let arr = [1,2,3,4,5,6,7]
let arr2 = arr.map((value, index) => {
  return value * index
})
console.log(arr2)
console.log(arr)
// [0, 2, 6, 12, 20, 30, 42]
// [1, 2, 3, 4, 5, 6, 7]

  • filter() 返回满足条件的元素组成的数组
let arr = [1,2,3,4,5,6,7]
let arr2 = arr.filter((value, index) => {
  return index == 2 || index == 3
})
console.log(arr2)
console.log(arr)
// [3, 4]
// [1, 2, 3, 4, 5, 6, 7]
  • every() 只要数组中的每个元素满足条件就返回true,否则返回false
let arr = [1,2,3,4,5,6,7]
let every = arr.every((value, index) => {
  return value == index
})
console.log(every)
console.log(arr)
// false
// [1, 2, 3, 4, 5, 6, 7]

  • some() 主要数组中的有一个元素满足条件就返回true,否则返回false
let arr = [1,2,3,4,5,6,7]
let some = arr.some((value, index) => {
  return value == index
})
console.log(some)
console.log(arr)
// false
// [1, 2, 3, 4, 5, 6, 7]

es6的数组新方法:
扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
(1)由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。
// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);
(2)合并数组
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
Array from()

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。

下面是一个类似数组的对象,Array.from将它转为真正的数组。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array of()
Array.of方法用于将一组值,转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length //
Array of()数组实例find()和findeIndex()
数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined
[1, 4, -5, 10].find((n) => n < 0)
// -5
数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

数组实例的 includes() 

Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。ES2016 引入了该方法。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true
 
 
 
 


 

 
 
 
 
 
 
 
 
 
 
 
原文地址:https://www.cnblogs.com/zhx119/p/10320323.html