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 Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
js仿京东放大镜效果
Aug 09 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面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
Javascript学习指南
2014/12/01 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
WebStorm ES6 语法支持设置&babel使用及自动编译(详解)
2017/09/08 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
python中实现定制类的特殊方法总结
2014/09/28 Python
python获取本机外网ip的方法
2015/04/15 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
python自定义时钟类、定时任务类
2021/02/22 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
普通员工辞职信
2014/01/17 职场文书
美德好少年事迹材料
2014/01/19 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
小学运动会加油稿
2015/07/22 职场文书
Nginx内网单机反向代理的实现
2021/11/07 Servers
JavaScript实现队列结构过程
2021/12/06 Javascript