测试一下你的Javascript基础能拿下多少分

非面试题,考察的都是js很基础的东西

l 填空题（第题1分）

1. Js数据类型：_______ 、_______ 、_______ 、_______ 、_______ 、______ 、_______。

2. ES6 新增数据类型______表示____________的值。

3. 声明变量使用关键字______ 、______。

4. 声明常量使用关键字______，常量在声明时必须______。

5. 声明字符串类型的数据时，可以使用符号______ 、______ 、______ 。

6. 模板字符串可以______行 , 如果要在模板字符串中引用变量使用______。

7. 字符串表示真假值：______，数值表示真假值：______ 。

8. "+"符号在__________________作字符串拼接符使用。

9. typeof 关键字在检查数组与对象类型的数据时返回____________，检查函数时返回____________。

10. 类型转换有两种分别是：______，______。将字符串强制转换为数字类型可以使用 ______、______ 、______ 。

11. 写出的6个内置对象 ______、______、______ 、______ 、______ 、______ 。

12. 数组中______从0开始计数，______从1开始计数，______属性表示数组的长度。

13. JSON.stringify() 的作用：____________, JSON.parse() 的作用是:____________。

14. 正则表达式中元字符 \D表示匹配____________，\d表示匹配____________。

15. ____________获取当前节点的父级节点，____________获取当前节点的祖先节点。

16. DOM中唯一操作cookie的属性是____________。

17. 实现绑定事件的两个函数分别是：_________________、___________________。

18. element.offsetLeft 计算元素到__________，_________计算元素到顶部的距离。

19. 事件冒泡是___________将事件层层传递，而___________是从外向内传递事件。普通事件只支持___________,捕获与冒泡不能______________。

20. 删除cookie 可以将__________________。

21. 克隆元素使用___________。接收一个布尔值的参数，如果为____________则该节点的所有后代节点也都会被克隆,如果为____________则只克隆该节点本身。

22. 定时器有两种：_________、_________。定时器代码不会____________主线程。

23. 面向对象三大特征：______、______、______。

24. ES6继承使用关键字_________，在子类构造方法中必须首先调用_______________，实例化子类会首先_______________。

25. ____________返回 0 ~ 1 之间的随机数。

26. 在数组与对象的数据操作中，数据 B 复制了数据 A 当修改数据 B 时不影响数据 A，叫作____________。

27. p.name 访问对象成员使用 [] 方括号语法可以写成_______________。

28. 函数中 return 关键字的作用：_______________________________________。

29. 表达式 200 + 2 * 0 - true 的结果是____________。

30. 阻止事件冒泡可以使用_________、_________。

l 选择题（每题 1 分）

1. 循环语句中___终止当前离它最近的循环，___结束本轮循环继续下一次循环。
   A: breack
   B: continue
   C: catch
   D: boolean

2. this指向: ______ 。
   A: 在函数中，this 表示全局对象。
   B: 在方法中，this 该方法所属的对象。
   C: 如果单独使用表示全局对象。
   D: 在事件中，this 表示接收事件的元素。
   E: setTimeout时this 指向全局对象使用箭头函数时this可以指向程序的上下文，（就是定义时所在的对象，而不是使用时所在的对象）

3. 修改this 指向可以使用以下函数：___ 。
   A: func.call(thisArg, arg1, arg2, ...)
   B: func.call(thisArg, [argsArray])
   C: func.abbly(thisArg, [argsArray])
   D: func.bind(thisArg[, arg1[, arg2[, ...]]])

4. 以下数组操作描述错误的是 ___ 。
   A：length属性表示数组的长度，从0开始计数。
   B： “arr[arr.length] = 19;”，表示在数组的末尾处添加一相新的元素，数组长度不变。
   C：for/in 可以迭代出数组的下标，for/of迭代数组的元素值。
   D：“arr.sort()” 方法可以反转数组。

5. 以下对象操作描述正确的是___。
   A：对象可以任意添加属性和方法。
   B：删除成功使用 ‘delete’ 关键字。
   C： ‘in’ 关键字可以检查对象是否是某个类的实例。
   D： instanceof 判断对象是否是某个类的实例，结果是boolean类型。

6. 为字符串方法匹配正确的说明：‘search()’ ___、‘split()’___、‘replace() ’___、‘match()’___。
   A：字符搜索
   B：替换匹配到的字符串
   C: 分割字符串操作
   D: 匹配一个或多个规则

7. 以下方法中可以获取到空白节点（文件节点）的方法是：___。
   A: element.lastElementChild
   B: element.previousElementSibling
   C: element.childNodes
   D: element.firstChild

