数组的常用方法

最新推荐文章于 2024-07-10 21:52:11 发布

灯火暗

最新推荐文章于 2024-07-10 21:52:11 发布

阅读量379

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/denghuocc/article/details/90202392

版权

JS 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

数组的常用方法

创建数组

创建数组的两种方法

字面量：[]
构造函数: new Array()

// 1. 使用构造函数创建数组对象
// 创建了一个空数组
var arr = new Array();
// 创建了一个数组，里面存放了3个字符串
var arr = new Array('zs', 'ls', 'ww');
// 创建了一个数组，里面存放了4个数字
var arr = new Array(1, 2, 3, 4);


// 2. 使用字面量创建数组对象
var arr = [1, 2, 3];

// 获取数组中元素的个数
console.log(arr.length)

检测数组

检测一个对象是否是数组

instanceof

var arr = [1, 2, 3, 4, 5]
console.log(arr instanceof Array) // true

Array.isArray() HTM L5中提供的方法，有兼容性问题, 函数的参数如果要求是一个数组的话，可以用这种方式来进行判断

清空数组

// 方式1 推荐 
arr = [];
// 方式2 
arr.length = 0;
// 方式3
arr.splice(0, arr.length);

转换方法

toString

把数组转换成字符串，逗号分隔每一项

var arr = [1, 2, 3, 4, 5]
var res = arr.toString()
console.log(res)  // 1,2,3,4,5

valueOf

返回数组对象本身

join

将数组的所有元素拼接为一个字符串

const arr = ['a', 'b', 'c']
const res = arr.join(',')
console.log(res) // a,b,c

案例: 将一个字符串数组输出为|分割的形式，比如“刘备|张飞|关羽”

const arr = ['刘备', '张飞', '关羽']
const res = arr.join('|')
console.log(res)

function myJoin (arr = [], sep = '|') {
  if (arr.length === 0) return ''
  let str = arr[0]
  for (var i = 1; i < arr.length; i++) {
    str += sep + arr[i]
  }
  return str
}
const arr = ['刘备', '张飞', '关羽']
console.log(typeof myJoin()) // string
console.log(myJoin(arr)) // 刘备|张飞|关羽
console.log(myJoin(arr, '-')) // 刘备-张飞-关羽

栈操作

栈操作（先进后出）

push

将元素添加到数组最后一项
返回数组长度

var arr = [1, 2, 3, 4, 5]
console.log(arr.push('a'))  // 6 --> 数组长度
console.log(arr)  // (6) [1, 2, 3, 4, 5, "a"]

pop

取出数组中的最后一项
返回取出的元素

var arr = [1, 2, 3, 4, 5, "a"]
console.log(arr.pop()) // a
console.log(arr); // (5) [1, 2, 3, 4, 5]

队列操作

队列操作（先进先出）

shift

取出数组中的第一项
返回取出的元素

var arr = ['a', 2, 3, 4, 5]
console.log(arr.shift()); // a --> 数组第一个元素
console.log(arr); // (4) [2, 3, 4, 5]

unshift

在数组最前面插入项
返回数组长度

var arr = [1, 2, 3, 4, 5]
console.log(arr.unshift('a')) // 6 --> 数组长度
console.log(arr); // (6) ["a", 1, 2, 3, 4, 5]

排序方法

reverse

翻转数组
返回翻转后的数组

var arr = ['a', 'b', 'c']
console.log(arr.reverse())  // (3) ["c", "b", "a"]
console.log(arr);	// (3) ["c", "b", "a"]

案例: 将一个字符串数组的元素的顺序进行反转。[“a”, “b”, “c”, “d”] -> [ “d”,“c”,“b”,“a”]

const arr = ['a', 'b', 'c', 'd']
const res = arr.reverse()
console.log(res)  // ["d", "c", "b", "a"]

 // 第i个和第length-i-1个进行交换
const arr = ['a', 'b', 'e', 'd']
function myReverse (arr = []) {
  if (arr.length === 0) return []
  for (var i = 0; i < arr.length / 2; i++) {
    console.log(i);
    var tmp = arr[i]
    arr[i] = arr[arr.length - i - 1]
    arr[arr.length - i - 1] = tmp
  }
  return arr
}
const res = myReverse(arr)
console.log(res) // ["d", "e", "b", "a"]

sort

JS中sort实现算法是O(n^2)的冒泡排序

不带参数：按照字符编码的顺序进行排序，从小到大排序

var arr = ['bff', 'baa', 'ac']
console.log(arr.sort()) // ["ac", "baa", "bff"]
var arrNum = [3, 213, 11]
console.log(arrNum.sort()); // (3) [11, 213, 3]

