Array 对象属性和方法

Array 对象

 

在 JavaScript 中， Array 对象用于构造数组，数组是类列表的高阶对象，可在单个的变量中存储多个值。

JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。

只能用整数作为数组元素的索引，而不能用字符串。后者称为关联数组。使用非整数并通过方括号或点号来访问或设置数组元素时，所操作的并不是数组列表中的元素，而是数组对象的属性集合上的变量。数组对象的属性和数组元素列表是分开存储的，并且数组的遍历和修改操作也不能作用于这些命名属性。

它的原型中提供了遍历、查找、修改元素等相关操作。

创建一个 Array 对象有多种方法：

• var arr = Array(x,y,z)
• var arr = new Array(x,y,z)
• var arr = [x,y,z]

 

Array 对象与其实例的属性和方法：

// Object.getOwnPropertyDescriptors(Array):
name                        : {value: "Array", writable: false, enumerable: false, configurable: true}
length                      : {value: 1, writable: false, enumerable: false, configurable: true}
prototype                   : {value: Array(0), writable: false, enumerable: false, configurable: false}
Symbol(Symbol.species)      : {set: undefined, enumerable: false, configurable: true, get: ƒ}
from                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
isArray                     : {writable: true, enumerable: false, configurable: true, value: ƒ}
of                          : {writable: true, enumerable: false, configurable: true, value: ƒ}

Object.getOwnPropertyDescriptors(Array.prototype):
constructor                 : {writable: true, enumerable: false, configurable: true, value: ƒ}
length                      : {value: 0, writable: true, enumerable: false, configurable: false}
Symbol(Symbol.iterator)     : {writable: true, enumerable: false, configurable: true, value: ƒ}
Symbol(Symbol.unscopables)  : {value: {…}, writable: false, enumerable: false, configurable: true}
concat                      : {writable: true, enumerable: false, configurable: true, value: ƒ}
copyWithin                  : {writable: true, enumerable: false, configurable: true, value: ƒ}
entries                     : {writable: true, enumerable: false, configurable: true, value: ƒ}
every                       : {writable: true, enumerable: false, configurable: true, value: ƒ}
fill                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
filter                      : {writable: true, enumerable: false, configurable: true, value: ƒ}
find                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
findIndex                   : {writable: true, enumerable: false, configurable: true, value: ƒ}
flat                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
flatMap                     : {writable: true, enumerable: false, configurable: true, value: ƒ}
forEach                     : {writable: true, enumerable: false, configurable: true, value: ƒ}
includes                    : {writable: true, enumerable: false, configurable: true, value: ƒ}
indexOf                     : {writable: true, enumerable: false, configurable: true, value: ƒ}
join                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
keys                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
lastIndexOf                 : {writable: true, enumerable: false, configurable: true, value: ƒ}
map                         : {writable: true, enumerable: false, configurable: true, value: ƒ}
pop                         : {writable: true, enumerable: false, configurable: true, value: ƒ}
push                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
reduce                      : {writable: true, enumerable: false, configurable: true, value: ƒ}
reduceRight                 : {writable: true, enumerable: false, configurable: true, value: ƒ}
reverse                     : {writable: true, enumerable: false, configurable: true, value: ƒ}
shift                       : {writable: true, enumerable: false, configurable: true, value: ƒ}
slice                       : {writable: true, enumerable: false, configurable: true, value: ƒ}
some                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
sort                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
splice                      : {writable: true, enumerable: false, configurable: true, value: ƒ}
toLocaleString              : {writable: true, enumerable: false, configurable: true, value: ƒ}
toString                    : {writable: true, enumerable: false, configurable: true, value: ƒ}
unshift                     : {writable: true, enumerable: false, configurable: true, value: ƒ}
values                      : {writable: true, enumerable: false, configurable: true, value: ƒ}

 

 

Array 常用方法

1、Array.from()

功能：把一个类数组对象或可迭代对象转化为数组。

语法：Array.from(arrayLike[, mapFn[, thisArg]])

参数：

• arrayLike：想要转换成数组的类数组对象或可迭代对象。
• mapFn 可选：如果指定了该参数，新数组中的每个元素会执行该回调函数。
• thisArg 可选：可选参数，执行回调函数 mapFn 时 this 对象。

返回值：一个新的数组。

示例：

Array.from('elfpower')// ["e", "l", "f", "p", "o", "w", "e", "r"]

Array.from('elfpower',i=>i.toUpperCase())// ["E", "L", "F", "P", "O", "W", "E", "R"]


Array.from([1,2,,4,5],i=>i*5)// [5, 10, NaN, 20, 25]


