首页 >web前端 >js教程 > 正文

JS数组学习之反向连接全部元素并输出字符串

原创2021-08-31 15:20:5401093
在之前的文章《JS数组学习之怎么拼接全部元素,返回一个字符串》、《JS数组学习之迭代数组计算元素总和、将值连接成字符串》中,我们介绍了按照数组顺序,从左到右正向拼接全部元素,形成一个字符串的几种方法。这次我们继续介绍JS数组转字符串,聊聊逆向(从右到左)拼接全部数组元素,形成一个反转字符串的方法,有需要的朋友可以学习了解一下~

今天本文的主要内容是:逆向遍历数组,从右到左的将数组元素拼接成一个字符串。下面介绍3种实现方法。

方法1:利用for循环

实现思想:

  • 利用for循环逆向遍历数组

    想要逆向遍历数组,那么初始条件就是 i=数组长度-1,限制条件为 i>=0,每循环一次i需要自减1(i--

for(i=arr.length-1;i>=0;i--){  //逆向循环遍历数组
}

我们看看实现代码:

var arr = [1,2,3,4,5,6,7,8,9,0];
var i,str="";
for(i=arr.length-1;i>=0;i--){  //逆向循环遍历数组
	//拼接
	str=str+''+arr[i];
	// str=str.concat(arr[i]);
}
console.log(str);

输出结果为:

1.png

方法2:利用数组的reduceRight() 方法

recudeRight() 方法可从右向左对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。

array.reduceRight(function callbackfn(previousValue, currentVaule, currentIndex, array)[, initialValue])

function callbackfn(previousValue,currentVaule,currentIndex,array):必需参数,指定回调函数,最多可以接收4个参数:

  • previousValue:初始值,或者通过上一次调用回调函数获得的值。

  • currentVaule:当前元素数组的值。

  • currentIndex:当前数组元素的数字索引。

  • array:包含该元素的数组对象。

我们看看利用reduceRight()怎么逆向拼接数组元素

var arr = [1,2,3,4,5,6,7,8,9,0];
var str = '';

function f(pre,curr) {
	str=pre+''+curr;
	return str;
}
arr.reduceRight(f);
console.log(str);

输出结果为:

2.png

如果想要使用分隔符来分隔每个数组元素,可将回调函数中两个“+”运算符间的空字符串变为指定分隔符:

var arr = [1,2,3,4,5,6,7,8,9,0];
var str = '';
function f(pre,curr) {
	str=pre+'-'+curr;
	return str;
}
arr.reduceRight(f);
console.log(str);

输出结果为:

3.png

方法3:利用reverse()+reduce()

reverse()可以反转数组的元素顺序;而reduce()方法的语法和用法与和reduceRight() 方法大概相同,唯一不同的是:它是从左到右对数组中的所有元素调用指定的回调函数。

array.reduce(function callbackfn(previousValue, currentVaule, currentIndex, array), initialValue)

实现思想:

  • 先使用reverse()反转数组元素,得到新数组arr2;

  • 然后实现reduce()方法调用函数,拼接数组元素

我们看看实现代码:

var arr1 = [1,2,3,4,5,6,7,8,9,0],arr2=[];
var str = '';
function f(pre,curr) {
	str=pre+''+curr;
	return str;
}
arr2=arr1.reverse();
arr2.reduce(f);
console.log(str);

输出结果为:

4.png

好了,就说到这里了,有需要的可以看:javascript高级教程

以上就是JS数组学习之反向连接全部元素并输出字符串的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

相关文章

相关视频


网友评论

文明上网理性发言,请遵守 新闻评论服务协议

我要评论
  • 专题推荐

    作者信息
    推荐视频教程
  • JavaScript基础入门及设计模式视频教程JavaScript基础入门及设计模式视频教程
  • JavaScript基本语法及基本语句视频教程JavaScript基本语法及基本语句视频教程
  • JavaScript核心编程视频教程JavaScript核心编程视频教程
  • JavaScript深入视频教程JavaScript深入视频教程
  • JavaScript OOP调试技巧视频教程JavaScript OOP调试技巧视频教程
  • 视频教程分类