React-1----js基础和ES6新功能

矫情吗；* 2023-05-29 13:15 28阅读 0赞

这里只写一些补充的和遗漏的知识点

### 1 给对象添加方法 ###

### 2 选择元素 ###

document.getElementById()           //根据id
    document.getElementsByTagName()     //根据标签名
    document.getElementsByClassName()   //根据类名
    document.querySelector()            //找到第一个元素，括号里可以写.class或者id名
    document.querySelectorAll()         //找到所有的元素

### 3 获取元素类型的节点数量 ###

xxx.childElementCount

### 4 解构数组 ###

function breakfast(){
       return ['apple','lemon','banana'];
    }
    
    let [a,b,c]=breakfast();
    
    console.log(a,b,c);

### 5 解构对象 ###

function breakfast(){
       return {apple:'apple',lemon:'lemon',banana:'banana'};
    }
    
    let {a:apple,b:lemon,c:banana}=breakfast();
    
    console.log(a,b,c);

### 6 模板字符串 ###

let a='apple';
    let b='banana';
    
    let fruit=`我喜欢的水果是${a}和${b}`
    
    console.log(fruit);

下面的案例为带标签的模板字符串

let a='apple';
    let b='banana';
    
    let fruit=kitchen`我喜欢的水果是${a}和${b}`
    
    function kitchen(strings,...values){
       console.log(strings)
       console.log(values)
    }

下图为输出的结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70][]

以上strings输出的为字符，values输出的为变量。

### 7 函数默认参数 ###

function breakfast(dessert='cake',drink='juice'){
        return `${dessert}${drink}`
    }
    
    console.log(breakfast()) //cake juice

### 8 展开操作符和剩余操作符 ###

//展开操作符
    let fruits=['apple','banana'],
        eat=['chiken',...fruits]
    
    console.log(eat) //['chiken','apple','banana']
    
    //剩余操作符
    function breakfast(dessert,drink,...foods){
       console.log(dessert,drink,foods)
    }
    
    breakfast('apple','banana','orange','cake','juice'); 
    //apple banana ['orange','cake','juice']

### 9 解构参数 ###

function breakfast(dessert,drink,{location,person}={}){
        console.log(dessert,drink,location,person)
    }
    
    breakfast(dessert,drink,{location:'石家庄',person:'董小姐'})

### 10 函数名字 ###

function breakfast(arguments){}
    console.log(breakfast.name) //breakfast
    
    
    let breakfast=function(arguments){}
    console.log(breakfast.name) //breakfast
    
    let breakfast=function superBreakfast(arguments){}
    console.log(breakfast.name) //superBreakfast

### 11 箭头函数 ###

let breakfast=(dessert,drink)=>dessert+drink;
    
    //编译后
    let breakfast=function(dessert,drink){
        return dessert+drink;
    }

### 12 对象表达式 ###

let dessert='apple',
        drink='juice'
    
    let breakfast={
        dessert,
        drink,
        food(){}
    }
    
    //因为对象中的属性名与变量名相同，所以就不用再给属性赋值了

### 13 几个实用的方法 ###

//判断两个值是否相等
    Object.is(NaN,NaN) //true
    
    //把一个对象的值赋值到另一个对象里
    let breakfast={}
    Object.assign(
      breakfast,
      {fruit:'apple'}
    )
    console.log(breakfast) //{fruit:'apple'}
    
    //设置对象
    let breakfast={
      getDrink(){
         return 'tea'
      }
    }
    
    let dinner={
      getDrink(){
         return 'juice'
      }
    }
    
    let sunday=Object.create(breakfast);
    console.log(sunday.getDrink()) //tea
    console.log(Object.getPrototypeOf(sunday)==breakfast) //true
    Object.setPrototypeOf(sunday,dinner)
    console.log(sunday.getDrink()) //juice
    console.log(Object.getPrototypeOf(sunday)==dinner) //true

### 14 \_\_proto\_\_ ###

let breakfast={
      getDrink(){
         return 'tea'
      }
    }
    
    let dinner={
      getDrink(){
         return 'juice'
      }
    }
    
    let sunday={
      __proto__:breakfast
    }
    console.log(sunday.getDrink())  //tea
    sunday.__proto__=dinner;
    console.log(sunday.getDrink())  //juice

### 15 super ###

let breakfast={
      getDrink(){
         return 'tea'
      }
    }
    
    let dinner={
      getDrink(){
         return 'juice'
      }
    }
    
    let sunday={
      __proto__:breakfast,
      getDrink(){
         return super.getDrink()+'banana'
      }
    }
    
    console.log(sunday.getDrink()) //tea banana

### 16 迭代器 ###

### 17 生成器 ###

function* chef(foods){
      for(var i=0;i<foods.length;i++){
            yield foods[i];
      }
    }
    
    let wang=chef(['tomato','egg','banana'])
    
    console.log(wang.next())

### 18 class类 ###

class Chef{
       constructor(food){
           this.food=food
       }
    
       cook(){
           console.log(this.food)
       }
    }
    
    let wang=new Chef('egg');
    wang.cook()

**类的get和set**

class Chef{
       constructor(food){
           this.food=food
       }
    
       get menu(){
          return this.dish;
       }
    
       set menu(dish){
          this.dish.push(dish)
       }
    
       cook(){
           console.log(this.food)
       }
    }
    
    let wang=new Chef();
    console.log(wang.menu='daxia')  //daxia
    console.log(wang.menu='pisa')   //pisa
    console.log(wang.menu)          //['daxia','pisa']

**静态方法static:不需要实例化就可以直接操作**

class Chef{
       constructor(food){
           this.food=food
       }
    
       static cook(food){
           console.log(food)
       }
    }
    
    Chef.cook('banana');

**继承:extends**

class Person{
       constructor(name,birthday){
          this.name=name;
          this.birthday=birthday;
       }
    
       intro(){
          return `${name},${birthday}`
       }
    }
    
    class Chef extends Person{
       constructor(name,birthday){
          super(name,birthday);
       }
    }
    
    let fu=new Chef('fujing','1990-01-23')
    console.log(fu.intro())  //fujing,1990-01-23

### 19 set ###

let desserts=new Set('apple','cookie','ice');
    
    desserts.add('banana');  //添加，注意不能添加重复的
    console.log(desserts.size) //长度
    console.log(desserts.has('ice')) //判断是否含有某东西
    
    desserts.delete('ice');
    
    //循环
    desserts.forEach(dessert=>{
       console.log(dessert)
    })
    
    desserts.clear() //清空

### 20 map ###

let food=new Map()
    
    let fruit={}, cook=function(){}, dessert='甜点';
    food.set(fruit,'lemon')
    food.set(cook,'dao')
    food.set(dessert,'cookie')
    
    console.log(food.size) //获取个数
    console.log(food.get(fruit)) //获取某个
    console.log(food.has(fruit)) //判断是否含有
    food.delete(fruit) //删除
    
    //循环
    food.forEach((value,key)=>{
       console.log(`${value},${key}`)
    })
    
    food.clear() //清空

### 21 模块 ###

//导出
    export {fruit,dessert}
    
    //导入
    import {fruit,dessert} from './chef.js'
    import * as chef from './chef.js'  //导出全部
    
    //默认导出
    export default

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191205171427454.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ==,size_16,color_FFFFFF,t_70