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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
JS Array对象入门分析
Oct 30 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
这样回答继承可能面试官更满意
Dec 10 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 Javascript
基于vue+element实现全局loading过程详解
Jul 10 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适配器模式介绍
2012/08/14 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
解析js如何获取css样式
2016/12/11 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
详解Python中heapq模块的用法
2016/06/28 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
函授本科毕业自我鉴定
2013/10/09 职场文书
咨询公司各岗位职责
2013/12/02 职场文书
大型晚会策划方案
2014/02/06 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
Python开发简易五子棋小游戏
2022/05/02 Python