ES6（3）：变量的解构赋值、模板字符串、简化对象写法、函数参数默认值、rest参数、扩展运算符

墨蓝 2022-12-24 00:38 113阅读 0赞

### 文章目录 ###

*   *   *   *  一、变量的解构赋值
             *  二、模板字符串
             *  三、简化对象写法
             *  四、函数参数默认值
             *  五、rest参数
             *  六、扩展运算符

#### 一、变量的解构赋值 ####

**1. 数组的解构**

const F4 = ['小沈阳','刘能','赵四','宋小宝'];
    let [xiao, liu, zhao, song] = F4;
    console.log(xiao);
    console.log(liu);
    console.log(zhao);
    console.log(song);

![在这里插入图片描述][20201125201106583.png_pic_center]  
**2. 对象的解构**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]

#### 二、模板字符串 ####

**1. 声明**

let str = `我也是一个字符串哦!`;
    console.log(str, typeof str);

![在这里插入图片描述][20201125202230989.png_pic_center]  
**2. 内容中可以直接出现换行符**

let str = `<ul> <li>张三</li> <li>李四</li> <li>王五</li> </ul>`;

**3. 变量拼接**

let lovest = '张三';
    let out = `${ lovest}是他`;
    console.log(out);

![在这里插入图片描述][20201125202629475.png_pic_center]

#### 三、简化对象写法 ####

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

#### 四、函数参数默认值 ####

**1. 形参初始值。具有默认值的参数，一般位置要靠后(潜规则)**

function add(a,b,c=10) { 
      return a + b + c;
    }
    let result = add(1,2);
    console.log(result);

![在这里插入图片描述][20201125203759910.png_pic_center]

function add(a,c=10,b) { 
    	return a + b + c;
    }
    let result = add(1,2);
    console.log(result);

![在这里插入图片描述][20201125203834111.png_pic_center]  
**2. 与解构赋值结合**

function connect({ host="127.0.0.1", username,password, port}){ 
       console.log(host)
        console.log(username)
        console.log(password)
        console.log(port)
    }
    connect({ 
        host: 'atguigu.com',
        username: 'root',
        password: 'root',
        port: 3306
    })

![在这里插入图片描述][20201125203937855.png_pic_center]

#### 五、rest参数 ####

**ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments。**  
**ES5 获取实参的方式：**

function date(){ 
    	console.log(arguments);
    }
    date('a','b','c');

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]  
**rest 参数：**

function date(...args){ 
    	console.log(args);
    }
    date('a','b','c');

![在这里插入图片描述][20201125220314545.png_pic_center]  
**rest 参数必须要放到参数最后：**

function fn(a,b,...args){ 
    	console.log(a);
    	console.log(b);
    	console.log(args);
    }
    fn(1,2,3,4,5,6);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 2]

#### 六、扩展运算符 ####

**『…』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』：**

//声明一个数组 ...
    const tfboys = ['易烊千玺','王源','王俊凯'];
    // => '易烊千玺','王源','王俊凯'
    
    // 声明一个函数
    function chunwan(){ 
        console.log(arguments);
    }
    
    chunwan(...tfboys);// chunwan('易烊千玺','王源','王俊凯')

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 3]  
**如果不用扩展运算符：**

//声明一个数组 ...
    const tfboys = ['易烊千玺','王源','王俊凯'];
    
    function chunwan(){ 
        console.log(arguments);
    }
    
    chunwan(tfboys);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 4]  
**扩展运算符应用：**  
**1. 数组的合并**

const kuaizi = ['王太利','肖央'];
    const fenghuang = ['曾毅','玲花'];
    // const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
    const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
    console.log(zuixuanxiaopingguo);

![在这里插入图片描述][20201125221307726.png_pic_center]  
**2. 数组的克隆：**

const abc= ['A','B','C'];
    const cba= [...abc];// ['A','B','C']
    console.log(cba);

![在这里插入图片描述][20201125221539969.png_pic_center]

**3. 将伪数组转为真正的数组：**

const divs = document.querySelectorAll('div');
    const divArr = [...divs];
    console.log(divArr);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 5]

[20201125201106583.png_pic_center]: /images/20221120/797781ee5a344477b5089c5b79c94979.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/ac8e2453448d4bba8decb5301d825149.png
[20201125202230989.png_pic_center]: /images/20221120/72e2e7f494c346edb86cb7b2cd078285.png
[20201125202629475.png_pic_center]: /images/20221120/144b4a6f890a40dab3210b7acaa3c400.png
[20201125203759910.png_pic_center]: /images/20221120/42d014db264c44168b4e6da90678b211.png
[20201125203834111.png_pic_center]: /images/20221120/376956cf60a0456ca84f901d2155fc94.png
[20201125203937855.png_pic_center]: /images/20221120/5736f67aef124dc4b0f94b2412e82ac8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/9fe4aa2efc8f4cc1931e965e3067e6ff.png
[20201125220314545.png_pic_center]: /images/20221120/1ac94518e6424ee7baec1bd90f5e2466.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/9a4acf6da223451c8d5316b47f42eb9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/eec3d1ab2f1d45b8a39cdbd19ea83496.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/3b970edf609547f0b30cc69a645786c1.png
[20201125221307726.png_pic_center]: /images/20221120/30335d35dcf845bd92f80fca2dff15fc.png
[20201125221539969.png_pic_center]: /images/20221120/9fbf1fb51a0a4b9a96acdfe01dbabb9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/684e5eff932041c39653fae53dd261f2.png