var obj = {count:10,toAdd: function(i) {return this.count+i}}
Array.from([1,2,3,4,5],function(i){return this.toAdd(i)},obj)// [5, 10, NaN, 20, 25]

 

2、Array.of()

功能：创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

语法：Array.of(element0[, element1[, ...[, elementN]]])

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

返回值：一个新的数组。

示例：

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

 

3、Array.isArray()

功能：检测所传值是否数组。

语法：Array.isArray(obj)

参数：obj，要检测的值。

返回值：如果值是 Array，则为true; 否则为false。

示例：

Array.isArray([1, 2, 3])// true
Array.isArray({name: 'gwg'})// false
Array.isArray("elfpower")// false
Array.isArray(true)// false
Array.isArray(undefined)// false
Array.isArray(NaN)// false

 

 

Array.prototype 常用方法与描述

方法	描述
concat()	返回两个数据经过联接后的数组。
every()	如何数组内的元素均满足某测试函数，那么就返回true。
filter()	原来的数组中能过通过过滤器的元素组成一个新的数组返回。
forEach()	调用一个函数来处理数组中的每个元素。
indexOf()	返回与指定元素相匹配的第一个位置，如果不存在就返回-1
join()	连接数组中所有的元素，返回一个字符串
lastIndexOf()	返回与指定元素相匹配的最后一个位置，如果不存在就返回-1。
map()	调用一个函数处理数组中的每一个元素，将生成的结果组成一个新的数组，并返回
pop()	返回数组中的最后一个元素，并删除。
push()	在数组的最后增加一个元素，并返回新数组的长度
reduce()	对数组中的所有元素（从左到右）调用指定的回调函数。 该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。
reduceRight()	对数组中的所有元素（从右到左）调用指定的回调函数。 该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。
reverse()	反转数组元素的顺序——第一个成为最后一个,最后成为第一。
shift()	删除数组的第一个元素并返回。
slice()	提取一段数组并返回一个新的数组
some()	,如果存在一个元素满足所提供的测试函数，就返回true。
sort()	对数组中的元素排序。
splice()	增删数组中的元素。
toString()	返回一个表示数组及其元素的字符串。
toSource()	返回一个字符串,代表该数组的源代码.（该特性是非标准的，请尽量不要在生产环境中使用它！！！）
---es6扩展---	--- 以下是es6扩展 ---
copyWithin()	浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。
entries()	返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
fill()	用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
find()	返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
findIndex()	返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
flat()	按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
flatMap()	首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。
includes()	用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

 

Array.prototype 常用方法

1、concat()

功能：

• 用于连接两个或多个数组，该方法不会改变现有的数组，而是返回被连接数组的一个副本。
• 如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

语法：var new_array = arr.concat(value1[, value2[, ...[, valueN]]])

参数： valueN (将数组和/或值连接成新数组。如果省略了valueN参数参数，则concat会返回一个它所调用的已存在的数组的浅拷贝。)

示例：

var arr1 = [1, 2, 3],
    arr2 = ['a', 'b', 'c'],
    arr3 = [[11], ['z'], [{gg:20}]];

var arrs = arr1.concat(arr2, arr3);
console.log(arrs); // [1, 2, 3, "a", "b", "c", [11],["z"], [{gg: 20}]]

 

2、join()

功能：

• 把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分隔的。
• 若省略了分隔符参数，则使用逗号作为分隔符。
• 如果数组只有一个项目，那么将返回该项目而不使用分隔符。
• 不改变原数组。

语法：arr.join(separator)

参数： separator (可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符)

示例：

// arr.join() 不传参,默认“,”分隔
var arr = new Array(3)
arr[0] = "张"
arr[1] = "三"
arr[2] = "丰"
var nArr = arr.join()
console.log(nArr) // 张,三,丰

// arr.join() 传参“-”,使用“-”分隔
var arr2 = new Array(3)
arr2[0] = "张"
arr2[1] = "三"
arr2[2] = "丰"
var nArr2 = arr2.join('-')
console.log(nArr2) // 张-三-丰

// arr.join() 传参空字符""则无分隔
var arr3 = new Array(3)
arr3[0] = "张"
arr3[1] = "三"
arr3[2] = "丰"
var nArr3 = arr3.join('')
console.log(nArr3) // 张三丰

 

3、push()

• 向数组的末尾添加一个或多个元素，并返回新的数组长度。
• 改变原数组。

语法：arr.push(element1, ..., elementN)

参数： elementN (被添加到数组末尾的元素)

示例：

