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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
js单例模式详解实例
Nov 21 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
vue--vuex详解
Apr 15 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
JS 面向对象的5钟写法
2009/07/31 Javascript
JsDom 编程小结
2011/08/09 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
jquery实现拖动效果
2016/08/10 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
使用python实现tcp自动重连
2017/07/02 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
Python实现自动访问网页的例子
2020/02/21 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
什么是会话Bean
2015/05/14 面试题
店长岗位职责
2013/11/21 职场文书
原材料检验岗位职责
2014/03/15 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
2015新学期开学寄语
2015/02/26 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书