美文网首页日常积累程序员技术干货
react基础入门:(一)原生JS基础测试

react基础入门:(一)原生JS基础测试

作者: 8b6370ea271c | 来源:发表于2019-01-17 20:34 被阅读57次

    原文链接:react基础入门:(一)原生JS基础测试


    以下问题都是以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
    
    • 怎么给函数默认值?
    // 1
    const sayHello = (name = 'def') => {
        console.info(`你好:${name}`);
    };
    sayHello(); // 你好:def
    sayHello('lily'); // 你好:lily
    
    // 2
    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
    })
    

    扫码关注有惊喜

    相关文章

      网友评论

        本文标题:react基础入门:(一)原生JS基础测试

        本文链接:https://www.haomeiwen.com/subject/xtjwdqtx.html