Array方法小汇总

南山隐士 2022年06月25日 23 0

文章中的部分参数,只是平常经常传递的值作为一个参考,详情看MDN

Array.concat()

用来连接数组
参数: 数组
==返回值: 新的数组实例==

// Array.concat
  let arr1 = [1]
  arr2 = arr1.concat() // 如果不进行数组的合并,直接调用方法方法的话,会返回数组的浅拷贝
  arr3 = arr1.concat([2]) // 返回一个新的数组实例,需要拿一个变量来接受
  arr4 = arr1 // 普通的赋值,会执向同一个地址,所以是一样的
  console.log(arr2) // [1,2]
  console.log(arr3 === arr1) // false
  console.log(arr4 === arr1) // true

Array.from()

将可迭代的对象或者伪数组(拥有length属性的对象)转换成数组,返回一个新的数组实例,目前已知的可迭代对象: String, Array, TypedArray, Map and Set
参数: 可迭代的对象或者伪数组
==返回值: 新的数组实例==

// Array.from()
  let string = 'yaojin'
  let arr = Array.from(string)
  // String
  console.log(arr) // ["y", "a", "o", "j", "i", "n"]

  function changeType() {
    return Array.from(arguments)
  }
  let arr2 = changeType(1,2,3,{a: 1})
  // 维数组
  console.log(arr2) // [1, 2, 3, {a: 1}]
  // Set
  let arr3 = Array.from(new Set([1, 1, 2, 3]))
  console.log(arr3) // [1, 2, 3]

Array.isArray()

确定传递的数据是否为数组
参数: 要检查的值,可以任意类型
==返回值: 布尔值==

// Array,isArray()
  Array.isArray([1]) // true
  Array.isArray({name: 'yaojin'}) // false

Array.of()

可以创建指定数值的数组,而不是像Array(num)那样才创建多少位长度的数组
参数: 数值
==返回值: 新的数组实例==

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Array.copyWithin()

浅复制数组的一部分到同一数组中的另一个位置,==不会改变原数组的长度
参数1: 复制序列到该位置,你可以理解为,我们可以拷贝的数量等于数组长度减去该值,默认0,如果数值大于数组长度,拷贝失效
参数2: 从第几个下标开始拷贝,如果为负数,倒着数
参数3: 结束拷贝的下标, 不包括这个元素, 如果是负数,倒着数
==返回值: 改变后的数组==

let numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(6); // [1, 2, 3, 4, 5] 拷贝失效
numbers.copyWithin(0, 3); // [4, 5, 3, 4, 5] 从4开始进行拷贝
numbers.copyWithin(1, 2, 3); // [1, 3, 3, 4, 5] // 从3开始复制, 3结束,实际拷贝的数量只有1个
numbers.copyWithin(-2, -3, -1);// [1, 2, 3, 3, 4] 倒数形式
[].copyWithin.call({length: 5, 3: 1}, 1, 3); // {1: 1, 3: 1, length: 5} 可以改变this指向,达到改变类型,1 第一个参数, 3为第二个参数
{0:undefined,1:undefined,2:undefined,3: 1,4:undefined,5:undefined,length: 5} // 上述的{length: 5, 3: 1}

Array.entries()

==返回值: 一个新的Array Iterator对象==

// Array.entries()
  var arr = ["a", "b", "c"];
  var iterator = arr.entries();
  console.log(iterator.next()); // {value: [0, "a"], done: false}
  console.log(iterator.next()); // {value: [1, "b"], done: false}
  console.log(iterator.next()); // {value: [2, "c"], done: false}
  console.log(iterator.next()); // {value: undefined, done: true}

Array.every()

测试一个数组内的所有元素是否都能通过某个指定函数的测试。
参数1: 用来测试每个元素的callback ,函数中分3个参数,第一个为当前值,第二个为当前值的索引,第三个为整个数组
参数2: 执行 callback 时使用的 this 值。

==返回值: 如果每个元素执行函数都是返回true,则ture,否则false,不会改变原数组==

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

Array.fill()

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
参数1: 填充数组元素的值
参数2: 从哪个索引开始填充
参数3: 从哪个索引结束填充

==返回值: 修改后的数组==

[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]

Array.filter()

创建一个通过提供函数实现的测试的所有元素。
参数1: 用来测试数组的每个元素的函数。函数中分3个参数,第一个为当前值,第二个为当前值的索引,第三个为整个数组
参数2: 执行 callback 时使用的 this 值。

