2021春招冲刺-1217 线程与进程 | ES6语法 | h5新增标签

2021春招冲刺

12.17日

1 操作系统 | 概述一下线程与进程

结合百度和课本上的答案

进程的定义:

• 进程是程序的一次执行
• 进程是一个程序及其数据在处理机上顺序执行时所发生的活动
• 进程是具有独立功能的程序再一个数据集合上运行的过程，是系统进行资源分配和调度的基本单位。

进程的特点:

动态性、并发性、独立性、异步性

线程的定义：

CPU调度和分派的基本单位

线程与进程的关系：

• 包含关系：一个线程只能属于一个进程，而一个进程可以有多个线程，但至少有一个线程
• 线程是指进程内的一个执行单元，也是进程内的可调度实体
• 资源分配给进程，同一进程的所有线程共享该进程的所有资源

线程与进程的区别：

• 并发性：不仅进程之间可以并发执行，同一个进程的多个线程之间也可以并发执行
• 调度：线程作为调度和分配的基本单位，进程作为拥有资源的基本单位
• 资源开销：进程是拥有资源的一个独立单位，线程不拥有系统资源，但可以访问隶属于进程的资源
• 内存分配：同一进程的线程共享本进程的地址空间和资源，而进程之间的地址空间和资源是相互独立的
• 独立性：每个独立的进程有程序运行的入口、顺序执行序列和程序出口，但是线程不能独立执行。

---

2 JS | ES6新增语法有哪些？平时开发中常用到哪些**

参考链接:小丘啦啦啦-ES6新增常用语法 、es6语法总结

个人知道的基本上只有前几个，后面的都是百度的233

• let let声明的变量只在所处的块级有效,不能在同一作用域内重新声明。

与var的区别：
1. var是函数作用域，而let是块作用域。在for循环内定义了一个var变量，实际上在for循环以外也可以访问，而let由于是块作用域，所以如果在块作用域内（如for循环内）定义的变量，在其外不可被访问。
2.let不能在定义与声明之前访问该变量（即不能变量提升），但是var可以。
3.let不能被重新定义，但是var可以。

• const 声明常量,具有块级作用域。声明常量时必须赋值，且常量赋值时，值不能修改。

• 解构赋值 数组以序号位置一一对应、对象根据属性名一一对应

  const obj = { a: "aaa", b: "bbb" }; 
  let { a, b,c, d="ddd",a:e} = obj ; 
  console.log(a,b,c,d,e);   //aaa bbb undefined ddd aaa
  
  let [a, b, c] = [1, 2, 3]// 即: let a = 1;let b = 2;let c = 3;
  

• 箭头函数 （）=>{} 用来简化函数定义语法。函数中只有一句代码，且代码的执行结果就是返回值，可以省略大括号。函数中如果形参只有一个，形参外侧的小括号也可以省略。
  箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值。如果上下文没有this, 则this指向Window对象。

• 模板字符串 使用 反单引号`` 将整个字符串包裹起来，而在其中使用 ${} 来包裹一个变量或者一个表达式。

• 默认参数 如果不传入参数, 或者传入undefined, 则使用默认值。

  function greet(name = 'Student', greeting = 'Welcome') {
  console.log(`${Greeting} ${Name}!`);
  }
  

• 展开运算符 ···
  1.它可以将数组或者对象进行展开，将一个不定数量的参数表示为一个数组。
  2.使用展开运算符将数组展开为多个元素, 使用剩余参数可以将多个元素绑定到一个数组中。

  //展开字面对象
  const arr1 = [1,2,3];
  const arr2 = [3,4];
  console.log(...arr1);  //1 2 3
  const arr3 = [...arr1,...arr2];
  console.log(arr3);  //arr1和arr2的合并
  
  //剩余参数
  const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];
  const [total, subtotal, tax, ...items] = order;
  console.log(items);   //数组(4) ["cheese", "eggs", "milk", "bread"]
  
  //也可以用在函数中表示不定参，但只能放在最后
  const add = (a, b, ...more) => {
  return more.reduce((m, n) => m + n) + a + b;}
  console.log(add(1, 23, 1, 2, 3, 4, 5)) // 39
  

以下为不常用到（即百度得到x）

