1、模板字符串
出现原因：旧的js字符串拼接使用符号'+'，极易使得拼接计算与数学计算混淆
使用方式：特殊符号反引号 `模板字符串`
作用：方便动态拼接字符串
动态内容拼接：使用符号 ${动态代码}，在此符号的中代码按照代码运算规则运算；但是使用该符号拼接字符串，该符号中的代码必须有返回值
特点：支持回车换行，在反引号中的字符串支持大多数符号的使用
注意：动态内容拼接符号的使用方式在后面的Vue框架工具的学习中还会使用到；该符号中可以使用任何一句话代码，拼接该代码返回的值
2、箭头函数
出现原因：旧的函数规则使用函数方法时必须使用 function 定义，比较麻烦。
解决方法：使用箭头函数
使用方法： (参数列表)=>{函数体}
简写规则：
- 如果只有一个参数 可以省略参数列表的()符号
- 如果函数体只有一句话 可以省略{}符号
- 如果函数体仅有一句话，且还是return语句 可以省略return
//原函数
function add(a,b){
return a+b;
}
//转换为箭头函数
(a,b)=>a+b
//原函数
var arr=[12,123,23,1,3,2];
arr.sort(function(a,b){return a-b});
//转换箭头函数
var arr=[12,123,23,1,3,2];
arr.sort((a,b)=>a-b);3、箭头函数与this
特点：箭头函数的this与上层this的对象保持一致
1)、如果函数外层根本没有this或者希望内外this保持一致 使用箭头函数
2)、相反，必须使用function定义函数
4、ES6对象中函数简写方式
问题？：如果用箭头函数简写对象方法，方法中的this->对象外的this，而不指当前对象本身——错误
解决: ES6中为对象的方法准备了一种专门的简写格式:
对象:{
... : ... ,
方法名(){
this->将来调用这个函数的.前的对象
}
}省略function字符
| 1. obj.fun() this->点前的obj对象 |
| 2. fun() this->默认指window |
| 3. new Fun() this->new正在创建的新对象 |
| 类型名.prototype.共有方法=function(){ ... } |
| this->将来谁调用这个函数，就指谁 |
| 4.将来调用这个函数的.前的某个子对象 |
| 5、访问器属性中的this->当前访问器属性所在的对象 |
5、let字符定义变量
问题：var声明变量的问题-变量提升-全局变量-破坏了函数的执行顺序，全局变量超出当前块级作用域
注意：js程序中作用域只有两个，分别是全局作用域，和函数作用域；函数作用域标志是{}但是注意的是该标志仅在函数后面才表示作用域，在函数中代码块中的{}并不表示作用域；也就是说与java等语言的区别是没有块级作用域
使用：let 变量名 （使用方法与var一致）
区别：
1)、使用let定义的变量不会有变量提升
2)、使用let定义变量在函数代码块的{}中不会出现提升，在外部无法访问，形成了另类的js中的块级作用域
注意:在使用for循环中，对于变量的定义不要使用let而需要使用var变量（因为let自身的特点循环中的每一次都是重新定义的let变量，所以使用var更好）
6、let的底层原理与特点
原理：let的原理相当于是底层的函数自调用
特点：
1)、不允许在定义钱提前使用该定义的变量
2)、不允许在相同的作用域中重复声明两个相同的let变量
3)、即使是在全局作用域中定义的let变量也不是全局变量
7、循环遍历方式（for of）
遍历索引数组或者遍历数组的方式
方式：
1、普通使用for循环----语法固定无法简化
2、使用for in循环----不仅遍历数组中的数字下标，还会沿原型链遍历到父对象中的可用属性----超范围
3、forEach----是数组类型原型对象中的方法，仅限于数组类型的子对象访问。类数组对象无法使用
4、for of循环----今后只要遍历索引数组或类数组对象，都可用for of循环代替其他遍历方式
使用方式：
for(var 变量of索引数组或类数组对象){
of会自动遍历索引数组或类数组对象中每个数字下标对应的元素值，自动保存
到of前的变量中。
}|
|
优点：
数组，类数组，索引数组都可以使用for of循环遍历
使用for of遍历获取的直接就是获取值
缺点：
只能获取遍历的值而无法获取下标
遍历方式只能是从头到尾遍历无法改变遍历方向与步调
总结：
8、参数增强-参数默认值
问题：传统的函数参数列表中设置参数，然后函数体中才参数进行操作放回结果值；但是用户并不全是正经用户，用户可能会传参可能不会传参，又或者传递超量参数
解决：设置参数默认值(用传参-使用用户参数，未进行传参-使用默认值,保证函数不会因为undefined报错)
使用：
定义方式：function 函数名(形参1=默认值1，形参2=默认值2，...) ;
局限性：当一个函数有多个参数，用户传参是传递该中间参数的，收尾参数并未传参，这是参数的传递在函数中是按照形参顺序传递的会出现传参错误
解决：使用对象传参方式 {给点形参：对应实参}
9、参数增强-剩余参数
问题：不正经用户超量传参；原本的function定义的函数中系统自带参数列表arguments，但是在箭头函数中在ES6规则下arguments参数列表被作废！！
解决：使用剩余参数法解决多余参数的处理
使用：在参数列表中定义一个数组名，使用剩余参数法收集多余传参，传递到数组中
定义方法：
（agru1,agru2,...argus）=>{函数体}
function 函数名（argu1,argu2,...argus）{函数体}
注意:使用时 ...argus 表示收集到数组argus，这里的 ... 表示收集符号
优点：
...argus创建的是一个纯正的数组，可以使用数组对象的所有方法
收集法创建的数组是收集多余的参数，对已经定义的形参不会抢夺收集其传递对应的实参
10、打撒数组spread
问题：一个函数有多个形参，参数传递将实参放在一个数组中传递，需要先打散数组，在对应一一传递参数
解决方法：
旧方式一，使用代码获取数组元素一一传递
旧方式二，使用apply临时更换this指向
新方式：打散数组 ...数组
使用方式：
调用函数（...传递数组）
区分收集与打散：收集符号定义在形参列表，打散符号定义在调用时参数列表
11、打散-实用小技巧
复制数组：var arr2=[...arr1]
先打散arr1，创建arr2然后收集到arr2
拼接数组 var arr3=[...arr1,1000,...arr2]
创建arr3收集打散的arr1和arr2还有指定的元素
克隆对象 var object={...obj1}
打散obj1，创建obj收集打散的值
拼接对象 var obj2={...obj1,属性:value}
12、解构destruct
问题：在大型项目中，一个对象或一个数组中的成员可能会非常多。而我们在使用时，一次可能只使用众多成员中的个别成员而已。如果每次在访问对象或数组成员时，都需要加"对象名."或"数组名[i]"就很麻烦！
作用：快速获取对象中指定的属性成员
数组解构：
var arr=[2021, 5, 6, 17, 58];
var [ , m, d]=arr;
console.log(`今天是${m}月${d}日`);|
|
对象解构：
var user={
uname:"丁丁",
age:11,
sex:1,
login(){console.log("登录...")},
logout(){console.log("注销...")},
changePwd(){console.log("修改密码...")}
}
// var {uname:uname, logout:logout}=user;
var {uname, logout}=user;
console.log(`Welcome ${uname}`);
参数解构：
|
参数解构就是之前上文讲过的的对象传参
|
13、class类
问题：旧的方式定义一个类，需要定义构造函数+原型对象，但是这种方法时分离的不符合封装要求
解决：要创建一个类型只需要使用class{}方式包含构造函数+原型对象方法
什么是：集中存储一个类型的构造函数和原型对象方法的程序结构。
个人理解：class与Java中的类基本相似，包含构造函数与对象方法
构造函数：构造函数使用constructor定义
class Student{
//构造函数
constructor(sname,sage){
this.sname=sname;
this.sage=sage;
}
//自动放入原型对象中保存
intr(){
console.log(`I'm ${this.sname}, I'm ${this.sage}`);
}
}
var lilei=new Student("Li Lei",11);14、class继承方法extends
作用：避免代码重复
特点：单线继承，每个class只能继承一个class
符号：extends（表示扩展）
使用方法：
1)、定义一个父级类class，封装所有的可以重复使用的代码
2)、定义子类class，使用extends继承父class
3)、子类可以定义自己的属性，方法；子类构造函数中使用super(参数列表)获取父类的构造函数
|
class animal{ constructor(name,age){ this.name=name; this.age=age; } paoxiao(){ console.log(`${this.name}正在咆哮`)； } } |
|
class xiaoniao extends animal{ construtor(name,age,fly){ super(name,age); this.fly=fly; } fly(){ console.log(`${this.name}正在${this.fly}`)； } } |
1045
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
