JavaScript常见面试题及答案(1)

JavaScript常见面试题及答案(1)

1.js组成

• ECMAScript，描述了该语言的语法和基本对象。(JS核心语言标准)
  • 文档对象模型（DOM），描述处理网页内容的方法和接口。
    • 是针对XML的基于树的API。描述了处理网页内容的方法和接口
      • 是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。
  • 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

2.js代码可以运行在什么地方
1.Nodejs环境下
2.浏览器中

3.js里面的内置函数及对象有哪些
内置函数
eval()
isFinite()
isNaN()
parseFloat()
parseInt()
内置对象
技法 AABDEF MORS
Arguments 函数参数类数组对象
Array 数组对象
Boolean 布尔对象
Date 日期时间
Error 异常对象
Function 函数构造器对象
Math 数值对象
Object 基础对象
RegExp 正则表达式对象 regular expression
String 字符串对象
对象：Array Object Date String Number Boolean … RegExp
函数：slice() splice() join() toString() sort() concat() reverse() isNaN() isFinite()

4.什么是深拷贝和浅拷贝，如何进行浅拷贝
栈区存放基础数据类型的值(引用或常量) 堆区存放引用数据类型的值
浅拷贝：直接赋值地址 栈堆
深拷贝：在内存中新建一个新的拷贝对象，将引用赋值
深拷贝的方法：
1.for循环拷贝
2.slice()
3.concat()
4.ES6的扩展运算符…
5.Json转换 JSON.parse(JSON.stringify(copyObj))

5.css3布局机制
0.标准流布局
1.浮动布局
2.定位布局
3.伸缩盒布局
4.栅格布局 bootstrap
5.响应式布局

6.列出十个数组实例可以调用的属性和方法
属性
prototype
length
constructor
方法
数组序列化 toString(),join(),
构造函数的方法 isArray(),from(),of()
栈与队列方法 push(),pop(),shift(),unshift()

   排序方法         reverse(),sort()

   操作方法         concat(),slice(),splice()
   位置方法         indexOf(),lastIndexOf()
   迭代方法         every(),some(),filter(),map(),forEach()

7.列出十个String类型可以调用的属性和方法并解释分别代表什么意思
方法：
https://blog.csdn.net/qq_42822993/article/details/120064882?spm=1001.2014.3001.5502
属性
prototype
length
constructor
8.写出10条linux常用命令并解释
妈妈说查重率平台伺候
man more sudo cd cat pwd touch clear history
pwd查看当前所在路径
man查看指定命令手册
more预览文件内容 逐页阅读
touch 可以创建文件或者更改最近访问时间
cd 切换到指定目录中
cat 预览文件内容
history 列出历史命令
9.写出5条常用git命令并解释
git init 以创建新的 git 仓库
git clone 克隆
git add 添加改动到缓冲区
git commit -m [message] 提交暂存区到仓库区
git log 显示当前分支的版本历史
10.解释什么是arguments
函数的一个默认属性，一个类数组对象，可被覆盖，用于存储传进函数的所有参数
第一个参数在索引0处
11.如何创建对象？对象的创建方式有几种?
对象创建的5种方法
1.字面量方式创建
2.工厂模式创建 (有return)
3.构造模式创建 (new )
4.原型模式创建
5.组合模式创建(构造模式混合原型模式)
12.重构forEach filter map every some其中的一个
13.js和html和css技术之间的关联性
结构、表现、行为
14.阿里云在我们开发中扮演什么角色
服务器，运行环境
15.简述事件流和事件冒泡
事件流描述了页面接收事件的顺序。
IE 事件流被称为事件冒泡，这是因为事件被定义为从最具体的元素（文档树中最深的节点）开始触发，
然后向上传播至没有那么具体的元素（文档）。
16.事件代理机制
把要做的事委托给父元素（或父元素的父元素）来处理，
利用事件冒泡，可以只使用一个事件处理程序来管理一种类型的事件。
17.对一个数组使用算法排序 var arr=[1,3,5,7,6,9];
18.什么是闭包?闭包的作用，闭包的优缺点。
闭包就是指有权访问另一个函数作用域中的变量的函数
条件 - 函数嵌套函数

• 内部函数引用了外部函数中的数据（属性、函数）
  和变量不会被回收
  作用：1.划分出局部作用域 2.隐藏变量，避免全局污染 3.可以读取函数内部的变量
  缺点：1.变量都被保存在内存中，内存消耗很大 2.2
  19.js的特点
  1.解释型语言
  2.弱类型语言
  3.顺序解释执行
  4.既可以作为前端脚本语言，也可以作为后端语言，取决于应用平台（浏览器/操作系统）和使用的框架（dom、 jquery/http、mysql、file）
  20.js的基本数据类型
  sunnb String undefined