• Class类

  class Person {
    constructor(name, age) { // 构造函数
        this.name = name;
        this.age = age;
    }
    getName() { // 原型方法（千万不要加上function）
        return this.name
    }
  }
  

• 类的继承extends

  class PersonExt extends Person{
    constructor(name,age,birthday){
        super(name,age);   
        //在继承的构造函数中，必须调用一次super方法，它表示构造函数的继承；必须在this之前被调用
        this.birthday = birthday;
    }
    supGetName(){
        console.log(super.getName());   //super直接调用父级的原型方法
    }
  }
  

• Module模块
  模块不是对象，而是通过 export 命令显式指定输出的代码，再通过 import 命令输入。模块功能主要由两个命令构成：export和import 。 export 命令用于规定模块的对外接口， import 命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。
  export 命令除了输出变量，还可以输出函数或类（class）。
  *通常情况下， export 输出的变量就是本来的名字，但是可以使用 as 关键字重命名。
  *用星号（ * ）指定一个对象，所有输出值都加载在这个对象上面来实现整体加载。
  *export default 命令，为模块指定默认输出，其他模块加载该模块时， import 命令可以为该匿名函数指定任意名字。

  // export-default.js
  export default function () {
    console.log('foo');
  }
  
  // import-default.js
  import customName from './export-default';
  customName(); // 'foo'
  

模块之间也可以继承，但是export 命令会忽略原模块的 default 方法，然后输出了自定义的变量和默认方法。
import命令会被JavaScript 引擎静态分析，先于模块内的其他语句执行，因此import 和 export 命令只能在模块的顶层，不能在代码块之中（比如，在 if 代码块之中，或在函数之中）。
ES2020提案 引入 import() 函数，支持动态加载模块。import() 函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外， import() 函数与所加载的模块没有静态连接关系，这点也是与 import 语句不相同。 import() 类似于 Node 的 require 方法，区别主要是前者是异步加载，后者是同步加载。

• Set和map 类同c++数据类型结构

• 字符串新方法
  1、String.prototype.includes('判断要包含的字符串')
  2、String.prototype.padStart(maxLength,fillString='')从开始位置填充；
  3、String.prototype.padEnd(maxLength,fillString='')从结束位置填充。
  maxLength填充完毕之后的长度；fillString='用什么来填充',不改变原来字符串。

• 数组新方法
  1、reduce()：
  用于合并处理数组。接收一个函数作为累加器（calback对数组每个元素进行处理），数组中每个值按顺序开始合并，最终为一个值。

   array.reduce(calback(previousValue,currentValue,[index],[array]),[initialValue])
  
   var numbers = [15.5, 2.3, 1.1, 4.7];
        //total上次调用累加处理函数的返回值;num数组当前元素;index当前元素在数组中索引;array数组
        function getSum(total, num ,index ,array) {   
            console.log(`当前元素索引:${index}`);
            console.log(`被处理的数组:${array}`);
            return total + Math.round(num); //取最近的整数，0.5向大数的方向算
        }
        function myFunction(item) {
            return item.reduce(getSum, 1);   //1为循环合并处理的初始值
        }
        console.log(myFunction(numbers)); //1+24 
  

  2、filter()：
  用于筛选数组元素成新数组。使用指定函数测试数组所有元素，并创建一个包含通过测试元素的新数组。

    array.filter(callback(currentValue,[index],[arr]), [thisArg])
  
    var a = [1, 2, 3, 4, 5];
        var b = a.filter((item,index,arr) => {
            console.log(`当前元素索引:${index}`);
            console.log(`被处理的数组:${arr}`);
            return item > 3;
        });
  
        console.log(b);
  

