关于es6中新增的一些方法----数组篇

2023-09-22 23:44:15

  要问互联网开发这块最难的是什么方面，我觉得大多数人的回答都是前端开发这块，因为前端这块技术更新换代实在是过于快速，也许没有多少时间就有大量的新技术面世了，想要在这行保持竞争力就必须要又一个持续学习的习惯，正所谓活到老，学到老来形容前端开发这块是最合适不过了

  今天笔者就来总结以下在es6中数组新增的一些方法，首先我来告诉大家如何查看数组中都有哪些方法，只需要在网页中打开我们的控制台，输入  []._proto_  就可以看到数组中现在都有哪些已经支持的方法了，下面给大家一张图看下

关于es6中新增的一些方法----数组篇

如上图所示，是不是发现有很多方法比较陌生，有的可能是我们之前已经掌握的，有的则是新支持的方法，现在笔者就来带大家一起来看一下这些新增的方法啦（这里呢笔者就简单介绍一下笔者尚未完全掌握的方法，至于其他的方法，如果同学们有疑问的话可以来找笔者进行讨论，笔者的联系方式在第一篇博客中有所体现，有兴趣的小伙伴可以去看下哦）

 

1、find()方法，笔者在实际开发中对于这个方法使用的很少，所以来记录一下

   作用：find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined。

   参数：

　　查找函数有三个参数。

　　value：每一次迭代查找的数组元素。

　　index：每一次迭代查找的数组元素索引。

　　arr：被查找的数组

   示例：

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
var ret1 = arr1.find((value, index, arr1) => {
 return value > 4
})
var ret2 = arr1.find((value, index, arr1) => {
 return value > 14
})
console.log('%s', ret1)//5
console.log('%s', ret2)//undefined

这个比较简单，就是在数组中查找我们定义的满足条件的元素，如果查询到就返回这个元素，查不到就返回undefined

 

2、findIndex（）同上

  作用：findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。

  同样是接收三个参数，同上

示例：

const arr1 = [1,2,3,4,5,6,7,8,9];
var ret3 = arr1.findIndex((value, index, arr1) => {
 return value > 4
})
 
var ret4 = arr1.findIndex((value, index, arr1) => {
 return value > 14
})
console.log('%s', ret3)//4
console.log('%s', ret4)//-1

这个也不多说了，想必大家也都很好理解

 

3、copyWithin() 这个函数笔者之前确实不知到这个函数，所以查询了很多资料，最后总结在这里

　作用：copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中，该方法会改变原数组

　参数：

　　target：必需，复制到指定目标索引位置

　　start： 可选，元素复制的起始位置

      end：　可选，停止复制的索引位置（默认为array.length),如果为负值，表示倒数

  示例：

var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
fruits.copyWithin(2, 0, 2);

console.log(fruits)//["Banana", "Orange", "Banana", "Orange", "Kiwi", "Papaya"]

笔者在整理这个博客的时候遇到一个很有意思的题目，大家可以思考一下：

  
 var obj =  [].copyWithin.call({length: 5, 3: 1}, 0, 3);
 
 console.log(obj)//?这里会输出什么？为什么？大家积极思考一下

 

4、flat() flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

 参数:

   depth ：可选，指定要提取嵌套数组的结构深度，默认值为 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 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]

注意：该方法会默认移除数组中的空项(此处空项不包含指为false的项)

var arr = [1,2,3,4,5,,6,'',false,null,undefined,9];
console.log(arr.flat())//[1, 2, 3, 4, 5, 6, "", false, null, undefined, 9]

 

 5、flatmap() flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些

  参数：

   callback：

　　可以生成一个新数组中的元素的函数，可以传入三个参数：

　　　currentValue
　　当前正在数组中处理的元素
　　　index可选
　　可选的。数组中正在处理的当前元素的索引。
　　　array可选
　　可选的。被调用的 map 数组

   thisArg：可选的。执行 callback 函数时 使用的this 值。

返回值：

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

示例：

let arr = ["今天天气不错", "", "早上好"]

arr.map(s => s.split(""))
// [["今", "天", "天", "气", "不", "错"],[""],["早", "上", "好"]]

arr.flatMap(s => s.split(''));
// ["今", "天", "天", "气", "不", "错", "", "早", "上", "好"]// 只会将 flatMap 中的函数返回的数组 “压平” 一层

 

6、fill() fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

　　arr.fill(value[, start[, end]])

