JavaScript基础——百度一面整理在牛客上看到这个写的比较全，就整理了部分问题的答案。行内块状元素综合了行内元素

在牛客上看到这个写的比较全，就整理了部分问题的答案。作者公众号

例举几个行内元素和块级元素？它们的区别是什么？

行内元素：
- span
- b
- i
- 行内元素特征：
  - (1)设置宽高无效
  - (2)不会自动进行换行
  - (3)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
块级元素：
- div
- p
- ul-li
- header
- footer
- 块级元素特征：
  - (1)能够识别宽高
  - (2)可以自动换行
  - (3)margin和padding的上下左右均对其有效
  - (4)多个块状元素标签写在一起，默认排列方式为从上至下
行内块状元素
行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
- 行内块状元素特征：
  - (1)不自动换行
  - (2)能够识别宽高
  - (3)默认排列方式为从左到右

接上，img元素是行内元素，为什么可以设置宽高？

置换元素
置换元素是指：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
浏览器根据 <img> 标签的 src 属性显示图片。根据标签的 type 属性决定显示输入框还是按钮。

img的title和alt属性区别

alt是在图片不能正常加载百时候显示的提示语

<img src="eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

title属性是鼠标划上去显示的内容，代码如下：

<img src="eg_tulip.jpg"  title="上海鲜花港 - 郁金香" />

cookie、localStorage、sessionStorage的区别
HTML中header的meta标签

meta常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。

HTML5 meta标签的name属性：
name属性主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。meta标签中name属性语法格式是：

<meta name="参数"content="具体的描述">。

其中name属性最重要的一个参数。

HTML5 meta标签的name属性的值keywords(关键字)：
说明：用于告诉搜索引擎，你网页的关键字。举例：

<meta name="description"content="PHP中文网，编程学习的网站，在线视频教程">

HTML5 meta标签的name属性的值description(网站内容的描述)：
说明：用于告诉搜索引擎，你网站的主要内容。举例：

<meta name="description"content="PHP中文网，编程学习的网站，在线视频教程">

HTML5 meta标签的name属性的值author(作者)：
用于标注网页作者举例：

<meta name="author"content="PHP中文网">

HTML5 meta标签的http-equiv属性：

<meta http-equiv="参数" content="具体的描述">

总结

META标签是HTML标记HEAD区的一个关键标签，提供文档字符集、使用语言、作者等基本信息，以及对关键词和网页等级的设定等，最大的作用是能够做搜索引擎优化（SEO）。

W3C的标准盒模型

w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分(意思就是content为width)。

IE盒子模型(IE5.5)

IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border.

样式选择器的优先级？important呢
css隐藏元素的方式

display:none
- 将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
visibility:hidden
- 元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景
position:absolute
- 假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity和visibility影响布局mdisplay不影响布局但又无法直接交互）。在这种情况下，只能考虑将元素移出可视区域。这个办法既不会影响布局，有可能让元素保持可以操作。

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

opacity:0
- opacity属性我相信大家都知道表示元素的透明度，而将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。

元素水平垂直居中的方法
position的几种属性，说说它们的区别
双栏布局两栏布局（左侧宽度固定，右侧自适应）

方法一：float+margin-left

HTML部分

<div class="left">
    <h1>Left Side</h1>
    <p>我是左侧栏</p>
</div>
<div class="right">
    <h1>Right Side</h1>
    <p>我是右侧栏</p>
</div>

CSS部分

*{
    /*清除默认格式*/
    margin:0;
    padding:0；
}
.left{
    width:200px;
    background-color:red;
    float:left;
}
.right{
    background-color:green;
    margin-left:200px;//等于左边栏的宽度
}

方法二：absolute+margin-left

*{
    margin:0;
    padding:0;
}
.left{
    width:100px;
    background-color:red;
    position:absolute;
}
.right{
    background-color:green;
    margin-left:100px;
}

方法三：float+BFC
为左侧元素设置浮动后，左侧元素会因为浮动盖在右侧元素上，因此要将右侧元素变成BFC，BFC是一个独立的区域，不会让BFC外的元素对其内部造成干扰。当右侧元素变成一个BFC时它的元素边界会发生变化，会紧紧贴合左侧的元素。常见的右侧元素设置—-overflow：hidden；

方法四：flex布局 HTML部分

<div class="box">
    <div class="left">
        <h1>Left Side</h1>
        <p>我是左侧栏</p>
    </div>
    <div class="right">
        <h1>Right Side</h1>
        <p>我是右侧栏</p>
    </div>
</div>

CSS设置：

*{
    /*清除默认格式*/
    margin:0;
    padding:0;
}
.box{
    display:flex;
}
.box1{

}
.box2{
    flex:1;
}

图示：

css的transition属性了解吗？语法：

transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

如何实现一个三角形
我们的思路是使用border边框来实现三角形的样式，因为border的边框是由四个三角形组成的。
html:

<div class="content">
       <div class="up"></div>
</div>

css:

.content div {
    width: 0;
    height: 0;
    &.up {
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
        border-top: 0;
    }
}

