let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 1、push从数组尾部添加一个或多个元素,变异方法返回数组长度,变异方法
console.log(arr.push(10, 11));
console.log('push', arr);
// 2、pop从数组尾部删除,并返回删除的元素,变异方法
console.log('pop', arr.pop())
// 3、shift删除数组第一个元素并返回删除的元素,变异方法
console.log('shift', arr.shift())
// 4、unshift从数组头部添加一个或多个元素,返回添加后数组的长度,变异方法
console.log('unsift', arr.unshift(1, 11));
// 5、concat拼接一个或多个数组,非变异方法
const concat = arr.concat(['a', 'aaa'], ['b'], 'c', 'd')
console.log('concat', concat);
// 6、join按照规定连接符拼接数组中的元素,非变异方法
const str = arr.join('-')
console.log('str', str);
// 7、reverse用于颠倒数组元素的顺序,变异方法
console.log('reverse', arr.reverse());
console.log('arr', arr);
// 8、sort如果里面没有任何参数,则按照字符编码排序,如果想自定义排序方式,则传入一个函数, 变异方法
let sortArr = [7, 3, 2, 6, 4, 3, 9, 56]
console.log('sort', sortArr.sort((a, b) => { return a - b }));
console.log('sortArr', sortArr);
// sort原理是用的冒泡排序的思想
// 冒泡排序实现升序
// 一共要冒sortArr-1次泡,每次冒泡比较次数比上一次少1(第一次比较次数为sortArr-1),所以每趟比较sortArr-1-i次
let mySortArr = [7, 3, 2, 6, 4, 3, 9, 56]
// for (var i = 0; i <= mySortArr.length - 1; i++) {
// for (var j = 0; j < mySortArr.length - i; j++) {
// if (mySortArr[j] > mySortArr[j + 1]) {
// var temp;
// temp = mySortArr[j];
// mySortArr[j] = mySortArr[j + 1];
// mySortArr[j + 1] = temp
// }
// }
// }
// console.log('mySortArr', mySortArr);
function sort(arr, fn) {
for (var i = 0; i <= arr.length - 1; i++) {
for (var j = 0; j < arr.length - i; j++) {
if (fn(arr[j], arr[j + 1]) > 0) {
var temp;
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp
}
}
}
console.log('mySortArr', arr);
}
function fn(a, b) { return a - b }
sort(mySortArr, fn)
// 9、slice返回一个新数组,从start到end(不包括),注意为负时只能从左到右截取,-1代表倒数第一个元素,非变异方法
let slice = arr.slice(-2, -1);
console.log('arr', arr);
console.log('slice', slice);
// 10、splice从数组中添加或删除元素,会改变原数组,返回被删除的元素数组,可实现替换操作,变异方法
console.log('arr', arr);
console.log('splice', arr.splice(1, 3, 'delete'));
console.log('arr', arr);
// es6新增 find()/findIndex()/fill()/entries()/keys()/values()/includes()
// 11、数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
console.log('arr', arr);
console.log('find', arr.find(v => { return v > 6 }));
// 12、数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
console.log('findIndex', arr.findIndex((v, i, arr) => { return v > 8 }));
console.log('findIndex-1', arr.findIndex((v, i, arr) => { return v > 100 }));
// 这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。
function f(v) {
return v > this.age;
}
let person = { name: 'John', age: 20 };
console.log([10, 12, 26, 15].find(f, person)); // 26
// indexOf方法无法识别数组的NaN成员,但是findIndex方法可以借助Object.is方法做到。
console.log([NaN].findIndex(v => Object.is(NaN, v)))
// 13、fill方法使用给定值,填充一个数组。
console.log('fill', [1, 2, 3].fill('5'));
console.log('fill', new Array(3).fill('6'));
// 下面代码表示,fill方法从 1 号位开始,向原数组填充 7,到 2 号位之前结束。也可用来替换
// 注意,如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象。
['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']
// 14、ES6 提供三个新的方法——entries(),keys()和values()——用于遍历数组。它们都返回一个遍历器对象(详见《Iterator》一章),可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
// 数组的遍历方法
// 1、forEach遍历但是有个缺点是不能用break来中断循环,也不能return跳出函数,类似于for循环
arr.forEach((v, i, arr) => { console.log('forEach', v); })
// 2、map 返回映射后的数组, 非变异方法
let maparr = [1, 2, 3]
let map = maparr.map((v, i, arr) => { return v * v })
console.log('map', map);
console.log(maparr.map(Math.sqrt));
// 3、filter 过滤符合条件的元素
let filterarr = [12, 23, 14, 56, 34]
let newFilter = filterarr.filter((v, i, arr) => { return v > 18 })
console.log('newFilter', newFilter);
// 4、some 只要有一个元素满足就返回true
let some = ['a', 'b', 'c']
console.log('some', some.some((v, i, arr) => { return v = 'b' }));
// 5、every 所有元素满足条件才返回true
let every = [12, 10, 29]
console.log('every', every.every((v, i, arr) => { return v > 20 }));
// 6、reduce
let reducearr = [12, 23, 14, 56, 34]
const Obj = reducearr.reduce((obj, v, i, arr) => { obj[i] = v; return obj }, {})
console.log('reduce', Obj);
// 7、for in
// 8、for of
// 9、for
js数组方法大全(包括es6新增以及遍历方法)
最新推荐文章于 2022-07-18 18:50:26 发布