Javascript数组方法总结(二)

十:其他方法(返回新数组的方法)

  • Array.from()方法从一个类似数组或可迭代对象中创建一个新的数组实例。

语法:Array.from(arrayLike[, mapFn[, thisArg]])
伪数组对象(拥有一个 length 属性和若干索引属性的任意对象)
可迭代对象(可以获取对象中的元素,如 Map和 Set 等)

Array.from() 方法有一个可选参数 mapFn,让你可以在最后生成的数组上再执行一次 map 方法后再返回。也就是说Array.from(obj, mapFn, thisArg)就相当于Array.from(obj).map(mapFn, thisArg), 除非创建的不是可用的中间数组。 这对一些数组的子类,typed arrays 来说很重要, 因为中间数组的值在调用 map()时需要是适当的类型。
from()length 属性为1 ,即Array.from.length = 1

ES6 中, Class语法允许我们为内置类型(比如Array)和自定义类新建子类(比如叫 SubArray)。这些子类也会继承父类的静态方法,比如 SubArray.from(),调用该方法后会返回子类 SubArray 的一个实例,而不是 Array的实例。

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

//Set
let s = new Set(['foo',window])
Array.from(s)   // (2) ["foo", Window]

//Map
let m = new Map([[1,2],[2,4],[4,8]]);
Array.from(m)
// (3) [Array(2), Array(2), Array(2)]

//function arguments 类数组
function f(){
   return Array.from(arguments)
}
f(1,2,3)
// (3) [1, 2, 3]

//arrow function
Array.from([1,2,3],x => x + x)
// (3) [2, 4, 6]

//有length属性的对象
Array.from({length: 5},(v,i) => i)
// (5) [0, 1, 2, 3, 4]
  • Array.of()方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型

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

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

Array(7)
// (7) [empty × 7]
Array.of(7)
// [7]
Array.of(1,2,3)
// (3) [1, 2, 3]
Array.of(undefined)
// [undefined]

兼容性写法

if (!Array.of) {
  Array.of = function() {
    return Array.prototype.slice.call(arguments);
  };
}
Array.of(7)
//[7]
  • flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

语法:var newArray = arr.flat(depth)
参数:depth指定要提取嵌套数组的结构深度,默认值为 1。
返回:一个包含将数组与子数组中所有元素的新数组。

var arr1 = [1,2,[3,4]];
arr1.flat()
// (4) [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat()
//(5) [1, 2, 3, 4, Array(2)]

arr2.flat(2)
//(6) [1, 2, 3, 4, 5, 6]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(Infinity)
//(6) [1, 2, 3, 4, 5, 6]

//flat() 方法会移除数组中的空项:
var arr4 = [1, 2, , 4, 5];
arr4
//(5) [1, 2, empty, 4, 5]
arr4.flat()
//(4) [1, 2, 4, 5]
  • indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

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

  • includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。
    注意:对象数组不能使用includes方法来检测。

  • keys()方法返回一个包含数组中每个索引键的Array Iterator对象。

var array1 = ['a', 'b', 'c'];
var iterator = array1.keys(); 
terator    
Array Iterator {}__proto__: Array Iteratornext: ƒ next()arguments: (...)caller: (...)length: 0name: "next"__proto__: ƒ ()[[Scopes]]: Scopes[0]Symbol(Symbol.toStringTag): "Array Iterator"__proto__: Object
iterator.next()
//{value: 0, done: false}
iterator.next()
//{value: 1, done: false}
iterator.next()
//{value: 2, done: false}
iterator.next()
//{value: undefined, done: true}

十一:数组扁平化(数组拍平)

flat方法

var arr3 = [1, 2, [3, 4, [5, 6]]];

const flatten = (arr) => {
  return arr.flat(Infinity);
}
flatten(arr3);
//(6) [1, 2, 3, 4, 5, 6]

concat、reduce方法结合展开一层数组

var arr1 = [1, 2, [3, 4]];
arr1.reduce((acc, val) => acc.concat(val), [])
//(4) [1, 2, 3, 4]

展开符

const dd = (arr) => [].concat(...arr)
dd(arr1)
//(4) [1, 2, 3, 4]

使用 reduce、concat 和递归无限反嵌套多层嵌套的数组

const flattenDeep = (arr) => {
    return arr.reduce((acc,cur) => Array.isArray(cur) ? acc.concat(flattenDeep(cur)) : acc.concat(cur),[])
}
flattenDeep(arr1)
// (10) [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

不使用递归,使用 stack 无限反嵌套多层嵌套数组

var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
const flatten2 = (input) {
  const stack = [...input];
  const res = [];
  while (stack.length) {
    // 使用 pop 从 stack 中取出并移除值
    const next = stack.pop();
    if (Array.isArray(next)) {
      // 使用 push 送回内层数组中的元素,不会改动原始输入 original input
      stack.push(...next);
    } else {
      res.push(next);
    }
  }
  // 使用 reverse 恢复原数组的顺序
  return res.reverse();
}
flatten2(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

十二:数组去重

Array.form() Set组合

const arr = [1,2,3,6,3,5,5]
function ArrayfromSet(arr){
  if(Array.isArray(arr)){
    return Array.from(new Set(arr))
  } 
}
ArrayfromSet(arr)
//(5) [1, 2, 3, 6, 5]

indexOf方式

Array.prototype.unique = function(){
   var arr = [];
   for(var i = 0; i < this.length; i++){
     if(arr.indexOf(this[i]) == -1) arr.push(this[i]);
    }
    return arr;
 }
let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
arr.unique()
//(5) [1, 2, 3, 5, 4]

//或者从数组第二项开始遍历
Array.prototype.unique3 = function(){
  var arr = [];
  arr.push(this[0]);
  for(var i = 1; i < this.length; i++){
     if(arr.indexOf(this[i]) == -1) arr.push(this[i]);
  }
  return arr;
}
arr.unique3()
//(5) [1, 2, 3, 5, 4]

filter indexOf 过滤数组

function unique(arr) {
    return arr.filter(function(item, index){
        // indexOf返回第一个索引值,
        // 如果当前索引不是第一个索引,说明是重复值
        return arr.indexOf(item) === index;
    });
}
unique(arr)
//(5) [1, 2, 3, 5, 4]

reduce方式

let arr = [1,2,1,2,3,5,4,5,3,4,4,4,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]

参考:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容