让前端飞Web 前端开发

数组方法整理

2018-08-12  本文已影响0人  bixin

操作数组的方法

子曾经曰过，这是基本功，就和练武的马步一样！

数组的基本方法

一、原数组改变

1.push()

  1. 释义：向数组的末尾添加内容；

  2. 参数：一个或多个元素；(多个居然也可以😝)

  3. 原数组：改变；

  4. 返回值：新数组的长度。

    var arr = [1, 2, 3]
var length = arr.push(1)

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

2.pop()

  1. 释义：从数组中删除最后一个元素；

  2. 参数：无；

  3. 原数组：改变；

  4. 返回值：删除的元素。

    var arr = [1, 2, 3]
var el = arr.pop()

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

3.unshift()

  1. 释义：向数组的开头添加内容；

  2. 参数：一个或多个元素；

  3. 原数组：改变；

  4. 返回值：新数组的长度。

    var arr = [1, 2, 3]
var length = arr.unshift(4, 5, 6)

console.log(arr) // [4, 5, 6, 1, 2, 3]
console.log(length) // 6

4.shift()

  1. 释义：从数组中删除第一个元素；

  2. 参数：无；

  3. 原数组：改变；

  4. 返回值：删除的元素。

    var arr = [1, 2, 3]
var el = arr.shift()

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

5.splice( x, y, z )

  1. 释义：从 x 位置开始，删除长度为 y 的元素，并用 z 替换；

  2. 参数：x 表示开始位置（如果是负值，则表示从数组末位开始的第几位）， y 表示删除元素的个数，z 表示替换元素（可多个）；

  3. 原数组：改变；

  4. 返回值：由删除内容组成的新数组。

  5. 用法：由传入参数的不同可以分别处理删除，添加，修改；

    • splice( x )：一个参数，表示删除，从 x 位置，删除到最后，即默认 y=arr.length - x；

      var arr = [1, 2, 3, 4]
var newArr = arr.splice(2)

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

    • splice( x, y )：两个参数，表示删除，从 x 位置，删除 y 个元素；

      var arr = [1, 2, 3, 4]
var newArr = arr.splice(2, 1)

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

    • splice( x, 0, z )：三个参数，且删除长度为0，表示添加，在 x 位置前添加元素；返回空数组（因为没删除）

      var arr = [1, 2, 3, 4]
var newArr = arr.splice(0, 0, 0)

console.log(arr) // [0, 1, 2, 3, 4]
console.log(newArr) // []

    • splice( x, y, z )：三个参数，表示修改，从 x 位置开始，删除长度为 y 的元素，并用 z 替换；

      var arr = [1, 2, 3, 4]
var newArr = arr.splice(3, 1, 5)

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

6.reverse()

  1. 释义：将数组中元素的位置颠倒

  2. 参数：无

  3. 原数组：改变；

  4. 返回值：该数组的引用地址。

    var arr = [1, 2, 3, 4]
var newArr = arr.reverse()

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

7.sort()

  1. 释义：sort() 方法在适当的位置对数组的元素进行排序，默认排序顺序是根据字符串Unicode码点。

  2. 参数：compareFunction（可选）

  3. 原数组：改变；

  4. 返回值：该数组的引用地址

    /*
 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变；
 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。
 */

var arr = [1, 3, 2, 50, 23];
arr.sort();// 根据字符Unicode码点 [1, 2, 23, 3, 50]
arr.sort(function(a,b) {return a - b ;});// 从小到大 [1, 2, 3, 23, 50]
arr.sort(function(a,b) {return b - a ;});// 从大到小 [50, 23, 3, 2, 1]

二、原数组不变

1.toString()

  1. 释义：将数组转为字符串；

  2. 参数：无；

  3. 原数组：不变；

  4. 返回值：新字符串。

    var arr = [1, 2, 3]
var str = arr.toString()

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

2.join()

  1. 释义：将数组按指定分隔符转为字符串；

  2. 参数：separator分隔符；

  3. 原数组：不变；

  4. 返回值：用分隔符连接的新字符串。

    // 根据参数不同返回不同结果
var arr = [1, 2, 3]
var str1 = arr.join()
var str2 = arr.join('-')
var str3 = arr.join('')

console.log(arr) // [1, 2, 3]
console.log(str1) // "1,2,3"
console.log(str2) // "1-2-3"
console.log(str3) // "123"

3.concat()

  1. 释义：拼接两个或多个数组；

  2. 参数：可以是一个或多个数值或字符串或数组；

  3. 原数组：不变；

  4. 返回值：新数组。

    // 传入不同参数，原数组不变
var arr = [1, 2, 3]
var newArr1 = arr.concat(4)
var newArr2 = arr.concat(5, 6, 7)
var newArr3 = arr.concat([5, 6, 7])
var newArr4 = arr.concat([5], [6], [7])

console.log(arr) // [1, 2, 3]
console.log(newArr1) // [1, 2, 3, 4]
console.log(newArr2) // [1, 2, 3, 5, 6, 7]
console.log(newArr3) // [1, 2, 3, 5, 6, 7]
console.log(newArr4) // [1, 2, 3, 5, 6, 7]

