整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript 数组进行拼接的函数

JavaScript 数组进行拼接的函数

时候,我们希望在 JavaScript 中将 2 个已经存在的数组串拼接成 1 个数组。

简单来说就是将数组进行合并。

这个时候,我们可以使用 JavaScript 的 concat 函数。

考察下面的代码:

const array1=['a', 'b', 'c'];
const array2=['d', 'e', 'f'];
const array3=array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

上面的代码将 2 个数组 array1 和 array2 合并成了一个新的数组为 array3, 在这个新的数组中的元素就是
array2 在 array1 后面添加得到的。

如果你需要合并的数组不只有 2 个,你还有多个的话,你可以同样使用上面的方法,但是在参数中传递进多个数组就行。

concat()
concat(value0)
concat(value0, value1)
concat(value0, value1, ... , valueN)

如上面的代码,你并不需要将 concat 多次运行来进行合并,concat 这个方法允许传递多个需要合并数组为参数。

郑同学在开发我们系统的时候发现首页静态资源多次请求服务器加载缓慢。带着这个问题他去访问了淘宝,发现了淘宝一条请求里有多个Js。最后百度一下发现了Concat。Concat是淘宝开发的一个Nginx模块,可以将多个Js/Css合并成一个请求(当然在合理的情况下),这样可以减少对服务器的请求个数,达到静态资源相对较快的加载。下面我们看一下具体的操作。

一、Nginx+Concat安装

  1. 下载Nginx 和Concat

    wget http://nginx.org/download/nginx-1.6.2.tar.gz

    git clone git://github.com/alibaba/nginx-http-concat.git

    下载Concat可能需要翻墙

  2. 解压安装

    将下载好的Concat 放到某目录,本次试验放入/usr/local/src/

    tar zxvf nginx-1.6.2.tar.gz

    cd nginx-1.6.2

    ./configure

    --prefix=/usr/local/webserver/nginx

    --with-http_stub_status_module

    --with-http_ssl_module

    --add-module=/usr/local/src/nginx-http-concat

    以上加粗部分为Concat 目录,根据实际情况修改

    make && make install

  3. 测试

  1. 在 /usr/local/webserver/nginx/html 新建css 目录

    mkdir -p /usr/local/webserver/nginx/html/css

  2. 新建 a.css 和 b.css 内容分别为

    a{

color: red;

}

b{

color: blue;

}

c)修改nginx配置文件nginx.conf,新增如下内容

location /css/ {

concat on;

concat_max_files 20;

}

d)启动nginx

/usr/local/webserver/nginx/sbin/nginx

e)观察浏览器输出

浏览器输入 http://IP /css/??a.css,b.css

观察浏览器输出,出现下图说明配置成功

由上图看出,两个css已经合并成功一个css

二、配置实际项目

此步骤需要根据实际情况修改,本次试验针对 javashop 多店系统

  1. 配置 Js/Css 合并

    nginx.conf配置

    location /themes/b2b2cv2/css/ {

    root /home/www/b2b2c_1/;

    concat on;

    concat_max_files 20;

    }

    location /themes/b2b2cv2/js/ {

    root /home/www/b2b2c_1/;

    concat on;

    concat_max_files 20;

    }

    加粗部分根据实际情况修改

  2. 根据对应规则修改项目(修改完成后需要重新启动nginx)

例如:

可根据实际情况修改。

种方式是es6的语法.使用键盘1左边的那个字符 `` 拼接,

再加上js自带的模板引擎拼接字符串非常快速.这东西也没什么高深的,看几个例子就懂了.

  1. console.log(`<xml>

  2. <ToUserName><![CDATA[toUser]]></ToUserName>

  3. <FromUserName><![CDATA[fromUser]]></FromUserName>

  4. <CreateTime>12345678</CreateTime>

  5. <MsgType><![CDATA[text]]></MsgType>

  6. <Content><![CDATA[你好]]></Content>

  7. </xml>`);

  8. var str1='hello';

  9. console.log(`${str1} world`);

  10. var a=10;

  11. var b=20;

  12. console.log(`a+1=${a+1};b*2=${b*2}`);

运行结果:

----浏览器中

在nodejs中目前的版本对 ``是完全支持的,浏览器支持就各不相同了,手机端安卓支持,但苹果手机貌似不支持,至少苹果微信浏览器对这个是不支持的.

大概就以下几点功能:

换行不用加号拼接

可以用${}传入变量

可以进行数字的计算

不过呢有利有弊,据说性能上没有正常的拼接高.

意外金喜的博客:http://blog.csdn.net/zzwwjjdj1

郑重申明,发表的文章都是我自己博客原创的,这是技术分享,再被封就不在这里玩了. ╭(╯^╰)╮