JavaScript .concat方法注意事项

最新推荐文章于 2023-05-12 15:38:37 发布
最新推荐文章于 2023-05-12 15:38:37 发布
阅读量422 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41790566/article/details/106746688
版权

concat() 方法用于将两个数组拼接。

举例

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

容易栽到的点是，concat的方法是返回一个新的数组，而不会改变原数组。

因此使用了之后一定要用一个变量把concat的结果存起来。

比如我写的时候就下意识的犯错，下面是一段反面教材，我希望通过点击按键，展示出数组拼接的结果：

<!DOCTYPE html>
<html>
<body>

<button onclick="fun()">按键</button>
<p id="demo1"></p>
<p id="demo2"></p>

<script>
var myChildren = ["Emma", "Isabella"];
document.getElementById("demo1").innerHTML = myChildren;
function fun(){
myChildren.concat(["Jacob", "Michael", "Ethan"]); 
document.getElementById("demo2").innerHTML = myChildren;
}
</script>

</body>
</html>

显然错误的地方在于myChildren用完concat方法之后应该用一个变量把结果存起来，然后我改了一下函数：

function fun(){
var myChildren = myChildren.concat(["Jacob", "Michael", "Ethan"]); 
document.getElementById("demo2").innerHTML = myChildren;
}

这句报错的原因应该是全局变量和局部变量的命名冲突，

在函数外定义了全局变量myChildren，在函数内又var了一个myChildren，

会出现冲突导致无法运行。

正确写法应该是

function fun(){
myChildren = myChildren.concat(["Jacob", "Michael", "Ethan"]); 
document.getElementById("demo2").innerHTML = myChildren;
}

这个时候函数体内部被赋值的myChildren是什么都没有关系，设成a也可以。

