javascript数组方法&类数组

2021-04-16  本文已影响0人  zlqinying

arr.push(...items) —— 从尾端添加元素,

arr.pop() —— 从尾端提取元素,

arr.shift() —— 从首端提取元素,

arr.unshift(...items) —— 从首端添加元素。

1、删除数组

数组是对象,所以可以使用delete

let arr = ['dd', 'go', 'home']

delete arr[1]

console.log(arr, arr[1]) // ["dd", '', "home"] undefined

delete obj.key 是通过 key 来移除对应的值。对于对象来说是可以的。但是对于数组来说,我们通常希望剩下的元素能够移动并占据被释放的位置。我们希望得到一个更短的数组。

2、splice它可以做所有事情,添加、删除、插入元素

语法:splice(start,[deleteNum, elem1....elemN])

它从索引start开始修改数组,删除deleteNum个元素并在当前位置插入elem1....elemN

let arr = ["I", "study", "JavaScript"];

arr.splice(1,1);// 从索引 1 开始删除 1 个元素

alert( arr ) // ["I", "JavaScript"]

let arr = ["I","study","JavaScript", "right", "now"];

arr.splice(0, 3, "Let's", "dance");

alert( arr ) //  ["Let's", "dance", "right", "now"]

let arr = ["I", "study", "JavaScript"];

// 从索引 2 开始, 删除 0 个元素,然后插入 "complex" 和 "language"

arr.splice(2, 0, "complex", "language");

alert( arr ); // "I", "study", "complex", "language", "JavaScript"

3、arr.slice([start], [end])

let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s(复制从位置 1 到位置 3 的元素)

alert( arr.slice(-2) ); // s,t(复制从位置 -2 到尾端的元素)

4、concat数组合并

5、数组搜索

arr.indexOf(item, from) 从索引 from 开始搜索 item,如果找到则返回索引,否则返回 -1。

arr.lastIndexOf(item, from) —— 和上面相同,只是从右向左搜索。

arr.includes(item, from) —— 从索引 from 开始搜索 item,如果找到则返回 true(译注:如果没找到,则返回 false)。

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1

alert( arr.indexOf(false) ); // 2

alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

请注意,这些方法使用的是严格相等 === 比较。所以如果我们搜索 false,会精确到的确是 false 而不是数字 0。

如果我们想检查是否包含某个元素,并且不想知道确切的索引,那么 arr.includes 是首选。

此外,includes 的一个非常小的差别是它能正确处理NaN,而不像 indexOf/lastIndexOf:

const arr = [NaN];

alert( arr.indexOf(NaN) ); // -1(应该为 0,但是严格相等 === equality 对 NaN 无效)

alert( arr.includes(NaN) );// true(这个结果是对的)

find 和 findIndex

let result = arr.find(function(item,index,array) { 

 // 如果返回 true,则返回 item 并停止迭代 

 // 对于假值(falsy)的情况,则返回 undefined

});

如果它返回 true,则搜索停止,并返回 item。如果没有搜索到,则返回 undefined

arr.findIndex 方法(与 arr.find 方法)基本上是一样的,但它返回找到元素的索引,而不是元素本身。并且在未找到任何内容时返回 -1。

6、sort

let arr = [ 1, 2, 15 ];

arr.sort(function(a,b) { return a - b; });

alert(arr); //1, 2, 15

7、arr.reverse 方法用于颠倒 arr 中元素的顺序。

let arr = [1, 2, 3, 4, 5];

arr.reverse();

alert( arr ); // 5,4,3,2,1

8、split和join

let str = "test";

alert( str.split('') ); // t,e,s,t 字符串拆为字母数组

let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = arr.join(';'); // 使用分号 ; 将数组粘合成字符串

alert( str ); // Bilbo;Gandalf;Nazgul

9、reduce/reduceRight 它们用于根据数组计算单个值。

let value = arr.reduce(function(accumulator,item,index,array) { 

 // ...

}, [initial]);

accumulator —— 是上一个函数调用的结果,第一次等于 initial(如果提供了 initial 的话)。

item —— 当前的数组元素。

index —— 当前索引。

arr —— 数组本身。

initial —— 初始值

应用函数时,上一个函数调用的结果将作为第一个参数传递给下一个函数。

因此,第一个参数本质上是累加器,用于存储所有先前执行的组合结果。最后,它成为 reduce 的结果。

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum,current) => sum + current, 0);

alert(result); // 15

arr.reduceRight 和 arr.reduce 方法的功能一样,只是遍历为从右到左。

let arr = [];

// Error: Reduce of empty array with no initial value

// 如果初始值存在,则 reduce 将为空 arr 返回它(即这个初始值)。

arr.reduce((sum, current) => sum + current, 10);

所以建议始终指定初始值。

10、Array.isArray

数组是基于对象的,不构成单独的语言类型。

所以 typeof 不能帮助从数组中区分出普通对象

alert(typeof {}); // object

alert(typeof []); // object

alert(Array.isArray({})); // false

alert(Array.isArray([])); // true

11、function camelize(str) {

    return str.split('-').map((item, index) => {

      return index === 0 ? item : item[0].toUpperCase()+item.slice(1)

    }).join('')

  }

  console.log(camelize('background-color')) // backgroundColor

  console.log(camelize('list-style-image')) // listStyleImage

  console.log(camelize('-webkit-transition')) // WebkitTransition

12、类数组array-like有索引和length属性的对象,所以看起来很像数组

let arrayLike = { 

// 有索引和 length 属性 => 类数组对象

 0: "Hello", 

 1: "World", 

 length: 2

};

// Error (no Symbol.iterator)

for(letitemofarrayLike){}

可迭代对象和类数组对象通常都 不是数组,它们没有 push 和 pop 等方法。

13、Array.from

有一个全局方法 Array.from 可以接受一个可迭代或类数组的值,并从中获取一个“真正的”数组。然后我们就可以对其调用数组方法了。

let arrayLike = { 

 0: "Hello", 

 1: "World",

 length: 2};

let arr = Array.from(arrayLike);// (*)

alert(arr.pop()); // World(pop 方法有效)

console.log(arr) // ['Hello', 'World']

let str = 'xy';// 将 str 拆分为字符数组

let chars = Array.from(str);

alert(chars[0]); // x

alert(chars[1]); // y

alert(chars.length); // 2

Array.from与split方法不同,它依赖于字符串的可迭代性,因此就i像for...of一样,可以正确的处理代理对。

其实Array.from就跟下面一些代码做着同样的事:

let str = 'xy'

let chars = []

for (let char of str) {

  chars.push(char)

}

console.log(chars) // ['x','y']

14、可以应用 for..of 的对象被称为 可迭代的,Symbol.iterator 方法会被 for..of 自动调用,但我们也可以直接调用它。

上一篇下一篇

猜你喜欢

热点阅读