2021前端笔试题

方法二:使用 forEach

var arr = [4，0，7，9，0，0，2，6，0，3，1，0]； var a = [] arr.forEach(item=>{     if(item != 0){         a.push(item)     } }) console.log('a',a) 

方法三:使用 for 循环

var arr = [4，0，7，9，0，0，2，6，0，3，1，0]； var b = [] for(var i = 0; i < arr.length; i  ){     if(arr[i] != 0){         b.push(arr[i])     } } console.log('b',b) 

7、如何解决 ajax 地狱回调问题？

Promise使用场景：ajax请求、回调函数、复杂操作判断。 Promise是ES为了解决异步编程的诞生。
异步操作解决方案：Promise、Generator、定时器(不知道算不算)ES7的async

8、谈谈你对 ES6 的理解？

• 新模板字符串(为 JavaScript 字符串插值功能简单)
• 箭头函数
• for-of(用于遍历数据-例如数组中的值。
• arguments 不确定参数和默认参数可以完美地替代对象。
• ES6 将 promise 对象纳入规范，提供原生 Promise 对象。
• 增加了 let 和 const 用于声明变量的命令。
• 块级作用域增加。
• let 实际上，命令增加了块级作用域。
• 还有介绍 module 模块的概念

9.常用的库有哪些？开发了哪些应用或组件？
10、用一个 div 模拟 textarea 的实现
给 div 添加 contenteditable=true 即可。
步骤：

• 给 div 添加一个HTML全局属性：contenteditable="true"，使 div 用户可以编辑元素；
• 给 div 添加样式 resize: vertical;，使 div 用户可以调整尺寸。注：别忘了设置 overflow:auto; 样式，因为 resize 款式不适合 verflow:visible; 的块，不然 resize 不起效；
• 增加一个属性：placeholder=“请输入……”；
• 通过 CSS 选择器获取并显示 placeholder 的值；

代码实现：

.textarea{
    height: 200px;
    width: 300px;
    padding: 4px;
    border: 1px solid #888888;
    resize: vertical;
    overflow: auto;
}
.textarea:empty:before {
    content: attr(aria-placeholder);
    color: #bbb;
}

10-1、CSS限制显示字数，文字长度超出部分用省略号表示
(1) 文字超出一行，省略超出部分，显示’…’

.line-limit-length {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap; /*文本不换行，这样超出一行的部分被截取，显示...*/
}

(2) 可以给定容器宽度限制，超出部分省略。

.product-buyer-name {
	max-width: 110px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

11、怎么让 Chrome 支持小于 12px 的文字？
谷歌 Chrome 最小字体是 12px，不管你设置成 8px 还是 10px，在浏览器中只会显示 12px

针对谷歌浏览器内核，加 webkit 前缀，用 transform:scale() 这个属性进行缩放。

    测试10px


    最小12px

12、CSS垂直局居中的写法，请至少写出 2 种。
（1）已知容器尺寸

方法一：利用定位（常用方法，比较推荐）

方法二：利用 margin:auto;

方法三：利用 display:table-cell

方法四：利用 display：flex;设置垂直水平都居中

（2）未知容器尺寸
方法一：

div {
 	position: relative;		/* 相对定位或绝对定位均可 */
 	width:500px;
 	height:300px;
 	top: 50%;
 	left: 50%;
 	margin: -150px 0 0 -250px;     	/* 外边距为自身宽高的一半 */
 	background-color: pink;	 	/* 方便看效果 */
}

方法二：
未知容器的宽高，利用 transform 属性

div {
 	position: absolute;		/* 相对定位或绝对定位均可 */
 	width:500px;
 	height:300px;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	background-color: pink;	 	/* 方便看效果 */
}

方法三：
利用 flex 布局
实际使用时应考虑兼容性

 .container {
 	display: flex;
 	align-items: center; 		/* 垂直居中 */
 	justify-content: center;	/* 水平居中 */
 }
 .container div {
 	width: 100px;
 	height: 100px;
 	background-color: pink;		/* 方便看效果 */
 }  

13、CSS实现宽度自适应 100%，宽高 16:9 的比例的矩形。
解释：通过百分比设置宽度，根据宽度的比例数值*9/16，计算出高度的百分比数值，设置内边距为高度的数值，最后用绝对定位 百分百填充 item。

做法：
第一步先计算高度，假设宽 100%，那么高为h=9/16=56.25%
第二步利用之前所说设置 padding-bottom 方法实现矩形

    

        
16:9的矩形
    

14、 [] == []输出的结果是？为什么？

• []单独用在==表达式中时，会隐含转型为""（空字符串）
• 一个不是 null 或者 undefined 的对象（包括[]）用在布尔表达式中，会被作为 true 处理。因此 [] 结果是 true，![] 的结果是false。
• 所以：
  []==[] 等价于""==true
[]==![] 等价于 ""==false，
• 而空字符串在布尔表达式中作为 false 处理。
• 因此：
  [] == [] 结果是 false
  [] == ![] 结果是 true

15、JavaScript 的基本数据类型都有什么？

• 基本数据类型：Number、String、Boolean、undefined、Null、Symbol、ES10新增的BigInt(任意精度整数)七类。
• 引用数据类型(Object类)：常规名值对的无序对象 {a:1}，数组[1,2,3]，以及函数。

原始数据类型：

• 布尔类型：布尔表示一个逻辑实体，可以有两个值：true 和 false。
• Null 类型：Null 类型只有一个值： null。
• Undefined 类型：一个没有被赋值的变量会有个默认值 undefined。
• 数字类型：根据 ECMAScript 标准，JavaScript 中只有一种数字类型：基于 IEEE 754 标准的双精度 64 位二进制格式的值（-(253 -1) 到 253
  -1）。它并没有为整数给出一种特定的类型。除了能够表示浮点数外，还有一些带符号的值：+Infinity，-Infinity 和 NaN (非数值，Not-a-Number)。
• BigInt 类型：BigInt类型是 JavaScript 中的一个基础的数值类型，可以用任意精度表示整数。使用 BigInt，您可以安全地存储和操作大整数，甚至可以超过数字的安全整数限制。BigInt是通过在整数末尾附加 n 或调用构造函数来创建的。
• String字符串类型：JavaScript的字符串类型用于表示文本数据。它是一组16位的无符号整数值的“元素”。在字符串中的每个元素占据了字符串的位置。第一个元素的索引为0，下一个是索引1，依此类推。字符串的长度是它的元素的数量。
• Symbols符号类型：符号(Symbols)是ECMAScript 第6版新定义的。符号类型是唯一的并且是不可修改的, 并且也可以用来作为Object的key的值(如下). 在某些语言当中也有类似的原子类型(Atoms).
  你也可以认为为它们是C里面的枚举类型。

引用数据类型：

• Object对象： 在计算机科学中, 对象是指内存中的可以被 标识符引用的一块区域。

16、实现一个对象的浅拷贝和一个基本的深拷贝（可以不考虑函数）
浅拷贝：
demo数据：

// 对象的浅拷贝
var obj = {
    name: '张三',
    age: 33,
    sex: '男',
    hobby: {
        a: '1'
    }
}

方法一：使用循环遍历对象，将其键值赋值给一个新数组；

var newObj = {}; 
//  循环遍历数组
for (var k in obj) {
    newObj[k] = obj[k];
}
console.log(newObj);    //{name: "张三", age: 33, sex: "男", hobby: {…}} 

newObj.hobby.a = '2';
console.log(obj.hobby.a);    // 2
console.log(newObj.hobby.a); // 2

方法二：采用 Object.assign(新数组，拷贝的数组); 方法

var newObj = {};
Object.assign(newObj, obj);  
console.log(newObj);    // {name: "张三", age: 33, sex: "男", hobby: {…}}

newObj.hobby.a = '2';
console.log(obj.hobby.a);    //2
console.log(newObj.hobby.a);    //2

深拷贝：
demo数据格式：

// demo test
var objTest = { 
    name:"gino", 
    sex:"male", 
    family:{ 
        brother:"zhipeng", 
        mother:"SunAiyun",     
    }
};

var arrTest = ["a","b","c","d"];

方法一：JSON.parse(JSON.stringify(arrTest)) 不能拷贝对象
方法二：

//深拷贝
function deepCopy(arr) {
  let copyArr = arr.constructor === Array ? [] : {}
  for (let i in arr) {
    if (typeof arr[i] === 'object') {
      copyArr[i] = deepCopy(arr[i]) // 引用类型的话进行递归操作
    } else {
      copyArr[i] = arr[i] // 值类型直接赋值
    }
  }
  return copyArr
}

方法三：使用递归：

function deepClone_1(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，如果是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone_1(obj[key]);
                }else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    

console.log('对象深拷贝', deepClone_1(objTest))
console.log('数组深拷贝', deepClone_1(arrTest))

方法四：利用数组的 Array.prototype.forEach 和其他一些 ECMAScript 5中的 Object.* 函数

var deepClone_2 = function (obj){
    var copy = Object.create( Object.getPrototypeOf(obj) );
    var propNames = Object.getOwnPropertyNames(obj);
    propNames.forEach(function(name){
        if(typeof obj[name] === 'object') {
            let copyObj = deepClone_2(obj[name])
            copy[name] = copyObj
        } else {
            var desc = Object.getOwnPropertyDescriptor(obj, name);
            Object.defineProperty(copy, name, desc);
        }
    }); 
    return copy;
}

console.log('对象深拷贝', deepClone_2(objTest))
console.log('数组深拷贝', deepClone_2(arrTest))

方法五：

// 对象的浅拷贝
var obj = {
    name: '张三',
    age: 33,
    sex: '男',
    hobby: {
        a: '1'
    }
}
 
var newObj = {}; 
 
//递归循环  
function deepCopy_3(newObj, oldObj) {
    for (var k in oldObj) {
        if (oldObj[k] instanceof Array) {
            newObj[k] = [];
            deepCopy_3(newObj[k], oldObj[k]);
        }
        else if (obj[k] instanceof Object) {
            newObj[k] = {};
            deepCopy_3(newObj[k], oldObj[k]);
        } else {
            // 基本数据类型
            newObj[k] = oldObj[k];
        }
    }
}
 
// 对象深拷贝
deepCopy_3(newObj, obj);
console.log(newObj);    //   {name: "张三", age: 33, sex: "男", hobby: {…}}
 
newObj.hobby.a = '2';
console.log(obj.hobby.a);    //    1
console.log(newObj.hobby.a);    //    2

17、数据格式 JSON 转换为字符串，以及把字符串转换为 JSON 的方法。
（1）字符串 → JSON对象：

• JSON.parse()方法

  var a = ‘{“a”:2}’;
  JSON.parse(a); //{a:2}

• eval() 方法：计算某一个字符串，并执行其中的 javascript 代码 【不推荐】

  var s = ‘{a:2}’;
  eval(’(’ + s + ‘)’); //将json字符串转成json对象，需要在字符串外包裹一对括号(), {a:2}

（2）json对象 → 字符串

• JSON.stringify()方法 ，将非字符串转成字符串

  var s = {‘a’:2};
  JSON.stringify(s); //"{“a”:2}"

（3）将值转换成字符串（值 → 字符串）

• 转换函数 toString()，弱类型转换，强制类型转换
  value.toString() 将数值转成对应进制的字符串

  var n =8;
  n.toString(几进制)；

注意：不能将 null 和 undefined 转换成字符串

• 弱类型转换：value + '' 将值转换成字符串
  2+ ''
• 强制类型转换：String(value)

（4）字符串 → 值

• 转换函数：parseInt() 和 parseFloat()

  parseInt(“1234blue”); //returns 1234
  parseInt(“22.5”); //returns 22
  parseInt(“blue”); //returns NaN

  parseInt(“AF”, 16); //returns 175
  parseInt(“10”, 2); //returns 2

  parseFloat(“1234blue”); //returns 1234.0
  parseFloat(“22.5”); //returns 22.5
  parseFloat(“blue”); //returns NaN

• 强制类型转换
  Number(value)——把给定的值转换成数字（可以是整数或浮点数）；

  Number(false) 0
  Number(true) 1
  Number(undefined) NaN
  Number(null) 0
  Number( "5.5 ") 5.5
  Number( "56 ") 56
  Number( "5.6.7 ") NaN

补充：小数

• 四舍五入

  var num =2.4492425542;
  num = num.toFixed(2); // 输出结果为 2.45

• 不四舍五入 （不进位）

  Math.floor(15.7784514000 * 100) / 100 // 输出结果为 15.77

• 当成字符串，使用正则匹配

  Number(15.7784514000.toString().match(/^d+(?:.d{0,2})?/))
  // 输出结果为 15.77,不能用于整数如 10 必须写为10.0000

注意：如果是负数，请先转换为正数再计算，最后转回负数。

18、说出至少 4 种 vue 当中的指令和它的用法

• v-if：判断是否隐藏
• v-for：数据循环
• v-bind:class：绑定一个属性
• v-model:实现数据双向绑定

19、vue-router 怎么定义动态路由的？怎么获取传过来的动态参数？

• 简单回答：
  定义：path:'a/:value'
  获取：this.$route.params.value

• 全面了解：
  可以通过 query , param 两种方式
  区别: query 通过 url 传参，刷新页面还在 params 刷新页面不在了。
  （1）params 的类型：
  配置路由格式: /router/:id
  传递的方式: 在path后面跟上对应的值
  传递后形成的路径: /router/123

  用户

  //在index.js中
  {
  path: ‘/user/:userid’,
  component: User,
  },

跳转方法:

// 方法1：
按钮
// 方法2：
this.$router.push({name:'users',params:{uname:wade}})
// 方法3：
this.$router.push('/user/' + wade)

可以通过 $route.params.userid 获取你说传递的值
（2）query 的类型
配置路由格式： /router，也就是普通配置
传递的方式： 对象中使用 query 的 key 作为传递方式
传递后形成的路径： /routeid=123

档案


// 方法二：或者写成按钮以点击事件形式  
我的   

//点击事件
profileClick(){
	this.$router.push({
		path: "/profile",
		query: {
			name: "kobi",
			age: "28",
			height: 198
		}
	});
}

跳转方法:

// 方法1：
按钮
// 方法2：
this.$router.push({ name: 'users', query:{ uname:james }})
// 方法3：
按钮
// 方法4：
this.$router.push({ path: '/user', query:{ uname:james }})
// 方法5：
this.$router.push('/user?uname=' + jsmes)

可以通过 $route.query 获取你说传递的值。

20、分别写出 webpack 打包给服务器和本地开发预览的命令代码。
npm run build 和 npm run dev
21、下面代码
let a = [1,2,4]
let b = a.map(v=>{v = v* 2}) 写出 b 的值

原题中没有 return v，所以b的值是 [undefined,undefined,undefined]。
如果有 return v，则 b 的值是 [2,4,8]，正常 map 写法。

22、请生成下面这段DOM结构，要求：使用标准的DOM方法或属性。

	
请编辑这段话！

答案：
主要用到的函数：createElement，appendChild，createTextNode，setAttribute 这几个函数。
（1）创建元素的DOM方法 – createElement；
（2）设置元素属性的DOM方法 – setAttribute；
（3）添加到元素上的DOM方法 – appendChild；
（4）创建文字的DOM方法 - createTextNode；
（5）设置样式的DOM属性 – className（HTML DOM属性）

var oDiv=document.createElement("div");
var op=document.createElement("p");
oDiv.appendChild(op);
op.className="slogan";

var oText=document.createTextNode("请编辑这段话！");
op.appendChild(oText);
oDiv.setAttribute("id","example");

document.body.appendChild(oDiv);

23、请使用 Promise 封装 Ajax 操作
原始的 Ajax 操作如下：

var onSuccess = function(result){};  //成功的回调
var onFail = function(error){};  //失败的回调
var req = new XMLHttpRequest();
req.open("POST", "www.baidu.com", true);
req.onload = function(){
	if( req.readyState === 4 && req.status === 200 ){
		onSuccess(req.response);
	}else {
		onFail(req.statusText);
	}
}
req.onerror = function(){
	onFail(Error("网络异常"));
}

答案1：

//参考：https://www.nowcoder.com/questionTerminal/86311e67b9124788b68acdf002da55f8

const ajax = url => {
    return new Promise((resolve, reject) => {
        let req = new XMLHttpRequest();
        req.open("POST", url, true);
        req.onload = () => {
          if(req.readyState === 4 && req.status === 200){
            resolve(req.response);
          } else {
            reject(req.statusText);
          }
        }
        req.onerror = () => {
          reject(Error("网络异常"));
        }
    })
}

答案2：

return new Promise(function(resolve, reject){
    var req = new XMLHttpRequest();
    req.open("POST", "www.baidu.com", true);
    req.onload = function(){
      if(req.readyState === 4 && req.status === 200){
        resolve(req.response);
      } else {
        reject(req.statusText);
      }
    };
    req.onerror = function(){
      reject(Error("网络异常"));
    }
}); 

答案3：

// 参考：https://blog.csdn.net/weixin_45298413/article/details/108809108

const promise = new Promise((resove,reject)=>{
    var req = new XMLTttpRequest();
    req.open("post","http://www.baidu.com",true);
    req.onload = function(){
        if(req.readyState === 4 && req.status === 200){
            onSuccess(req.response);
        } else {
            onFail(req.statusText); 
        }
    }
    req.onerror = function(){
        onFail(Error("网络异常"));  
    }
})

延伸：
（1）利用Promise知识，用原生JS封装Ajax
参考：https://www.jianshu.com/p/76b32c84216a

//封装一个Promise函数
function queryData (url){
    //创建一个Promise实例
    var p = new Promise(function(resove,reject){
        var req = XMLHttpRequest();
        req.onreadystatechange = function(){
            if(req.readystate !== 4) return;
            if(req.readystate === 4 && req.status === 200) {
                //处理正常情况
                resove('req.responseText');
            }else{
                //处理异常情况
                reject('服务器错误');
            }
        }
        req.open('get',url);
        req.send();
    })
    return p;
}

//用实例方法调用封装函数
queryData('http://localhost:3000/data')
    .then(function(data){
        console.log('data1',data);
        //想要使用链式编程需要return返回，并且返回的数据将是下一次then方法参数函数的data参数
        return queryData('http://localhost:3000/data1')
    })
    .then(function(data){
        console.log('data2',data);
    })

（2）参考1：https://www.cnblogs.com/jwyblogs/p/11962866.html
参考2：https://www.nowcoder.com/questionTerminal/86311e67b9124788b68acdf002da55f8
参考3：https://segmentfault.com/a/1190000015114855utm_source=tag-newest

（二）
、HTML 与 CSS。

1. 实现两列布局：左列宽度为 200px，右列占据剩余宽度。要求：
   可以不兼容旧浏览器；
   不能使绝对定位等特殊定位式；
   不能使表格布局；

方法一：float+margin-left

div{
  height:200px;
}
.left{
  float: left;
  width: 200px;
  /* background: blue; */
}            
.right{
  margin-left: 200px;
  /* background: red; */
}

方法二：使用 flex

.box{
    width:500px;
    height:200px;
    display: flex;
    /* background:black; */
}
.left{
    width: 200px;
    /* background:pink; */
}
.right{
    flex: 1;
    /* background:green; */
}

方法三：使用 flex + justify-content:space-between;

.box{
    width:500px;
    height:200px;
    /* background:black; */
    display: flex;
    justify-content:space-between;
}
.left{       
	width:200px;
    /* background: pink; */
}
.right{
    /* background:green; */
}

2. 把尺?未知的元素置于浏览器可区域的正中央，且位置不随滚动变化（须兼容旧浏览器）。 有疑问，尺寸未知是是意思？？
   写法一：

方法二：

使用position属性的绝对定位
.yuansu{
	position: absolute;
	margin-left: -200px;
	margin-top: -80px;
	top: 50%;
	left: 50%;
	display: block;
	z-index: 2000;
}

、JavaScript。

1. 使正则表达式检查某段字符串是否为 URL。URL 的认定标准（符合以下条件之）：
   以「协议://」开头，例如「http://」、「https://」、「ftp://」、「file://」等，但需校验是否为有效协议；
   以「//」开头，即跟随协议。

   string httpurl = String.Format(@"http://{0}(/{1}(?{2}){ {0,1}}){ {0,1}}

2. 假设某个数组的元素全是数字类型，请编写代码找出该数组中的重复元素。要求：
   代码中最多只能存在次遍历（数组循环，indexOf、forEach、filter 等法均视为遍历）；
   不能使 ES>=6 中的新增法和对象。

方法一：
写法一：【正确】

function getRepeat(ele){
  var tmp = [];
  var d = {};
  for(let n of ele){
    if(!d[n]){
      d[n] = 0;
    }
    if(n in d && d[n] == 1){
      tmp.push(n);
    }
    d[n] += 1;
  }
  return tmp;
}
var a = [5, 4, 3, 2, 1, 2, 3, 2, 1];
console.log('取出重复元素',getRepeat(a))

写法二：【正确】

var a = [5, 4, 3, 2, 1, 2, 3, 2, 1];

Array.prototype.duplicate=function() {
  var tmp = [];
  var d = {};
  for(let n of a){
  	//一个个数测试，d保存的就是同一个数字出现的次数
    if(!d[n]){
        d[n] = 0;
    }
    //d[n] == 1的判断是为了确保相同数字只显示一个
    if(n in d && d[n] == 1){
        tmp.push(n);
    }
    //判断有没有重复，就算下它出现了几次
    d[n] += 1;
  }
  return tmp;
}
console.log('取出重复元素', a.duplicate())

方法二：（理解）

var a = [5,4,3,2,1,2,3,2,1,];
Array.prototype.duplicate=function() {
  var tmp = [];
  this.concat().sort().sort(function(a,b){
    if(a==b && tmp.indexOf(a) === -1) tmp.push(a);
  });
  return tmp;
}
console.log('取出重复元素', a.duplicate())

方法三：（理解）不符合本题要求

function remove(arr){
    var new_arr = [];
    var new_arr2 = [];
    arr.forEach((val, index)=> {
        //new_arr是对数组去重
        if(new_arr.indexOf(val) === -1) {
            new_arr.push(val);
        } else {
            //对重复的元素本身去重
            if(new_arr2.indexOf(val) === -1) {
                new_arr2.push(val);
            }
        }
    });   
    return new_arr2;   
}
var a = [1,2,4,4,3,3,1,5,3];
var b = remove(a);
console.log('b',b);

3. a、b、c 都是执异步操作的函数，请通过 Promise、async、await 实现：a、b 并执完毕后再执 c。
   function a(callback) { setTimeout(callback, 10); }
   function b(callback) { setTimeout(callback, 20); }
   function c(callback) { setTimeout(callback, 30); }

方法二：
参考：https://blog.csdn.net/qq_39456813/article/details/101191977

（三）
一、单选题
1、下列有关定位说法错误的是？ A
A. absolute 可以基于 static 定位
「 生成绝对定位的元素，相对于static 定位以外的第一个父元素进行定位 」
B. relative 可以基于 absolute 进行定位。
C. fixed 固定悬浮在 视口内
D. 定位 position 不能继承到子元素

2、把鼠标移到按钮并点击时，会产生一串什么样的事件？ D
A. active hover focus
B. hover focus active
C. focus hover active
D. hover active focus
3、在 JS 中 ES5 以下哪种情况会产生一个新的作用域？ E
A. if 语句
B. 所有选项都会
C. for 语句
D. try……catch块
E. 函数
4、以下代码在控制台打印结果为？ D

其中：

// test1.js
console.log('test1')
// test2.js
console.log('test2')

A. test1 inline script test2
B. inline script test1 test2
C. test1 test2 inline script
D. inline script test2 test1

5. 现有如下策略：

Content-Security-Policy: default-src 'self'; script-src *.script1.org; font-src test.org; media-src https:; script-src * .script2.org 

在该网页中，以下说法错误的是： C
A. 图片只能从本域获取
B. 多媒体文件必须通过 SSL方式获取
C. 可运行脚本不允许来自于 script2.org或其子域
D. 字体资源允许来自于 test.org 及其子域
解析：
参考：https://www.cnblogs.com/suizhikuo/p/12215229.html
Web 安全之内容安全策略（Content-Security-Policy,CSP）配置

二、多选题：
1、以下哪几个选项的输出结果相同？ ABD
A.

for(var i = 0; i < 10; i++){
	setTimeout(function(i){
		console.log(i)
	}, 0, i)
}

B.

for(let i = 0; i < 10; i++){
	setTimeout(function(){
		console.log(i)
	}, 0)
}

C.

for(var i = 0; i < 10; i++){
	setTimeout(function(){
		console.log(i)
	}, 0)
}

D.

for(var i = 0; i < 10; i++){
	(function(i){
		setTimeout(function(){
			console.log(i)
		}, 0)
	}(i))
}

解析：
ABD 输出 0123456789
C 输出10个10
2、以下哪些说法是正确的？ABCD
A. 所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（null 除外）
B. 所有的引用类型（数组、对象、函数），__proto__ 属性值指向它的构造函数的 prototype 属性值
C. 所有的引用类型（数组、对象、函数），都有一个 __proto__ 属性，属性值是一个普通的对象
D. 所有的函数，都有一个 prototype 属性，属性值也是一个普通的对象

知识点：
原型的5个规则（引用类型指除了null的引用类型 ）
（1）所有引用类型（数组，对象，函数），都具有对象特性，即可自由扩展属性

var obj = {}
obj.a=100;
var arr =[]
arr.a =100;
function fn(){}
fn.a=100;

（2）所有的引用类型，都有一个proto属性，属性值是一个普通对象

console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);

（3）所有的函数都有一个prototype属性，属性值也是一个普通对象

console.log(fn.prototype)

（4）所有的引用类型（数组，对象函数）,proto属性指向他的构造函数的prototype属性

console.log(obj.__proto__===Object.prototype)   

（5）当试图得到一个引用类型的某个属性时，如果对象本身没有这个属性，那么会去他的proto(即它的构造函数的prototype)中去寻找

function Foo(name){
	this.name= name;
}
Foo.prototype.alertName = function(){
	alert(this.name)
}
var f = new Foo('zs');
f.printName=function(){
    console.log(this.name)
}
f.printName();
f.alertName();      

三、填空题
1、请写出以下表达式的结果： typeof null

类型

结果

Undefined

“undefined”

Null

“object” (见下文)

Boolean

“boolean”

Number

“number”

BigInt(ECMAScript 2020 新增)

“bigint”

String

“string”

Symbol (ECMAScript 2015 新增)

“symbol”

Function 对象 (按照 ECMA-262 规范实现 [[Call]])

“function”

2、请写出以下表达式的结果：

void 0 == null        //true
void 0 == undefined   //true
void 0 === null       //false
void 0 === undefined  //true

四、问答题
题目描述
填写一个函数，实现多个异步任务并行时限制最大并行数量的功能，可参考如下函数结构：

async function runParallel(max: number, tasks: (() => Promise)[]) : Promise

使用：

const tasks = [...Array(100).keys()].map(i => () => new Promise(res => setTimeout(res,1000)))

当并行 Promise 的数量达到10个时，就会等待其中某个 resolve 后，才开启队列中下一个 Promise。

五、编程题
1、URL参数提取
时间限制：C/C++ 1秒，其他语言 2 秒
空间限制：C/C++ 32768K，其他语言 65536K
语言限定：JavaScript(V8 6.0.0)
题目描述
实现一个parseURL函数，用于提取URL中的哈希以及查询参数。
输入描述
输一个含有哈希的URL，其中包含若干个查询参数
输出描述
输出有若干行，第一行为URL中的哈希，接下来的每一行为该URL的查询参数名称和值，用空格分隔，它们的顺序按照原本在URL中出现的顺序输出；
输入
http://163.com/role/search/#pagepageSize=20&pageNumber=10
输出
page
pageSize 20
pageNumber 10
方法一：

function parseQueryString(argu){
  var str = argu.split('?')[1];
  var result = {};
  var temp = str.split('&');
  for(var i=0; i

function getQueryString(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  var currentUrl = window.location.search
  let r = ''
  if (currentUrl != '') {
    r = window.location.search.substr(1).match(reg) // 没有#的url
  } else {
    r = window.location.hash.split('?')[1].match(reg)
  }
  if (r != null) return unescape(r[2])
  return null
}
this.smallId = getQueryString('smallId')
this.supplierId = getQueryString('supplierId')
this.taskDetailId = getQueryString('taskDetailId')

const person = {
	name:"Lydia",
	age:21
};
for(const item in person){
	console.log(item);
}

var arr=[{name:'张三'},{name:'李四'}];
var obj={name:'王五'};
for (var i in arr){
  console.log(i)   // 0 1 遍历得到下标
}
for (var i in obj){
  console.log(i)   // name 得到属性名
}

for (var i of arr){
  console.log(i)   // {name:'张三'} {name:'李四'}  得到数组的每一项值，与forEach一样
}

function getInfo(member, year){
	member.name = "Lydia";
	year = "1998";
}
const person = { name: "Sarah" };
const birthYear = "1997";
getInfo(person, birthYear);
console.log(person, birthYear);

const name = "Lydia";
age = 21;
console.log(delete name);
console.log(delete age);

const numbers = [1,2,3,4,5]
const [y] = numbers;
console.log(y);

const value = {number: 10};
const multiply = (x = {...value}) => {
	console.log(x.number *= 2);
};
multiply();
multiply();
multiply(value);
multiply(value);

class Dog{
	constructor(name){
		this.name = name;
	}
}
class Labrador extends Dog{
	// 1
	constructor(name, size){
		this.size = size;
	}
	// 2
	constructor(name,size){
		super(name);
		this.size = size;
	}
	// 3
	constructor(size){
		super(name);
		this.size = size;
	}
	// 4
	constructor(name,size){
		this.name = name;
		this.size = size;
	}
}

function* startGame(){
	const answer = yield "Do you love JavaScript?";
	if(answer !== "Yes"){
		return "Oh wow... Guess we're gone here";
	}
	return "JavaScript loves you back ??";
}
const game = startGame();
console.log(/* 1 */);  // Do you love JavaScript?
console.log(/* 1 */)   // JavaScript loves you back ??

async function getData(){
    return await Promise.resolve("I made it!");
}
const data = getData();
console.log(data);

    // 块作用域
    {
        var a = 1;
        let b = 2;
        const c = 3;
        // c = 4; // 报错
        var aa;
        let bb;
        // const cc; // 报错
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3
        console.log(aa); // undefined
        console.log(bb); // undefined
    }
    console.log(a); // 1
    // console.log(b); // 报错
    // console.log(c); // 报错
 
    // 函数作用域
    (function A() {
        var d = 5;
        let e = 6;
        const f = 7;
        console.log(d); // 5
        console.log(e); // 6  
        console.log(f); // 7 
 
    })();
    // console.log(d); // 报错
    // console.log(e); // 报错
    // console.log(f); // 报错

 const person = {
     name : 'jiuke',
     sex : '男'
 }
 person.name = 'test' 
 console.log(person.name)  //test

let promise1 = new Promise(function(resolve,reject){
    setTimeout(function(){
        resolve('ok')
    },1000)
})
promise1.then(function success(val){
    console.log(val)
})

class PromiseM {
    constructor (process) {
        this.status = 'pending'
        this.msg = ''
        process(this.resolve.bind(this), this.reject.bind(this))
        return this
    }
    resolve (val) {
        this.status = 'fulfilled'
        this.msg = val
    }
    reject (err) {
        this.status = 'rejected'
        this.msg = err
    }
    then (fufilled, reject) {
        if(this.status === 'fulfilled') {
            fufilled(this.msg)
        }
        if(this.status === 'rejected') {
            reject(this.msg)
        }
    }
}

var mm=new PromiseM(function(resolve,reject){
    resolve('123');
});
mm.then(function(success){
    console.log(success);
},function(){
    console.log('fail!');
});