JS 数组要领进修汇总

媒介 在 JS 中我们数组用的是比较多的了,它自带了许多要领能够用,省去了我们时刻,特别是 ES6 当中对数组的扩大让数组具有了更壮大的功用,为了今后运用数组的时刻能够充分发挥数组的特征,在这里对数组的要领举行一次汇总吧。

申明 题目后的标识 * 是申明该要领会转变原数组

对数组元素的操纵

push() & pop() *

push() 向数组的末端增加一个或更多元素(就是传进去的参数),并返回新的长度。

pop() 删除并返回数组的末了一个元素。

详细效果看代码

let arr = [1,2,3];
let res1 = arr.push(5);
console.log(res1); // 4 arr的长度

console.log(arr); // [1,2,3,5] 

let res2 = arr.pop();
console.log(res2); // 5 移除的数组项

console.log(arr); // [1,2,3] 

shift() & unshift() *

shift() 删除并返回数组的第一个元素

unshift() 向数组的头部增加一个或许多个元素(传入的参数),并返回新的长度。

详细效果看代码

let arr = [1,2,3];
let res1 = arr.shift();
console.log(res1); // 1 移除的数组项

console.log(arr); // [2,3] 

let res2 = arr.unshift(5,7);
console.log(res2); // 4 数组新长度

console.log(arr); // [5,7,2,3]

slice()

这个要领是从某个已有的数组返回选定的元素。平常带两参数 par1 和 par2,要领返回原数组 [par1, par2) 区间内的值构成的新数组。假如只需一个参数 par1 的话,就返回原数组 [par1,数组尾] 区间内的值构成的新数组。
详细看代码

let arr = [1,2,3];
console.log(arr.slice(1,2)); // [2]
console.log(arr.slice(1)); // [2,3]

console.log(arr); // [1,2,3]

splice() *

这个要领有点庞杂了,他是从原数组中删除/增加项目,并返回删除的项目。详细是删除照样增加,看参数决议,它最少须要两个参数 index,deleteCount,离别指代要最先删除/增加项目的下标 index 和要删除的项目的个数 deleteCount,背面假如其他参数统统就是要到场 index 位置背面的项目了。看代码就晓得统统了。

let arr = [0,1,2,3,4];
// 删除操做
console.log(arr.splice(0,2)); // [0,1] 从 下标 0 的位置最先删除两个元素,并返回。  
console.log(arr); // [2,3,4] 删除后就剩它仨了

// 增加操纵
console.log(arr.splice(1, 0, 5, 6, 7)); // [] 第二个参数 0 ,那就没有删除啥元素咯,然后在下标 1 的位置最先插进去
console.log(arr); // [2, 5, 6, 7, 3, 4] 

// 替换操纵
console.log(arr.splice(1,1,2)); // [5]
console.log(arr); // [2, 2, 6, 7, 3, 4 ]

这个要领是很壮大的,能够用它来完成数组元素的删除,替换,增加的操纵,看上面代码就晓得啦。

全部数组的大操纵(转换&拼接&排序&颠倒)

join()

这个要领是将数组转换为字符串,数组元素间用传进去的参数( 没有参数就用,) 分开

let arr = [1,2,3,4,5];
console.log(arr.join('|')); // 1|2|3|4|5
console.log(arr.join()); // 1,2,3,4,5

concat()

这个要领用于拼接两个数组并返回一个新的数组。

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

sort() *

这个就不必讲了吧,排序,不过默许的排序要领是把数字当做字符串来排序的,所以就会有了下面代码中的题目,也有了我们关于排序的重写。

let arr = [1,22,13,4,5];
arr.sort();
console.log(arr) // [ 1, 13, 22, 4, 5 ] 由于 22 的第一个字符是 2 比 4 小,所以 22 比 4 小。。。 

arr.sort(function(val1,val2){
  return val1-val2;
})
console.log(arr); // [ 1, 13, 22, 4, 5 ]

reverse() *

如其名,颠倒数组的元素。

let arr = [1,22,13,4,5];
arr.reverse();
console.log(arr) // [ 5, 4, 13, 22, 1 ]

toString() & toLocaleString() & valueOf()

这三个要领,是个对象就会有,数组对象也不破例,也趁便写出来看看吧,详细啥效果,看代码吧。

let arr = [1,22,13,4,5];
console.log(arr.toString()); // 1,22,13,4,5
console.log(arr.toLocaleString()); // 1,22,13,4,5
console.log(arr.valueOf()); // [ 1, 22, 13, 4, 5 ]

数组位置要领

indexOf() & lastIndexOf()

这个用于查找数组中的元素,找到后返回元素的下标,找不到的话就返回 -1。两个要领都是一样的,只不过一个从头至尾找,一个从尾到头找

let arr = [1,22,13,4,5];
console.log(arr.indexOf(13)); // 2
console.log(arr.lastIndexOf(22)); // 1
console.log(arr.indexOf(44)); // -1

迭代要领

every() & some()

every() 对数组每一项运转一个函数,假如该函数对每一项都返回 true,则团体返回 true

some() 这个和上面一样啦,不过这个只需有一项是 true,团体就返回 true

详细看代码啦

