文章目录
参考视频：李立超b站react教程
一、变量声明方式
优先使用const，其次使用let，最好不要用var
- var：没有块级作用域
- let：有块级作用域
- const：有块级作用域，但只能赋值一次
二、解构赋值
1.数组的解构
let a,b;
let arr = ['name1','name2'];
//传统方式：
a = arr[0];b = arr[1];
//解构方式：
[a,b] = arr;
//直接解构：
const [c,d] = arr;
//跳过不需要的值
let arr2 = ['a','b','c','d'];
const [a,b,,d] = arr2;
//展开符号,cd会是一个数组，包含了剩下的所有元素
const [a,b,...cd] = arr2;
2.对象的解构
const obj = {
name:"name1",
age:18,
gender:'male'
};
let a,b,c;
//传统方式
a = obj.name;b = obj.age;c = obj.gender;
//解构方式，加括号是为了防止{}开头被编译器认为是一个对象
({
name:a,age:b,gender:c} = obj);
//将变量声明成属性名
const {
name,age,gender} = obj;
三、展开
1.展开数组
function fn(a,b,c){
return a+b+c;
}
const arr = [1,2,3];
//计算arr的和
let result = fn(arr[0],arr[1],arr[2]);
//展开
let result = fn(...arr);
const arr2 = [0,...arr,4,5,6];
2.展开对象
const obj = {
name:"name1",
age:18,
gender:'male'
};
const obj2 = {
...abj,//展开赋值
address:"hhh"
};
四、箭头函数
1.基本语法
//一般定义
const fn = function(){
}
//箭头函数
const fn = () => {
}
2.特性
- 传统函数有两个隐藏参数
- arguments：一个类数组对象，用于保存函数的实参
- this
- 箭头函数没有arguments，可以用**…args**的方式传参
- 箭头函数没有自己的this，它的this永远是外层作用域的this
- 箭头函数无法作为构造函数
能用箭头函数的时候一定要使用箭头函数！
五、模块化
1.export(导出)
-
导出用来决定一个模块中哪些内容可以被外部查看
-
默认导出 :一个模块中只有一个默认导出
export default xxx; -
命名导出
export const xx = 10; export { xx,yy,zz};
-
const a = 10;
export const b = 20;
const c = 30;
const obj = {
name:"name1";
};
//默认导出
export default a;
//匿名导出
export {
c,obj};
2.import(导入)
-
导入用来将外部模块中的内容导入到当前模块中
-
默认情况下，script标签不能使用import语句，必须设置type属性为module
-
默认导入：由于只有一个默认导出，所以变量名可以自主指定
import a from 'xx.js'; -
命名导入：变量名必须和模块中的变量名一致，或者用as改名
import { b,c as cc} from 'xx.js';
-
六、类
1.基本语法
class Person{
name = "name1";
age = 18;
//实例方法
run(){
console.log("我在跑路");
}
//构造函数
constructor(name,age){
this.name = name;
this.age = age;
}
}
const person = new Person("name2",19);
2.this指针
- 类中的所有代码都会再严格模式下执行
- 严格模式下函数的this不是window，而是undefined
- 在类中，方法的this不是固定的，以方法形式调用时，this就是当前的实例；若以函数形式调用，this是undefined
- 若类中的方法是以箭头函数定义的，则方法中的this恒为当前实例，不会改变
3.类的继承
class Animal{
constructor(name,age){
this.name = name;
this.age = age;
}
say(){
}
}
class Dog extends Animal{
constructor(name,age,color){
//加新的属性
super(name,age);
this.color = color;
}
say = ()=>{
//重写父类方法
console.log("汪汪汪")
};
}
4.静态属性
class Dog{
static name = "hhh";
}
console.log(Dog.name);
七、常用数组方法
1.map
可以根据原有数组返回一个新数组，需要一个回调函数作为参数
回调函数中有三个参数：
- 第一个为当前元素
- 第二个为当前元素的索引
- 第三个为当前数组
const arrs = [1,2,3,4,5];
let result = arrs.map((arr)=>{
return arr+2;
});
2.filter
可以从一个数组中获得符合条件的元素
- 返回true则保留元素
- 返回false则不保留元素
const arrs = [1,2,3,4,5];
let result = arrs.filter((arr)=>{
//获得数组中的偶数
return arr%2 === 0;
})
3.find
获得满足条件的第一个符合条件的元素
const arrs = [1,2,3,4,5];
let result = arrs.find((arr)=>{
//获得数组中第一个的偶数
return arr%2 === 0;
})
4.reduce
可以用来合并数组中的元素，合并不一定指算数上的加法
const arrs = [1,2,3,4,5];
let result = arrs.reduce((pre,cur)=>{
console.log(pre,cur);
return pre+"-"+cur;
});
console.log(result);