• 唯一类型Symbol Symbol是ES6引入的第七种数据类型,所有Symbol()生成的值都是独一无二的，可以从根本上解决对象属性太多导致属性名冲突覆盖的问题。对象中Symbol()属性不能被for…in遍历，但是也不是私有属性。
  Symbol.for可以用来命名具有相同的key值的对象。

    let a1 = Symbol();
    let a2 = Symbol();
    console.log(a1 === a2);             // false
  
    let a3 = Symbol.for('a3');          // 类似于“常量池”
    let a4 = Symbol.for('a3');
    console.log(a3 === a4)
  
    let a1 = Symbol.for('abc');
    let obj = {
    [a1]: '123',                    // 如a1的值不是Symbol则会报错
    'abc': 345,
    'c': 456
    };
    console.log('obj', obj);        //abc:234 c:345 Symbol(abc):123
  
    for (let [key, value] of Object.entries(obj)) {         // 获取对象中非Symbol属性
    console.log('let of', key, value);
  

  Object.getOwnPropertySymbols方法返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值。

    Object.getOwnPropertySymbols(obj).forEach(function (item) {     // 获取对象中的Symbol属性
    console.log(obj[item]);
    });     //symbol symbol(abc)123
  
     Reflect.ownKeys(obj).forEach(function (item) {          // 获取对象中所有属性
    console.log('ownkeys', item, obj[item]);
     })//abc 234  c 345  sssswaSymbol(abc) 123
    }   
  

• proxy和reflect
  proxy用于修改某些操作的默认行为，即对编程语言层面进行修改，属于“元编程”，Proxy意思为“代理”，即在访问对象之前建立一道“拦截”，任何访问该对象的操作之前都会通过这道“拦截”，即执行Proxy里面定义的方法。

    let target = {
    name:"小明"，
    age: 15     
    }
  
    let handler = {
       get:(target,name,)=>{
         return "success"
    }
    }
  
    let pro = new Proxy(target,handler);
  
    console.log(pro.name);
    //此时打印出来的结果为 success；
  

  Reflect设计的目的是为了优化Object的一些操作方法以及合理的返回Object操作返回的结果,对于一些命令式的Object行为，Reflect对象可以将其变为函数式的行为。

• Promise
  Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓 Promise ，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

  • 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），只有异步操作结果会影响其结果。
  • 一旦状态改变，就不会再变，任何时候都可以得到这个结果。 Promise 对象的状态改变，只有两种可能：从 pending 变为 fulfilled 和从 pending 变为 rejected 。

  有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外， Promise 对象提供统一的接口，使得控制异步操作更加容易。
  Promise 也有一些缺点。首先，无法取消 Promise ，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数， Promise 内部抛出的错误，不会反应到外部。第三，当处于 pending 状态时，无法得知目前进展到哪一个阶段。

   const promise = new Promise(function(resolve, reject) {
    // ... some code
    if (/* 异步操作成功 */){
      resolve(value);
    } else {
      reject(error);
    }
  });
  

Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是resolve 和reject，分别将Promise的状态从pending改为fulfiled和rejected。

• Generator*
  Generator 函数是 ES6 提供的一种异步编程解决方案，执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。
  调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是上一章介绍的遍历器对象（Iterator Object）。Generator 函数返回的遍历器对象，只有调用 next 方法才会遍历下一个内部状态，同时提供了一种可以暂停执行的函数即yield，表达式就是暂停标志。

  function* asyncJob() {
    // ...其他代码
    var f = yield readFile(fileA);
    // ...其他代码
  }
  

而async就是 Generator 函数的语法糖，将 Generator 函数的星号（ * ）替换成 async ，将 yield 替换成 await。async 函数返回一个 Promise对象，可以使用 then方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

• Iterator
  Iterator是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）,主要供 for...of 消费。
  Iterator 的遍历过程:创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个##指针对象##。不断调用指针对象的 next 方法，直到它指向数据结构的结束位置。每一次调用 next 方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含 value 和 done 两个属性的对象。

    let arr = ['a', 'b', 'c'];
    let iter = arr[Symbol.iterator]();
  
    iter.next() // { value: 'a', done: false }
    iter.next() // { value: 'b', done: false }
    iter.next() // { value: 'c', done: false }
    iter.next() // { value: undefined, done: true }
  

---

3 JS | 了解最近的(ES2020,ES2021)一些新语法糖吗?说说看知道哪些，是否用过

了解肯定是不了解的，用也肯定是没用过的，但是我选择百度√ 搬运链接

ES2020

