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是‘存在’状态，有高度且能够被触碰到。类似一体积的空气与一体积的水的关系。

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

posted @ 2020-12-22 15:10  凉将  阅读(104)  评论(2)  编辑  收藏  举报