es6（二）——常用es6说明（解构赋值、模板字符串、扩展运算符、箭头函数）

前端张三

已于 2023-10-18 15:39:54 修改

阅读量748

点赞数 1

分类专栏： es6 文章标签： es6 前端 ecmascript

于 2023-10-11 16:10:15 首次发布

本文链接：https://blog.csdn.net/weixin_44784401/article/details/133713871

版权

es6 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

ES6的系列文章目录

es6（一）——var和let和const的区别

文章目录

ES6的系列文章目录
一、变量的结构赋值
- 1.数组的结构赋值
- 2.对象的结构赋值
二、模板字符串
三、扩展运算符
- 1.字符串的使用
- 2.数组的使用
四、箭头函数
总结

一、变量的结构赋值

1.数组的结构赋值

const listArr = ['张三', 18, '男', '地球人'];
const [name, age, sex, address] = listArr
console.log(name); // 张三
console.log(age); // 18
console.log(sex); // 男
console.log(address); // 地球人

在这里插入图片描述

2.对象的结构赋值

// 2：对象的解构赋值
const listobj = {
    name: '张三', 
    age: 18, 
    sex: '男', 
    address: '地球人'
 };
 const {name, age, sex, address} = listobj
 console.log(name); // 张三
 console.log(age); // 18
 console.log(sex); // 男
 console.log(address); // 地球人

在这里插入图片描述

二、模板字符串

const userName = '张三';
const age = 18;
 console.log('我是'+ userName + '，我今年' + age + '岁了。'); // es5
 console.log(`我是${userName}，我今年${age}岁了。`); // es6的模板字符串

在这里插入图片描述

三、扩展运算符

1.字符串的使用

const userName = 'zhagnsan';
console.log(...userName); // z h a g n s a n

在这里插入图片描述

2.数组的使用

<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        const userName = ['张三', '李四', '王五'];
        const userName2 = ['赵六', '沈七'];
        
        // 1： 数组的合并
        const hebing = [...userName, ...userName2];
        console.log(hebing);

        // 2: 数组的克隆
        const kelong = [...hebing];
        console.log(kelong);

        // 3: 将伪数组 (arguments) 转成真数组
        const getDivList = document.querySelectorAll('div');
        const divList = [...getDivList];
        console.log(divList);
    </script>
</body>

在这里插入图片描述

四、箭头函数

1.普通函数的定义

（1）有关键字function，必须小写。
（2）有函数名：一遍由用户自定义，最好见名知意。
（3）函数的参数：'()'不能省略，'参数'是可选的（函数可以有参数，也可以没有参数）。
（4）'{}'：不能省略，表示函数的控制范围。
（5）有return ，默认可以不写。

2.箭头函数的定义

在普通函数的基础上，省去了关键字function、采用箭头=>来定义函数、同时箭头在括号前面的函数叫做箭头函数。

3.箭头函数的注意点

(1) this指向：是静态的，始终指向函数声明的作用域this的值

可以通过bing、call、apple等方法来改变this指向。（也可以简单理解为箭头函数的上一级作用域，最高为windows）

(2) 箭头函数不能作为构造函数实例化对象

 // 注意：构造函数大写
let User = (name, age)=>{
     this.name = name;
     this.age = age;
 }

 let u1 = new User();
 console.log(u1)

在这里插入图片描述

(3) 不能使用arguments变量

const fn = () =>{
 console.log(arguments); // 报错
}
fn();

在这里插入图片描述

(4) 箭头函数的简写

当有且只有一个函数的时候，可以省略括号()；
当有且只有一行代码体的时候，可以省略大括号{}；如下所示：

let u1 = (name) => {
   console.log(name);
}
u1('张三'); 

let u2 = name => console.log(name);
u2('李四');

在这里插入图片描述

总结

结合es6（一）和es6（二）我们可以知道，常用的es6有const和let、解构赋值、模板字符串、扩展运算符、箭头函数。

前端张三

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
es6（二）——常用es6说明（解构赋值、模板字符串、扩展运算符、箭头函数）

es6（二）——常用es6说明（解构赋值、模板字符串、扩展运算符、箭头函数））
复制链接

扫一扫

专栏目录