前端问点

html5 新特性有哪些了解？

1，画布（Canvas)

<!--坦克大战的战场-->
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>
<script type="text/javascript">
  //得到画布
  var canvas1 = document.getElementById("tankMap");
  
  //定义一个位置变量
  var heroX = 80;
  var heroY = 80;
  
  //得到绘图上下文
  var cxt = canvas1.getContext("2d");
  //设置颜色
  cxt.fillStyle="#BA9658";
  //左边的矩形
  cxt.fillRect(heroX,heroY,5,30);
  //右边的矩形
  cxt.fillRect(heroX+17,heroY,5,30);
  //画中间的矩形
  cxt.fillRect(heroX+6,heroY+5,10,20);
  //画出坦克的盖子
  cxt.fillStyle="#FEF26E";
  cxt.arc(heroX+11,heroY+15,5,0,360,true);
  cxt.fill();
  //画出炮筒
  cxt.strokeStyle="#FEF26E";
  cxt.lineWidth=1.5;
  cxt.beginPath();
  cxt.moveTo(heroX+11,heroY+15);
  cxt.lineTo(heroX+11,heroY);
  cxt.closePath();
  cxt.stroke();
  
  
</script>

2，地址位置：利用浏览器获取访客经纬度

3，本地存储 localstorage，比 cookie 更强大

4、媒体，HTML5浏览器内置的多媒体播放功能

<video src="/i/movie.ogg" controls="controls">
your browser does not support the video tag
</video>

五、新增的语义/结构化标签 Semantic

标签	标签
<article>文档中定义文章内容	<aside>
<details>	<dialog>
<figcaption>	<figure> img和figcaption组合放在figure里
<footer> 一个文档可以有多个footer	<header>一个文档可以有多个header
<main>	<mark>
<nav> 导航	<section> 在文档中定义部分
<summary>	<time>

七、新增的input类型和属性

类型type	属性attribute
color	autocomplete
date	autofocus
datetime	form
datetime-local	formaction
email	formenctype
month	formmethod
number	formnovalidate
range	formtarget
search	height and width
tel	list
search	min and max
time

HTML5通过meta标签达到监听并适配设备屏幕的布局

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS3新特性

1.CSS3的选择器

1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n)匹配父元素的第n个子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

2.过渡 transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码

3.动画 animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）复制代码

4.形状转换 transform:适用于2D或3D转换的元素

rotate(30deg); translate(30px,30px); scale(.8); skew(10deg,10deg); rotateX(180deg); rotateY(180deg); rotate3d(10,10,10,90deg);

5.选择器

6.阴影 box-shadow: 水平阴影的位置垂直阴影的位置模糊距离阴影的大小阴影的颜色阴影开始方向（默认是从里往外，设置inset就是从外往里）;复制代码

7.边框 border-image: 图片url 图像边界向内偏移图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0）铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;

8.背景 background-clip 制定背景绘制（显示）区域 background-origin background-size

1.（background-clip: border-box;）默认情况（从边框开始绘制）

2.（background-clip: padding-box;）从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！

3.（background-clip: content-box;）只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！

9.反射 -webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片

11.颜色 rgba（rgb为颜色值，a为透明度） color: rgba(255,00,00,1);background: rgba(00,00,00,.5); hsla h:色相”，“s：饱和度”，“l：亮度”，“a：透明度” color: hsla( 112, 72%, 33%, 0.68);background-color: hsla( 49, 65%, 60%, 0.68);复制代码

12.渐变

13.Filter（滤镜）：黑白色filter: grayscale(100%)、褐色filter:sepia(1)、饱和度saturate(2)、色相旋转hue-rotate(90deg)、反色filter:invert(1)、透明度opacity(.5)、亮度brightness(.5)、对比度contrast(2)、模糊blur(3px)

14.弹性布局 Flex

15.栅格布局 grid

16.多列布局

17.盒模型定义 box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！

box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！如下图

18.媒体查询就在监听屏幕尺寸的变化，适配！

　ES6 新增属性？

let 和var全局定义时候的区别

js三大事件

webpack 原理 nodejs

其根据模块的依赖关系进行静态分析，找到js模块以及一些浏览器不能直接运行的语言（less sass TypeScript等）将这些模块转化打包成合适的格式供浏览器使用

几个关键词

Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，来找出直接或者间接依赖的文件。
Output：出口，规定webpack输出的bundles的路径以及文件名，默认为 ./dist
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
Loader：模块转换器，用于把模块原内容按照需求转换成 webpack 能处理的有效模块
Plugin：扩展插件，在 webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。插件的范围包括从打包优化和压缩，一直到重新定义环境中的变量，可扩展功能丰富

