ES6的系列文章目录
文章目录
一、变量的结构赋值
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、解构赋值、模板字符串、扩展运算符、箭头函数。