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 相关文章推荐
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
layui的select联动实现代码
Sep 28 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 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
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
url decode problem 解决方法
2011/12/26 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
vue实现计算器功能
2020/02/22 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
django 外键model的互相读取方法
2018/12/15 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
零基础小白多久能学会python
2020/06/22 Python
Python中的面向接口编程示例详解
2021/01/17 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
史上最全面的Java面试题汇总!
2015/02/03 面试题
高中生家长会演讲稿
2014/01/14 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
古诗之感恩老师
2019/10/24 职场文书
我的收音机情缘
2022/04/05 无线电