数组的方法＜前端学习笔记＞

对象

constructor和instanceof

instanceof --用于判断一个对象是否是另外一个构造函数的实例对象
constructor --指回构造函数本身

静态成员和实例成员

静态成员 -- 实例化多个对象共用这一个

Array对象

任何一个属性都是Array构造函数的实例化对象

数组

静态属性

get Array[@@species] //返回 Array 的构造函数
Array[Symbol.species]; // function Array()

/* 
在继承类的对象中（例如你自定义的数组 MyArray），
MyArray 的 species 属性返回的是 MyArray 这个构造函数. 
然而你可能想要覆盖它，以便在你继承的对象 MyArray 中返回
父类的构造函数 Array : */

class MyArray extends Array {
  // 重写 MyArray 的 species 属性到父类 Array 的构造函数
  static get [Symbol.species]() { return Array; }
}

静态方法

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

/* 
Array.from(arrayLike[, mapFn[, thisArg]])

@param {/} arrayLike 想要转换成数组的伪数组对象或可迭代对象
@param {/} mapFn 如果指定了该参数，新数组中的每个元素会执行该回调函数。
@param {/} thisArg 可选参数，执行回调函数 mapFn 时 this 对象。
@return {Array} 一个新的数组实例。
*/

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

Array.isArray() 用来判断某个变量是否是一个数组对象

/* 
Array.isArray(obj)
@return {boolean} 如果值是 Array，则为 true；否则为 false。
*/
Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

Array.of() 根据一组参数来创建新的数组实例，支持任意的参数数量和类型

/* 
Array.of(element0[, element1[, ...[, elementN]]])
@param {any} elementN 任意个参数，将按顺序成为返回数组中的元素。
@return {Array} 新的 Array 实例。
*/

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

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

实例属性

Array.prototype.length 数组中的元素个数

Array.prototype[@@unscopables]

包含了所有 ES2015 (ES6) 中新定义的、且并未被更早的 ECMAScript 标准收纳的属性名。这些属性被排除在由 with 语句绑定的环境中

实例方法

Array.prototype.at() 方法接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。

const array1 = [5, 12, 8, 130, 44];
let index = 2;
console.log(`Using an index of ${index} the item returned is ${array1.at(index)}`);
// expected output: "Using an index of 2 the item returned is 8"

**Array.prototype.concat() 用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个 新数组

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

Array.prototype.copyWithin() 浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度

/* 
arr.copyWithin(target[, start[, end]])
*/
const array1 = ['a', 'b', 'c', 'd', 'e'];
// 元素index 3 复制到 index 0 
console.log(array1.copyWithin(0, 3, 4));
// expected output: Array ["d", "b", "c", "d", "e"]
// 从 index 3 到结束的所有元素 复制到 index 1 
console.log(array1.copyWithin(1, 3));
// expected output: Array ["d", "d", "e", "d", "e"]

Array.prototype.entries() 返回一个新的 Array Iterator 对象，该对象包含数组中每个索引的键/值对

const array1 = ['a', 'b', 'c'];
const iterator1 = array1.entries();
console.log(iterator1.next().value);
// expected output: Array [0, "a"]
console.log(iterator1.next().value);
// expected output: Array [1, "b"]

Array.prototype.every() 测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值

const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
// expected output: true

Array.prototype.fill() 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素

/*
arr.fill(value[, start[, end]]) 
 */
const array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

*Array.prototype.filter() 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

Array.prototype.find() 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

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

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3

**Array.prototype.flat() 按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

/* 
var newArray = arr.flat([depth])
*/
const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2));
// expected output: [0, 1, 2, [3, 4]]

**Array.prototype.flatMap() 使用映射函数映射每个元素，然后将结果压缩成一个新数组

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

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])
*/

Array.prototype.forEach() 对数组的每个元素执行一次给定的函数

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

Array.prototype.includes() 判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回 false

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

Array.prototype.indexOf() 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回 -1

/* 
arr.indexOf(searchElement[, fromIndex])
*/
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

