react基础入门：原生JS基础测试

Posted 2021-04-26 智猿其说

以下问题都是以es6为基础

一 基础

• 有哪些数据类型？

  
  

字符串、数字、布尔、数组、对象、Null、Undefined

• 有哪些定义变量的方式？

  
  

var、const、let

• 怎么初始化一个数组？

  
  

const arr = [1, "a", new Date()];

• 数组有哪些操作方法？

  
  

Array操作方法

• 怎么初始化一个对象？

  
  

const obj = {
    age: 20,
    name: 'lily'
};

• 对象有哪些操作方法？

  
  

Object操作方法

• 常用的全局变量及变量都有哪些？

  
  

全局函数及变量

• Map数据类型常用的操作方法有哪些？

  
  

Map操作方法

• Set数据类型常用的操作方法有哪些？

  
  

Set操作方法

• 对象的解构？

const { age, name } = {    
    age: 20,    
    name: 'lily',    
    sex: '女'
};
    
console.info({age, name}); 
// 输出结果：{age: 20, name: "lily"}

二 函数

• 怎么定义一个函数？

  
  

const sayHello = (name) => {  
  
    console.info(`你好：${name}`);
    
};

sayHello('lily'); 
// 输出结果：你好：lily

• 怎么给函数默认值？

  
  

const sayHello = (name = 'def') => {   
 
    console.info(`你好：${name}`);
    
};
    
sayHello(); 
// 输出结果：你好：def

sayHello('lily'); 
// 输出结果：你好：lily

const sayHello = ({ 
    name = 'def' 
} = {}) => {
    
    console.info("你好：" + name);
    
};

sayHello(); 
// 输出结果：你好：def

sayHello({ name: 'lily' }); 
// 输出结果：你好：lily

• 什么是异步？

  
  

console.info(1);

setTimeout(() => {  
  
    console.info(2);
     }, 0);

console.info(3);
// 输出结果：1 3 2

• 什么是回调函数？

  
  

const callback = (name) => {    

    console.info('callback 执行');
        
    return name;
};
    
const exec = (name, nameFunc) => {   
 
    console.info(`exec 执行`);  
      
    console.info(`你好：${nameFunc(name)}`);
    
};

exec('lily', callback); 
// 输出结果：你好：lily

• 什么是闭包？

  
  

const nameFunc = (name) => {   
 
    console.info(`outFunc 执行`); 
       
    return (age) => {    
           
        console.info(`姓名：${name}，年龄：${age}`);
        
    };
};

nameFunc('lily')(20); 
// 输出结果：姓名：lily，年龄：20

• Promise的理解及其常用api都有哪些？

  
  

Promise常用方法

三 面向对象

• 怎么创建一个类？

  
  

class User {

    constructor(name) {  
        console.info(`User 构造函数执行，创建 User 对象 name=${name}`);
    }

};
       
const user = new User('lily'); 
// 输出结果： User 构造函数执行，创建 User 对象 name=lily

• 类之间怎么继承？

  
  

class Human {

    constructor(age) {
        console.info(`Human 构造函数执行，创建 Human 对象 age=${age}`);
    }

}

class User extends Human {

    constructor(age, name) {        
        super(age);
        
        console.info(`User 构造函数执行，创建 User 对象 name=${name}`);
    }

};const user = new User(20, 'lily');    
// 输出结果：Human 构造函数执行，创建 Human 对象 age=20
// 输出结果：User 构造函数执行，创建 User 对象 name=lily

四 模块化

• 怎么导出一个类或对象？

  
  

export const sayHello = (name) => {    

    console.info(`你好：${name}`);

};

export const obj = {        
    age: 20,        
    name: 'lily'
};

• 怎么引入一个类或对象？

  
  

// 方式 1

import module1 from './module1';

console.info(module1);

// 方式 2

import { sayHello, obj } from './module1';

console.info(sayHello('lily'), obj);

五 网络

• 怎么发起网络请求？

  
  

fetch(url, options).then(function(response) {    
    // handle HTTP response

}, function(error) {    
    // handle network error
});

// 例子

fetch(url, {
    method: "POST",
    body: JSON.stringify(data),
    headers: {    
        "Content-Type": "application/json"
    },
    credentials: "same-origin"
}).then(function(response) {
    response.status     //=> number 100–599    
    response.statusText //=> String    
    response.headers    //=> Headers    
    response.url        //=> String  
    
    return response.text()
}, function(error) {
    error.message //=> String
})