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 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
javascript 节点遍历函数
Mar 28 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 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
神族 PROTOSS 概述
2020/03/14 星际争霸
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
Python生成随机验证码的两种方法
2015/12/22 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
python实现二维数组的对角线遍历
2019/03/02 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
python中update的基本使用方法详解
2019/07/17 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
公司前台辞职报告
2014/01/19 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
小学毕业寄语大全
2014/04/03 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
村班子对照检查材料
2014/08/18 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers