数组的常用方法
创建数组
创建数组的两种方法
- 字面量:
[]
- 构造函数:
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"]