2024年前端最新ES6基础入门，前端基础面试题及答案

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

• 

常用算法面试题：

• 

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

• 

let basket = {

count: 100,

onSale: 80

}

document.getElementById(‘result’).innerHTML =

‘There are ’ + basket.count + ' ’ +

'items in your basket, ’ +

‘’ + basket.onSale +

‘ are on sale!’;

上面这种写法相当繁琐不方便，ES6引入了模板字符串解决这个问题。

运行结果：

注意：ES6模板字符串中必须要使用反引号。

函数的扩展rest参数

---

ES6 引入 rest 参数（形式为“…变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(…values) {

let sum = 0;

for(var val of values) {

sum += val;

}

return sum;

}

add(2, 5, 3) // 10

上面代码的add函数是一个求和函数，利用 rest 参数，可以向该函数传入任意数目的参数。

rest 参数中的变量代表一个数组，所以数组特有的方法都可以用于这个变量。下面是一个利用 rest 参数改写数组push方法的例子。

function push(array, …items) {

items.forEach(function(item) {

array.push(item);

console.log(item);

});

}

var a = [];

push(a, 1, 2, 3)

完整代码：

运行结果：

函数的扩展-箭头函数

---

ES6允许使用“箭头”（=>）定义函数：

//ES5定义函数

var f = function(v) {

return v;

};

//ES6定义箭头函数

var f = v => v

箭头函数的语法

1.如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

let f = () => 5;

// 等同于

let f = function() { return 5 };

let sum = (num1, num2) => {

return num1 + num2;

};

// 等同于

let sum = function(num1, num2) {

return num1 + num2;

};

2.如果只有一个参数，那么圆括号就可以省略了。

let f = str => {

console.log(str);

}

f(‘hello’);

3.如何函数体中的代码只有一句，那么大括号可以省略。

let f = str => console.log(str);

f(‘hello’);

4.但如果函数体中的代码只有一个return语句，那么return关键词也必须省略。

//这是错误的

let sum = (num1, num2) => return num1 + num2;

//这是正确的

let sum = (num1, num2) => num1 + num2;

5.由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。

let getTempItem = id => ({ id:id, name:‘Temp’ })

使用箭头函数的注意点

1.函数体内的this对象。

**函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

或者说：箭头函数当方法使用时没有定义this绑定，而是捕获所在上下文的 this ，作为自己的 this 。**

样例代码：

one点击(使用function)

two点击(使用箭头函数)

运行结果：

**注意：

箭头函数的this永远指向其上下文的 this，任何方法都改变不了其指向，如call(), bind()等。

普通函数的this指向调用它的那个对象。**

2.不可以当作构造函数。

也就是说，不可以使用new命令，否则会抛出一个错误。

3.不可以使用arguments对象。

该对象在函数体内不存在。如果要用，可以用Rest参数代替。

this指向问题

样例代码：

点击

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

w]

• button事件处理函数中：[object HTMLButtonElement]

*/

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！