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

1.

  var a = { n: 1 };

  var b = a;

  a.x = a = { n: 2 };

  console.log(a);

  console.log(b);
  答案:{ n: 2 },{ n: 1, x: { n: 2 } }

  分析:这里最核心的地方就是a.x运算优先级高于=,因为a.x优先级高于=,所以在a还是{ n: 1 }的时候添加了x: { n: 2 }这个属性,

     因为前面b = a;使的b和a指向了同一个地址,所以b就是{ n: 1, x: { n: 2 } }。下面有更专业和更详细的解答一起学习下,

     1).var a = { n: 1 };执行完,假设产生引用地址addr_1,那么此时a指向地址addr_1的。

     2).var b = a;定义b指向a,也即地址addr_1。此时,无论修改b.n还是a.n都会引起另一个值的改变,应为引用了同一个地址。

     3).a.x = a = { n: 2 };这句是关键,赋值顺序从右向左。成员属性访问优先级要高于=赋值操作。所以,拆解一下步骤

      3.1 a持有了地址addr_1,等待给.x进行赋值

      3.2 按照赋值顺序,执行{ n: 2 },此时a引用地址变为addr_2

      3.3 往左继续执行,a.x引用地址{ n: 2 }

    4).按照以上执行,可以得出。b指向地址addr_1,addr_1中的.x指向了addr_2

    5).a指向addr_2

2.

  console.log(1);
  setTimeout(() => {
    console.log(2);
  });

  process.nextTick(() => {
    console.log(3);
  });

  setImmediate(() => {
    console.log(4);
  });

  new Promise((resolve, reject) => {
    console.log(5);
    resolve();
    console.log(6);
  }).then(() => {
    console.log(7);
    });
  Promise.resolve().then(() => {
    console.log(8);
    process.nextTick(() => {
      console.log(9);
    });
  });

  答案:1 5 6 3 7 8 9 2 4

  分析:整个过程分三步来进行,
     第一步script整体代码被执行,执行过程为

       打印1

       创建setTimeout macro-task

       process.nextTick 创建micro-task

       创建setImmediate macro-task       

       创建micro-task Promise.then 的回调,并执行console.log(5);resolve();console.log(6);此时打印5 6,虽然调用了resolve,

       但是整体代码还没执行完,无法进入Promise.then流程

       创建micro-task Promise.then 的回调

       第一个过程之后打印出来1 5 6

     第二步由于micro-task的优先级高于macro-task,此时micro-task中有三个任务按照优先级process.nextTick高于Promise

     所以输出3 7 8,这是有又有新的micro-task被添加进来直接执行打印出来9

     第三部micro-task任务列表已经执行完毕,接下来macro-task,由于setTimeout优先级高于setImmediate,所以打印2 4

     总结:同步代码执行顺序优先级高于异步代码执行顺序优先级,new Promise(fn)中的fn是同步执行

     process.nextTick() > Promise.then > setTimeout > setImmediate

3.

  [‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘].map(parseInt)

    答案:1 NaN NaN NaN NaN

    分析:
      参见这篇博客的详细分析https://www.cnblogs.com/typeof/p/12168571.html

4.

  CSS实现九宫格布局,有多种方式可以实现九宫格布局,下面列出来比较常用的方法,

  1). flex方案,比如有以下的html结构布局

    <div class="square flex">

      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>

    </div>

5.

  根据方法调用返回结果完成函数的实现

  function add() {}
  function one() {}
  function two() {}
  one(add(two())); // 3

  two(add(one())); // 3

  答案:function add(val) {
       return function(val2) {
         return val + val2;
       }
     }

     function one(fn) {
       let a = 1;
       return typeof fn == ‘function‘ ? fn(a) : a;
     }

     function two(fn) {
       let b = 2;

       return typeof fn == ‘function‘ ? fn(b) : b;
     }

