目录
一、箭头函数
基础语法：
省略写法：
this指向：
1.全局函数下的this
2.对象方法里面的this
3.对像里面的箭头函数this
4.构造函数中的this指向问题
简单应用：
二、三点运算符
1.函数传不定参数，验证数组的长度。
2.与解构使用
3.与数组解构使用 函数传对象
4.扩展
1.用...输出数组
2.合并数组
3.将类数组转为真正的数组
4.复制数组
5.练习
一、箭头函数
基础语法：
() =>{} // ():函数 =>:必须的语法，指向代码块 {}:代码块
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
