ES6中箭头函数 (=＞)、三点运算符（...）this指向
一、箭头函数
基础语法：
() =>{} // ():函数 =>:必须的语法，指向代码块 {}:代码块
const realName = () => { } ;//把函数赋值给realName。
例：
const num = (k,v) => {
return k+v;
} 省略写法：
如果形参或者代码块只有一句可以简写：
const myFun = (k) => {return k+1;}
简写：
const myFun = k => k +1;
this指向：
1.全局函数下的this
普通函数与调用者有关
箭头函数的this是静态 根据上下文的this
2.对象方法里面的this
这里的this是指向实例的
const Person = {
realname:"张三",age:19,
say:function(){
console.log(this);
}
}
Person.say(); //person实例 3.对像里面的箭头函数this
这里的this指向window
const Person = { realname:"张三",age:19, say:()=>{ console.log(this); } } Person.say();//windows
4.构造函数中的this指向问题
普通的this可以改变实例
箭头函数中的this不会改变，一开始 new 的实例永远就是这个实例
function Person(realname,age){
this.realname = realname;
this.age = age;
this.say = ()=>{
console.log(this);//这个this不会 当时new 实例是谁就是谁 }
this.say1 = function(){
console.log(this);
}
}
const P1 = new Person("张三",19);
const P2 = new Person("李四",20);
P1.say.call(P2);//{realname: '张三', age: 19, say: ƒ, say1: ƒ}P1.say1.call(P1);//{realname: '张三', age: 19, say: ƒ, say1: ƒ} 简单应用：
简单的点击事件，体现this的指向
<button id="btn">未点击</button>
<script> let btnObj = document.querySelector("#btn");
let flag = false;
btnObj.addEventListener("click", function () {
flag = !flag;
if (flag) {
setTimeout(() => {
this.innerText = "已点击";//箭头this指向上下文 }, 3000)
} else {
this.innerText = "未点击"; //调用者 }
})
</script> 二、三点运算符
1.函数传不定参数，验证数组的长度。
function demo(a,...b){
console.log(a,b);//b为数组 2,3,4,5 }
demo(1,2,3,4,5);
2.与解构使用
let [a,...b] = [1,2,3,4,5,6] console.log(a,b);//1,[2,3,4,5,6]
3.与数组解构使用 函数传对象
function demo({username,password}){ console.log(username,password); } demo({username:'root',password:'123456'})
4.扩展
1.用...输出数组
const arr = [1,2,3]; console.log(...arr);
2.合并数组
const arr1 = [1,2,3]; const arr2 = [3,4,5]; const arr3 = [...arr1,...arr2]; console.log(arr3);
3.将类数组转为真正的数组
<div>1</div> <div>2</div> <div>3</div> <script> let div = document.querySelectorAll('div'); const arr = [...div]; console.log(arr); let str = '12345'; console.log([...str]); </script>
4.复制数组
let arr1 = [1,2,3]; let arr2 = [...arr1]; console.log(arr1,arr2);
5.练习
let demo=(a,b)=> a+b; const arr1 = [1,2]; const arr2 = [4,5]; console.log(demo(...arr1)); //3 console.log(demo(...arr2));//9
广电运通公司福利 101人发布
查看12道真题和解析