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 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
JavaScript 高级语法介绍
Jun 15 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
jQuery中的select操作详解
Nov 29 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
JavaScript正则表达式验证登录实例
Mar 18 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
C#静态方法与非静态方法实例分析
2014/09/22 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
PHP session 会话处理函数
2016/06/06 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
小程序实现投票进度条
2019/11/20 Javascript
Python中的super用法详解
2015/05/28 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
安装Python的教程-Windows
2017/07/22 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
keras 多gpu并行运行案例
2020/06/10 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
css图标制作教程制作云图标
2014/01/19 HTML / CSS
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
什么是makefile? 如何编写makefile?
2013/01/02 面试题
如何写一个自定义标签
2012/12/28 面试题
村官工作鉴定评语
2014/01/27 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
nginx配置指令之server_name的具体使用
2022/08/14 Servers