var arr = [1,2,3]; 
var len = arr.push('a','b','c');
console.log(arr); // [1, 2, 3, "a", "b", "c"] 
console.log(len); // 6 （返回数组新长度为6）

// 合并多个数组
var arr = [1,2,3]; 
var arr2 = ['a','b','c'];
var arr3 = ['g','w','g'];
arr.push(...arr2,...arr3);
console.log(arr); // [1, 2, 3, "a", "b", "c", "g", "w", "g"]

 

4、pop()

• 用于删除数组的最后一个元素，把数组长度减1，并返回被删除元素。
• 如果数组已经为空，则 pop() 不改变数组，并返回 undefined。
• 改变原数组。

语法：arr.pop() 

示例：

var arr = [1,2,3];
var getLast = arr.pop(); // 第一次 arr.pop()
console.log(arr); // [1, 2]
console.log(getLast); // 3 (arr.pop() 返回数组最后一个元素)
arr.pop(); // 第二次 arr.pop()
console.log(arr); // [1]
arr.pop(); // 第三次 arr.pop()
console.log(arr); // []
console.log(arr.pop()); //空数组时返回 undefined

 

5、shift()

• 用于把数组的第一个元素从其中删除，并返回被移除的这个元素。
• 如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined。
• 该方法是直接修改原数组。

语法：arr.shift()

示例：

var arr = [1,2,3];
var getFirst = arr.shift(); // 第一次 arr.shift()
console.log(arr); // [2, 3]
console.log(getFirst); // 1 (arr.shift() 返回数组第一个元素)
arr.shift(); // 第二次 arr.pop()
console.log(arr); // [3]
arr.shift(); // 第三次 arr.pop()
console.log(arr); // []
console.log(arr.shift()); // 空数组 返回undefined

 

6、unshift()

• 向数组的开头添加一个或更多元素，并返回新的数组长度。
• 该方法是直接修改原数组。

语法：arr.unshift(element1, ..., elementN)

参数：elementN (要添加到数组开头的元素或多个元素。)

示例：

var arr = [1,2,3,4];
arr.unshift('a');
arr.unshift('b','c'); // 注意：传入多个参数，它们会被以块的形式插入到对象的开始位置
arr.unshift('d');
console.log(arr); // ["d", "b", "c", "a", 1, 2, 3, 4] 注意"b"和"c"的排序，以块的形式插入按参数传入时的顺序

// 使用 arr.shift 和 unshift 配合，反序排列数组
var arr1 = [1,2,3,4,5];
var nArr1 = [];
var len = arr1.length; // 必须先定义好len，不然在for里面每shift一次长度就会变少一个，最终导致循环次数减少

for(let i = 0;i < len;i++) {
    nArr1.unshift(arr1.shift()) // 
}
console.log(nArr1) // [5, 4, 3, 2, 1]

// 也可以用 while 循环，反序排列数组
var arr2 = ["a", "b", "c", "d" ,"e"];
var nArr2 = [];
while( (i = arr2.shift()) !== undefined ) {
    nArr2.unshift(i)
}
console.log(nArr2) // ["e", "d", "c", "b", "a"]

 

7、reverse()

• 用于颠倒数组中元素的顺序。
• 该方法会直接修改原数组，而不会创建新数组。

语法：arr.reverse()

示例：

var arr = [1,2,3,4,5];
var reArr = arr.reverse();

console.log(reArr); // [5, 4, 3, 2, 1] 
console.log(arr); // [5, 4, 3, 2, 1] 原数组被改变

 

8、sort()

• 用于对数组的元素进行排序。
• 该排序直接修改原数组，不生成副本。
• 该方法接受一个可选参数，若未使用参数，将按字母顺序对数组元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
• 如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
  • 若 a 小于 b，排序后 a 应该在 b 之前，则返回一个小于 0 的值。
  • 若 a 等于 b，则返回 0。
  • 若 a 大于 b，则返回一个大于 0 的值。

语法：arr.sort([compareFunction])

参数 (可选)：compareFunction (firstEl, secondEl )

• firstEl (第一个用于比较的元素。)
• secondEl (第二个用于比较的元素。)

示例：

// 排序
var numbers = [4,2,1,5,3]; 
numbers.sort((a, b) => a - b); 
console.log(numbers); // [1, 2, 3, 4, 5]


// 根据 age 排序
var roles = [
  { name: '张三', age: 666 },
  { name: '李四', age: 999 },
  { name: '王五', age: 555 },
  { name: '赵六', age: -888 },
  { name: 'gwg' },
  { name: 'power', age: 20 }
];
roles.sort(function (a, b) {
  return (a.age - b.age)
});
console.log(roles); 
/*[
    {name: "赵六", age: -888},
    {name: "power", age: 20},
    {name: "王五", age: 555},
    {name: "张三", age: 666},
    {name: "李四", age: 999}
]*/

 