• 21.写出5个Math实例可以调用得方法
  Math.min() //求一组数中的最小值
  Math.max() //求一组数中的最大值
  Math.ceil() 向上舍入
  Math.floor() 向下舍入
  Math.round() 四舍五入
  Math.random() 返回大于0小于1的一个随机数 [0，1)
  22.函数的调用方式有几种，并说明他们的区别？

  • 函数名(实参列表);

    • 函数名.call(执行环境对象,实参列表);

    • 函数名.apply(执行环境对象,实参列表数组);

    • 函数名.bind(执行环境对象)(实参列表);
      区别
      call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面
      apply 第二个参数必须是一个数组
      bind 除了返回是函数，没有立即执行（需要手动执行）并且可以将参数在执行的时候添加以外，
      23.和=有什么区别？
      ==比较时，如果类型不一样会先转换成同一类型进行比较，值相等则返回true
      === 不转换类型，类型、值都相等返回true
      24.DOM中怎样追加、插入、移除、复制和获取节点
      appendChil()
      insertBefore()
      removeChild()
      replaceChild()
      p.cloneNode(true)
      25.谈谈你对于原型和原型链的理解？
      原型
      每个函数function都有一个prototype，即原型。都有一个proto，指向创建它的构造函数的原型对象
      原型链
      原型链就是以一个对象为基准，以_proto_为连接的这条链条，一直Object.prototyle为止的这条链。
      称之为原型链的原因：以对象原型为节点，连起来的链,从底向高继承，最高是Object
      原型继承：在当前对象找一个属性,找不到后会沿着原型链通过_proto_去向上找，一直找到Object.prototyle为止
      test.constructor 指向实例化 test对象 的 构造函数 也就是function Test(),允许被更改
      可以访问到原型链上的方法和属性
      26.ajax是什么？你在开发中如何使用ajax?
      一种技术
      异步的JavaScript和XML
      用于浏览器和服务器之间进行 数据交互
      实现异步操作
      // 1.创建XMLHttpRequest对象
      // 2.使用open方法设置和服务器的交互信息
      // 3.设置requestHeader() request.setRequestHeader(属性名称, 属性值);
      // 4. send() 设置发送的数据，开始和服务器端交互
      // 5.取得响应，注册事件
      27.说明引用传递和值传递区别
      值传递：值传递的数据为基本数据类型，基本数据类型在内存中存放的是数值本身；值传递为’单向传递’，只能由实参传递给形参。
      引用传递：引用传递的数据为复杂数据类型，复杂数据类型在内存中存放的是地址，再根据地址找到数值。
      https://blog.csdn.net/anr_safely/article/details/104447653
      28.js中如何监听一个对象中属性的变化
      ES5中
      通过Object.defineProperty()为需要监听的属性设置一个代理。通过改变代理的值，触发set和get的方法，在这两个方法中我们编写我们想要的操作。
      Object.defineProperties(obj,{
      a : {
      configurable: true, // 设置属性可以更改，默认为false
      set : function(value){}
      },
      b : {
      configurable: true, // 设置属性可以更改，默认为false
      set : function(value){}
      }
      })
      ES6中
      funtion handle(){
      // 改写set方法，监听设置
      set: funtion(){},
      get: funtion(){}
      }
      let p = new Proxy({},handle) // 第一个参数为监听的对象，第二个参数为改写的方法
      29.说明RegExp.prototype.test()与String.prototype.search()的异同点
      1.调用对象不同RegExpObject String
      2.传递参数不同String 字符串或者正则表达式。
      3.返回值不同 Boolean Number

      30.css选择器的优先级如何计算？
      -权重的计算规则
      ​ 内联样式，如: style="…"，权值为1000。
      ​ ID选择器，如：#content，权值为0100。
      ​ 类，伪类、属性选择器，如.content，权值为0010。
      ​ 标签选择器、伪元素选择器，如div p，权值为0001。
      ​ 通配符、复合选择器（+、>、~等）、否定伪类（：not）没有影响，权值为0000。
      ​ 继承的样式没有权值

​ -首先先计算选择器中有多少个id, id多的选择器优先级最高
​ -如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
​ -如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
​ -如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时 谁写在后面听谁的

​ 也就是说优先级如果一样, 那么谁写在后面听谁的
​ 不可跨级作战，一个元婴可斩无数金丹
31.简述CSS盒子模型
W3C盒子(默认盒子，内容盒子) box-sizing:content-box
​ width、height content内容区宽高
​ 盒子的宽：width+padding-left+padding-right+border-left+border-right
​ 盒子的高：height+padding-top+padding-bottom+border-top+border-bottom
​ 所占屏幕区域的宽：盒子的宽+左右margin
​ 所占屏幕区域的高：盒子的高+上下margin

IE盒子 box-sizing:border-box
width、height 盒子的宽高
盒子的宽：width
盒子的高：height
所占屏幕区域的宽：盒子的宽+左右margin
所占屏幕区域的高：盒子的高+上下margin

区别：高频面试题

【注意】：如果涉及到盒子内部间距的调整，我们优先使用padding
32.typeof返回值
基础数据类型number string boolean undefined
引用类型：Object Function
NaN
33.元素居中
1.行内元素居中
水平居中:text-align:center;
垂直居中:line-height:和父容器一样高

块级元素的s水平、垂直居中
水平居中:margin: 0 auto;

水平垂直居中:
1.使用子绝父相
        给父元素设置相对定位
        给子元素设置绝对定位
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin:auto;
        或者
            left: 50%;
            /* -100px为本元素宽的百分之五十 */
            margin-left: -100px;  
            top: 50%;
            /* -100px为本元素高的百分之五十 */
            margin-top: -100px;
2.使用table-cell布局
    display: table-cell;
    vertical-align: middle;

3.flex布局中给父元素设置
    justify-content：center：
    align-items：center：

---