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

最新推荐文章于 2022-08-29 20:40:28 发布

水蜜桃那么甜

最新推荐文章于 2022-08-29 20:40:28 发布

阅读量201

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/Lemontree_fu/article/details/102935074

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了React开发中所需的JavaScript基础知识和ES6的新特性，包括对象方法添加、元素选择、节点数量获取、数组和对象解构、模板字符串、函数默认参数、展开与剩余操作符、解构参数、箭头函数、对象表达式、实用方法、原型链__proto__、super用法、迭代器、生成器、class语法、set和map数据结构，以及模块导入导出机制。

摘要由CSDN通过智能技术生成

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

1 给对象添加方法

var beyond={
   foundedIn:'香港',
   artists:['a','b','c','d']
}

//为对象定义方法
beyond.showArtist=function(){
    for(var i=0;i<this.artists.length;i++){
        document.write(this.artists[i])
    }
}

//调用对象里的方法
beyond.showArtist();

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)
}

下图为输出的结果

以上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 迭代器

function chef(foods){
    let i=0;

    return{
       next(){
          let done=(i>=foods.length);
          let value=!done ? foods[i++] : undefined;
          
          return {
             value:value,
             done:done
          }
       }
    }
}

let wang=chef(['tomato','egg'])
console.log(wang.next())

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