9、slice()

• 截取原数组从start到end位置（不包含它）元素组成的子数组。
• 该方法返回一个新数组，不会修改原数组。
• 若未指定end参数，那么截取尾巴直到原数组最后一个元素（包含它）。

语法：arr.slice(start [,end])

参数： 

• begin (可选)：
• 提取起始处的索引（从 0 开始），从该索引开始提取原数组元素。
• 如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
• 如果省略 begin，则 slice 从索引 0 开始。
• 如果 begin 大于原数组的长度，则会返回空数组。
• end(可选)：
• 提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。
• slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 （索引为 1, 2, 3的元素）。
• 如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
• 如果 end 被省略，则 slice 会一直提取到原数组末尾。
• 如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

 

示例：

var arr = ['a','b','c','d','e','f','g','h','i'];
var cArr1 = arr.slice();
var cArr2 = arr.slice(2);
var cArr3 = arr.slice(2,4);
var cArr4 = arr.slice(-2,4);
var cArr5 = arr.slice(2,-4);
var cArr6 = arr.slice(-2,-4);

console.log(cArr1); // ["a", "b", "c", "d", "e", "f", "g", "h", "i"]
console.log(cArr2); // ["c", "d", "e", "f", "g", "h", "i"]
console.log(cArr3); // ["c", "d"]
console.log(cArr4); // []
console.log(cArr5); // ["c", "d", "e"]
console.log(cArr6); // []

// 使用 arr.slice 把类数组转化为数组
function list() {
  return [].slice.call(arguments);
}
var listArr = list(1, 2, 3); 
console.log(listArr);// [1, 2, 3]

 

10、splice(start[, deleteCount[, item1[, item2[, ...]]]])

• 删除从 index 处开始的hownamy个元素，并且用可选参数列表中声明的一个或多个值来替换那些被删除的元素。
• 该方法返回的是含有被删除的元素组成的数组，若无被删元素，则返回空数组。
• 若参数只有index，那么原数组将从index开始删除直至结尾。
• 该方法直接修改原数组。

语法：arr.splice(start[, deleteCount[, item1[, item2[, ...]]]])

参数：

• start：
• 指定修改的开始位置（从0计数）。
• 如果超出了数组的长度，则从数组末尾开始添加内容；
• 如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；
• 如果负数的绝对值大于数组的长度，则表示开始位置为第0位。

• deleteCount (可选)：
• 整数，表示要移除的数组元素的个数。
• 如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。
• 如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。
• 如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。

• item1, item2, ... (可选)：
• 要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

示例：

var arr = [1,2,3,4,5];
// 从第3位开始，删除0个元素，插入 'a'、'b'、'c'
arr.splice(3,0,'a','b','c');
console.log(arr) // [1, 2, 3, "a", "b", "c", 4, 5]

var arr1 = [1,2,3,4,5];
// 从第2位开始，删除后面所有元素
arr1.splice(2); // 相当于 arr1.splice(2,arr1.length);
console.log(arr1) // [1, 2]

var arr2 = [1,2,3,4,5];
// 从第2位开始，删除后面所有元素，再插入 'a'、'b'
arr2.splice(2,arr2.length,'a','b');
console.log(arr2) // [1, 2, "a", "b"]

var arr3 = [1,2,3,4,5];
// 从倒数第3位开始，删除1个元素
arr3.splice(-3,1); 
console.log(arr3); // [1,2,4,5]

var arr4 = [1,2,3,4,5];
// 从倒数最后一位开始，删除所有元素，插入 'a'、'b'
arr4.splice(-arr4.length,arr4.length,'a','b');
// 相当于出第一位开始删除 arr4.splice(0,arr4.length,'a','b');
console.log(arr4);// ["a", "b"]

 

11、indexOf():

• 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

语法：arr.indexOf(searchElement[, fromIndex])

参数： 

• searchElement：要查找的元素。

• fromIndex (可选)：开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找 ，以此类推。 注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0。

示例：

var array = [1, '哈哈',3,'haha', 5];
array.indexOf('哈哈');      //  1   从第一个开始找'哈哈'，找到后，返回'哈哈'索引为1
array.indexOf(7);           // -1  从第一个开始找 7，没找到，返回 -1
array.indexOf(1, 1);        // -1  从第二个开始找 1，没找到，返回 -1
array.indexOf(1, 0)         //  0  从第一个开始找 1，找到后，返回 1 的索引为 0
array.indexOf(5, 2);        //  4  从第三个开始找 5，找到后，返回 5 的索引为 4
array.indexOf('haha', -3);  //  3  从倒数第三个开始找'haha'，找到后，返回'haha'索引为 3
array.indexOf(1, -3);       // -1  从倒数第三个开始找 1，没找到，返回 -1

 