带参数：排序函数
- 传两个形参
- 当返回值为正数时，交换传入两形参在数组中位置

var arrNum = [3, 213, 11]
function compare (a, b) {
  return a - b	// a-b升序， b-a降序
}
var res = arrNum.sort(compare)
console.log(res); // (3) [3, 11, 213]
console.log(arrNum);   // (3) [3, 11, 213]

实例: 按照数组中对象的某一个属性值进行排序

var arr = [
  { id: 7, name: '第七' },
  { id: 2, name: '第二' },
  { id: 9, name: '第九' }
]
arr.sort((a, b) => {
  return a.id - b.id
})
console.log(arr) 
// [{id: 2, name: "第二"}, {id: 7, name: "第七"}, {id: 9, name: "第九"}]

var arr = [
  { name: 'aa', age: 0 },
  { name: 'bb', age: 18 },
  { name: 'cc', age: 8 }
];
function compare (item) {
  return function (a, b) {
    var val1 = a[item];
    var val2 = b[item];
    return val1 - val2;
  }
}
console.log(arr.sort(compare('age')))
// [{ name: "aa", age: 0 }, { name: "cc", age: 8 }, { name: "bb", age: 18 }]

操作方法

slice

从当前数组中截取一个新的数组，不影响原来的数组
参数start从0开始,end从1开始

var arr = ['a', 'b', 'c', 'd', 'e', 'f']
var arr1 = arr.slice(0, 3)
var arr2 = arr.slice(3, 6)
console.log(arr); // (6) ["a", "b", "c", "d", "e", "f"]
console.log(arr1);  // (3) ["a", "b", "c"]
console.log(arr2);  // (3) ["d", "e", "f"]

splice

删除或替换当前数组的某些项目,参数(start, deleteCount, options要替换的项)

添加

let arr = ['a', 'b', 'c', 'd', 'e', 'f']
const res = arr.splice(2, 0, 'add')
console.log(arr)  // ["a", "b", "add", "c", "d", "e", "f"]
console.log(res)  // []

替换

let arr = ['a', 'b', 'c', 'd', 'e', 'f']
const res = arr.splice(2, 1, 'add')
console.log(arr)  // ["a", "b", "add", "d", "e", "f"]
console.log(res)  // ["c"]

let arr = ['a', 'b', 'c', 'd', 'e', 'f']
const res = arr.splice(2, 3, 'add')
console.log(arr)  // ["a", "b", "add", "f"]
console.log(res)  // ["c", "d", "e"]

let arr = ['a', 'b', 'c', 'd', 'e', 'f']
const res = arr.splice(2, 3, 'add1', 'add2')
console.log(arr)  // ["a", "b", "add1", "add2", "f"]
console.log(res)  // ["c", "d", "e"]

删除

let arr = ['a', 'b', 'c', 'd', 'e', 'f']
const res = arr.splice(2, 1)
console.log(arr)  // ["a", "b", "d", "e", "f"]
console.log(res)  // ["c"]

位置方法

indexOf

let arr = ['a', 'b', 'c', 'd', 'e', 'f']
const res = arr.indexOf('c')
console.log(res)  // 2

从索引为3处查找, 如果没找到返回-1

let arr = ['a', 'b', 'c', 'd', 'e', 'f']
const res = arr.indexOf('c', 3)
console.log(res)  // -1

案例1 : [“c”, “a”, “z”, “a”, “x”, “a”]找到数组中每一个a出现的位置

const arr = ['c', 'a', 'z', 'a', 'x', 'a']
do {
  var index = arr.indexOf('a', index + 1)
  if (index != -1) {
    console.log(index);
  }
} while (index > 0)

案例2: 去掉一个数组的重复元素

var array = ['c', 'a', 'z', 'a', 'x', 'a'];
function clear () {
  var o = {};
  for (var i = 0; i < array.length; i++) {
    var item = array[i];
    if (o[item]) {
      o[item]++;
    } else {
      o[item] = 1;
    }
  }
  var tmpArray = [];
  for (var key in o) {
    if (o[key] == 1) {
      tmpArray.push(key);
    } else {
      if (tmpArray.indexOf(key) == -1) {
        tmpArray.push(key);
      }
    }
  }
  return tmpArray
}

console.log(clear(array)) //  ["c", "a", "z", "x"]

lastIndexOf

???传说中这里不是应该倒着数吗???

let arr = ['a', 'b', 'c', 'd', 'e', 'f']
const res = arr.lastIndexOf('c')
console.log(res)  // 2

find

