JavaScript小技巧：合并变量赋值、&&运算符判断巧用、前端语音播报、package.json中^,~的区别、利用 new URL 解析URL

一、合并变量赋值

　　我们经常用到合并变量声明，也就是当我们声明多个同类型的变量时，可以像下面这样简写。

// 长 
let test1;
let test2 = 1;
// 短 
let test1, test2 = 1;
console.log(test1, test2) // undefined 1

　　这里讲一个合并变量赋值的小技巧，当我们处理多个变量并将不同的值分配给不同的变量时，这种方式非常有用。

let [t1, t2, t3] = [1, 2, 3];
console.log(t1,t2,t3)
// 1 2 3

二、&& 运算符巧用

　　如果仅在变量值为 true 的情况下才调用函数，则可以使用 && 运算符。

// 长 
if (test1) {
 callMethod(); 
} 
// 短 
test1 && callMethod();

三、前端语音播报

　　语音播报：在项目中需要对ajax请求返回的消息进行语音播报，str 为返回的data（可以在浏览器控制台尝试）

// 语音播报：百度
function  voiceAnnouncements(str){
    var  url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=" + encodeURI(str);
    var  n = new  Audio(url);
    n.src = url;
    n.play();
}
voiceAnnouncements('你好，今天吃的什么？')

四、package.json中 ^、~ 的区别

"dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
},

　　指定版本号：

1、指定版本。比如："vue": "2.5.2"，表示安装2.5.2的版本

2、波浪号 ~ + 指定版本。比如： "vue": "~2.5.2"，表示安装2.5.x的最新版本（不低于2.5.2），但是不安装2.6.x，也就是说安装时不改变大版本号和次要版本号

3、^ + 指定版本。比如："vue": "^2.5.2"，表示安装2.5.2及以上的版本，但是不安装3.0.0，也就是说安装时不改变大版本号。

　　简言之就是：什么都不加是指定版本；波浪号 ~ 是不改变次要版本，但升级小版本；^ 是不改变大版本，但升级次要版本。

五、利用 new URL 解析 URL

const parseURL = (url = '') => {
    const res = new URL(url);
    res.queryParams = key => {
        if (key) {
           return res.searchParams.get(key)
        };
        const params = {};
        const paramGroup = res.search.replace(/^\?/,'').split('&');
        paramGroup.forEach(param => {
            const [key, val] = param.split('=');
            params[key] = val;
        });
        return params;
    };
    return res;
};
parseURL('https://www.example.com/a/b?c=1&d=2');