12、lastIndexOf():

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

语法：arr.lastIndexOf(searchElement[, fromIndex])

参数： 

• searchElement：要查找的元素。

• fromIndex (可选)：从此位置开始逆向查找。默认为数组的长度减 1(arr.length - 1)，即整个数组都被查找。如果该值大于或等于数组的长度，则整个数组会被查找。如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。

示例：

var array = [1,'哈哈',3,'haha',5];
array.lastIndexOf('哈哈');         //  1
array.lastIndexOf(7);              // -1
array.lastIndexOf(3, 4);          //  2
array.lastIndexOf(3, 3);          //  3
array.lastIndexOf('haha', -2);  //  3
array.lastIndexOf(3, -4);        // -1
array.lastIndexOf(3, -1);        //  2


// 查找所有元素
var indices = [];
var arr = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = arr.lastIndexOf(element);
while (idx != -1) {
  indices.push(idx);
  idx = (idx > 0 ? arr.lastIndexOf(element, idx - 1) : -1);
}
console.log(indices); // [4, 2, 0]

 

13、map():

• 返回一个新的Array，每个元素为调用func的结果
• map可理解为 返回的新数组的每个元素是原数组对应元素的映射，通过函数计算一一对应

语法：var new_array = arr.map(function callback(currentValue[, index[, array]]) {}[, thisArg])

参数： 

• callback( currentValue, index, array )：
• currentValue (数组中正在处理的当前元素。) 
• index (可选，数组中正在处理的当前元素的索引。)
• array (可选，方法调用的数组。)
• 在callback中，三个参数的关系 currentValue === array[index]; // true
• thisArg (可选)：执行 callback 函数时值被用作this。

示例：

// 所有元素乘2
var arr = [1,3,5,7,9];
// 传1个参数，必须返回处理后的结果
var mArr = arr.map(x=>x*2);
console.log(mArr); // [2, 6, 10, 14, 18]


// 
var arr= [1,2,3,4,5];
var nArr = [];
// 传3个参数，cVal-当前处理的元素，index-索引，oArr-原数组
var mArr= arr.map(function (cVal,index,oArr) {
    nArr.push(oArr[index]*10)
    var a = cVal*5;
    var b = a.toString();  
    return b
    
})
console.log(mArr); // ["5", "10", "15", "20", "25"] mArr 是cVal*5再转字符串
console.log(nArr); // [10, 20, 30, 40, 50] nArr 是oArr[index]*10
console.log(arr); // [1, 2, 3, 4, 5] 原数组不变

 

14、reduce()：

• reduce方法有两个参数，第一个参数是一个callback，用于针对数组项的操作；
• 第二个参数则是传入的初始值，这个初始值用于单个数组项的操作。
• reduce方法返回值并不是数组，而是形如初始值的经过叠加处理后的操作。

 

语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

参数： 

• callback：执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数。
• accumulator ：累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue。
• currentValue （可选）：数组中正在处理的元素。
• index （可选）：数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始。
• array （可选）：调用reduce()的数组。

• initialValue （可选）：启动初始值
• 作为第一次调用 callback函数时的第一个参数的值。
• 如果没有提供初始值，则将使用数组中的第一个元素。
• 在没有初始值的空数组上调用 reduce 将报错。

示例：

// 求和
var total = [ 0, 1, 2, 3 ].reduce(
  ( acc, cur ) => acc + cur,
  0
);
console.log(total); // 6


// 累加对象数组里的值
var initialValue = 0;
var sum = [{num: 1}, {num:2}, {num:3}].reduce(
    (accumulator, currentValue) => accumulator + currentValue.num
    ,initialValue
);

console.log(sum); // 6


// 计算数组中每个元素出现的次数
var skills = ['js', 'css', 'html', 'css', 'js'];

var countedSkills = skills.reduce(function (allSkills, skill) { 
  if (skill in allSkills) {
    allSkills[skill]++;
  }
  else {
    allSkills[skill] = 1;
  }
  return allSkills;
}, {});
console.log(countedSkills); // {js: 2, css: 2, html: 1}