用来查找目标元素,找到就返回该元素,找不到就返回该undefined

const arr = [
  { name: 'aa', gender: '男', age: 20 },
  { name: 'bb', gender: '男', age: 18 },
  { name: 'cc', gender: '女', age: 16 }
]
const res = arr.find(item => {
  return item.name === 'cc'
})
console.log(res); // {name: "cc", gender: "女", age: 16}

const res1 = arr.find(item => {
  return item.name === 'dd'
})
console.log(res1) // undefined

findIndex

用来查找目标元素,找到就返回该元素位置,找不到就返回该-1

const arr = [
  { name: 'aa', gender: '男', age: 20 },
  { name: 'bb', gender: '男', age: 18 },
  { name: 'cc', gender: '女', age: 16 }
]
const index = arr.findIndex(item => {
  return item.name === 'cc'
})
console.log(index)  // 2s

迭代方法

不会修改原数组

forEach

const arr = [1, 2, 3, 4, 5]
const res = arr.forEach(item => {
  console.log(item)
})

every

every判断数组中是否每个元素都满足条件，只有都满足条件才返回true；只要有一个不满足就返回false且不再迭代

let arr = [1, 2, 3, 4, 5]
const res = arr.every(item => {
  return item > 3
})
console.log(res)  // false

let arr = [1, 2, 3, 4, 5]
const res = arr.every(item => {
  return item < 6
})
console.log(res)  // true

some

some() 方法用于检测数组中的元素是否满足指定条件，如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。

let arr = [1, 2, 3, 4, 5]
const res = arr.some(item => {
  console.log(item) // 1 2 3 4
  return item > 3
})
console.log(res)  // true

filter

filter用于把数组某些元素过滤掉,然后返回剩下的元素

const arr = [1, 2, 3, 4, 5]
const res = arr.filter(item => {
  return item % 2 === 0
})
console.log(res)  // [2, 4]

案例: 工资的数组[1500, 1200, 2000, 2100, 1800],把工资超过2000的删除

const arr = [1500, 1200, 2000, 2100, 1800]
const res = arr.filter(item => {
  // return item <= 2000
  if (item <= 2000) return true
})
console.log(res)  // [1500, 1200, 2000, 1800]

const arr = [1500, 1200, 2000, 2100, 1800, 900]
function myFilter (arr) {
  let newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] <= 2000) {
      newArr.push(arr[i])
    }
  }
  return newArr
}
const res = myFilter(arr)
console.log(res)  // [1500, 1200, 2000, 1800, 900]

map

const arr = [1, 2, 3, 4, 5]
const res = arr.map(item => {
  return item + 1
})
console.log(arr) // [1, 2, 3, 4, 5]
console.log(res)  // [2, 3, 4, 5, 6]

归并方法

reduce

reduce接收两个参数,返回一个最终的值

第一个参数是在每一项上调用的函数,该函数接收4个参数:
- 前一个值prev
- 当前值 cur
- 项的索引 index
- 数组对象 array
第二个可选参数是作为归并基础的初始值

arr.reduce((pre, cur, index, arr) => {}, initialValue)

案例: 计算数组总和

var num = [1, 2, 3, 4, 5];
var res = num.reduce((total, num) => {
  console.log(total)  // 1 3 6 10
  console.log(num); // 2 3 4 5
  return total + num;
})
console.log(res) // 15

案例: 合并二维数组

const a = [0, 1]
const b = [2, 3]
const c = [4, 5]
var res = [a, b, c].reduce((a, b) => {
  return a.concat(b);
}, []);
console.log(res) // [0, 1, 2, 3, 4, 5]

拼接方法

concat

把数组拼接到当前数组
返回一个新数组，原数组不变

var arr = ['a', 'b', 'c']
var arr1 = [1, 2, 3]
var arr2 = ['x', 'y']
const res = arr.concat(arr1, arr2)
console.log(res) // ["a", "b", "c", 1, 2, 3, "x", "y"]

扩展运算符

var arr = ['a', 'b', 'c']
var arr1 = [1, 2, 3]
var arr2 = ['x', 'y']
const res = [...arr, ...arr1, ...arr2]
console.log(res) // ["a", "b", "c", 1, 2, 3, "x", "y"]

灯火暗

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
数组的常用方法

Array对象创建数组对象的两种方式字面量方式new Array()// 1. 使用构造函数创建数组对象// 创建了一个空数组var arr = new Array();// 创建了一个数组，里面存放了3个字符串var arr = new Array('zs', 'ls', 'ww');// 创建了一个数组，里面存放了4个数字var arr = new Array(1...
复制链接

扫一扫

专栏目录