Katzelala
关注
专栏目录
JavaScript字符串对象的concat方法实例（用于连接两个或多个字符串）
10-25
### 注意事项 1. **空字符串连接**：如果concat方法的参数之一是空字符串，那么结果将等同于其他字符串参数的拼接。如果所有参数都是空字符串，则返回一个空字符串。 2. **参数转换**：无论是使用concat方法还是...
javascript concat数组累加 示例
10-29
#### 六、注意事项 1. **不会修改原数组**：`concat()` 方法不会改变调用它的数组，而是返回一个新的数组。这意味着如果你希望修改原始数组，需要使用其他方法如 `push()` 或 `unshift()`。 2. **支持非数组参数**...
mysql concat注意事项
yytoo2的博客
06-21 1049
mysql中使用concat函数拼接信息是比较实用的方式, 返回结果为连接参数产生的字符串,使用逗号分隔参数: CONCAT(str1,str2,…)                  但是需要注意两点:1. 如有任何一个参数为NULL ，则返回值为 NULL。解决方法: 使用IFNULL函数对null的数据赋默认值: CONCAT(id , IFNULL(name, ''))          ...
js concat方法的坑
MR.杜的博客
06-17 463
需求:有个数组a=[1,2,3]合并数组[4,5]错误的代码实现 错误原因:concat方法不改变已经存在的数组,所以输出a还是原来的a解决方案: 注意点:熟读概念,避免踩坑.
js 中关于concat方法实用报错的问题
weixin_45786189的博客
08-27 1810
本人学习过程中编写，定有不足之处，如果有错误，请您积极指正；如果有帮助，请不要吝啬您的赞美（点赞），欢迎各位大佬点赞评论。 今天在进行微信小程序进行项目开发，代码编写完运行时，有如下报错： 发现是concat()使用有误； 一.concat是干什么的 concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。 二.调用对象 concat的调用对象必须是一个数组，如果不是一个数组该方法会报错 三.总结 作者本人正是因为忽视了调用对象的得必须性，才会导致错.
js的concat方法踩坑
technology_tyro的博客
05-12 291
既然两个listchild指向同一块内存，那就深拷贝一个listchild，也就是多申请一块内存，使两个listchild各自指向单独的内存，那么在最终的list中就不会出现指向同一内存的问题了。concat是会将前后两个数组如果是同一个变量listchild，那么在新数组中的两个listChild会不会指向同一块内存。，但是如果前后两个数组是同一个变量listchild，那么就会出现再新数组list中的，先说结论，concat是会将前后两个数组拷贝，然后返回一个新数组，
JS之连接数组方法concat
tian361zyc的博客
06-13 1万+
JS
JavaScript数组push方法使用注意事项
10-19
本文主要介绍JavaScript数组中的push方法的使用注意事项，以及与之相关的其他数组方法的知识点。 首先，我们来详细解释push方法的使用和注意事项。push方法可以将一个或多个元素添加到数组的末尾，并返回添加元素后...
javascript 数组使用方法汇总
12-12
#### 四、注意事项 - **数组下标从0开始**：在处理数组时需要注意数组的下标是从0开始的。 - **数组长度可变**：数组的长度可以通过修改`length`属性来改变。 - **方法的链式调用**：很多数组方法支持链式调用，如`...
js使用多种方法取出嵌套对象数组中的所有 children 的值
南北极之间
04-24 5122
这些方法都会遍历整个嵌套对象数组，并返回包含所有 children 的数组。请注意，使用递归方法时要小心，确保没有无限循环。2.使用 reduce 递归方法进行深度优先遍历。3.使用 flatMap 方法进行深度优先遍历。
数组方法实现（五）————数组方法concat()
林飞的梦呓
10-21 3054
数组方法concat() concat()可以基于当前数组中的所有项创建一个新数组。即这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。 没有给concat方法传递参数的情况下，它只是复制当前数组并返回副本。 如果传递的是一或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中 如果传递的值是不是数组，这些值会被简单的添加到数组的末尾 注意
openresty中使用淘宝的concat进行css和js合并
tiancityycf的专栏
09-10 400
背景 我们在访问淘宝的时候，会看到代码中的js和css文件是通过一次请求获得的，我们知道浏览器一次请求只能并发访问数个资源，这样的处理错输在网络传输层面可以大大节省时间，这里使用的技术就是把css、js等静态资源合并为一个资源。淘宝使用的tengine是基于nginx的web服务器，从11年底开源。所使用的是mod_concat模块，合并多个文件在一个响应报文中。 实战 先查看下当前openresty的版本和配置信息 /usr/local/openresty/nginx/sbin/ng
js中concat不起作用
qq_37212970的博客
05-20 5516
concat() 方法是用于连接两个或多个数组。 arrayObject.concat(arrayX,arrayX,......,arrayX) 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。 var a = [1,2,3]; a.concat([4,5]); console.log(a); //a输出为[1, 2, 3] var a = [1,2,3]; a = a.co...
JS concat()方法的介绍
成长的味道
11-24 1万+
concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。 语法 1 arrayObject.concat(array1,array2,...,arrayN) 参数说明： 注意:  该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。 我们创建一个数组，将把 concat() 中
JavaScript中concat不起作用
求知若渴！大智若愚！
12-23 1万+
//concat()把两个或者多个数组链接在一起，但是不改变已经存在的数组 //而是返回一个链接之后的新数组 var a = [1,2,3]; a.concat([4,5]); console.log(a); //此处输出为 [1, 2, 3]var a = [1,2,3]; a = a.concat([4,5]); console.log(a); //此处输出为 [1, 2, 3 ,4 ,5] /
vue method中数组的concat无效甚者报错
千寻的博客
03-02 6884
在 vue中常常将会用到将连个数组进行拼接，可是有的时候concat（["a]）失效甚至报错，采用Array.prototype.call.concat([],[],[])可以有效的解决这样的问题
js数组合并concat()和Array.prototype.push.apply()的性能分析
热门推荐
maoguiyou的专栏
05-17 2万+
js数组合并有两个常用方法，用法如下： var a=[1,2,3],b=[4,5,6]; 1.a.concat(b);//得到1,2,3,4,5,6； 1.1那个数组在前面合并后那个数组的元素就在前面 1.2 可以利用这个来复制一份数组，a.concat(a); 1.3 数组长度无限制，返回值是合并后的数组 1.4 千万级别的数组合并大约30毫秒 2.Array.protot
concat使用注意
weixin_30883271的博客
05-21 175
转载于:https://www.cnblogs.com/java-llp/p/10898127.html
table.concat
最新发布
12-28
table.concat函数是Lua中用于连接表中元素的函数。它可以将表中的元素按照指定的分隔符连接起来，并返回连接后的字符串。 table.concat函数的定义如下： ```lua table.concat(table, sep, start, end) ``` 参数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值