// 按属性对object分类
var people = [
  { name: '张三', age: 21 },
  { name: '李四', age: 20 },
  { name: '王五', age: 20 }
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, 'age');
console.log(groupedPeople); 
/*
{ 
  20: [
    { name: '李四', age: 20 }, 
    { name: '王五', age: 20 }
  ], 
  21: [{ name: '张三', age: 21 }] 
}
*/

// 数组去重 
let arr = [1,2,1,'g',2,3,5,4,5,3,4,'w',4,'g',4];
let result = arr.sort().reduce((init, current) => {
    if(init.length === 0 || init[init.length-1] !== current) {
        init.push(current);
    }
    return init;
}, []);
console.log(result); // [1, 2, 3, 4, 5, "g", "w"]

 

15、reduceRight()：

• 接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。
• 和 reduce() 基本一样，方向相反。
• 如果数组为空，且没有提供 initialValue 参数，则会抛出一个 TypeError 错误。

 

语法：arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])

参数： 

• callback：一个回调函数，用于操作数组中的每个元素，它可接受四个参数：
• accumulator ：累加器，上一次调用回调函数时，回调函数返回的值。首次调用回调函数时，如果 initialValue 存在，累加器即为 initialValue，否则须为数组中的最后一个元素。
• currentValue （可选）：当前被处理的元素。
• index （可选）：数组中当前被处理的元素的索引。
• array （可选）：调用 reduceRight() 的数组。

• initialValue （可选）：启动初始值
• 首次调用 callback 函数时，累加器 accumulator 的值。如果未提供该初始值，则将使用数组中的最后一个元素，并跳过该元素。如果不给出初始值，则需保证数组不为空。
• 否则，在空数组上调用 reduce 或 reduceRight 且未提供初始值（例如 [].reduce( (acc, cur, idx, arr) => {} ) ）的话，会导致类型错误 TypeError: reduce of empty array with no initial value。

示例：

// 求和
var sum = [0, 1, 2, 3].reduceRight(function(a, b) {
  return a + b;
}); // 6 

// 数组扁平化
var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
    return a.concat(b);
}, []); // flattened is [4, 5, 2, 3, 0, 1]

// reduce 与 reduceRight 之间的区别
var a = ['1', '2', '3', '4', '5']; 
var left  = a.reduce(function(prev, cur)      { return prev + cur; }); 
var right = a.reduceRight(function(prev, cur) { return prev + cur; }); 
console.log(left);  // "12345"
console.log(right); // "54321"

 

16、filter():

• 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。
• 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了，则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。
• 返回一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。
• 不会改变原数组，它返回过滤后的新数组。

 

语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

参数： 

• callback：用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：
• element ：数组中当前正在处理的元素。
• index （可选）：正在处理的元素在数组中的索引。
• array （可选）：调用了 filter 的数组本身。

• thisArg (可选)：
• 执行 callback 时，用于 this 的值。

示例：

 

// 筛选对象属性符合条件的条目
var arr = [
  { num: 15 },
  { num: -1 },
  { num: 0 },
  { num: 5 },
  { num: 66.6 },
  { },
  { num: null },
  { num: NaN },
  { num: 'undefined' }
];
function isBigEnough(item) {
  return item.num >= 10;
}
var filtered = arr.filter(isBigEnough);
console.log(filtered) // [{num: 15},{num: 66.6}]

// 在数组中搜索符合的条目
var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

 

17、some():

• 遍历的元素的范围在第一次调用 callback. 前就已经确定了。在调用 some() 后被添加到数组中的值不会被 callback 访问到。如果数组中存在且还未被访问到的元素被 callback 改变了，则其传递给 callback 的值是 some() 访问到它那一刻的值。已经被删除的元素不会被访问到。
• 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some() 将会立即返回 true。否则，some() 返回 false。
• 返回一个boolean，判断是否有元素是否符合func条件。
• 不会改变原数组。

 

语法：arr.some(callback(element[, index[, array]])[, thisArg])

参数： 

• callback：用来测试每个元素的函数，接受三个参数：
• element ：数组中正在处理的元素。
• index （可选）：数组中正在处理的元素的索引值。
• array （可选）：调用some() 的数组。

• thisArg (可选)：
• 执行 callback 时，时使用的 this 的值。

示例：