了解过bfc吗？如何触发bfc
说说css的精灵图
js的基本类型有哪些?symbol用来做什么？
let/var/const的区别
获取dom元素的方法
如何判断对象为空
数组splice、slice的作用，是否会改变数组

JavaScript splice() 方法 splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。注释：该方法会改变原始数组。

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

JavaScript slice() 方法

slice() 方法可从已有的数组中返回选定的元素。

参数	描述
start	必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

说说事件委托
简单叙述XHR发送请求的过程 AJAX如何工作？
正如您在上面的示例中所看到的，XMLHttpRequest对象起着重要作用。

1.用户从UI发送请求，JavaScript中调用XMLHttpRequest对象。
2.HTTP请求由XMLHttpRequest对象发送到服务器。
3.服务器使用JSP，PHP，Servlet，ASP.net等与数据库交互。
4.检索数据。
5.服务器将XML数据或JSON数据发送到XMLHttpRequest回调函数。
6.HTML和CSS数据显示在浏览器上。

1.创建 XMLHttpRequest 对象，也就是创建一个异步调用对象；
2.创建一个新的 HTTP 请求，并指定该 HTTP 请求的方法、 URL 以及验证信息；
3.设置响应 HTTP 请求状态变化的函数；
4.发送 HTTP 请求；
5.获取异步调用返回的数据；
6.使用 JavaScript 和 DOM 实现局部刷新。

闭包是什么？闭包的好处？
跨域的解决方案
说说js的原型和原型链
Object.assign的作用

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

语法：

Object.assign(target, ...sources);

参数：

target: 目标对象
sources: 源对象

返回值：

*目标对象

Object.assign()

合并多个对象

const obj1 = { name: '张三',age: 20}
const obj2 = { address: '广东深圳', hobby: 'code' }
const obj3 = { workingYears: 5}
 
const obj = Object.assign(obj1, obj2, obj3)
 
console.log(obj) //{ name: '张三', age: 20, address: '广东深圳', hobby: 'code', workingYears: 5}

合并具有相同属性的对象

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
1.属性被后续参数中具有相同属性的其他对象覆盖。
2.目标对象的属性与源对象的属性相同，源的会覆盖目标的属性

原始类型会被包装为对象

const v1 = "abc";
const v2 = true;
const v3 = 10;
const v4 = Symbol("foo")

const obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
// 原始类型会被包装，null 和 undefined 会被忽略。
// 注意，只有字符串的包装对象才可能有自身可枚举属性。
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

异常会打断后续拷贝任务

const target = Object.defineProperty({}, "foo", {
    value: 1,
    writable: false
}); // target 的 foo 属性是个只读属性。

Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});
// TypeError: "foo" is read-only
// 注意这个异常是在拷贝第二个源对象的第二个属性时发生的。

console.log(target.bar);  // 2，说明第一个源对象拷贝成功了。
console.log(target.foo2); // 3，说明第二个源对象的第一个属性也拷贝成功了。
console.log(target.foo);  // 1，只读属性不能被覆盖，所以第二个源对象的第二个属性拷贝失败了。
console.log(target.foo3); // undefined，异常之后 assign 方法就退出了，第三个属性是不会被拷贝到的。
console.log(target.baz);  // undefined，第三个源对象更是不会被拷贝到的。

克隆对象（浅）；

const obj = { name: '张三' ,age: 20}
 
const obj1 = Object.assign({},obj)
 
console.log(obj1) //{ name: '张三' ,age: 20}

为对象添加多个方法

Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
  },
  anotherMethod() {
  }
});
// 原来的方法
SomeClass.prototype.someMethod = function (arg1, arg2) {
};
SomeClass.prototype.anotherMethod = function () {
};

说说promise
前端性能优化的方式
说说MVVM框架
M：Model（服务器上的业务逻辑操作）
V：View（页面）
VM：ViewModel（Model与View之间核心枢纽，比如Vue.js）

Model与ViewModel之间的双向关系
Model通过Ajax通信，发送数据给ViewModel。
ViewModel也可以通过Ajax通信，发送请求给Model。
ViewModel与View之间的双向关系
ViewModel中的数据改变，可以同时改变View上的显示内容。
View上的内容改变(比如输入框中的内容)，也可以同时改变ViewModel中对应的数据。

Vue的数据双向绑定的渲染
双向是指ViewModel中的data部分和View之间的双向关系。
正向：数据驱动页面
反向：页面更新数据
绑定是指自动化处理，data改变了view随之改变，反之也是。
不用像传统方式那样，通过onChange事件获取用户输入，然后再通过改变innerHtml修改显示。

参考资料：
1. (https://blog.csdn.net/yangwei234/article/details/84536079) 2. https://www.w3cschool.cn/ajax/ajax-xmlhttprequest-create.html 3. https://www.jianshu.com/p/e22113e3f614 4. https://blog.csdn.net/zgrkaka/article/details/70792297 5. https://www.jianshu.com/p/f9ec860ecd81 6. https://www.imooc.com/article/304245 7. https://www.cnblogs.com/ljwk/p/7090320.html 8. https://blog.csdn.net/heye13/article/details/51720600