码迷,mamicode.com
首页 > 其他好文 > 详细

2020前端基础知识学习第一节

时间:2020-01-08 12:14:44      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:压缩   质量   storage   实现   存储   适合   resolve   元素   under   

 一、选择题

  1. 浏览器端的存储技术有哪些()

    A.cookie  B.localStorage  C.session  D.userData

    答案:A B D
    分析:cookie通常用于存储用户等登录信息,能够存储的数据是有限的,而且在指定域名下所有的请求都会带上。

       localStoage是H5新增用于本地存储,能够存储更多的数据,通常是5M

       session服务器端与客户端建立的会话,不属于浏览器端存储技术

       userData是IE专有的存储方案,可以用来存储一些数据

  2. (function() { return typeof arguments; })(); 代码将会返回()
    A.object  B.array  C.arguments  D.undefined

    答案:A

    分析:arguments 是类数组,正常情况下typeof []会返回"object",所以typeof arguments也会返回"object"

  3. function fn() { return fn; } new fn() instanceof fn; 上面的代码会输出()
    A.true  B.false

    答案:false
    分析:fn作为构造函数,如果内部没有显示的声明return语句,默认会返回一个fn的实例对象,也就是new fn() instanceof fn会返回true,

       但是这里有return fn;这条语句,那么new fn()就会返回fn,所以结果为false

  4. 下列哪个属性不会让div脱离文档流(normal flow)()

    A.position: absolute  B.position: fixed  C.position: relative  D.float: float

    答案:C

    分析:position: relative相对于自己定位,不会脱离文档流

  5. 正则表达式/^\d*\*[^\d]*[\w]{6}$/,下面的字符串哪个能正确匹配?()
    A.***abcABCD_89    B.abc*abcABCDEF

    C.123*abcABCD_89    D.123*ABCabcd-89

    答案:A,C
    分析:
       ^           表示匹配字符必须以后面规则开始

       \d*          表示零个或者多个数字

       \*          表示只匹配字符*

       [^\d]*     表示匹配零个或者多个非数字字符

       [\w]      表示匹配字母数字下划线字符相当于[0-9a-zA-Z_]

       {6}        表示要要进行匹配的字符数要大于等于6

       答案A,* 属于初次匹配内容,其他的是剩下规则匹配

  6.  (function() { var a = b = 5; })(); console.log(b); console.log(a); 代码输出结果:()
    A.5, 5  B.undeinfed, undefined  C.5, undefined  D.程序抛错

    答案:D
    分析:程序执行完之后会先打印5,然后抛错,因为var a = b = 5;相当于b = 5; var a = 5;在非严格模式下,全局环境不声明直接

       赋值相当于给window对象赋值,所以相当于window.b = 5; 然而a的作用域是匿名自执行函数内,所以在全局作用域下面是访问不到的

二、简单题

  7. 下面的代码输出顺序?

    console.log(‘one‘);
    setTimeout(function() {
      console.log(‘two‘);
    }, 0);
    new Promise(function(resolve, reject) {
      console.log(‘three‘);

      resolve();
    }).then(function() {
      console.log(‘four‘);
    });
    console.log(‘five‘);
    答案:one three five four two

    分析:程序从上往下执行首先打印出来one,new Promise会执行他的构造函数这时候打印three,

       然后因为Promise属于异步microtask,这个时候会继续执行主线程代码打印出来five,这个时候会执行microtask队列,

       打印出来four,接下来执行macrotask任务队列打印出来two

  8. 下面的代码输出结果?

    falseStr = "false";

    if (true) {
      var falseStr;
      if (falseStr) {
        console.log("false" == true);
        console.log("false" == false);
      }
    }

    答案:false false
    分析:下面的规则用于判定==运算符比较的两个值是否相等:
       1.如果两个值具有相同的类型,那么就检测它们的等同性。如果这两个值完全相同,它们就相等。如果它们不完全相同,则它们不相等。

       2.如果两个值的类型不同,它们仍然可能相等。用下面的规则和类型转换来检测它们的相等性:

         2.1 如果一个值是null,另一个值是undefined,它们相等。

         2.2 如果一个值是数字,另一个值是字符串,把字符串转换为数字,再用转换后的值进行比较。

         2.3 如果一个值是true,将它转换成1,再进行比较。如果一个值为false,把它转换成0,再进行比较。

         2.4 如果一个值是对象,另一个值是数字或者字符串,将对象转换成原始类型的值,再进行比较。

         2.5 其他的数值组合是不相等的。

  9. 下面的代码输出结果?

    var length = 10;
    var obj = {

      length: 5,

      func: function() {

        console.log(this.length);

      }

    };

    var func = obj.func;

    func(); 

    obj.func(); 
    答案:10,5

    分析:函数的作用域是在被定义时候决定,跟执行环境没有关系,所以var func = obj.func;可以理解为在全局作用域定义了func

       所以func函数内的this应该是全局,浏览器环境下是window,所以length为10。obj.func函数的执行上下文对象是obj,所以

       length是5

  10. PNG,GIF,JPG的区别及如何选?

    GIF:

      256色

      无损,编辑 保存时候,不会损失。

      支持简单动画

      支持boolean透明,也就是要么完全透明,要么不透明

    JPG:

      millions of colors

      有损压缩, 意味着每次编辑都会失去质量

      不支持透明

      适合照片,实际上很多相机使用的都是这个格式

    PNG:

      无损,其实PNG有好几种格式的,一般分为两类:PNG8和truecolor PNGs

      与GIF相比:

        它通常会产生较小的文件大小

        它支持阿尔法(变量)透明度

        无动画支持(可通过CSS3实现动画效果)

      与JPEG相比:

        文件更大

        无损

        因此可以作为JPEG图片中间编辑的中转格式

    结论:

      JPEG适合照片

      GIF适合动画

      PNG8适合其他任何种类——图表,buttons,背景,图表等等

  11. 请用CSS实现屏幕正中间有个元素A,随着屏幕宽度的增加,始终满足以下条件:

    1)A元素垂直居中于屏幕中央

    2)A元素离屏幕左右边距各10px

    3)A元素的高度始终是A元素宽度的50%

    答案:这道题目有多种实现方案,方案如下,

       1.1 CSS3 flex来实现,对父元素设置样式display: flex; align-items: center;
       1.2 父元素设置postion: relative; A元素设置样式position: absolute; top: 50%; transform: translateY(-50%);

       1.3 父元素设置postion: relative; A元素设置:postition: absolute; top: 0; bottom: 0; margin: auto 0;

       2.1 A元素margin-left: 10px; margin-right: 10px;

       3.1 这里借助于padding百分比来实现,padding百分比w3c解释是:规定基于父元素的宽度的百分比的内边距

 

2020前端基础知识学习第一节

标签:压缩   质量   storage   实现   存储   适合   resolve   元素   under   

原文地址:https://www.cnblogs.com/typeof/p/12164256.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!