一、ES6基础：
1、ES6的配置：
- 在WebStorm中，打开设置，按照如下，找到JavaScript：
Languages&Frameworks--->JavaScript - 修改
JavaScript language version
ES6配置
2、let 和 const 与 var 的使用和异同：
2.1、let和const的用途：
- let 用于声明变量
- const 用于声明常量
2.2、let的说明和使用：
- let和const 的作用域只限于当前代码块
注：在ES5中，函数中才有作用域 - let 和var的区别
var没有作用域的说
let（const）有作用域的局限
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let和const</title>
<script>
{
var nameV = "张三";
let nameL = "李四";
console.log("作用域内：nameV=" + nameV);
console.log("作用域内：nameL=" + nameL);
}
console.log("作用域外：nameV=" + nameV);
console.log("作用域外：nameL=" + nameL);
</script>
</head>
<body>
</body>
</html>
let和var的异同
- 使用let声明的变量作用域不会被提升
而使用var声明的变量，作用域会被提升
示例：
{
console.log(str); //打印undefined
var strV = "张三";
}
//等价于：
{
var strV;
console.log(strV); //未赋值， 打印undefined
strV = "张三";
}
let作用域不被提升
- 在相同的作用域下不能声明相同的变量
{
var strV = "张三a";
var strV = "张三b";
console.log(strV); //输出张三b
}
{
let strL = "李四a";
let strL = "李四b";
console.log(strL); //输出张三b
}
let声明相同变量
- for循环体现let的父子作用域
而var无法体现出父子作用域
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
/*{
var nameV = "张三";
let nameL = "李四";
console.log("作用域内：nameV=" + nameV);
console.log("作用域内：nameL=" + nameL);
}
console.log("作用域外：nameV=" + nameV);
console.log("作用域外：nameL=" + nameL);
*/
/* {
console.log(str);
var strV = "张三";
}
{
var strV;
console.log(strV);
strV = "张三";
}
{
console.log(strL);
let strL = "李四";
}*/
/* {
var strV = "张三a";
var strV = "张三b";
console.log(strV); //输出张三b
}
{
let strL = "李四a";
let strL = "李四b";
console.log(strL); //输出张三b
}*/
var btns = document.querySelector("button");
for (var i = 0; i <btns.length; i++) {
btns[i].onclick = function () {
alert("点击了第" + (i+1) + "按钮"); //结果都是弹出点击了第5按钮
};
}
//闭包解决异步问题
for (var j = 0; j < btns.length; j++) {
(function (i) {
btns[i].onclick = function () {
alert("点击了第" + (i+1) + "按钮"); //结果是弹出对应点击的按钮
};
})(i);
}
for (let m = 0; m < btns.length; m++) {
btns[m].onclick = function () {
alert("点击了第" + (m+1) + "按钮"); //结果是弹出对应点击的按钮
};
}
</script>
for (let i = 0; i < 5; i++) {
console.log(i); //循环打印1 2 3 4 5
}
for (let i = 0; i < 5; i++) {
let i = 20;
console.log(i); //打印5次20
}
- const 声明的常量必须赋值：
{
const name; //编译时就已报错
name = "王五";
console.log(name);
}
{
const name = "王五";
name = "赵六";
console.log(name); //报错
}
重复赋值问题
注意：如果是定义对象常量，则对象中的属性值可以被修改（重新声明赋值）
const obj = {name: "王五"};
console.log(obj);
obj.name = "赵六";
console.log(obj);
对象常量重复赋值
3、let的解构赋值：
3.1、基本语法：
let [variable1, variable2, variable3] = [value1, value2, value3];
<script>
let name = "zs", age = 20, sex = "男";
console.log("基本用法：" + name, age, sex);
let [name1, age1, sex1] = ["zs", 20, "男"];
console.log("基本用法：" + name1, age1, sex1);
let {name2, age2, sex2, friends}
= {name2:"zs", age2:20, sex2:"男", friends:["ls", "ww", "zl"]};
console.log("对象类型：" + name2, age2, sex2, friends);
let [arr1, [arr2, [arr3, arr4]]]
= [1,
[2,
[3, 4]
]
];
console.log("数组类型：" + arr1, arr2, arr3, arr4);
let [a, b, c, d] = "ABCD";
console.log("基本数据类型：" + a, b, c, d);
</script>
打印结果
4、Symbol的使用
4.1、Symbol的作用：
- 解决对象中的命名冲突（覆盖）问题
即如果在一个对象中，使用了两个相同的属性名，后设置的值就会覆盖之前的值
如果需要同名属性，设置不同值，则可以使用Symbol
示例：
<script>
let obj = {};
obj.name = "zs";
obj.name = "ls";
obj[Symbol("name")] = "zs";
obj[Symbol("name")] = "ls";
console.log(obj); //{name: "ls", Symbol(name): "zs", Symbol(name): "ls"}
</script>
5、延展操作符
5.1、用法：
- 使用
...param可以将任何数据的整体拆解（展开）成一个一个小部分
<script>
let str = "hello world!";
let strArr = [...str];
console.log(strArr); //["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
</script>
5.2、用途：
- 在上下级（或组件间）做数据的传递【属性的批量赋值】
<span style="font-family:Arial;">var props={};
props.name='jack'
props.age=34
var component=<Component {...props}/>
</span>
<span style="font-family:'KaiTi_GB2312';">
var props={name:'jack'};
var component=<Component {...props} name={'rose'}/>
console.log(component.foo.name);//rose
</span>
- 数组中的去重
<script>
let arr1 = [1, 2, 5, "zs", 5, 2];
let set1 = new Set(arr1);
console.log(set1); //Set(4) {1, 2, 5, "zs"}
let arr2 = [...set1];
console.log(arr2); // [1, 2, 5, "zs"]
</script>
网友评论