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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
JavaScript 学习笔记(十一)
Jan 19 Javascript
jQuery 插件开发指南
Nov 14 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
javascript iframe跨域详解
Oct 26 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 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
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
Python3基础之基本数据类型概述
2014/08/13 Python
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
python杀死一个线程的方法
2015/09/06 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
Python深度优先算法生成迷宫
2018/01/22 Python
如何用python处理excel表格
2020/06/09 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
学生发电厂实习自我鉴定
2013/09/22 职场文书
商场拾金不昧表扬信
2014/01/13 职场文书
优秀大学生的自我评价
2014/01/16 职场文书
财务会计岗位职责
2015/02/03 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL