==扩展运算符==
==2.1 rest参数==
-
在函数形参中使用，用于接收剩余参数，以数组的形式表示（替代arguments）
-
语法
function fun(a,..a){} -
代码
//1.rest参数，接收剩余参数 function fun(that,...arg){ console.log(arguments); //实参集合，箭头函数中没有arguments,必须使用rest参数 console.log(arg);//(4) [10, 20, 20, 30] 接收剩余参数，以数组的形式返回 } fun(this,10,20); fun(this,10,20,20); fun(this,10,20,20,30); -
==注意：rest参数必须放末尾==
//2.注意：rest参数必须放在末尾 //Rest parameter must be last formal function sum(...arg,that){ console.log(arg); } sum(1,2,3,this);
2.2 spread参数
-
rest参数的逆向操作，将数据展开成参数列表
-
语法
let arr = [1,2,3] ...arr ==> 1,2,3
-
代码
//1.rest参数的逆向操作，将数据展开成参数列表 let arr1 = ["A","B","C"]; console.log(...arr1); //A B C let obj = { name:"web", age:18 } console.log({...obj}); //2.使用场景：合并，拷贝，伪数组转数组 //1.合并 let arr2 = [1,2,3]; let arr3 = ["A","B","C"]; console.log([...arr2,...arr3]); //[1, 2, 3, 'A', 'B', 'C'] //2.拷贝复制(浅拷贝):拷贝的值里面有引用数据类型，会一改全改 let obj1 = { name:"web", age:18, skill:"吃饭", play:"不玩", height:170, detail:{ sex:"女" } } let obj2 = { height:180, ...obj1 }; console.log(obj2); obj1.detail.sex = "哈哈"; console.log(obj2); //一改全改 detail: {sex: '哈哈'} //3.伪数组转数组 let str = "web"; console.log([...str]); //['w', 'e', 'b']
==3.箭头函数==
-
函数
-
普通函数 function 函数(){}
-
表达式函数 ： var fun = function(){}
-
匿名函数 function (){}
-
立即执行函数：(function (){})()
-
闭包函数：function outer(){ let a = 10; return function(){a++}}
-
事件处理函数：document.onclick = function(){}
-
构造函数：function Student(){ this.name = "Web"}
-
回调函数：setTimeout(function(){})
-
递归函数：函数内部调用函数本身 function jc(n){ if(n<=1) return 1 ; return n * jc(n-1)}
-
防抖
-
节流
-
==箭头函数：作为回调函数使用==
-
3.1 箭头函数的声明及使用
-
语法
表达式函数： let 变量名 = function (){ 函数体 } 箭头函数：let 变量名 = ()=>{ 函数体 } -
代码
//1.声明 let fun = ()=>{ console.log("我是箭头函数"); } //调用 fun(); //我是箭头函数 //2.当箭头函数的函数体只有一行代码，可以省略{} let eat = () => console.log("饿了，不吃饭！"); eat(); //饿了，不吃饭！ eat(); //饿了，不吃饭！ //3.箭头函数一般是作为回调函数使用 setTimeout(()=>{ console.log("吃饭倒计时"); },1000)
3.2 箭头函数的参数及返回值（实操）
3.2.1 参数
-
多个参数--个数能确定,用逗号隔开
let sum = (a,b)=>{ console.log(a+b); } sum(10,20)//30 -
1个参数，可以省略()
//2.1个参数，可以省略() let pow = n => { console.log(n*n); } pow(10);// 1000 -
参数个数不确定,箭头函数没有arguments,使用rest参数
//3.参数个数不确定,箭头函数没有arguments,使用rest参数 let getMax = (...args)=>{ // console.log(arguments); //arguments is not defined console.log(args); //(3) [10, 20, 30] } getMax(10,20,30); -
参数默认值
//4.参数默认值 function fun(n=10){ //参数默认值n=10, 没有传参，就使用默认值 console.log(n.toString()); } fun(1000); //1000 let jt = (n="")=>{ console.log(n.toString()); } jt(); //""
3.2.2 返回值
-
返回值
//1.返回值return,一次只能返回一个值，结束函数的执行 let sum = (a,b)=>{ return a + b; console.log("我是一个和"); } let s = sum(10,20); console.log(s); //30 //2.如果函数体只有一行，并且是return，可以省略{}和return let pow = n => n * n; console.log(pow(4)); //16 //3.如果返回是对象，但是省略了return 会报错,加（）提升优先级 let getO = ()=> ({ name:"长城",pserson:"很多"})
==3.3 箭头函数的特点(注意点)==
==3.3 箭头函数注意点==
==3.3.1 箭头函数没有arguments==
-
箭头函数没有arguments
//1.箭头函数没有arguments let a = (...arg)=>{ // console.log(arguments); // arguments is not defined console.log(arg); //用扩展运算符代替arguments } a();
==3.3.2 没有自己的this==
-
箭头函数没有自己的this--取决于箭头函数定义时所处的环境
//2.箭头函数没有自己的this--取决于箭头函数定义时所处的环境 let fun1 = ()=>{ console.log(this); } fun1();//Window let oBtn = document.getElementsByTagName("button")[0]; oBtn.onclick = ()=>{ // console.log(this); //window let inner = ()=>{ console.log(this); //window }; inner(); } oBtn.onclick = function (){ console.log(this); //Btn let inner = ()=>{ console.log(this); //Btn }; inner(); } //箭头函数一般作为回调函数使用 function Dog(){ this.wow = function(){ console.log("wow"); }, this.yelp = function(){ this.wow(); } } function MadDog(){ Dog.call(this);//冒充继承 this.yelp = function(){ // this--->MadDog setInterval(()=>{ this.wow(); },500) } } let md = new MadDog(); md.yelp();
==3.3.3 不能作为构造函数==
-
箭头函数不能作为构造函数
//3.箭头函数不能作为构造函数 let Student = ()=>{ this.name = "张帅"; } // new Student(); //Student is not a constructor
==3.3.4 不建议作为对象方法==
-
箭头函数不建议作为对象的方法
//4.箭头函数不建议作为对象的方法 var name = "妲己"; let obj = { name:"小红", getName:()=>{ console.log(this); //window console.log(this.name); //妲己 } } obj.getName();
4.class
-
编程思想：
-
面向过程：注重过程，考虑每一个操作步骤
-
面向对象：注重结果，考虑这个功能由谁完成
-
-
class和对象关系
-
现实中现有对象，根据不同对象相似的特性划为类
-
程序中，先有类，使用类去实例化对象，之前都是使用构造函数创建对象的
-
es5构造函数有些问题：方法必须在原型上，使用function创建对象对于其他语言来说比较另类
-
4.1 class创建对象
-
基本语法：class 类名(首字母大写){ 定义属性和方法 }
//1.1 定义类 class Person { //定义属性 name = "蔡徐坤"; age = 25; //定义方法 skill=function(){ console.log("唱跳rap,篮球"); } } //1.2 实例化对象 let p1 = new Person(); console.log(p1); //方法和属性都在实例本身 console.log(typeof p1,Object.prototype.toString.call(p1),p1 instanceof Person); -
完整的写法
//1.3 定义类 class Dog{ //构造函数--构造对象 constructor(name,age){ //添加属性和方法 this.name = name; this.age = age; this.skill = function(){ console.log("wow"); } } //constructor外面定义的方法就在原型上 study(){ console.log("跨火球"); } } let d1 = new Dog("小黑",3); console.log(d1); //Dog {name: '小黑', age: 3, skill: ƒ} let d2 = new Dog("大黄",3); console.log(d2);
4.2 静态属性和方法
-
实例属性和方法：实例(对象，私有)
-
静态属性和方法：是公共的（属于类，属于函数）.不属于实例对象，所以实例对象访问不到
calss 类名{ static 属性名 = 值 static 方法名 = function(){} } -
案例
//1.定义类 class Student{ //静态属性和方法 static home = "今天2个作业"; static gohomework = function(){ console.log("开始写作业"); console.log("写完了"); } //构造函数定义属性和方法 constructor(name,age){ this.name = name; this.age = age; } //在原型上添加方法 study(){ console.log("好好学习，卷死他们！"); } } let s = new Student("周星驰",7); console.log(s); //静态属性和方法：公共的属于类，属于函数 console.log(Student.home); //今天2个作业 Student.gohomework(); console.log(s.home); //实例获取不到
==注意：静态方法属于类，只能通过类.方法，实例对象访问不了==
//静态属性和方法：公共的属于类，属于函数 console.log(Student.home); //今天2个作业 Student.gohomework(); console.log(s.home); //实例获取不到
4.3 class的继承
-
Class 可以通过
extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多 -
基础继承 ==class 子类 extends 父类 { }==
//1.创建父类 class Student{ name = "小明"; skill = function(){ console.log("滚出去"); } } //2.基础继承 class 子类 extends 父类 {} class BabyStudent extends Student { dance = function(){ console.log("唱跳rap"); } } let baby = new BabyStudent(); console.log(baby); -
完整继承
//1.创建父类 class Student { static a = 10; constructor(name, age) { this.name = name; this.age = age; this.skill = function () { console.log("天天学习"); } } } //2.子类继承 class BabyStudent extends Student { constructor(name, age) { //继承的子类没有this，必须通过super调用父类构造函数，得到this //第一行代码，一定是先调用super调用父类的构造函数 super(name, age); //先调用super得到this，然后才能使用 this.height = 60; } } let s1 = new BabyStudent("小软", 5); console.log(s1.a);
5.iterator迭代器(了解)
-
for,while,for-in,do-while,map,forEach .es6觉得提供的遍历方式太混乱
-
为各种不同的数据结构提供统一的访问（循环）机制
-
只要拥有这个Iterator遍历器, 就都可以使用for...of进行遍历
-
默认有iterator遍历器的数据有：Array，String，HTMLCollection ,nodeList,Araguments,Map,Set
5.1 for-of
-
代码
//1.默认有inerator的数据：Array，String，HTMLCollection ,nodeList,Araguments,Map,Set //只要有inerator就可以使用for-of循环 //2.for-of语法 for(let value of 循环对象){} //1.遍历数组 let arr = ["a","b","C"]; for(let value of arr){ console.log(value);//a b c } //2.遍历字符串 let str = "web0418"; for(let s of str){ console.log(s); //w e b 0 4 1 8 } //3.遍历set let set = new Set([1,2,3,4,3,1,1,2,3,4,2,3]); for(let value of set){ console.log(value); //1,2,3,4 } //4.遍历对象 let obj = { name:"web", age:18, height:180 } console.log(obj); for(let value of obj){ //报错 console.log(value); }
5.2 iterator执行过程
-
执行过程
//1.能通过for-of进行遍历，原型上一定有一个Symbol.iterator的方法 let arr = [1,2,3]; console.log(arr); //Symbol(Symbol.iterator): ƒ values() //2.遍历的时候就会调用Symbol.iterator方法，返回一个对象 let ite = arr[Symbol.iterator](); console.log(ite); //Array Iterator {} //3.这个对象中有一个next方法，每一次调用这个next方法会返回对象 {value:"a",done:false} console.log(ite.next()); //{value: 1, done: false} console.log(ite.next()); //{value: 2, done: false} console.log(ite.next()); //{value: 3, done: false} console.log(ite.next()); //{value: undefined, done: true}
5.3 给对象部署iterator
-
部署
let obj = { name: "web", age: 18, height: 180 } //1.给对象的原型添加Symbol.iterator的方法 obj[Symbol.iterator] = function () { let arr = Object.values(obj); //获取到对象所有的value，以数组的形式返回 let index = 0; //2.调用Symbol.iterator，返回一个对象 return { //3.返回的对象里面有一个next方法 next() { if (index >= arr.length) { return { value: arr[index++], done: true } } else { return { value: arr[index++], done: false } } } } } //2.验证是否部署成功 let ite = obj[Symbol.iterator](); console.log(ite); //{next: ƒ} console.log(ite.next()); //{value: 'web', done: false} console.log(ite.next()); //{value: 18, done: false} console.log(ite.next()); //{value: 180, done: false} console.log(ite.next()); //{value: undefined, done: true} //3.for-of for(let value of obj){ console.log(value); }
1480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