• 1.String.protoype.matchAll
  matchAll()方法是ES2020中新增的一个字符串方法，它返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。
  在matchAll()出现之前，我们一般通过在循环中调用 RegExp.exec() 来获取所有匹配项信息。现在有了matchAll()方法，我们便可以替代while循环加exec的方式:
  ````
  const reg = /\b(t(\w)+)\b/g;
  const str = 'It is never too late to learn.';

  // before
   let match;
   while ((match = reg.exec(str)) !== null) {
     console.log(match);
   }
   // ['too', 'too', 'o', index: 12, input: 'It is never too late to learn.', groups: undefined]
   // ['to', 'to', 'o', index: 21, input: 'It is never too late to learn.', groups: undefined]
  
   // es2020
   const result = str.matchAll(reg);
   console.log([...result]); 
   // [['too', 'too', 'o', index: 12, input: 'It is never too late to learn.', groups: undefined], ['to', 'to', 'o', index: 21, input: 'It is never too late to learn.', groups: undefined]]
  

• 2.dynamic import 动态导入通过import关键字，在运行时加载脚本或者模块，返回一个Promise对象，实现按需加载,如图片懒加载、spa应用的组件按需加载、鼠标点击加载等等。

  function showModal(){
     import('./modal.js').then((Modal)=>{
         Modal.show();
     })
  }
  

• 3.BigInt BigInt这种基本类型，它可以超出javascript中number类型的安全范围的限制，表示任意大小的整数。
  我们可以通过把 n 加到数字后面或者调用 BigInt() 构造函数的方式，来创建BigInt类型的值：
  ````
  const bigIntNum1 = 9007199254740991n; // 9007199254740991n
  const bigIntNum2 = BigInt(9007199254740991); // 9007199254740991n
  const bigIntNum3 = BigInt('9007199254740991'); // 9007199254740991n

ES2021

• 1. String.prototype.replaceAll
• 2. Promise.any
• 3. WeakRef
• 4. 逻辑赋值
• 3. 数值分割符

太多了就不记载了，看邹大佬总结吧

---

4 html | h5新增标签你了解的有哪些？为什么会增加例如 <section>, <article>, <nav>, <header>,<footer>这样的标签

绘图标签

• canvas 位图区域，用于绘制图形。h5游戏基于此绘制开发。
• svg 矢量图

媒体标签

• video 一段视频并提供播放页面
• sudio 音频
• embed 嵌入内容（包括各种媒体）

结构标签

• template h5中的template标签内容不会显示，但是再后台查看界面DOM是存在template标签的，但是display:none
  我们可以使用template.innerHTML获取完整的HTML片段。通过content属性可以获取template标签中的内容，template对象.content可以调用getElementById、querySelector、querySelectorAll方法来获取里面的子节点。

  vue中的template是可以显示内容的，但是查看后台的dom结构不存在template标签。
  注意：vue实例绑定的元素内部的template标签不支持v-show指令，即v-show="false"对template标签来说不起作用

• datalist 与option结合使用，选择器结构。虽然一般来说用ui的datalist更好看

• header 标签定义文档或者文档的一部分区域的页眉

• nav 标签定义导航链接的部分。

• article 标签定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。总感觉效果不是很明显

• footer 和header同理

• section 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域

新增原因

可读性。
使用更多语义的html标签将使您的HTML更具可读性和清晰性，同时还允许您拥有与标签相关的特定CSS，并且不一定需要div的自定义类。HTML标记了文档的结构,它告诉用户代理：这个元素是一个标题/段落/报价

---

5 css | display:none visible:hidden opacity:0; 三者有何区别?分别有作用?都会有什么副作用?

个人经验：三者的共同点都是隐藏。display:none将不再在界面上显示并不占据高度，而hidden不再显示但是依旧占据高度，而opcity显示且占据高度，不过透明度为0。

补充：
display:none不会被子元素继承，父元素都不存在了，子元素也不会显示出。无法触发它绑定的事件。transition无效。
visibility:hidden会被子元素继承，通过设置子元素visibility:visible来显示子元素。 不会触发它上面绑定的事件。transition无效。
opacity:0会被子元素继承，但是不能设置子元素opacity:0来重新显示。绑定事件触发，transition有效。
visibility:hidden与display:none更类似于‘不存在’状态，无法被检测到，但是前者占据高度，后者不占据。而opacity是‘存在’状态，有高度且能够被触碰到。类似一体积的空气与一体积的水的关系。

---

总结： 好累！！前端好难！！不想继续了我好菜啊。