8. 对元素节点描述正确的是：___。
   A： 元素的节点类型为1。
   B: 元素的节点类型为3。
   C：‘element.nodeName’返回元素名称并且该名称为大写。
   D：‘element.nodeType’属性可读写。

9. 以下事件中支持事件冒泡的事件有：___。
   A： onclick
   B： onmouseenter
   C: onmouseleave
   D: onmouseout

10. 阻止默认事件：___。
    A： event.preventDefault()
    B： IE使用 return false
    C: event.stopPropagation()
    D: IE使用 return true

11. 下面关于箭头函数描述正确的有___：。
    A： 箭头函数中没有参数时参数可以省略。
    B： 箭头函数没有语句时{}花括号可以省略。
    C： 省略参数时不能省略花括号。
    D： 省略花括号时 不能写retuan关键字。

12. 表达式 5+'1'+1+1-1的结果是___。
    A： 数字5110
    B： 字符”5111”
    C: 数字 7
    D： 字符串”5110”

13. 表达式 -1 && 0 && 1 结果：___
    A： 0
    B: false
    C: -1
    D: true

14. 关于Bom描述正确的有：___。
    A： screen.back() 加载 history 列表中的前一个 URL
    B： location.reload() 重新载入当前文档
    C： window.class() 关闭当前窗口
    D: BOM 中最顶层对象是 window 对象。

15. 关于 class 描述错误的有：___。
    A： class 是ES6定义类的新语法。
    B： constructor 构造函数， 在实例化时第一个被调用的函数，类成员要在 constructor 构造中定义。定义类时必须写constructor 否则报错。
    C： class 中成员方法间不允许使用 , 逗号分隔。
    D： static 修改静态属性和方法。

16. 以下哪个不是 Promise 状态______。
    A： pending
    B: fulfilled
    C: rejected
    D: starting

17. 选出可以表示 boolean 为假的选项：______。
    A： undefined
    B: null
    C: ‘’
    D: Symbol('My symbol')

18. 关于 ... 描述正确的有：___。
    A： 在函数中使用表示rest 参数（形式为...变量名），用于获取函数的多余参数。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
    B： rest 参数可以替代 arguments 对象，并且在参数列表中只能有一个。
    C： ... 可以在数组中使用，表示展开运算符。
    D： Set、Map对象可以使用...展开运算符。

19. 事件委托描述正确的有：___。
    A： 可以让后续添加的元素直接拥有事件的行为，也就是直接就拥有事件，而不需要再单独指定事件。
    B： 事件委托必须把事件注册给父级元素。
    C： 只有绑定事件才能支持事件委托。
    D： 通过event.target 可以分辨是哪个元素触发的事件。

简答题（每题10分）

1. 什么是事件委托？

2. 编写一个返回5-10随机数的函数。

3. 筛选出字符串 "qq号大全，984033324，1452245123-22q2222ddddd，456123" 中QQ号。

4. 编写函数实现数组去重。

5. 为下面HTML 添加事件,当点击Ii 时可以在控制台输入li中内容

<ul id="mul">
 <li>苹果</li>
 <li>香蕉</li>
 <li>草莓</li>
 <li>樱桃</li>
</ul>

6. 怎么将数组的浅拷贝改变为深拷贝，请举例说明

7. 什么是命名空间？

8. 简述 局部变量、全局变量、作用域链。

9. 怎么批量添加元素并且保证高效率？

10. 什么是递归？

如果觉得不错记得点个赞,转载请注明出处,谢谢

揭晓答案

1.Number、String、Boolean、Object、undefiend、null、Symbol
2.Symbol、独一无二
3.Var、let
4.Let、确保常量的唯一
5.``(ES6的模板字符串)、 " "(双引号) 、' '(单引号)
分别在什么场景使用?单双引又有什么区别呢?
6.换、$
7.true/false、1/0
8.连接字符串
9.Object、 function
10.字符串、数值类型、.toString()、String()、隐式转换
参考 https://blog.csdn.net/qq_37777208/article/details/83586470

