目录
一、解构赋值
1、数组解构
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
(1)数组的解构赋值(字符串与其同理)
let arr = [1,2,3];
let [a,b,c] = arr;
console.log(a,b,c); //1 2 3
(2)二维数组:依然一一对应
let [a,[b,c],d] = [1,[2,3],4];
console.log(a,b,c,d); // 1 2 3 4
(3)省略变量:用逗号隔开中间省略
let [a,,c] = [1,2,3];
console.log(a,c); // 1 3
(4)合并数组的值:合并运算符可以展开数组也可合并数组
let [a,...b] = [1,'a','b','c'];
console.log(b);//数组 ['a','b','c]
console.log(...b); //a b c
(5)默认值,如果是undefined,默认值生效。
let [a, b = '2'] = [1, undefined];
// let [a, b = '2'] = [1, null]; //不生效
console.log(b); // 2
2、对象结构
let Person = { realname: "张三", age: 19 };
let { realname: myrealname, age, height = 173 } = Person; //重命名
console.log(myrealname, age, height); // 张三 19 173
3、解构应用
(1)变量值交换:交换a,b变量的值
let a = 1;
let b = 2;
[b, a] = [a, b];
console.log(a, b); //2 1
(2)结构函数
function func() {
return [1, 2, 3, 4];
}
let [a, b, c, d] = func();
console.log(a, b, c, d); //1 2 3 4
二、箭头函数
1.基础语法
语法:( ) =>{ } // ():函数 =>: 必须的语法,指向代码块
{}:代码块
Const myFun = () => { } ;//把函数赋值给myFun
原js写法:
function sum(a,b){
return a+b;
}
sum(1,2);
箭头函数写法:
const sum = (a,b)=>{
return a+b;
}
let res = sum(1,2);
console.log(res); // 3
2.省略写法
(1)简写:代码块只有一句话省略{}和return
const sum = (a,b)=> a+b;
let res = sum(1,2);
console.log(res); // 3
(2)只有一个参数 小括号可以省略
const sum = a => a+3;
let res = sum(1);
console.log(res);
3.this全局函数
(1)普通函数this 跟调用者有关
function global(){
console.log(this);
}
global();
this指向全局,所以打印为window。
(2)箭头函数的this 箭头函数this this静态 根据上下文的this
const global = ()=>{
console.log(this);
}
global();
因为没有上下文,所以这里的this依然为全局的。
4.对象方法里的this
//实例1:
const Person1 = {
realname: "张三", age: 19,
say: function () {
console.log(this); // {realname: '张三', age: 19, say: ƒ}
}
}
Person1.say();
//实例2:
const Person2 = {
realname: "张三", age: 19,
say: () => {
console.log(this);
}
}
Person2.say();
如果函数作为对象的方法调用,this指向的是这个上级对象,即调用方法的对象。所以实例一this指向realname,实例二指向window。
5.构造函数对象的this
箭头函数的this一旦定义了就不允许改变
function Person(realname, age) {
this.realname = realname;
this.age = age;
this.say = () => {
console.log(this);
}
}
const P1 = new Person("张三", 19);
P1.say();
构造函数中的this指向新创建的对象本身。
6.apply/call调用时的this
call(thisObj,Object) 调用一个对象的一个方法,以另一个对象替换当前对象。
const person1 = { name: "张三", age: 18 };
var name = "李四", age = "19";
function myfun1() {
console.log(this.name, this.age);
}
myfun1();//对象是Windows
myfun1.call(person1);//对象改变为person1
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
7.箭头函数中的this
箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this。
箭头函数中的this指向是它所定义(声明)的位置,可以简单理解成,定义箭头函数中的作用域的this指向谁,它就指向谁。
const obj = { name: '张三' }
function fn() {
console.log(this);//this 指向 是obj对象
return () => {
console.log(this);//this 指向的是箭头函数定义的位置,那么这个箭头函数定义在fn里
// 面,而这个fn指向是的obj对象,所以这个this也指向是obj对象
}
}
const resFn = fn.call(obj); //{ name: '张三'}
resFn();//{ name: '张三'}
三、练习
单击按钮2s后改变按钮文字:按钮被点击,在单击按钮改变文字:点击被取消。
<button id="btn">未点击</button>
<script>
let btnObj = document.querySelector("#btn");
let flag = false;
btnObj.addEventListener("click",function(){
flag = !flag;
if(flag){
setTimeout(()=>{
console.log(this);
this.innerText="已点击";
},1000)
}else{
this.innerText="未点击";
}
})
</script>