20 道高级前端面试题解析

const [a, b, c] = [1, 2, 3]

const [a,,c] = [1,2,3]

const stu = {  name: 'Bob',  age: 24}

const { name, age } = stu

const { age, name } = stu

var length = 10;function fn() {    console.log(this.length);}
var obj = {  length: 5,  method: function(fn) {    fn();    arguments[0]();  }};
obj.method(fn, 1);

1、HTTPS协议需要CA证书,费用较高;而HTTP协议不需要2、HTTP协议是超文本传输协议,信息是明文传输的,HTTPS则是具有安全性的SSL加密传输协议;3、使用不同的连接方式,端口也不同,HTTP协议端口是80,HTTPS协议端口是443;4、HTTP协议连接很简单,是无状态的;HTTPS协议是具有SSL和HTTP协议构建的可进行加密传输、身份认证的网络协议,比HTTP更加安全

//vue中购物车逻辑的实现1. 购物车信息用一个数组来存储，数组中保存对象，对象中有id和count属性
2. 在vuex中state中添加一个数据 cartList 用来保存这个数组
3. 由于商品详情页需要用到加入购物车功能，所以我们需要提供一个mutation, 用来将购物车信息加入 cartList中
4. 加入购物车信息的时候，遵照如下规则： 如果购物车中已经有了该商品信息，则数量累加，如果没有该商品信息，则新增一个对象
5. 在商品详情页，点击加入购物车按钮的时候，调用vuex提供的addToCart这个mutation将当前的商品信息 （id count）传给addTocart  this.$store.commit("addToCart", {id:  , count：})
// js中购物车逻辑的实现1.商品页点击“加入购物车”按钮，触发事件
2.事件调用购物车“增加商品”的Js程序（函数、对象方法）
3.向Js程序传递传递“商品id”、“商品数量”等数据
4.存储“商品id”、“商品数量”到浏览器的localStorage中
**展示购物车中的商品******
1.打开购物车页面
2.从localStorage中取出“商品Id”、“商品数量”等信息。
3.调用服务器端“获得商品详情”的接口得到购物车中的商品信息（参数为商品Id）
4.将获得的商品信息显示在购物车页面。
**完成购物车中商品的购买******
1.用户对购物车中的商品完成购买流程，产生购物订单
2.清除localStorage中存储的已经购买的商品信息
备注1：购物车中商品存储的数据除了“商品id”、“商品数量”之外，根据产品要求还可以有其他的信息，例如完整的商品详情（这样就不用掉服务器接口获得详情了）、购物车商品的过期时间，超过时间的购物车商品在下次打开网站或者购物车页面时被清除。
备注2：购物车商品除了存储在localStorage中，根据产品的需求不同，也可以存储在sessionStorage、cookie、session中，或者直接向服务器接口发起请求存储在服务器上。何种情况使用哪种方式存储、有啥区别请自己分析。

// 以下是不完整代码，着重于思路 非 Promise 写法let successCount = 0let errorCount = 0let datas = []ajax(url, (res) => {     if (success) {         success++         if (success + errorCount === 10) {             console.log(datas)         } else {             datas.push(res.data)         }     } else {         errorCount++         if (errorCount > 3) {            // 失败次数大于3次就应该报错了             throw Error('失败三次')         }     }})// Promise 写法let errorCount = 0let p = new Promise((resolve, reject) => {    if (success) {         resolve(res.data)     } else {         errorCount++         if (errorCount > 3) {            // 失败次数大于3次就应该报错了            reject(error)         } else {             resolve(error)         }     }})Promise.all([p]).then(v => {  console.log(v);});

function flat11(arr) {    var res = [];    for (var i = 0; i < arr.length; i++) {        if (Array.isArray(arr[i])) {            res = res.concat(flat11(arr[i]));        } else {            res.push(arr[i]);        }    }    return res;}

function flat(arr, level = 1) {    var res = [];    for(var i = 0; i < arr.length; i++) {        if(Array.isArray(arr[i]) || level >= 1) {            res = res.concat(flat(arr[i]), level - 1);        }        else {            res.push(arr[i]);        }    }    return res;}

function flat(arr) {    return arr.reduce(        (pre, cur) => pre.concat(Array.isArray(cur) ? flat(cur) : cur), []    );}

function flat(arr) {    return [].concat(...arr);}

function flat(arr) {    while(arr.some(item => Array.isArray(item))) {        arr = [].concat(...arr);    }    return arr;}

