01学习React记录——回顾JS基础知识

原创已于 2024-07-19 10:01:39 修改 · 164 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习

于 2024-07-15 17:41:11 首次发布

React学习专栏收录该内容

3 篇文章

订阅专栏

基础知识回顾

01、变量声明

1、const

优先使用，具有块作用域，只能赋值一次。

在声明一些函数，对象的时候就可以用const，避免被意外修改。

2、let

希望变量被改变就用let

3、var（基本不用）

总结：第一优先使用const，如果希望变量被改变就用let，至于var最好不要在代码中出现。

02、解构赋值

适用场景：

1、将数组里的元素赋值给对应的变量（最常用）

let arr = ["sam","hello"]
cosnt [a,b] = arr
//声明完 a,b 直接用arr数组进行赋值
//console.log ------>  a="sam", b="hello"

2、将对象里的元素赋值给对应的变量

let obj = {
    name:"jason",
    age:"20",
    gender:"male"
}

 
const {name:name,age:age,gender:gender} = obj  //声明的同时进行赋值
const {name,age,gender} = obj    // 当变量名和属性名一致的时候，可以只写一个。

3、变换数组中值的位置

想要调整变量值的位置，使用数组解构来交换变量值

let a = 10；
    b = 20；
    
[a,b] = [b,a]

console.log ----->  a = 20, b =10

03、数值展开

适用场景：

1、将数组中的值展开作为参数

const arr = [3,3,3]

function fn(a,b,c) {
   return a+b+c;
}

const sum  = fn(...arr)


console.log ----> 9

2、在数组中展开数组

const arr1 = [2,3,4]

const arr2 = [1,...arr1,5,6]

console.log ----> [1,2,3,4,5,6]

04、类

通过class创建

class person{
    
    通过new创建对象的时候，实际上就是调用构造函数constructor()
    constructor(name,age,gender){

    this.name = name; //this.name是person类的name  后面的name是形参name
    this.age = age;
    this.gender =gender;
    }
}

const p1 = new person("boy","3","male")

05、this

函数中this，在不使用严格模式的情况下是指向window的，如果使用严格模式就是undefined。

在使用普通函数的情况下，谁调用的函数，this就指向谁。

而箭头函数是没有this的，他主要是看外部的this。

/非严格模式下，函数的this指向window 
function fn (){
        console.log(this)
 }

 fn()
 //console.log()----->window


/谁调用函数，this就指向谁
let obj ={
        fn: function (){
              console.log(this)
            },
        name:"fancy",
        gender:"male",
  }

obj.fn()
//console.log()----->obj这个对象



    let obj ={
        fn: ()=>{
            console.log(this)
        },
        name:"fancy",
        gender:"male",
    }

    obj.fn()

//console.log()----->window  
箭头函数没有自己的this，指向外部对象，对象是没有this的，所以指向的是window

在类中方法的this不是固定的

用方法形式调用，this就是调用方法的实例

以函数形式调用，this就是undefined

class person  {
        fn = function (){
            console.log(this)
        }
    }

const myClass = new person
myClass.fn()

//console.log()----->person类


class person  {
    fn = function (){
        console.log(this)
    }
}

const myClass = new person
fn2 = myClass.fn
fn2()

//console.log()----->undefined

但是在开发过程中，我们是不希望this因调用方法的不同变来变去，希望他是固定的。

此时，我们可以在类中使用箭头函数这时候 this 就永远指向当前实例

06、类的继承

pig类可以通过继承animal类，获得animal相同的代码作用。

想要不同于animal的方法：pig 想要获得一些其他不同于animal的功能，可以在自己的作用域中声明。

想要不同于animal的属性，想添加一些属性：就可以在子类中重写父类的构造函数，值得注意的是，在子类中重写父类构造函数的时候，需要要先调用父类构造函数，就是用super()，需要用到父类中的哪些参数，就在super()中添加，其余想要添加的就在子类的constructor()中添加。

class animal{
    constructor(name,age,) {
        this.name = name;
        this.age = age;
    }
    speak = ()=>{
        console.log("我发出声音了")
    }
}

class pig extends animal{
    constructor(name,age,lenth) {
        super(name,age);// 调用父类的构造函数
        this.lenth = lenth // 新添加的属性
    }
    speak = ()=>{
        console.log("哼哼哼")
    }
}

const test = new pig("ma",20)
test.speak()

//console.log()----->哼哼哼

07 类的静态资源

一般情况下，想要通过类创建对象的时候，需要通过new 来创建实例对象，这个时候就不能通过类名来访问对象属性。

如果想要通过类名来访问对象，需要用static 将对象变成静态资源。

    const test = class {
        name = "ruirui";
        age = 18;
        gender = "female"
    }

    console.log(test.name);

    //console.log------>undefined

    const test2 = class {
        static name = "ruirui";
        static age = 18;
        static gender = "female"
    }

    console.log(test2.name,test2.age,test2.gender);

    //console.log------>"ruirui" 18 "female"

08 数组的方法

1、map()

个人觉得用来批量修改数组中的值，可以不用遍历数组了。

map()方法是用提供的函数将原数组中的每一个值都调用一遍，返回执行后的结果，组成一个新的数组。

map() 需要一个回调函数作为参数，回调函数的返回值会组成一个新的数组。

回调函数有三个参数，第一个是当前元素

第二个是当前元素的索引

第三个是当前数组

const arr = ["tom", "jerry", "queen"]
const result = arr.map((item) => "<li>" + item + "</li>")
console.log(result);

//console.log------>['<li>tom</li>', '<li>jerry</li>', '<li>queen</li>']

2、filter()

3、find()

4、reduce()

用于整合数组。可以对数组中的值进行计算，最终将数组中的所有元素合并成一个值。