ES6新特性的 const 定义对象能否改变

1. let const

let 表示申明变量。 const 表示申明常量。

常量定义了就不能改了。对象除外，因为对象指向的地址没变。
const在申明是必须被赋值。
两者都为块级作用域。

块级作用域与函数作用域。任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。函数作用域就好理解了，定义在函数中的参数和变量在函数外部是不可见的。

const a = 1
a = 0 //报错

2. 模块字符串``

可以使用反引号``来进行字符拼接。${}

3. 解构

可以使用{}来对数组和对象进行解构。

4. 函数的参数默认值

函数传参可以有默认值

// ES6；
function printText(text = 'default') {
    console.log(text);
}

5. Spread / Rest 操作符...

Spread / Rest 操作符指的是 ...，具体是 Spread 还是 Rest 需要看上下文语境。

当被用于迭代器中时，它是一个 Spread 操作符：迭代器 (Iterator)是按照一定的顺序对一个或多个容器中的元素行进遍历的一种机制

function foo(x,y,z) {
  console.log(x,y,z);
}
 
let arr = [1,2,3];
foo(...arr); // 1 2 3

当被用于函数传参时，是一个 Rest 操作符：当被用于函数传参时，是一个 Rest 操作符：

function foo(...args) {
  console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

6. 箭头函数

不需要 function 关键字来创建函数
省略 return 关键字
this始终指向函数申明时所在作用域下的this值

//es5
var fun = function() {

}
//es6
var fn = () => {

}

7. for of

for of遍历的是键值对中的值
for in遍历的是键值对中的键

8. class类

ES6 中支持 class 语法，不过，ES6的class不是新的对象继承模型，它只是原型链的语法糖表现形式。

class Student {
  constructor() {
    console.log("I'm a student.");
  }
 
  study() {
    console.log('study!');
  }
 
  static read() {
    console.log("Reading Now.");
  }
}
 
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."

9. 导入导出

导入improt
导出export default

10. promise

Promise 用于更优雅地处理异步请求。

  <script>
    new Promise((resolve,reject) => {
      setTimeout(function() {
        resolve('成功了！')
      },1000)
      // reject("失败了，wuwu")
    }).then(data => {
      console.log(data)
    }).catch(err => {
      console.log(err)
    })
  </script>

11. async/await

比promise更好的解决了回调地狱。

async function() {
  awiat fn()
}

12. Symbol

新的基本类型

13. Set集合

存储任何类型的唯一值，即集合中所保存的元素是不重复的。类数组结构。

arr = [1,2,3,1]
let arrNew = new Set(arr)
arrNew = [1,2,3]

类数组不是数组，要转化为数组Array.form(arrNew)这样arrNew才是数组了

css3 中的 canvas

git常用操作
1.仓库的初始化 git init
2. git clone

git clone https://github.com/libgit2/libgit2

命令格式是：git clone [url]

如果想拷贝在指定的目录：git clone [url] [pathName]

添加/暂存文件

git add

git add -u : 提交被修改(modified)和被删除(deleted)文件，不包括新文件(new)。
git add . ：提交新文件(new)和被修改(modified)文件，不包括被删除(deleted)文件。
git add -A : 提交所有变化，包括以上2种。

如果需要选择性暂存文件，那么可以将这个文件连缀在后面，用空格隔开：

git add <file1> <file2> <file3>

提交文件
git commit

将文件添加到暂存区之后，就可以开始提交了。每次提交之前，一般先再次检查文件状态git status，看是否还有文件未添加到暂存区。一般执行提交是：

git commit -m <commit log>

使用-m 参数，附带简明提交说明信息。

远程仓库使用

git clone <url> 克隆远程仓库到本地
git remote 列出每个远程仓库的简短名字
git remote -v 列出每个远程仓库的简短名字与其对应的 URL
git remote show [remote-name] 查看某个远程仓库的详细信息
git remote rename [old name] [new name] 重命名远程仓库
git remote rm [remote-name] 移除某个远程仓库
git remote add <shortname> <url> 添加一个远程仓库
git fetch [remote-name] 从远程仓库数据拉取最新到本地，但不自动合并本地的修改
git pull [remote-name] [branch-name] 把远程仓库数据拉到本地，并自行合并
git pull 的魔法经常令人困惑所以通常单独显式地使用 fetch 与 merge 命令会更好一些。
git push [remote-name] [branch-name] 把本地代码推送到远程仓库，一般先执行git pull、在执行git push 确保代码是最新的，不然会被拒绝。

了解闭包吗？

type 和 interface 的区别是什么？

interface 可以 merge 可以 extends 但是 type 不行

CSS 篇
link 与 @import 的区别
link 是 HTML 方式， @import 是CSS方式
link 最大限度支持并行下载， @import 过多嵌套导致串行下载，出现 FOUC (文档样式短暂失效)
link 可以通过 rel="alternate stylesheet" 指定候选样式
浏览器对 link 支持早于 @import ，可以使用 @import 对老浏览器隐藏样式
@import 必须在样式规则之前，可以在css文件中引用其他文件
总体来说： link 优于 @import ，link优先级也更高
BFC 有什么用
创建规则：
根元素
浮动元素（ float 不取值为 none ）
绝对定位元素（ position 取值为 absolute 或 fixed ）
display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex 之一的元素
overflow 不取值为 visible 的元素
作用
可以包含浮动元素
不被浮动元素覆盖
阻止父子元素的 margin 折叠
清除浮动的几种方式
父级 div 定义 height
结尾处加空 div 标签 clear:both
父级 div 定义伪类 :after 和 zoom
父级 div 定义 overflow:hidden
父级 div 也浮动，需要定义宽度
结尾处加 br 标签 clear:both
Css3 新增伪类 - 伪元素
p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

p:last-of-type 选择属于其父元素的最后

元素的每个

元素。

p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

p:only-child 选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

:enabled 已启用的表单元素。

:disabled 已禁用的表单元素。

:checked 单选框或复选框被选中。

::before 在元素之前添加内容。

::after 在元素之后添加内容,也可以用来做清除浮动。

::first-line 添加一行特殊样式到首行。

::first-letter 添加一个特殊的样式到文本的首字母。

伪类语法一个：，它是为了弥补css常规类选择器的不足

伪元素语法两个：，它是凭空创建的一个虚拟容器生成的元素

IE盒子模型、W3C盒子模型
W3C盒模型：内容(content)、填充( padding )、边界( margin )、边框( border )；
box-sizing: content-box
width = content width;
IE盒子模型： IE 的content 部分把 border 和 padding 计算了进去;
box-sizing: border-box
width = border + padding + content width
display:inline-block 什么时候不会显示间隙？
移除空格
使用 margin 负值
使用 font-size:0
letter-spacing
word-spacing
行内元素float:left后是否变为块级元素？
行内元素设置成浮动之后变得更加像是 inline-block （行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100% ），这时候给行内元素设置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的

如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60*1000ms ＝ 16.7ms

stylus/sass/less区别
均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
Sass 和 LESS 语法较为严谨， LESS 要求一定要使用大括号“{}”， Sass 和 Stylus 可以通过缩进表示层次与嵌套关系
Sass 无全局变量的概念， LESS 和 Stylus 有类似于其它语言的作用域概念
Sass 是基于 Ruby 语言的，而 LESS 和 Stylus 可以基于 NodeJS NPM 下载相应库后进行编译；这也是为什么安装Sass的时候有时候会报错，需要安装python脚本
优点：就不用我多说了，谁用谁知道，真香。

rgba()和opacity的透明效果有什么不同？
rgba() 和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，
而 rgba() 只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）
水平居中的方法
元素为行内元素，设置父元素 text-align:center
如果元素宽度固定，可以设置左右 margin 为 auto ;
如果元素为绝对定位，设置父元素 position 为 relative ，元素设left:0;right:0;margin:auto;
使用 flex-box 布局，指定 justify-content 属性为center
display 设置为 tabel-ceil
垂直居中的方法
将显示方式设置为表格， display:table-cell ,同时设置 vertial-align：middle
使用 flex 布局，设置为 align-item：center
绝对定位中设置 bottom:0,top:0 ,并设置 margin:auto
绝对定位中固定高度时设置 top:50%，margin-top 值为高度一半的负值
文本垂直居中设置 line-height 为 height 值

css部分

css选择器：

bfc:

（猿辅导）
css 中的盒模型，怎么切换

flex布局的理解，居中的方式
[答: ]

我们传统的布局方式是基于在盒子模型下的，依赖于display属性的，position属性的或者是float属性的，但是在传统的布局上面并不好布局;
Flex 容器有如下6个属性

flex-direction : 该属性决定主轴的方向(即项目的排列方向)。row从左到右，row-reverse相反，column从上到下，column-reverse相反

flex-wrap：控制伸缩容器是单行还是多行，nowrap默认单行显示不换行，wrap换行,第一行在上方，wrap-reverse伸缩容器多行显示，第一行在下方

flex-flow：该属性是flex-direction伸缩项目主轴方向属性和flex-wrap 换行属性的简写形式

justify-content：定义伸缩项目在主轴上的对齐方式 center，flex-start/end，space-between两端对齐

align-items：伸缩项目在y轴对齐方式，主轴x轴，交叉轴就是y轴， justify-content和align-items是一对，前者分别定义主轴和侧轴的方向，后者分别定义主轴和侧轴中项目的对齐方式

align-content：调准伸缩行在伸缩容器里的对齐方式，flex-start交叉轴起点对齐 flex-end交叉轴终点对齐。center交叉轴中点对齐

清除浮动

父级 div 定义 height
结尾处加空 div 标签 clear:both
父级 div 定义伪类 :after 和 zoom
父级 div 定义 overflow:hidden
父级 div 也浮动，需要定义宽度
结尾处加 br 标签 clear:both

方法一：使用带clear属性的空元素
**在浮动元素后使用一个空元素如<div class="clear"></div>
.clear{clear:both;}。属性即可清理浮动
方法二：使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;
方法三：使用CSS的:after伪元素
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动

点击查看代码

.clearfix:after{   
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden;  
  }

解释下css3 的 Flexbox ( 弹性盒布局模型）以及适用场景？

css 中动画的相关属性（红包雨的实现）

css3新属性动画 animation，和摇骰子动画类似

加css transation样式，trasation 里面加 animation 定义执行动画的轨迹和时长，

具体介绍下红包雨的实现方式

@keyframes
0% {
    transform: translateY(-300px);
    -ms-transform:translateY(-300px);
    -webkit-transform:translateY(-300px);
  }

（美团 start）
重绘和重排
参考https://segmentfault.com/a/1190000016990089
### 什么适合重绘

### callback 改写成 promise

参考实例 https://blog.csdn.net/fuweilian1/article/details/78965783
https://www.jianshu.com/p/8fd80c368570
【答】

把传统的callback回调改写成es6中promise风格
1.传统的callback回调方式

let callFn = (arg1,arg2,cb)=>{//如果arg1>arg2回调正常，否则回调错误信息
    setTimeout(function(){
        if(arg1>arg2){
            cb(null,arg1+arg2);
        }else{
            cb(new Error('err'),null);
        }
    },5000);
}

//调用
callFn(1,2,function(err,data){
    if(err){
        //错误处理
    }else{
        //正确处理
    }
});

2. 使用es6来写上面的功能

let promiseFn = (arg1,arg2)=>{
    return new Promise((resole,reject)=>{
        if(arg1>arg2){
            resole(arg1+arg2);
        }else{
            reject(new Error('err'));
        }
    }); 
};

//调用
promiseFn(1,2).then(data=>{
    //正确处理
}).catch(err=>{
    //错误处理
});

延伸 将 jquery 的 ajax 方法封装为 Promise 方法

function post (url, params) {
  return new Promise(
    (resolve, reject) => {
      jQuery.ajax({
        url,
        data: {...params},
        type: "post",
        success: function (res) {
          resolve(res)
        },
        error: function (res) {
          reject(res)
        }
      }) 
    }
  )
}

异步请求，使用 then 和 catch


function asyncPost () {
  console.log('==== 异步请求 start =====')
  post(
    'http://removeUrl',
    {
      foo: 'qwwerwer'
    }
  ).then(res => {
    console.log(res)
  }).catch(err => {
    console.log(err)
  })
  console.log('==== 异步请求 end =====')
}

同步请求，使用 async 和 await

async function syncPost() {
  try {
    console.log('==== 同步请求 start =====')
    let res = await post(
      'http://removeUrl',
      {
        foo: 'qwwerwer'
      }
    )
    console.log(res)
    console.log('==== 同步请求 end =====')
  } catch (e) {
    console.log(e)
  }
}

promise 的三种状态，以及转换
promise有三种状态： pending未决定、 reslove成功、 rejected拒绝

catch（）后面跟一个 then 会怎么执行
【参考】promise链式调用 https://www.jianshu.com/p/dc61ea153874

【答】
**发生的异常被catch捕获到之后，执行完catch中的代码后，还是会继续执行.then中的代码。
如果想要阻止后续代码继续执行，可以使用 throw new Error（）向外抛出错误，或者使用promise的reject()。**

**1、正常执行的代码如果第一句出现异常,就不会执行第二句以及后面的所有正常代码
2、对于 try catch
finally而言，无论是否出现异常，异常是否被catch捕获，finally中的代码都会被执行，
即使 try 或者 catch 中有 return 语句，finally 中的代码还是会执行，finally 执行完后，如果try中的异常被catch捕获，就会继续执行try
catch外面的其他无关代码，如果没有被捕获，就会继续向外抛出异常，即中断执行后续所有代码。 **

```js
如下所示：
try{
正常执行的代码
}catch (e){
出错后执行的代码
}finally{
无论正常执行还是出错,之后都会执行的代码
} //跟上面try catch无关的代码
```

给一个array 的对象增加一个 max 方法，用math.max 来写

给 array 的构造函数来增添这个 max 方法

事件冒泡
【参考】https://www.cnblogs.com/moqing/p/5590216.html
【答】

 var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
   div2.onclick = function(){alert(1);};
   div1.onclick = function(){alert(2);};//父亲
//html代码
 <div id="div1">
    <div id="div2"></div>
 </div>

**就是两个父子关系的div,然后分别加了点击事件，当我们在div2里面点击的时候，会发现弹出了一次1，接着又弹出了2，这说明点击的时候，不仅div2的事件被触发了，它的父级的点击事件也触发了，这种现象就叫做冒泡。
并且点击事件给页面显示出来的位置是没关系的，而是跟html代码中的位置有关系**
**如何解决事件冒泡有两种方式**

**标准的W3C 方式：e.stopPropagation();这里的stopPropagation是标准的事件对象的一个方法，调用即可**

**非标准的IE方式:ev.cancelBubble=true; 这里的cancelBubble是 IE事件对象的属性，设为true就可以了**

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

当需要阻止浏览器默认行为时，可以使用

function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

### 什么是闭包（closure），为什么要用它？

const p = new Promise(function (resolve, reject) {
    /这里我们用定时任务模拟异步/
    setTimeout(() => {
        const num = Math.random();
        // 随机返回成功或失败
        if (num < 0.5) {
            resolve("成功！num:" + num)
        } else {
            reject("出错了！num:" + num)
        }
    }, 300)
})

p.then(function (msg) {         //调用promise
    console.log(msg);
}).catch(function (msg) {
    console.log(msg);
})

promise 的工作原理是怎么样的？
【参考】https://blog.csdn.net/weixin_45073548/article/details/102867617
**什么是Promise**
　　Promise是ES6新增的解决异步（非阻塞）中存在的问题而产生的构造函数
Promise中的三种状态
　　pending（进行中）　　resoved（成功后）　　rejected（失败后）
Promise.prototype.then ：当promise的状态返回resove时，则调用then（）方法
　Promise.prototype.catch ：当promise的状态返回reject时，则调用catch（）方法

构建promise的格式

new Promise（function（resolve，reject）{
　　　　处理语句；

　　　　if（成功）{
　　　　　　resolve（）；

　　　　}else{
　　　　　　reject（）；

　　　　}

　　}）.then（function（）{
　　　　执行语句；

　　}）.catch（function（）{
　　　　执行语句；

　　}）

（美团 end）（拼多多二面基础）

## ES6 的新增特性:
**[答]**
字符串扩展
ES6为字符串扩展了几个新的API：
includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

** 数组新增了map reduce 方法**

** map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回

let arr = ['1','20','-5','3'];
console.log(arr)
arr = arr.map(s => parseInt(s));
console.log(arr)

打印： {"1","20","-5","3"}
      [1,20,-5,3]

## promise 我们可以通过Promise的构造函数来创建Promise 对象，并在内部封装一个异步执行的结果。

//语法：
const promise = new Promise(function(resolve, reject) {
  //执行异步操作

  if ( /*异步操作成功*/){
    resolve(value); //调用resolve，代表Promise将返回成功的结果/
  } else {
    reject(error); //调用reject，代表Promise会返回失败结果/
  }
});

## 如果我们想要等待异步执行完成，做一些事情，我们可以通过promise的then方法来实现,语法：

promise.then(function(value){
    // 异步执行成功后的回调
});

//如果想要处理promise异步执行失败的事件，还可以跟上catch：

promise.then(function(value){
    // 异步执行成功后的回调
}).catch(function(error){
    // 异步执行失败后的回调
})

## 示例：

## 模块化

## 模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。
而JS中没有包的概念，换来的是模块。
模块功能主要由两个命令构成：export 和 import
**export命令用于规定模块的对外接口，
import 命令用于导入其他模块提供的功能。**

**export**
**我可以使用 export 将对象导出**：

const util = {
    sum(a,b){
        return a + b;
    }
}
export util;

  /简写方式/
export const util = {
    sum(a,b){
        return a + b;
    }
}
/export不仅可以导出对象，一切JS变量都可以导出。/  

/比如：基本类型变量、函数、数组、对象。/

/export输出/
var name = "jack". var age = 21
export {name,age}

/导入前面导出的name和age /
import {name, age} from 'user.js'
console.log(name + " , 今年"+ age +"岁了")

import

//无需声明对象的名字
export default {
    sum(a,b){
        return a + b;
    }
}

/导入util/
import util from 'hello.js'
//调用util中的属性
util.sum(1,2)

### localstorage 和 cookie 的区别

1 localStorage拓展了cookie的4K限制 5M
2 localStorage会可以将第一次请求的数据直接存储到本地，
这个相当于一个5M大小的针对于前端页面的数据库，
相比于cookie可以节约带宽，
但是这个却是只有在高版本的浏览器中才支持的
3 localStorage有setItem、getItem、removeItem、clear等方法，
cookie需要我们自己来封装setCookie、getCookie、removeCookie
4 每次访问都要传送cookie给服务器，浪费带宽。
生命周期：localStorage: localStorage 的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

set和map

aniox请求数据拦截器

### 了解单点登陆吗？

### 块作用域你了解吗？

### 块作用域和函数作用域的区别是什么？

ES6 还有哪些对象？（proxy 和 reflect ）
【参考】https://www.jianshu.com/p/9e07f182859b

symbol 类型有什么特点？与 Number, String 有什么不同？

symbol 类型的唯一性怎么理解？

set， map怎么理解？

从 set 转成一个数组怎么做？

set 元素的特点？

两个 NaN 恒等的吗？为什么？

### call apply bind 的区别

### v8 中的垃圾回收？

### js的基本数据类型，有哪些判断类型的方法？

### 原型链？如何继承？有哪些方式？（常考）

### 作用链域？（常考）

框架面试题： vue & react
vue和react 区别（美团）

### mvc 和 mvvm 区别

### 如何实现双向数据绑定

### 假设 a 组件（ b 组件，c组件），如何实现 b ，c 组件的通信
生命周期：
vue ：
react：

### react 里面的高阶组件怎么理解？

### 有过高阶组件的使用场景马？

### redux 使用connect 包裹出来的不是高阶组件吗？

### reactHooks 了解哪些？

### 讲讲 redux 是用来做什么的？

### 用户发出action，然后 store 自动电用 reducer，并且传入两个参数：当前 state 和收到的 action， reducer 会返回新的 state， state 一旦有变化， store 就会调用监听函数， listener 可以通过 sotre.setstate（）得到当前状态，如果使用的是 react ，这是可以触发重新渲染 view

# 网络（美团）
### 计算机网络七层是哪七层，七层分别的作用是啥
# 应用层、表示层、会话层、传输层、网络层、数据链路层、物理层

# 应用层 :
# 表示层:
# 会话层:
# 传输层:
# 网络层:
# 数据链路层:
# 物理层:

### http，tcp 的作用是啥

### tcp 和 udp 的区别，什么适合用udp

### 浏览器访问页面的过程

### 什么是跨域，如何解决， jsonp ，cors， jsonp 原理

# 算法 & 编程（美团）

**数据结构学了哪些？

**了解哪些排序悬法？时间空间复杂度，以及稳定性？

**写一个队列

**二叉树的最大深度？

### 实现一个 bind

笔试： js实现反转字符串（拼多多）

两个 symbol 类型的值是一样的，这两个 symbol 相等吗？

promise 的 then 为什么是异步的？（从微任务和宏任务解释）

DOM 的 api 分为几级？

常用的 dom 的操作方法？

事件捕获和事件冒泡怎么理解？

怎么阻止事件的冒泡？

项目中用到了什么样式？使用的 css 还是 less ？

对 css 动画有了解吗？序列帧怎么定义？

浏览器缓存有哪几种？

前端问点

五、新增的语义/结构化标签 Semantic

七、新增的input类型和属性

几个关键词

1.仓库的初始化 git init

远程仓库使用