数组方法总结

·  阅读 148

参考MDN

Array.from()

  • Array.from() 方法从一个类似数组(伪数组)或可迭代对象创建一个新的,浅拷贝的数组实例。
  • from() 的 length 属性为 1 ,即 Array.from.length === 1。
// 从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 中使用箭头函数
Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4]
// 等价于
Array.from({length: 5}).map((v, i) => i); // Array.from({length: 5}得到5个元素都为undefined的数组,map((currentValue, index,arr)=>{})
复制代码

Array.isArray()

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

// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c', 'd'))
// 鲜为人知的事实:其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype); 
复制代码

联想到一道面试题: 如何判断一个对象是不是数组对象

1. arr.__proto__ == Array.prototype
2. arr instanceof Array
3. Array.isArray(arr)
4. Object.prototype.toString.call(arr) == "[object Array]"
5. arr.constructor == Array  ||  arr.constructor.name == 'Array'
复制代码

Array.of()

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]
复制代码

concat() 不会改变原数组

concat() 方法用于合并两个或多个数组。

  • 返回一个新数组
  • concat 将对象引用复制到新数组中。 原始数组和新数组都引用相同的对象。 也就是说,如果引用的对象被修改,则更改对于新数组和原始数组都是可见的。 这包括也是数组的数组参数的元素。
var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];
alpha.concat(numeric); // ['a', 'b', 'c', 1, 2, 3]
复制代码

join()不会改变原数组

join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。

  • 如果数组只有一个项目,那么将返回该项目而不使用分隔符。
  • 如果 arr.length 为0,则返回空字符串。
  • 如果一个元素为 undefined 或 null,它会被转换为空字符串。
var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join();      // myVar1的值变为"Wind,Rain,Fire" // 可以看出默认分隔符为英文逗号
var myVar2 = a.join(', ');  // myVar2的值变为"Wind, Rain, Fire"
var myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
var myVar4 = a.join('');    // myVar4的值变为"WindRainFire"
复制代码

push()、pop()、unshift()、shift()都会改变原数组

  • push() 向数组的末尾添加一个或更多元素,并返回新的长度
  • pop() 删除并返回数组的最后一个元素
  • unshift() 向数组的开头添加一个或更多元素,并返回新的长度
  • shift() 删除并返回数组的第一个元素

reverse()改变原数组

reverse() 方法将数组中元素的位置颠倒,并返回该数组

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

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

// 原数组被改变
console.log('array1:', array1); // array1: Array ["three", "two", "one"]
复制代码

slice()不会改变原数组

slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。

  • 如果 begin 为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素)。

如果省略 begin,则 slice 从索引 0 开始。 如果 begin 大于原数组的长度,则会返回空数组。

  • 如果 end 为负数,则它表示在原数组中的倒数第几个元素结束抽取。slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。

如果 end 被省略,则 slice 会一直提取到原数组末尾。 如果 end 大于数组的长度,slice 也会一直提取到原数组末尾。

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3); // ['Orange', 'Lemon']
复制代码

sort()改变原数组

sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的。

var numbers = [4, 2, 5, 1, 3]; 
numbers.sort((a, b) => a - b); 
console.log(numbers); // [1, 2, 3, 4, 5]
复制代码

toString()不会改变原数组

toString() 返回一个字符串,表示指定的数组及其元素。

const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString()); // "1,2,a,1a"
复制代码

includes()和indexOf()用法相同,不会改变原数组

  • includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。比较字符串和字符时是区分大小写
  • indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

都有一个可选参数 fromIndex,开始查找的位置,默认值为0:

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