// 判断数组中是否有大于10的元素
[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true

 

18、every():

• 方法为数组中的每个元素执行一次 callback 函数，直到它找到一个会使 callback 返回 false 的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true， 
• 返回一个boolean，判断每个元素是否符合func条件。
• 当所有的元素都符合条件才会返回true。
• 不会改变原数组。

语法：arr.every(callback[, thisArg])

参数： 

• callback：用来测试每个元素的函数，接受三个参数：
• element ：数组中正在处理的元素。
• index （可选）：数组中正在处理的元素的索引值。
• array （可选）：调用every() 的数组。

• thisArg (可选)：
• 执行 callback 时，时使用的 this 的值。

示例：

// 是否数组中所有元素都大于10
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

 

19、forEach():

• 方法按升序为数组中含有效值的每一项执行一次 callback 函数。
• 如果 thisArg 参数有值，则每次 callback 函数被调用时，this 都会指向 thisArg 参数。如果省略了 thisArg 参数，或者其值为 null 或 undefined，this 则指向全局对象。
• 如果使用箭头函数表达式来传入函数参数， thisArg 参数会被忽略，因为箭头函数在词法上绑定了 this 值。
• 除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。
• 没有返回值，只是针对每个元素调用func。
• 不会改变原数组。

 

语法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

参数： 

• callback：用来测试每个元素的函数，接受三个参数：
• currentValue：数组中正在处理的元素。
• index （可选）：数组中正在处理的元素的索引值。
• array （可选）：调用forEach() 的数组。

• thisArg (可选)：
• 执行 callback 时，时使用的 this 的值。

示例：

// 不对未初始化的值进行任何操作（稀疏数组）
var arr = [1,{},3,null,5,,7];
arr.forEach(function(v,i,a){
  console.log("处理第"+i+"个元素："+v);
});
// 处理第0个元素：1
// 处理第1个元素：[object Object]
// 处理第2个元素：3
// 处理第3个元素：null
// 处理第4个元素：5
// 处理第6个元素：7
// 第5个元素未初始化而被跳过

// 扁平化数组
function flatten(arr) {
  var result = [];
  arr.forEach((i) => {
    if (Array.isArray(i))
      result.push(...flatten(i));
    else
      result.push(i);
  })
  return result;
}

var nArr = [1,2,[3,33,[3.1,[3.21,3.22]]],4,[5,55],-6];
flatten(nArr); // [1, 2, 3, 33, 3.1, 3.21, 3.22, 4, 5, 55, -6]

 

20、copyWithin():

• 参数 target、start 和 end 必须为整数。
• 如果 start 为负，则其指定的索引位置等同于 length+start，length 为数组的长度，end 也是如此。
• copyWithin 方法不要求其 this 值必须是一个数组对象；除此之外，copyWithin 是一个可变方法，它可以改变 this 对象本身，并且返回它，而不仅仅是它的拷贝。
• copyWithin 函数被设计为通用式的，其不要求其 this 值必须是一个数组对象。
• copyWithin 是一个可变方法，它不会改变 this 的长度 length，但是会改变 this 本身的内容，且需要时会创建新的属性。
• 返回改变后的数组。

语法：arr.copyWithin(target[, start[, end]])

参数： 

• target：0 为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算。如果 target 大于等于 arr.length，将会不发生拷贝。如果 target 在 start 之后，复制的序列将被修改以符合 arr.length。
• start（可选）：0 为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算。如果 start 被忽略，copyWithin 将会从0开始复制。
• end（可选）： 0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数， end 将从末尾开始计算。如果 end 被忽略，copyWithin 方法将会一直复制至数组结尾（默认为 arr.length）。

示例：

[1, 2, 3, 4, 5].copyWithin(-2);// [1, 2, 3, 1, 2]
[1, 2, 3, 4, 5].copyWithin(0, 3);// [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4);// [4, 2, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);// [1, 2, 3, 3, 4]
[].copyWithin.call({length: 5, 3: 1}, 0, 3);// {0: 1, 3: 1, length: 5}

 

21、entries():

• 返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
• iterator.next()返回一个对象，对于有元素的数组，

语法：arr.entries()

示例：

var arr = ['a', 'b', 'c'];
var iterator1 = arr.entries();

console.log(iterator1.next()); // {value:[0, "a"], done: false}
console.log(iterator1.next().value); // [1, "b"]
console.log(iterator1.next().value); // [2, "c"]
console.log(iterator1.next().done); // true

 

22、fill():

• 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
• 如果 start 是个负数, 则开始索引会被自动计算成为 length+start, 其中 length 是 this 对象的 length 属性值。如果 end 是个负数, 则结束索引会被自动计算成为 length+end。
• fill 方法故意被设计成通用方法, 该方法不要求 this 是数组对象。
• 返回修改后的数组。

语法：arr.fill(value[, start[, end]])

参数： 

• value：用来填充数组元素的值。
• start （可选）：起始索引，默认值为0。
• end （可选） ：终止索引，默认值为 this.length。

示例：

[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({}) // [{}, {}, {}];
// 需要注意如果fill的参数为引用类型，会导致都执行都一个引用类型
// 如 arr[0] === arr[1] 为true
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

 

23、find():

• 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
• find方法对数组中的每一项元素执行一次 callback 函数，直至有一个 callback 返回 true。当找到了这样一个元素后，该方法会立即返回这个元素的值，否则返回 undefined。
• callback 函数会为数组中的每个索引调用即从 0 到 length - 1，而不仅仅是那些被赋值的索引，这意味着对于稀疏数组来说，该方法的效率要低于那些只遍历有值的索引的方法。

语法：arr.find(callback[, thisArg])

参数： 

• callback：在数组每一项上执行的函数，接收 3 个参数：
• element ：当前遍历到的元素。
• index （可选）：当前遍历到的索引。
• array （可选）：数组本身。

• thisArg (可选)：
• 执行回调时用作this 的对象。

示例：

var arr = [
    {name:'张三',age:20},
    {name:'李四',age:16},
    {name:'王五',age:16},
]

arr.find(function (item) {
    return item.age === 16 // 返回第一个符合age 为16的项
}) // {name: "李四", age: 16}

 

24、findIndex():

• findIndex方法对数组中的每个数组索引0..length-1（包括）执行一次callback函数，直到找到一个callback函数返回真实值（强制为true）的值。如果找到这样的元素，findIndex会立即返回该元素的索引。
• 如果回调从不返回真值，或者数组的length为0，则findIndex返回-1。
• 与某些其他数组方法（如Array#some）不同，在稀疏数组中，即使对于数组中不存在的条目的索引也会调用回调函数。
• findIndex不会修改所调用的数组。

语法：arr.findIndex(callback[, thisArg])

参数： 

• callback：在数组每一项上执行的函数，接收 3 个参数：
• element ：当前遍历到的元素。
• index （可选）：当前遍历到的索引。
• array （可选）：数组本身。

• thisArg (可选)：
• 执行回调时用作this 的对象。

示例：

var arr = [
    {name:'张三',age:20},
    {name:'李四',age:16},
    {name:'王五',age:16},
]

arr.findIndex(function (item) {
    return item.age === 16 // 返回第一个符合age 为16的项的索引
}) // 1

 

25、flat():

• 按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
• 会返回一个包含将数组与子数组中所有元素的新数组。

语法：var newArray = arr.flat([depth])

参数： 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，可展开任意深度的嵌套数组
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]

var arr5 = [1, 2, , 4, 5];
arr5.flat();// [1, 2, 4, 5]

 

26、flatMap():

• 使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。
• flatMap 方法与 map 方法和深度depth为1的 flat 几乎相同。
• 返回一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为1。

语法：var new_array = arr.flatMap(callback(currentValue[, index[, array]]) {}[, thisArg])

参数： 

• callback：可以生成一个新数组中的元素的函数，可以传入三个参数：
• currentValue：当前正在数组中处理的元素。
• index （可选）：数组中正在处理的当前元素的索引。
• array （可选）：被调用的 map 数组。

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

示例：

// 和map基本一样 
var arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]); // [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);// [2, 4, 6, 8]