Array.prototype.join() 将一个数组的所有元素连接成一个字符串并返回这个字符串

/* 
arr.join([separator])
*/
const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

Array.prototype.keys() 返回一个包含数组中每个索引键的 Array Iterator 对象

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

for (const key of iterator) {
  console.log(key);
}

// expected output: 0
// expected output: 1
// expected output: 2

Array.prototype.lastIndexOf() 返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1

const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo'));
// expected output: 3

console.log(animals.lastIndexOf('Tiger'));
// expected output: 1

**Array.prototype.map() 返回一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

Array.prototype.pop() 从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]

Array.prototype.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

Array.prototype.reduce() 对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值

// 计算数组所有元素的总和：
const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10

Array.prototype.reduceRight() 接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值

const array1 = [[0, 1], [2, 3], [4, 5]];

const result = array1.reduceRight((accumulator, currentValue) => accumulator.concat(currentValue));

console.log(result);
// expected output: Array [4, 5, 2, 3, 0, 1]

Array.prototype.reverse() 将数组中元素的位置颠倒，并返回该数组。该方法会改变原数组

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]

// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// expected output: "array1:" Array ["three", "two", "one"]

Array.prototype.shift() 从数组中删除第一个元素，并返回该元素的值

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

**Array.prototype.slice() 提取源数组的一部分并返回一个新数组

/* 
arr.slice([begin[, end]])
*/

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

Array.prototype.some() 测试数组中是不是至少有一个元素通过了被提供的函数测试

const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

Array.prototype.sort() 对数组元素进行原地排序并返回此数组

/* 
arr.sort([compareFunction])
*/

Array.prototype.splice() 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容

/* 
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
*/
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

Array.prototype.toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 Object.prototype.toLocaleString() 方法转成字符串

const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
const localeString = array1.toLocaleString('en', { timeZone: 'UTC' });

console.log(localeString);
// expected output: "1,a,12/21/1997, 2:12:00 PM",
// This assumes "en" locale and UTC timezone - your results may vary

Array.prototype.toString() 返回一个字符串表示指定的数组及其元素。数组中的元素将使用各自的 Object.prototype.toString() 方法转成字符串

const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());
// expected output: "1,2,a,1a"

Array.prototype.unshift() 将一个或多个元素添加到数组的头部，并返回该数组的新长度

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

Array.prototype.values() 返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

Array.prototype@@iterator 返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

/* 
arr[Symbol.iterator]()

数组的 iterator 方法，默认情况下，与 values() 返回值相同， arr[Symbol.iterator] 则会返回 values() 函数。
*/
//使用 for...of 循环进行迭代
var arr = ['a', 'b', 'c', 'd', 'e'];
var eArr = arr[Symbol.iterator]();
// 浏览器必须支持 for...of 循环
for (let letter of eArr) {
  console.log(letter);
}

//另一种迭代方式
var arr = ['a', 'b', 'c', 'd', 'e'];
var eArr = arr[Symbol.iterator]();
console.log(eArr.next().value); // a
console.log(eArr.next().value); // b
console.log(eArr.next().value); // c
console.log(eArr.next().value); // d
console.log(eArr.next().value); // e

类的继承

// 由构造函数直接调用的属性、方法叫静态成员
class Father{
    constructor(firstName,money){
        this.firstName = firstName;
        this.money = money;
        Father.blud++; //由构造函数直接调用的属性、方法叫静态成员
        Father.num();
    }
    static blud = 0;
    static num(){
        console.log(`现在有${Father.blud}个后代`)
    }
    car (){
        console.log("father's car")
        return 1
    }
}

class Son extends Father{
    constructor(firstName,money,age){
        super(firstName,money);
        this.age = age;
        
    }
}

let firstSon = new Son('啊',"10000000","19"); //现在有1个后代
console.log(firstSon) //Son { firstName: '啊', money: '10000000', age: '19' }
firstSon.car() //father's car

let secondSon = new Son('啊',"10000000","19"); //现在有2个后代
console.log(Son.blud) //2