ES6相关知识学习
1. let和const关键字
1.1 let关键字
作用:与var类似,用于声明一个变量
特点 在块作用域内有效,不能重复声明,不会预处理,不存在变量提升
应用:循环遍历加监听
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script type="text/javascript">
let name = 'zhangsan';
let btns = document.getElementsByTagName('button');
for(let i = 0; i<btns.length;i++){
let btn = btns[i];
btn.onclick = function(){
console.log(i);
}
}
</script>
</body>
1.2 const关键字
作用:定义一个常量。
特点:不能被修改,其他特点和let一样,用于保存不变的数据。
const KEY = "Hello";
2. 变量的解构赋值
从对象或数组中提取数据,并赋值给变量(多个)。
对象的解构赋值: let {n,a} = {n:’tom’,a: 12};
数组的解构赋值: let{a,b} = {1,’zhangsan’};
变量的解构赋值多用于给多个形参赋值。
<script type="text/javascript">
let obj = {name: 'zhangsan',age: 52};
//let {name} = obj;//对象的结构赋值,只取一个属性值
//console.log(name);
let {name,age} = obj;//对象的结构赋值
console.log(name,age);
let arr = [1,3,8,'zhangsan',true];
//let [a,b] = arr;//a,b可以随便写,代表获取数组中下标为0和1的值。
let [,,a,b] = arr//代表获取下标为2和3的值
console.log(a,b)
//不采用解构赋值
function test1(obj){
console.log(obj.name+"===>"+obj.age);
}
//给多个形参赋值,采用解构赋值
function test2({name,age}){
console.log(obj.name+"===>"+obj.age);
}
test1(obj);
test2(obj);
</script>
3. 模板字符串
简化字符串的拼接,模板字符串必须使用“包含,注意这个符号不是单引号,是tab键上面的那个键,变化的部分采用${xxx}来定义。
<script type="text/javascript">
//普通的字符串拼接
let obj = {name: 'zhangsan', age: 56,sex: '男'};
let str = '我的名字是'+obj.name+',性别:'+obj.sex+',我今年'+obj.age+'岁。'
console.log(str)
//使用模板字符串
let str1 = `我的名字是${obj.name},性别:${obj.sex},我今年${obj.age}岁。`
console.log(str1);
</script>
4. 对象的简写方式
省略同名的属性值,省略方法的function,
<script type="text/javascript">
//普通的写法,对象中的属性值和属性名称一样
let name = 'zhangsan';
let age = 56;
let obj = {
name:name,
age: age,
getName:function(){
return this.name;
}
}
console.log(obj);
console.log(obj.getName());
//ES6的对象简写方式写法
let username = '张三';
let userage = 56;
let obj1 = {
username,//同名的属性可以省略不写
userage,//同名的属性可以省略不写
getName(){//可以省略函数的function
return this.username;
}
}
console.log(obj1)
console.log(obj1.getName());
</script>
5. 箭头函数
箭头函数没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候处在的对象就是它的this。
箭头函数的this看外层是否有函数,如果有,外层函数的this就是内部箭头函数的 this,没有则this是window。
<body>
<button id="btn1">测试按钮1</button>
<button id="btn2">测试按钮1</button>
<script type="text/javascript">
let test1 = function(){
console.log('我是普通函数');
}
let test2 = () => console.log('我是箭头函数')
test2();
//形参情况
//1.没有形参的情况下
let test3 = () => console.log('我是没有形参的箭头函数');
test3();
//2.只有一个形参的情况下,可以省略()
let test4 = (a) => console.log('我是有一个形参的箭头函数'+a);
let test5 = a => console.log('我是有一个形参的箭头函数'+a);
test4('zhangsan');
test5('zhangsan');
//3.两个或者两个以上的形参
let test6 = (x,y) => console.log('我是有两个参数的箭头函数'+x+"==="+y);
test6(45,85);
//函数体的情况
//1.函数体只有一条语句或者表达式的时候,可以省略大括号,会自动返回执行结果。
let test7 = (x,y) => x+y;
console.log(test7(54,54));//打印结果为108
//2.函数体不止一条语句或者函数体的情况,不可以省略大括号
let test8 = (x,y) =>{
console.log(x,y);
return x+y;
}
console.log(test8(54,54));
//箭头函数的this,结果为obj
let btn1 = document.getElementById('btn1');
let obj = {
name:'箭头函数',
getName(){
btn1.onclick =() =>{
console.log(this)
}
}
}
obj.getName();
//箭头函数的外面还是箭头函数,this就是window
let btn2 = document.getElementById('btn2');
let obj1 = {
name:'箭头函数',
getName:()=>{
btn2.onclick =() =>{
console.log(this)
}
}
}
obj1.getName();
</script>
</body>
6. 三点运算符
<script type="text/javascript">
//...运算符只能放在最后,前面可以使用占位符。
function test (a,...value){
console.log(a)//输出结果为2
console.log(value);
value.forEach(function(item,index){
console.log(item,index);
})
}
test(2,54,87,76)
let arr = [1,6];
let arr2 = [2,3,4,5];
arr = [1,...arr2,6];
console.log(arr);
console.log(...arr);//直接遍历arr数组,拿到值。
</script>
输出结果为:
7. 形参默认值
<script type="text/javascript">
//定义一个点的坐标的构造函数
function Point(x = 0,y = 5){//使用形参默认值
this.x = x;
this.y = y;
}
let point = new Point(23,35);
console.log(point);
let point1 = new Point();//new一个构造函数的时候,如果没有传参数,就使用形参默认值
console.log(point1);
</script>
输出结果为;
8. promise对象原理
Promise对象,代表了未来某个将要发生的事件(通常是一个异步操作);
有了Promise对象。我们可以将异步操作以同步的流程表达出来,避免了层层嵌套的回调函数,在ES6中,Promise是一个构造函数,用来生成promise实例。
8.1 使用步骤:
<script type="text/javascript">
//创建promise对象
let promise = new Promise((resolve,reject) =>{
//初始化promise的状态为pending初始化状态
console.log('1111')
//执行异步操作,通常是发送AJAX请求,或者开启定时器
setTimeout(()=>{
console.log('3333');
//根据异步任务的返回结果去修改promise的状态
//异步任务执行成功,
//通常异步操作得到的数据是在回调函数中操作,就涉及到如何把数据传到回调函数中,使用形参注入的方式
resolve('成功的数据');//自动修改promise的状态为fullfilled状态,就会调用成功的回调函数
//reject();//自动修改promise的状态为reject状态
},2000)
})
console.log('222');
promise
.then((data)=>{//成功的回调函数
console.log('成功的回调函数被调用!!',data)
},(error)=>{//失败的成功回调函数
console.log('失败的回调函数被调用!!')
})
</script>
8.2 promise的三种状态
pending:初始化状态,fullfilled:成功状态,rejected:失败状态
9. Symbol属性
- ES6中添加一种原始的数据类型symbol(已经存在的原始数据类型有:string,number,boolean,null,underfined,对象)
- symbol属性值对应的值是唯一的,解决了命名冲突的问题。
- symbol值不能与其他数据进行计算,包括字符串拼接。
- for in,for of遍历时不会遍历symbol属性。
Symb