Js数组扁平化实现方法代码总汇


Posted in Javascript onNovember 11, 2020

题目:

请写出一个数组拍平函数。效果如下:

var arr=['a', ['b', 'c'], 2, ['d', 'e', 'f'], 'g', 3, 4];
flat(arr) //a,b,c,2,d,e,f,g,3,4

方法一:使用toString方法先将arr转换为一个字符串, 再以split分割为数组,再将数组里面的元素转换为数字类型

var arr =['a', ['b', 'c'], 2, ['d', 'e', 'f'], 'g', 3, 4];
function flat(arr) {
 return arr.toString().split(',').map(function(item){
    return Number(item)
 })
}
console.log(flat(arr))

方法二: toString 格式转换 与方法一类似 都是隐士类型转换

var arr = ['a', ['b', 'c'], 2, ['d', 'e', 'f'], 'g', 3, 4];
// 方法二:toString(格式转换)
var flag = function(arr) {
	let toString = Array.prototype.toString;
	Array.prototype.toString = function() {
		return this.join(',');
	};
	let result = arr + '';
	Array.prototype.toString = toString;
	return result;
};

console.log(flag(arr));

方法三: valueOf(格式转换) 与方法一 二类似 都是隐士类型转化原理

// 方法三:valueOf(格式转换)
Array.prototype.valueOf = function() {
	return this.join(',');
};

var flat = function(arr) {
	return arr + '';
};
console.log(flat(['a', ['b', 'c'], 2, ['d', 'e', 'f'], 'g', 3, 4]));

方法四: 利用reduce特性

function flat(arr) {
	return newArr = arr.reduce((a, b) => {
		return a.concat(b)
	}, [])
}
var arr = ['a', ['b', 'c'], '2', ['d', 'e', 'f'], 'g', 3, 4];
console.log(flat(arr));

方法五:利用递归

function flat(array) {
	var result = [];
	var each = function(arr) {
		arr.forEach(item => {
			if (item instanceof Array) {
				each(item);
			} else {
				result.push(item);
			}
		});
	};
	each(array);
	return result.join(',');
}
var arr = ['a', ['b', 'c', [7, 8]], 2, ['d', 'e', 'f'], 'g', 3, 4];
console.log(flat(arr));

方法六: ES6的遍历器 Iterator 给数据结构增加遍历器必须增加一个next方法

// Iterator
Array.prototype[Symbol.iterator] = function() {
	let arr = [].concat(this);
	// arr=['a', ['b', 'c'], '2', ['d', 'e', 'f'], 'g', 3, 4]
	let getFirst = function(array) {
		let first = array.shift();
		if (first instanceof Array) {
			if (first.length > 1) {
				arr = first.slice(1).concat(array);
			}
			first = first[0];
		}
		return first;
	};
	return {
		next: function() { //类似与遍历
			let item = getFirst(arr);
			if (item) {
				return {
					value: item,
					done: false,
				};
			} else {
				return {
					done: true,
				};
			}
		},
	};
};
var flat = function(arr) {
	let r = [];
	for (let i of arr) {
		r.push(i);
	} // i 已经是单个元素
	return r.join(',');
};
var arr = ['a', ['b', 'c'], '2', ['d', 'e', 'f'], 'g', 3, 4];
console.log(flat(arr));

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
javascript动态创建链接的方法
May 13 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
AngularJs 常用的过滤器
May 15 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 #Javascript
Vue3 响应式侦听与计算的实现
Nov 11 #Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 #Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 #Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 #Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 #Javascript
vue解决跨域问题(推荐)
Nov 10 #Javascript
You might like
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
两种php调用Java对象的方法
2006/10/09 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
jQuery大于号(>)选择器的作用解释
2015/01/13 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
JS判断数组那点事
2017/10/10 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
Python 含参构造函数实例详解
2017/05/25 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
用python爬取租房网站信息的代码
2018/12/14 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
英国大码女性时装零售商:Evans
2018/08/29 全球购物
小松树教学反思
2014/02/11 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
开学典礼决心书
2014/03/11 职场文书
设计师求职信模板
2014/05/06 职场文书
绿色环保标语
2014/06/12 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
2014年财政局工作总结
2014/12/09 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书