arr1.flatMap(x => [[x * 2]]);// [[2], [4], [6], [8]]

 

27、includes():

• 用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

语法：arr.includes(valueToFind[, fromIndex])

参数： 

• valueToFind：需要查找的元素值。

• fromIndex (可选)：从fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜 （即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。

示例：

[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

// fromIndex 大于等于数组长度
var arr = ['a', 'b', 'c'];
arr.includes('c', 3);   // false
arr.includes('c', 100); // false

// 如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。
//如果计算出的索引小于 0，则整个数组都会被搜索。
var arr = ['a', 'b', 'c'];
arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true
arr.includes('a', -2); // false

// 方法有意设计为通用方法。它不要求this值是数组对象，所以它可以被用于其他类型的对象 (比如类数组对象)。

(function() {
  console.log([].includes.call(arguments, 'a')); // true
  console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');

 

 

 

JavaScript 中的三大对象 (本地对象、内置对象、 宿主对象)

本地对象

• Object 对象属性和方法
• String 对象属性和方法
• Array 对象属性和方法
• Date 对象属性和方法
• Number 对象属性和方法
• RegExp 对象属性和方法
• Function 对象属性和方法
• Boolean 对象属性和方法
• Error 对象属性和方法

 

内置对象

• Global 对象属性和方法
• Math 对象属性和方法
• JSON 对象属性和方法

 

宿主对象

• DOM 对象属性和方法
• BOM 对象属性和方法