function flat(arr){    return arr.toString().split(',').map(item => Number(item));    // return arr.join().split(',').map(item => Number(item));}

function flat(arr) {    return JSON.parse("[" + JSON.stringify(arr).replace(/\[|\]/g,'') + "]");}

let arr = [...arrayLike]

let arr = Array.from(arrayLike);

let arr = Array.prototype.slice.call(arrayLike);

let arr = Array.apply(null, arrayLike);

let arr = Array.prototype.concat.apply([], arrayLike);

<audio src='' controls autoplay loop='true'></audio>

<video src='' poster='imgs/aa.jpg' controls></video>

<video>     <source src='aa.flv' type='video/flv'></source>     <source src='aa.mp4' type='video/mp4'></source></video>

<img draggable="true" />

<canvas id="myCanvas" width="200" height="100"></canvas>

function runAsync(x) {  const p = new Promise(r =>    setTimeout(() => r(x, console.log(x)), 1000)  );  return p;}function runReject(x) {  const p = new Promise((res, rej) =>    setTimeout(() => rej(`Error: ${x}`, console.log(x)), 1000 * x)  );  return p;}Promise.race([runReject(0), runAsync(1), runAsync(2), runAsync(3)])  .then(res => console.log("result: ", res))  .catch(err => console.log(err));

0Error: 0123

示例1：输入: coins = [1, 2, 5], amount = 11输出: 3解释: 11 = 5 + 5 + 1
示例2：输入: coins = [2], amount = 3输出: -1

const coinChange = function (coins, amount) {  // 用于保存每个目标总额对应的最小硬币个数  const f = [];  // 提前定义已知情况  f[0] = 0;  // 遍历 [1, amount] 这个区间的硬币总额  for (let i = 1; i <= amount; i++) {    // 求的是最小值，因此我们预设为无穷大，确保它一定会被更小的数更新    f[i] = Infinity;    // 循环遍历每个可用硬币的面额    for (let j = 0; j < coins.length; j++) {      // 若硬币面额小于目标总额，则问题成立      if (i - coins[j] >= 0) {        // 状态转移方程        f[i] = Math.min(f[i], f[i - coins[j]] + 1);      }    }  }  // 若目标总额对应的解为无穷大，则意味着没有一个符合条件的硬币总数来更新它，本题无解，返回-1  if (f[amount] === Infinity) {    return -1;  }  // 若有解，直接返回解的内容  return f[amount];};

[] + {} 和 {} + []

function a() {  console.log(this);}a.call(null);

'use strict';
function a() {    console.log(this);}a.call(null); // nulla.call(undefined); // undefined

git branch 查看本地所有分支git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支git branch -r 查看远程所有分支git commit -am "nit" 提交并且加注释 git remote add origin git@192.168.1.119:ndshowgit push origin master 将文件给推到服务器上 git remote show origin 显示远程库origin里的资源 git push origin master:developgit push origin master:hb-dev 将本地库与服务器上的库进行关联 git checkout --track origin/dev 切换到远程dev分支git branch -D master develop 删除本地库developgit checkout -b dev 建立一个新的本地分支devgit merge origin/dev 将分支dev与当前分支进行合并git checkout dev 切换到本地dev分支git remote show 查看远程库git add .git rm 文件名(包括路径) 从git中删除指定文件git clone git://github.com/schacon/grit.git 从服务器上将代码给拉下来git config --list 看所有用户git ls-files 看已经被提交的git rm [file name] 删除一个文件git commit -a 提交当前repos的所有的改变git add [file name] 添加一个文件到git indexgit commit -v 当你用－v参数的时候可以看commit的差异git commit -m "This is the message describing the commit" 添加commit信息git commit -a -a是代表add，把所有的change加到git index里然后再commitgit commit -a -v 一般提交命令git log 看你commit的日志git diff 查看尚未暂存的更新git rm a.a 移除文件(从暂存区和工作区中删除)git rm --cached a.a 移除文件(只从暂存区中删除)git commit -m "remove" 移除文件(从Git中删除)git rm -f a.a 强行移除修改后文件(从暂存区和工作区中删除)git diff --cached 或 $ git diff --staged 查看尚未提交的更新git stash push 将文件给push到一个临时空间中git stash pop 将文件从临时空间pop下来

const promise = Promise.resolve().then(() => {  return promise;})promise.catch(console.err)

Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>事件冒泡</title></head><body>    <div>        <p id="parEle">我是父元素    <span id="sonEle">我是子元素</span></p>    </div></body></html><script type="text/javascript">var sonEle = document.getElementById('sonEle');var parEle = document.getElementById('parEle');parEle.addEventListener('click', function () {    alert('父级 冒泡');}, false);parEle.addEventListener('click', function () {    alert('父级 捕获');}, true);sonEle.addEventListener('click', function () {    alert('子级冒泡');}, false);sonEle.addEventListener('click', function () {    alert('子级捕获');}, true);
</script>