声明变量得方式
三种:var,let,const
var 声明得变量具有全局作用,相当于cpp中得全局变量,只有通过闭包解决
let声明得变量具有代码块得作用,能用let绝对不用var
const:声明常量
三种声明方式中,第一优先使用推荐是const,如果希望变量被改变则使用let,最差使用var,并且var得变量会被提升,提升到开头!!!!
解构赋值
就是数组得赋值!!!
let arr=[1,2,3,4];
let a,b,d;
更简单的 const[a,b]=arr
等价于 a=arr[0],b=arr[1]
加了个逗号直接跳过3接收4
[a,b,,d]=arr;
加三个点就是把剩余参数全部接收到c中
[a,b,...c]=arr;
结构体也可以这种方式解构
let a,b;
const obj={
name:1
age:2
}
({name:a,age:b}=obj);
const{name,age}=obj;如果属性名和变量名一致
那么可以只写一个就不需要写成const{name:name,age:age}=obj了
利用数组结构交换两个变量位置
a=10
b=20
[a,b]=[b,a];相当于解构一个数组!!!!!!!!!!!
展开
展开数组
function fn(a,b,c){
return a+b+c;
}
const arr=[1,2,3]
let ans=fn(arr)这么写是错误的
let ans=fn(...arr)这么才是对的,多的数据就不会用后面的
let arr=[1,2,3,4]
arr2=[1,2,3,...arr,5,6,7]这里arr2就是1,2,3,1,2,3,4,5,6,7
展开对象
let obj1 ={ }
const obj2={...obj1,age:20}
如果重名的话,前面的就会被后面的覆盖!!!!!!!!!!!!!
展开就相当于浅赋值
箭头函数
箭头函数
只有一个参数的箭头函数
const 名字 = 参数 =>返回值;
如果没有参数或者多个参数,需要使用()括起来
const 名字 = ()=>返回值
const 名字 = (a,b,c)=>返回值
注意事项:
1.箭头后面的返回值必须是一个表达式(有返回值的语句),log的返回值是undefine
2.返回值是对象必须要加(),({name:1,age:2})
3.如果需要再箭头函数中定义复杂的函数,只需要再=>后面跟一个{}
const fun=(a,b)=>{
...;
...;
...;
return ...;
};
箭头函数和普通函数区别
首先我们要知道arguments是用来保存函数的实参的
1.箭头函数里面没有arguements!!!!!!!!!!!!!!!
为什么没有,因为这个东西不是一个数组,而是一个类数组对象,所以数组的方法我们不能去调!
function fu(){
console.log(arguements.length)
}
这里不传参数进去就是0
function fu()=()=>{
console.log(arguements.length)
};
这么写会报错所以我们引出了第一点!!!
如果我们需要我们的实参怎么办?这个叫剩余参数
function fu(...a){
console.log(a.length)
}
function fu()=(...a)=>{
console.log(a.length)
};
----------------------------------------------------------------------------------
2.箭头函数里面没有this,没有自己的this,他的this总是外层作用域的this
obj={
hello:()=>{
console.log(this)
}
}
obj.hello()
这里我们hello的上层obj里面没有this,所以this还是windows(全局this)
obj2={
hello:function(){
const test=()=>{
console.log(this);
}
}
}
obj2.hello();
这里的this就有用了,就是obj2
3.箭头函数的this无法被修改
4.箭头函数无法作为构造函数用,没法new()
模块化
模块化分为两部分
1.export 暴露,导出:用来一个模块哪些东西可以被外部看见
2.import 引入,就是将外面的东西导入进去
作为一个模块不希望完全被暴露,
作为导入方我也不希望不需要的代码
导出
1.默认导出(注意一个模块中只有一个默认导出)export default xxxx;//将变量xxxx作为默认导出
2.命名导出:直接命名变量的时候指出我们是导出的属性
export const b=20;
export const c=30;
obj={
age=1;
}
function fn(){
return 1;
}
export{obj,fu};这也算命名导出
导入
1.默认导入import,import xxxx from 模块的路径’./js’,这里的xxxx可以自己起,因为只有一个默认导出,所以就认定是那一个了
2.在网页导入模块的时候,模块的路径必须写完整(./,…/开头,扩展名也得写上)
<script>
//导入上面的xxxx
import xxxx from 模块的路径'./js'
</script>
这么是错误的,因为在<script>中不能使用import,
如果需要使用那么我们必须设置<script>的信息改成<script type="moudle">
3.命名导入的名字就必须为固定的,不能像默认导出一样自定义名字
import {b as d,c,obj,fn} from '路径'
这里的名字不能重命名,模块里面是啥名字这里就该啥子名字,可以用as重命名为d,重命名后我们的b就会失效
类
类是对象的模板,类中定义了对象中包含了哪些方法和熟悉感,也可以直接通过function来定义类,到那时两种定义方式并不完全通用
class person{
age= 10;
name='孙悟空'
//实例方法
run(){
console.log("11111");
}
}
const per1 = new person()
const per2 = new person()
但是per1===per2是false
里面写构造函数
class person(){
age;
name;
constructor(name,age){
console.log("new函数实际上就是调用constructor函数!!!!!!!!!!!!")
this.name=name;
this.age=age;
}
用构造函数来赋值!!!!就是动态赋值,类似于cpp
}
类中的this
1.谁调用方法this就是谁
2.我们通过函数来调用类中函数就是undefine!!!为什么不是这个类却是undefine,类中所有代码都会在严格模式下执行,严格模式下的其中一个特点就不再是window而是undefine,所以类中this不是固定的!!!!!!!!!!!!!
在有些场景下我们希望this是固定的,不会因为调用方式不同而改变
2.1在构造函数中this.fn=this.fn.bind(this),this就写死了
2.2用箭头函数!!!!
如果有上诉需求用箭头函数定义
fn=()=>{
};
如果类中方法以箭头函数定义,则this永远是这个类,永远不会变
继承
1.继承是 class子 extends 父{ …}
2.子类可以重写父类函数
3.子类的构造函数怎么写?
class an{
name;
age;
construtir(name,age){
this.name=name;
this.age=age;
}
}
class s extends an{
len;
construtir(name,age,len){
super(name,age);//调用父类构造函数
this.len=len;
}
}
当子类重写父类的构造函数的时候,必须在子类构造函数中第一时间调用父类构造函数,否则会报错
类的静态属性和方法
1.直接通过类调用的属性和方法叫做静态属性和静态方法(类属性,类方法)
class per{
name
}
per.name
会报错因为那是实例属性
class per{
static name
}
per.name
这样就不会报错了
2.在静态方法里,它的this就是class本身而不是实例本身
数组方法补充
map,需要一个回调函数作为参数,回调函数的返回值会成为新数组中的元素
const arr=[1,2,3,4,5]
map根据原有数组返回一个新数组
arr.map(()=>10);
map里面传函数
arr就是[10,10,10,10,10]
用处,所有数字+返回值,这里item相当于它的值,其实还有第二个参数是index,第三个参数是数组本身
arr.map((item)=>item+10);
[11,12,13,14,15]
用法:
reset= arr.map(item=>"<li>"+item+"</li>")
filter过滤
const arr = [1,23,4,5,6,7,8]
res = arr.filter(item=>item%2===0)
根据回调函数来决定是否保留元素,true保留,false不保留。这里就是找出是偶数的数
find函数,找第一个满足条件的值
和filter的用法一样。find的作用是返回第一个符合条件的数字!!!!!!!!!!!!!!!
reduce,将元素合并到一起
第三个参数是初始值!!!!!!!!!!!!,可以指定初始值
arr = [1,3,4,1,6,78]
arr.reduce((prev,curr)=>prev+curr)