11. Array、Number、Object、function、String、Math
    参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects
    12.索引index(也就是下标)、计算时、 length
    13.将数据转换成对象、将字符串串专成对象
    14.匹配一个非数字字符。等价于 [^0-9]、匹配一个数字字符。等价于 [0-9]
    15..parent、.parentNode
    16.document.cookie
    17.OnClick、addEvenlisten
    18.浏览器页面的左边、element.offsetTop
    19.最内层的元素、事件捕获、事件捕获
    20.浏览器的缓存清除
    21.cloneNode()、true、false
    22.SetTimeout、setInterval
    23.继承、多态、封装
    24.Super、父类的构造方法、调用自身的构造方法
    25.Math.random()
    26.深拷贝
    27.p[name]
    28.终止该判断或终止该函数往下执行
    29.199 (Number类型)
    30 e.stopPropagation、e.preventDefault() (不考虑IE兼容)
    选择题
    1 A B
    2 A E
    3 A C D
    4 A B
    5 B D
    6 A C B D
    7 C
    8 B D
    9 A B
    10 A B
    11 A
    12 A
    13 A
    14 B
    15 C
    16 D
    17 A B
    18 C D
    19 D
    简答题
    1 利用事件冒泡，指定一个事件处理程序，就可以管理某一类型的所有事件。
    事件委托的作用
    (1).提高性能：每一个函数都会占用内存空间，只需添加一个时间处理程序代理所有事件，所占用的内存空间更少；
    (2).动态监听：使用事件委托可以自动绑定动态添加的元素，即新增的节点不需要主动添加也可以具有和其它元素一样的事件。
    2

 var Range = Max - Min;
 var Rand = Math.random();
 return Min + Math.round(Rand * Range);
}
console.log(GetRandomNum(5,10))

3
利用正则匹配 (可以写一个函数然后把定义好的值放进去)

let reg = /^[1-9][0-9]{4,9}$/
let obj = ["984033324","1452245123-22q2222ddddd","456123"]
for(let i=0;i<obj.length;i++){
    if(reg.test(obj[i]) == true){
        console.log('QQ号',obj[i]);
    }
}

4
数组去重 (总结了12种方法,如果有需要我再列举12种方法以及它们的优缺点)
(1)利用ES6 Set去重

function unique (arr) {
  return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, 
            null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

(2) 利用for嵌套for，然后splice去重（ES5中最常用）
(3) 利用indexOf去重
(4) 利用sort()
(5) 利用对象的属性不能相同的特点进行去重
(6) 利用includes
(7) 利用hasOwnProperty
(8) 利用filter
(9) 利用Map数据结构去重
(10) 利用reduce+includes
(11) [...new Set(arr)]
(12) 利用递归去重
5

let ul = document.getElementById("mul")
ul.addEventListener("click", function(e){
   console.log(e.target.innerText);
});

6
(1) 利用JSON.parse JSON.stringify
(2)

function deepClone(obj) {
   // 如果传入的值不是一个对象，就不执行
   if (Object.prototype.toString.call(obj) !== '[object Object]') return
   // 根据传入值的类型初始化返回结果
   let result = obj instanceof Array ? [] : {}
   for (let key in obj) {
       if (obj.hasOwnProperty(key)) {
           // 如果obj是个对象，就递归调用deepClone去遍历obj的每一层属性，如果不是对象就直接返回值
           result[key] = Object.prototype.toString.call(obj[key]) === '[object Object]' ? deepClone(obj[key]) : >obj[key]
       }
   }
   return result
}
// 改进判断对象的方法
console.log(typeof null === 'object') // true
console.log(Object.prototype.toString.call(null) === '[object Object]') // false

7
http://dditblog.com/itshare_458.html
8
http://caibaojian.com/javscript-var.html
9
思路:循环+判断
获取到对应元素的id或者class,然后再加以元素控制
10

// function fn() {
//   fn()
// }
// 1. 自己调用自己
// 2. 因为自己调用自己会出现无限死循环 所以还需要设置一个停止条件
// 3. 递归永远是树形结构 -> 递归树
// 4. 最先调用的函数 最后执行完毕 最后调用的函数 最先执行完毕
// 阶乘
// 5! = 5 * 4 * 3 * 2 * 1  = fn(5) => fn(4) * 5
// 4! =     4 * 3 * 2 * 1  = fn(4) => fn(3) * 4
// 3! =         3 * 2 * 1  = fn(3) => fn(2) * 3
// 2! =             2 * 1  = fn(2) => fn(1) * 2
// 1! =                 1  = fn(1) => 1
// fn(n) = fn(n - 1) * n
// n! => fn(n)
// 5! => fn(5)  4! => fn(4)  3! => fn(3)  2! => fn(2)  1! => fn(1)

function fn(n) {
 if (n === 1) {
   return 1
 } else {
   return n * fn(n - 1)
 }
}

//fn(5) 开启一个栈内存
//fn(4) 开启一个栈内存
//fn(3) 开启一个栈内存
//fn(2) 开启一个栈内存 
//fn(1) 开启一个栈内存 return 1
console.log(fn(4))  //24
// console.log(fn(5))
// console.log(fn(6))