6.

  a11y

  作为一名开发人员,你可能时常看到 “Accessibility” 这个词。在Web发展的初期,人们习惯性将其翻译成“无障碍”,

  因为它的初衷主要是考虑如何让残障人士更容易地访问Web内容。比如有行动障碍的人士他更依赖于键盘与Web做交互;

  有视觉障碍人士更依赖于放大屏幕与Web交互;有听力障碍人士更依赖于阅读方式等。但随着互联网的发展,

  访问Web的场景、设置和人群都更复杂化,多样化。“Accessibility”已不再局限于满足残障人士的需求,

  它也涵盖了在特定场景下的网站可用性,比如移动终端,弱网环境、忘带鼠标,触模板坏了,老年人访问等等。  

  在面对这样的新场景、新群体之下,“Accessibility”更多时候被译为可访问性。常常也被缩写为a11y(其中11是指a和y之间有11个字母)。

  因此,在整个社区你会看到有很多以a11y为名的网站或应用,一般这些网站都是围绕着“Accessibility”相关的内容,

  比如A11y.meThe A11Y Project和A11yWeeky等。  

7.

  解释一下BFC、IFC、FFC

  BFC(Block Formatting Contexts)直译为“块级格式化上下文”,触发BFC的元素是一个隔离的渲染区域,容器内的子元素不会在布局上,

  影响到外面的元素,外边的元素也不会影响到内部的。下面看下哪些元素会产生BFC

  1) 根元素

  2) float属性不为none

  3) position为absolute或fixed

  4) display为inline-block, table-cell, table-caption, flex

  5) overflow不为visible

  元素产生BFC之后的布局规则如下

  内部的盒子会在垂直方向上,一个个放置

  盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的上下margin会发生重叠

  每个元素的左边与包含它的盒子的左边相接触,即使存在浮动也是如此

  BFC的区域不会与float重叠

  BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也是如此

  计算BFC的高度时,浮动元素也参与计算

  IFC(Inline Formatting Contexts)直译为“内联格式化上下文”

  FFC(Flex Formatting Contexts)直译为“自适应格式化上下文”

8. DOCTYPE的标准模式与兼容模式各有什么区别?

  标准模式用于呈现遵循最新标准的网页,兼容模式用于呈现为传统浏览器而设计的网页

  标准模式的排版和js运行模式都以该浏览器支持的最高标准运行

  兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作

  具体区别:

  盒模型

    严格模式下:width是内容宽度,元素真正的宽度等于width

    兼容模式下:width等于width + padding + border

  兼容模式下可设置百分比的高度和行内元素的高宽

    在标准模式下,给span等行内元素设置wdith和height都不会生效,而在兼容模式下,则会生效

    在标准模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置高度,子元素设置一个百分比的高度是无效的

  用margin:0 auto设置水平居中在IE下会失效

    使用margin:0 auto在标准模式下可以使元素水平居中,但在兼容模式下却会失效(用text-align属性解决)

    body{text-align:center};#content{text-align:left}

  兼容模式下Table中的字体属性不能继承上层的设置,white-space: pre会失效,设置图片的padding会失效

9.

  HTML5为什么只需要写DOCTYPE html

  HTML5不基于SGML(标准通用标记语言),因此不要对DTD进行引用,但是需要DOCTYPE来规范浏览器的行为(让浏览器按照他们的方式来运行)

  而HTML4.0.1基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型

  SGML(标准通用标记语言)是比HTML、XML更老的标准,这两个都是由SGML发展而来的,HTML5不是

10.

  编写一个算法来判断一个数是不是“快乐数”

  一个“快乐数”定义为:对于一个正整数,每一次将该数替换为它每个位置上的数字的平方和,然后重复这个过程直到这个数变为 1,

  也可能是无限循环但始终变不到 1。如果可以变为 1,那么这个数就是快乐数

  答案:  

    // var list = [];
    var isHappy = function(num) {
      num = (‘‘ + num).split(‘‘);

      num = num.map(cur => Math.pow(cur, 2)).reduce((sum, cur) => {
        return sum + cur;
      }); // 1^2 + 9^2 = 82

      if (num == 1) { // 是快乐数
        return true;
      }

      if (num == 4) { // 不是快乐数,跳出递归来源于@墨尘大神的灵感

      // if (list.includes(num)) { // 不是快乐数,跳出递归
        return false;
      }

      // list.push(num);

      return isHappy(num);
    }

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

时间: 2024-10-31 21:29:08

2020前端基础知识学习第二节的相关文章

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