let arr = [1, 2, 3, 4, 5];
console.log(
  arr.every(function (item, index, array) {
    return (item > 2)
  })
);  // false
console.log(
  arr.some(function (item, index, array) {
    return (item > 2)
  })
); // true

forEach()

这个是对数组中的每一项运转给定函数,没有返回值。看代码吧

let arr = [1,2,3,4,5]
// 打印全部数组
arr.forEach(function(item){
  console.log(item);
});

map()

这个要领是对数组的每一项运转给定函数,返回每一项返回效果构成的数组。

let arr = [1,2,3,4,5]
let newArr = arr.map(function(item){
  return item+1
});
console.log(newArr); // [ 2, 3, 4, 5, 6 ]

filter()

这个要领是对数组的每一项运转给定函数,返回该函数会返回为 true 的数组项构成的新数组。

let arr = [1,2,3,4,5]
let newArr = arr.filter(function(item){
  return item > 2
});
console.log(newArr); // [ 3, 4, 5 ]

ES6 扩大的数组要领

Array.from() 对象转为数组

这个要领用于将两类对象转为真正的数组,离别是类数组对象可遍历对象(包含 ES6 新增的数据结构 Set 和 Map)用法就看代码吧

let arrLike = {
  '0':'1',
  '1':'2',
  '2':'2',
  length:'3'
}
 
let arr = Array.from( arrLike);
console.log(arr); // [ '1', '2', '2' ]

在现实运用中,DOM 操纵返回的 NodeList 鸠合就是一个类数组对象。

Array.of() 值转为数组

这个是用来替换 Array() 或 new Array()的,为啥要替换,来段代码感觉下就晓得了

console.log(Array()); // []
console.log(Array(3)); // [, , ,]
console.log(Array(1, 2, 3)); // [ 1, 2, 3 ]

console.log(Array.of()); // []
console.log(Array.of(undefined)); // [undefined]
console.log(Array.of(3)); // [3]
console.log(Array.of(1, 2, 3)); // [ 1, 2, 3 ]

看出门道了吧,Array() 会由于参数差别会有差别的效果,而 Array.of() 就不会存在这类题目啦。

copyWithin() 数组内成员复制 *

这个要领有点迷,临时不晓得是用来干啥的,然则也记一下它能干啥,没准今后就用上了。
它的话是在当前数组内部将指定位置的成员复制到其他位置(覆蓋掉原有成员),然后返回该数组。他有下面三个参数

  • target(必选):从该位置最先替换数据
  • start(可选):从该位置读取数据,默许 0。假如为负值,示意倒数。
  • end(可选):到该位置前住手读取数据,默许是数组长度,假如为负值,示意倒数。

详细有啥效果就看代码吧

let arr = [1, 2, 3, 6, 5];
// 从下标 0 最先换 下标 1(也就是 2)最先的数据,一向替换到 下标 4 前(也就是到 arr[3] 完毕)
// 人话说就是 arr[0] 到 arr[4-2] 的值被 arr[1] 到 arr[4-1] 的值替换掉
console.log(arr.copyWithin(0, 1, 4)); // [ 2, 3, 6, 6, 5 ]


arr2 = [0, 1, 2, 3, 4, 5, 6];
console.log(arr2.copyWithin(1, 3, 6)); // [ 0, 3, 4, 5, 4, 5, 6 ]

find() & findIndex() 查找数组元素

find() 用于查找相符第一个相符前提的数构成员,并将其返回。假如没有的话,就返回 undefined。

findIndex() 和上面一样,不过他返回的是谁人相符前提的数组的下标。

啥效果就看代码吧

let arr = [0, 1, 2, 3, 5, 5, 6];
arr.find(function (value, index, arr) {
 return value > 4;
})  // 返回数值 5 

arr.findIndex(function (value, index, arr) {
 return value > 4;
}) // 返回下标 4

### fill() 数组添补
这个要领是用给定值添补一个数组。初始化数组的时刻能够用到。它有三个参数:
value 添补数组的值
start 添补的肇端位置
end 添补的完毕位置

[1, 2, 3].fill('a') // [ 'a', 'a', 'a' ]
[1, 2, 3, 4, 5].fill('a', 2, 4) // [ 1, 2, 'a', 'a', 5 ]

entries() & key() & values() 遍历数组

这三个都邑返回一个迭代器对象,能够用 for…of 轮回遍历,区别是,entries() 遍历键值对,keys() 遍历键名,values() 遍历键值,啥效果看代码。

let arr = [1, 2];
for (let [index, ele] of arr.entries()) {
  console.log(index, ele);
} // 0 1  1 2
for (let index of arr.keys()) {
  console.log(index);
} // 0  1
for (let ele of arr.values()) {
  console.log(ele);
} // 1 2

includes() 推断数组是不是有某值

这个要领如其名,用于推断数组内是不是有某个值,假如有,返回 true,没有,返回 false。他假如有第二个参数的话,那末第二个参数示意最先搜刮的位置。

let arr=[1,2,3,4,5,6,7];
arr.includes(1) // true
arr.includes(1,5) // false 从下标 5 最先搜没有 1

关于数组的的要领,就总结道这边了,假如另有脱漏或许毛病的处所的话,就贫苦下下面批评修改啦。

    原文作者:小红帽
    原文地址: https://segmentfault.com/a/1190000017450739
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