4.slice( x, y )

  1. 释义：选取从位置 x 到位置 y 的数组的的一部分（[ x, y) => 包含x，不包含y）；

  2. 参数：起始位置 x （可选，省略时为0）；终点位置 y （可选，省略时为arr.length-1）

  3. 原数组：不变；

  4. 返回值：由选取的内容组成的新数组。

  5. 注意：slice 不修改原数组，只会返回一个浅拷贝了原数组中的元素的一个新数组，即地址都指向了同一个对象。

  6. 用法：传入的参数不同

    • slice( )：不传参数，表示从 0 到 arr.length-1；

      var arr = [1, 2, 3, 4]
var newArr = arr.slice()

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

    • slice( x )：传一个参数，表示从位置 x 到 arr.length-1；

      var arr = [1, 2, 3, 4]
var newArr = arr.slice(1)

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

    • slice( x, y )：传两个参数，表示从位置 x 到 y（不包含y）；

      var arr = [1, 2, 3, 4]
var newArr = arr.slice(1, 2)

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

ES5中的数组方法

一、迭代方法

1.forEach

2.map

3.filter

4.some

5.every

二、索引方法

1.indexOf

2.lastIndexOf

三、归并方法

1.reduce

2.reduceRight

ES6中的数组方法

1.扩展运算符（...）

  1. 释义：它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

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

  2. 该运算符主要用于函数调用，如替代数组的 apply 方法

    function add(a, b, c) {
  console.log(a + b + c);
}
let arr = [1, 2, 3];
add.apply(null, arr); // 6 ==> es5
add(...arr); // 6 ==> es6

Math.max.apply(null, [1, 2, 3]); // 3 ==> es5 写法
Math.max(...[1, 2, 3]); // 3 ==> ES6 写法

  3. 应用

    // 1.复制数组
const a = [1, 2];
const b = [...a];
const [...c] = a;

// 2.合并数组(取代concat)
var a = [1, 2];
var b = [3, 4];
a.concat(b); // [1,2,3,4] ==> es5 写法
[...a, ...b]; // [1,2,3,4] ==> es6 写法

// 3.与解构赋值结合，生成数组
let [a, ...b] = [1, 2, 3, 4]
a // 1
b // [2,3,4]

// 4.将字符串转为真正的数组
let str = "abc";
[...str] // ["a","b","c"];
Array.from('abc'); // ['a','b','c'];

str.split("").reverse().join(""); ==> es5 写法
[...str].reverse().join(""); ==> es6 写法

2.Array.from

  1. 释义: 将两类对象转为正真的数组

  2. 语法:

    Array.from(arrayLike: ?, mapFn?: fn(elt: ?, i: number), thisArg?: ?)

    参数:

    • arg1：类似数组的对象
    • arg2：map 函数
    • arg3：绑定 map 函数内的 this

  3. 应用:

    • 该方法用于将两类对象转为正真的数组：类似数组的对象和遍历的对象( 包括 set 和 map )

      let arrLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};

var arr1 = [].slice.call(arrLike); // ["a", "b", "c"] ==> es5
let arr2 = Array.from(arrLike); // ["a", "b", "c"] ==> es6

// 将 Set 结构转为数组
let items = new Set([1, 2, 3]);
let array = Array.from(items);

    • 实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的 arguments 对象

  4. 栗子:

    1. 将字符串转为数组

      Array.from('abc'); // ['a','b','c'];
[...'abc']; // ['a','b','c'];
'abc'.split(''); // ['a','b','c'];

    2. 返回各种数据的类型

      // 用arguments
function typesOf() {
  return Array.from(arguments, p => typeof p)
}
typesOf(null, [], NaN, 'abc', undefined, {}); // ["object", "object", "number", "string", "undefined", "object"]

// 用rest参数
function typesOf(...rest) {
  return Array.from(rest, p => typeof p)
}
typesOf(null, [], NaN, 'abc', undefined, {}); // ["object", "object", "number", "string", "undefined", "object"]

    3. Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

      Array.from('123',x=>x+'a'); // ["1a", "2a", "3a"]

//处理两次函数
Array.from({length:2},()=>'a'); // ["a", "a"]

3.Array.of

  1. 该方法返回参数值组成的数组。如果没有参数，就返回一个空数组。

  2. 替代Array()或new Array()，并且不存在由于参数不同而导致的重载。

    ( 感觉没什么用,直接用中括号不就完了吗 [ ] )

4.数组实例的copyWithin

[].copyWithin(target: number, start: number, end?: number)

['a','b','c'].copyWithin(0,1); // ["b", "c", "c"];

5.数组实例的find和findIndex

[].find(callback: fn(element: ?, index: number, array: [?]) : bool, thisArg?: ?)

[].findIndex(callback: fn(element: ?, index: number, array: [?]), thisArg?: ?)

6.数组实例的fill

7.数组实例的includes

[].includes(value: ?)

编程风格之类数组对象转数组

// 操作dom返回的NodeList集合
let ps = document.querySelectorAll('p');

// es5
[].slice.call(ps).forEach(p=> {
  console.log(p.innerText);
});

// es6
Array.from(ps).forEach(p=> {
  console.log(p.innerText);
});
[...ps].forEach(p=>{console.log(p.innerText)});

Knowledge changes the mind

上一篇下一篇

猜你喜欢

热点阅读