一.选择题 1. 浏览器端的存储技术有哪些() A.cookie B.localStorage C.session D.userData 答案:A B D 分析:cookie通常用于存储用户等登录信息,能够存储的数据是有限的,而且在指定域名下所有的请求都会带上. localStoage是H5新增用于本地存储,能够存储更多的数据,通常是5M session服务器端与客户端建立的会话,不属于浏览器端存储技术 userData是IE专有的存储方案,可以用来存储一些数据 2. (function() {

Bash编程基础知识学习第一节

Bash编程基础知识学习 一.bash的由来 1 .什么是Bash 什么是Shell Bash 是GNU Bourne-Again SHell,是目前大多数Linux发行版采用的Shell. Shell 是*nix提供给用户使用的界面.一个操作系统的底层是独立运行的, 用户界面和底层分开,可以最大限度的保证系统稳定.Shell就是一个特殊的程序,负责接受用户的命令,并把系统的响应返回给用户. Bash Shell 一般不需要自己安装,在安装发行版的同时都会安装好. Shell的存在是和登陆相关的

web前端基础知识学习网站推介

内容:一.基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.com.cn/html5/index.asp 2. CSS入门学习:http://www.w3school.com.cn/css/index.aspCSS3入门学习:http://www.w3schools.com/css3/default.asphttp://css3-tutorial.com/ 3.

前端基础知识学习:概念篇

MVC: MVC的全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,是一种软件设计典范.它是用一种业务逻辑.数据与界面显示分离的方法来组织代码,将众多的业务逻辑聚集到一个部件里面,在需要改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑,达到减少编码的时间. MVC开始是存在于桌面程序中的,M是指业务模型,V是指用户界面,C则是控制器. 使用的MVC的目的:在于将M和V的实现代码分离,从而使同一个程序可以使用

C#基础入门学习-第二节-代码注释的使用以及常用技巧

1.在当前解决方案中含有一个项目,如何在添加一个项目? (1)方案1,在解决方案管理器中的解决方案名称上点击鼠标右键,选择增加,选择新建项目,输入项目名称即可 (2)方案2,在VS菜单中选择文件,新建,项目,输入项目名称,解决方案选择,增加到解决方案即可 2.在多个项目中如何运行某个项目? (1)我们在解决方案管理器中查看那个项目文件名是黑色,代表那个是当前的项目,在调试的时候会运行该项目,如果我们想运行其它项目,在其它项目点击右键 设为启动项目即可,或者解决方案,右键属性,单启动项目,选择要启

前端开发知识学习概要

前端开发工具 编辑器 editPlus sublime 浏览器: Chrome Safari Firebox IE 插件:firebug chrome: inspect element html 组成结构 1 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前,不是 HTML 标签: 2 它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令, 浏览器读取. 3 <html> 4 <head> 5 描述页面

ARM基础知识学习笔记

/*****************数电知识*******************/ PN结(Positive-Negative) 三极管:BJT(双极结型三极管Bipolar Junction Transistor)               FET(场效应管Field Effect Transistor)          (单极结型) 1.MOSFET (金属氧化物半导体Metal Oxide Semiconductor FET)               2.JFET(结型Junct

C++基础知识学习笔记

基本语法 C面向过程思想:程序=(数据结构)+(算法) 数据结构与算法分离,以算法(函数)为主. C++面向对象思想:程序=(数据结构+算法) 数据结构(属性)与算法(操作)绑成一个类,定义一个个对象对象=(数据结构+算法)  ,程序=(对象+对象+对象+--) 面向对象程序设计的程序员有两类:1.面向对象应用程序设计2.类库的设计 头文件:类的声明            ---类的外部接口       (成员函数在类声明中实现时,一般很简短,默认为内联函数)源文件:类的成员函数定义     -

(转)Linux基础知识学习

Linux基础知识学习 原文:http://blog.csdn.net/ye_wei_yang/article/details/52777499 一.Linux的磁盘分区及目录 Linux的配置是通过修改配置文件来完成. 1.1.Linux磁盘分区 Linux可以将磁盘分为多个分区,每个分区可以被当做一个独立的磁盘使用,磁盘类型:主分区.扩展分区.逻辑分区. 主分区标记为活动,用于操作系统的引导,一块磁盘最多划分4个主分区,主分区存放操作系统的文件或用户数据. 扩展分区:主分区小于4个时才可以划