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直接调用父级的原型方法
    }
  }
  

• 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);
  

• 导入模块 ES6中导入其他模块的一种方式import

• 唯一类型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 待补充

• Iterator 待补充

• Generator 待补充

---

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

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

ES2020

• 1.String.protoype.matchAll
  matchAll()方法是ES2020中新增的一个字符串方法，它返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。
  在matchAll()出现之前，我们一般通过在循环中调用 RegExp.exec() 来获取所有匹配项信息。现在有了matchAll()方法，我们便可以替代while循环加exec的方式:
  ````
  const reg = /(t(w)+)/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是‘存在’状态，有高度且能够被触碰到。类似一体积的空气与一体积的水的关系。

---

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