==返回值: 一个新数组,如果没有任何数组元素通过测试,则返回空数组。不会改变原数组==

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // filtered is [12, 130, 44] 

Array.find()

返回数组中满足提供的测试函数的第一个元素的值
参数1: 用来测试数组的每个元素的函数。函数中分3个参数,第一个为当前值,第二个为当前值的索引,第三个为整个数组
参数2: 执行 callback 时使用的 this 值。

==返回值: 数组中第一个满足所提供测试函数的元素的值,否则返回 undefined。==

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

function findCherries(fruit) { 
    return fruit.name === 'cherries';
}

console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

Array.findIndex()

数组中满足提供的测试函数的第一个元素的索引
参数1: 用来测试数组的每个元素的函数。函数中分3个参数,第一个为当前值,第二个为当前值的索引,第三个为整个数组
参数2: 执行 callback 时使用的 this 值。

==返回值: 数组中通过提供测试函数的第一个元素的索引。否则,返回-1==

// Array.findIndex
  let arr = [1, 2, 3, 4]
  let index = arr.findIndex((item, index, array) => {
    return item === 3
  })
  console.log(index) // 2

Array.flat()

按照一个可指定的深度递归遍历数组,会移除数组中的空项
参数: 指定要提取嵌套数组的结构深度,默认值为 1。
==返回值: 包含将数组与子数组中所有元素的新数组。==

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity,可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.flatMap()

使用映射函数映射每个元素,然后将结果压缩成一个新数组。
参数1: 用来测试数组的每个元素的函数。函数中分3个参数,第一个为当前值,第二个为当前值的索引,第三个为整个数组
参数2: 执行 callback 时使用的 this 值。

==一个新的数组,其中每个元素都是回调函数的结果,并且结构深度 depth 值为1。==

let arr1 = ["it's Sunny in", "", "California"];

arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]

Array.forEach()

对数组的每个元素执行一次提供的函数
参数1: 用来测试数组的每个元素的函数。函数中分3个参数,第一个为当前值,第二个为当前值的索引,第三个为整个数组
参数2: 执行 callback 时使用的 this 值。

==返回值: undefined==

const arraySparse = [1,3,,7];
let numCallbackRuns = 0;

arraySparse.forEach(function(element){
  console.log(element);
  numCallbackRuns++;
});

console.log("numCallbackRuns: ", numCallbackRuns);

// 1
// 3
// 7
// numCallbackRuns: 3

Array.includes()

用来判断一个数组是否包含一个指定的值
参数1: 需要查找的元素值。
参数2: 从第几个索引开始寻找,需要注意大于数组长度将会返回false
==返回值: 布尔值==

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

Array.indexOf()

返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
参数1: 要查找的元素
参数2: 开始查找的位置

==返回值: 首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1==

var array = [2, 5, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

Array.join()

将一个数组(或一个类数组对象)的所有元素连接成一个字符串
参数: 指定一个字符串来分隔数组的每个元素
==返回值: 一个所有数组元素连接的字符串==

var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join();      // myVar1的值变为"Wind,Rain,Fire"
var myVar2 = a.join(', ');  // myVar2的值变为"Wind, Rain, Fire"
var myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
var myVar4 = a.join('');    // myVar4的值变为"WindRainFire"

Array.keys()

返回一个包含数组中每个索引键的Array Iterator对象。

var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr);
var denseKeys = [...arr.keys()];
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys);  // [0, 1, 2]

Array.lastIndexOf()

返回指定元素在数组中的最后一个的索引
参数1: 被查找的元素
参数2: 从此位置开始逆向查找
==返回值: 数组中该元素最后一次出现的索引,如未找到返回-1。==

var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3

Array.map()

数组中的每个元素都调用一个提供的函数
参数1: 回调函数,包含3个值,第一个是正在处理的元素,第二个是当前元素的索引,第三个参数是当前整个数组
参数2: 执行回调函数时候的this

==返回值: 新的数组,不会改变原数组==

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

Array.pop()

从数组中删除最后一个元素
==返回值: 被删除的元素, 如果数组为空,就返回undefined==

let myFish = ["angel", "clown", "mandarin", "surgeon"];

let popped = myFish.pop();

console.log(myFish); 
// ["angel", "clown", "mandarin"]

console.log(popped); 
// surgeon

未完待续~~~~~👀

Last Updated: 2022/06/25 18:56:47
谈谈作用域和作用域链 [转载]JavaScript代码片段