JS高阶（九）Array.prototype操作数组操作的方法

admin 2022-12-03 共6人围观，发现0个评论

Array.prototype上提供很多供数组操作的方法

Array.prototype.forEach(); 遍历数组

fruits.forEach(function (item, index, array) { console.log(item, index); }); // Apple 0 // Banana 1
Array.prototype.push(); 添加元素到数组的末尾

var newLength = fruits.push('Orange'); // newLength:3; fruits: ["Apple", "Banana", "Orange"]
Array.prototype,pop(); 删除数组的末尾元素

var last = fruits.pop(); // remove Orange (from the end) // last: "Orange"; fruits: ["Apple", "Banana"];
Array.prototype.shift(); 删除数组最前面的元素

var first = fruits.shift(); // remove Apple from the front // first: "Apple"; fruits: ["Banana"];
Array.prototype.unshift(); 添加元素到数组的头部

var newLength = fruits.unshift('Strawberry') // add to the front // ["Strawberry", "Banana"];
Array.prototype.splice(); 删除或添加数组中的元素

添加：

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

//Banana,Orange,Lemon,Kiwi,Apple,Mango

删除：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(1,1);

//Banana,Lemon,Kiwi,Apple,Mango
Array.prototype.slice(); 复制一个数组

var shallowCopy = fruits.slice(); // this is how to make a copy // ["Strawberry", "Mango"]
Array.prototype.at()?
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.constructor(); 返回对象的构造函数

body>

点击按钮创建一个数组，并显示它的构造函数.=。

点我

//function Array() { [native code] }
Array.prototype.copyWithin(target,start,end); 用于从数组的指定位置拷贝元素到数组的另一个指定位置中，不改变数组的长度

target 必需。复制到指定目标索引位置。
start 可选。元素复制的起始位置。
end 可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

复制数组的前面两个元素到第三和第四个位置上：

var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];

fruits.copyWithin(2, 0, 2);

//Banana,Orange,Banana,Orange,Kiwi,Papaya
Array.prototype.entries(); 返回一个数组的迭代对象，该对象包含数组的键值对（key/value）

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(); 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。

注意： every() 不会对空数组进行检测。

注意： 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(); 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

参数描述
value 必需。填充的值。
start 可选。开始填充位置。
end 可选。停止填充位置 (默认为 array.length)

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

// fill with 0 from position 2 until position 4 console.log(array1.fill(0, as2, 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(); 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

function isBigEnough(element) { return element >= 10; } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // filtered is [12, 130, 44]
Array.prototype.find(); 返回数组中满足提供的测试函数的第一个元素的值。

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(); 会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

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(); 首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。
将包含几句话的数组拆分成单个词组成的新数组:
```
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.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

target	必需。复制到指定目标索引位置。
start	可选。元素复制的起始位置。
end	可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

参数	描述
value	必需。填充的值。
start	可选。开始填充位置。
end	可选。停止填充位置 (默认为 array.length)

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

参数描述
item 必须。查找的元素。
start 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

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(); 将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

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(); 返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

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]

// 数组中有多少项，回调函数被执行多少次 arr.map(function (item, index) { // item:当前迭代这一项 // index:对应的索引 // 函数执行的返回结果是啥，把数组中对应项替换成为啥，原始数组不变，以新数组形式返回 return 'xx'; });
Array.prototype.reduce(); 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

累加对象数组中包含的值，必须提供初始值，以便各个item正确通过你的函数。

var initialValue = 0; var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) { return accumulator + currentValue.x; },initialValue)

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

求一个数组中所有值的和

var sum = [0, 1, 2, 3].reduceRight(function(a, b) { return a + b; }); // sum is 6
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.sort();方法用于对数组的元素进行排序。
Array.prototype.some(); 用于检测数组中的元素是否满足指定条件（函数提供）。

注意： some() 不会对空数组进行检测。

注意： 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.toLocaleString(); 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 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

const array1 = [1, 'a']; const localeString = array1.toLocaleString();

console.log(localeString);

// "1,a"
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"

参数	描述
item	必须。查找的元素。
start	可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

额外知识点：复杂度

时间复杂度：代码的执行耗费的时间

平时使用执行次数代表时间复杂度

空间复杂度：代码执行所占用的空间

function sum(A){

let sum = 0;//1

for(let i = 0; i < A.length; i++){//1 n+1(因为需要判断是否符合条件所以要加1) n

sum += A[i]; //n

}

return sum; //1

}

//3n + 4 -> O(n)

function sum2(A){

let sum = 0;//1

for(let i = 0; i < A.length; i++){//1 n+1(因为需要判断是否符合条件所以要加1) n

for(let j = 0; j < A[i].length; j++){ //n n(n+1) n

sum += A'[i]'[j]; //n * n

}

}

return sum; //1

}

// 4 + 5n*n^2 -> O(n2) 当数足够大时，可以忽略常数，所以与常数无关

时间复杂度：O(n^2)

空间复杂度：O(n)

冒泡排序：

let ary = [12,34,345,321,54668,2,453.767];

function sort(arr){

for(let i = 0; i < arr.length; i++){

for(let j = 0; j < arr.length - 1 - i; j++){

if(arr[j] > arr[j+1]){

[arr[j],arr[j+1]] = [arr[j+1],arr[j]];

}

}

}

}

sort(ary);

console.log(ary)

时间复杂度：O(n^2) 空间复杂度：O(n)

插入排序：

let ary = [12,34,345,321,54668,2,453.767];

//插入

function insert(arr,t){

//arr时一个有序数组 t是一个要加入到数组的数字

let p = arr.length - 1;

while(p >= 0 && arr[p] > t){

arr[p+1] = arr[p];

p--;

}

arr[p+1] = t

}

let temp = [1,4,7,9]

insert(temp,2);

//插入排序

function insert(arr,i,t){

//arr时一个有序数组 i是要插入的索引 t是一个要加入到数组的数字

let p = i - 1;

while(p >= 0 && arr[p] > t){

arr[p+1] = arr[p];

p--;

}

arr[p+1] = t

}

function sort(arr){

for(let i = 1; i < arr.length; i++){

insert(arr,i,arr[i])

}

}

//空间复杂度：O(1)

//时间复杂度：

最好的情况： n -> O(n)

最坏的情况：

1 2 3 ... n

1 2 3 n --> n(n+1)/2 --> O(n^2)等价划分求值