参数：

value 用来填充数组元素的值。

start 可选 起始索引，默认值为0。
  end 可选 终止索引，默认值为 this.length。
返回值：修改后的数组
描述：

fill 方法接受三个参数 value, start 以及 end. start 和 end 参数是可选的, 其默认值分别为 0 和 this 对象的 length 属性值。

如果 start 是个负数, 则开始索引会被自动计算成为 length+start, 其中 length 是 this 对象的 length 属性值。如果 end 是个负数, 则结束索引会被自动计算成为 length+end。

fill 方法故意被设计成通用方法, 该方法不要求 this 是数组对象。

fill 方法是个可变方法, 它会改变调用它的 this 对象本身, 然后返回它, 而并不是返回一个副本。

当一个对象被传递给 fill方法的时候, 填充数组的是这个对象的引用。

示例：

[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]
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}

// Objects by reference.
var arr = Array(3).fill({}) // [{}, {}, {}];
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]，这里前面说到过，填充数组的是对这个对象的引用

以下介绍下关于Array的几个方法

1、Array.of()  Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位的数组，而不是由7个undefined组成的数组）。

参数：任意个参数，将按顺序成为返回数组中的元素

返回值：新的Array实例

示例：

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

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

 

2、Array.from() Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。

参数：

 arrayLike  想要转换成数组的伪数组对象或可迭代对象。

 mapFn (可选参数)如果指定了该参数，新数组中的每个元素会执行该回调函数。

 thisArg (可选参数)可选参数，执行回调函数 mapFn 时 this 对象。

返回值：一个新的数组实例

描述：

Array.from() 可以通过以下方式来创建数组对象：

  • 伪数组对象（拥有一个 length 属性和若干索引属性的任意对象）
  • 可迭代对象（可以获取对象中的元素,如 Map和 Set 等）

Array.from() 方法有一个可选参数 mapFn，让你可以在最后生成的数组上再执行一次 map方法后再返回。也就是说 Array.from(obj, mapFn, thisArg) 就相当于 Array.from(obj).map(mapFn, thisArg), 除非创建的不是可用的中间数组。 这对一些数组的子类,如  typed arrays 来说很重要, 因为中间数组的值在调用 map() 时需要是适当的类型。

from() 的 length 属性为 1 ，即Array.from.length = 1。

在 ES2015 中， Class 语法允许我们为内置类型（比如 Array）和自定义类新建子类（比如叫 SubArray）。这些子类也会继承父类的静态方法，比如 SubArray.from()，调用该方法后会返回子类 SubArray 的一个实例，而不是 Array 的实例。

示例代码：

 

Array from a String节
Array.from('foo'); 
// ["f", "o", "o"]
Array from a Set节
let s = new Set(['foo', window]); 
Array.from(s); 
// ["foo", window]
Array from a Map节
let m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m); 
// [[1, 2], [2, 4], [4, 8]]
Array from an Array-like object (arguments)节
function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

// [1, 2, 3]
在Array.from中使用箭头函数节
// Using an arrow function as the map function to
// manipulate the elements
Array.from([1, 2, 3], x => x + x);  
// x => x + x代表这是一个函数，只是省略了其他的定义，这是一种Lambda表达式的写法
// 箭头的意思表示从当前数组中取出一个值，然后自加，并将返回的结果添加到新数组中    
// [2, 4, 6]


// Generate a sequence of numbers
// Since the array is initialized with `undefined` on each position,
// the value of `v` below will be `undefined`
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]
数组去重合并节
function combine(){ 
    let arr = [].concat.apply([], arguments);  //没有去重复的新数组 
    return Array.from(new Set(arr));
} 

var m = [1, 2, 2], n = [2,3,3]; 
console.log(combine(m,n));                     // [1, 2, 3]

 

3、Array.isArray()  Array.isArray() 用于确定传递的值是否是一个 Array。

  参数：obj，需要检测的值

  返回值： 如果是数组就返回true，否则就返回false

  示例：

// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
// 鲜为人知的事实：其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype); 

// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });

 

好了，今天关于数组的介绍就到这里了，下一遍我们会总结下关于object中比较常用或者说比较新的方法 ，本文资料来源于MDN，链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray，有兴趣的同学可以自行前往观看，下次再会啦！

 

 


 

 

上一篇：JS判断是否是数组的四种做法（转载）


下一篇：好吃的大米的挑选方法，只要看大米的执行标准是啥就行