Array数组ES6方法Array.isArray、Array.of、Array.from；find、findIndex方法

偏执的太偏执、 2023-01-17 04:58 162阅读 0赞

### Array构造函数上的三个方法 ###

**Array.isArray**

**Array.isArray() **用于确定传递的值是否是一个数组。如果是数组，则返回true，否则为false。

> // 鲜为人知的事实：其实 Array.prototype 也是一个数组。  
> Array.isArray(Array.prototype);

**为什么数组原型是一个数组，还可以有属性方法呢？** 通过Object.defineProperty实现在数组上添加方法和属性。就像数组的length属性一样。

var arr = [];
            Object.defineProperty(arr, 'selfFn', {
                value: function(){
                    return '111'
                },
                writable: false,
                enumerable: false,
                configurable: false
            })
            console.log(arr); //[selfFn: ƒ]
            console.log(Array.prototype) //[constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …]
            console.log(arr.selfFn()) //111

**Array.of方法 -- ES6**

**创建数组的方式：解决Array（7）创建length为7的empty值的问题。**

`Array.of()` 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

`Array.of()` 和 `Array` 构造函数之间的区别在于处理整数参数：`Array.of(7)`** **创建一个具有单个元素 **7** 的数组，而 **`Array(7)` **创建一个长度为7的空数组（**注意：**这是指一个有7个空位(empty)的数组，而不是由7个`undefined`组成的数组）。

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

示例

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

**兼容旧环境**

如果原生不支持的话，在其他代码之前执行以下代码会创建 `Array.of()` 。

if (!Array.of) {
      Array.of = function() {
        return Array.prototype.slice.call(arguments);
      };
    }

** arguments中是什么内容呢？显示的属性：实参的每项；隐式的属性：length、callee、Symbol**

**所以调用数组的slice把实参的项切割出来。**

if (!Array.myof) {
      Array.myof = function() {
          console.log(arguments)
        return Array.prototype.slice.call(arguments);
      };
    }
    Array.myof(7);

![20200829110353353.png][]

**Array.from方法 -- ES6**

`Array.from()` 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

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

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

`Array.from()` 方法有一个可选参数 `mapFn`，让你可以在最后生成的数组上再执行一次 [`map`][map] 方法后再返回。也就是说` Array.from(obj, mapFn) `就相当于`Array.from(obj).map(mapFn)。`

var str = "abcd";
    Array.from(str, function(item, index){
        console.log(item);
    })

`比如：`

**从 `String` 生成数组**

Array.from('foo'); 
    // [ "f", "o", "o" ]

**从 `Set` 生成数组**

const set = new Set(['foo', 'bar', 'baz', 'foo']);
    Array.from(set);
    // [ "foo", "bar", "baz" ]

**从 `Map` 生成数组**

const map = new Map([[1, 2], [2, 4], [4, 8]]);
    Array.from(map);
    // [[1, 2], [2, 4], [4, 8]]
    
    const mapper = new Map([['1', 'a'], ['2', 'b']]);
    Array.from(mapper.values());
    // ['a', 'b'];
    
    Array.from(mapper.keys());
    // ['1', '2'];

**从类数组对象（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);
    // [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]

### **find方法和findIndex方法   ES6 兼容性Edge12** ###

**find和findIndex方法是对ES5中5个遍历方法的补充**

**find()** 方法返回数组中满足提供的测试函数的第一个元素的值，否则返回undefined。

**findIndex()**方法返回数组中满足提供的测试函数的第一个元素的**索引**。若没有找到对应元素则返回-1。

**find和findIndex与ES5的5个方法在处理函数方面有点区别：**

index范围确定后，ES5的5个方法是根据index判断最新对应item是否合法，合法才会进行处理。而find和findIndex方法，是根据index值来判断是否合法，所以下面示例的结果是：10 20 30 40 undefined

var arr = [10,20,,30,40];
            arr.find((item, index, originArr) => {
                console.log(item)
                if(index==1){
                    arr.shift();
                }
            })

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：

*  当数组中的元素在测试条件时返回 *true* 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
 *  如果没有符合条件的元素返回 undefined

**注意:** **find() 对于空数组，函数是不会执行的。**

**注意:** **find() 并没有改变数组的原始值。**

MDN解释：`find()` 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 [`undefined`][undefined]。

[`findIndex()`][findIndex] 方法，它返回数组中找到的元素的索引，而不是其值。

var arr = [1, 2, 3, 4, 5];
            let item = arr.find((item, index) => {
                return item > 3 && index > 3;
            })
            console.log(item);   5

特点：遍历去找，找到**符合条件**的就返回该值，停止遍历。

**find方法和findIndex方法也是迭代方法，find返回为true的项，findIndex返回为true的index。同样找到就返回，且停止查找。**

**而indexOf和lastIndexOf是找指定的项，而不是指定的条件。——指定数组元素项，而且传入处理函数指定条件**

### 问答： ###

**类数组转数组的方法有：**

（1）Array.prototype.slice.call(arguments)

（2）Array.from(arguments)

详情见arguments章节：

[20200829110353353.png]: /images/20221022/d82c46cf16e64ff591def7ddf58c6278.png
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/iterable
[map]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map
[undefined]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined
[findIndex]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex