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 getMonth()日期函数的值域是0-11
Feb 15 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
使用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 分页分组类
2009/12/10 PHP
php中的ini配置原理详解
2014/10/14 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
PHP实现验证码校验功能
2017/11/16 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
React组件生命周期详解
2017/07/03 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
简单的Python的curses库使用教程
2015/04/11 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
python分布式计算dispy的使用详解
2019/12/22 Python
学习Python列表的基础知识汇总
2020/03/10 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
酒店总经理欢迎词
2014/01/15 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
母亲节寄语大全
2015/02/27 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers