关键词：
前端面试高频考点，ES6知识点汇总！！！
⛳️大家好,我是王同学，今天给大家分享的是ES6面试的高频考点，文章没有一点套路，只有满满的干货
⛳️如果对你有帮助就给我点个赞吧，这样我们就互不相欠了
⛳️星光不负赶路人，所有的幸运都来自于坚持不懈的努力，大家一起冲冲冲~~~
📙 一、let 关键字
let 关键字用来声明变量，使用 let 声明的变量有几个特点：
- 不允许重复声明
- 有块级作用域
- 不存在变量提升
- 不影响作用域链
📙 let 关键字代码说明
📙 二、const关键字
const 关键字用来声明 常量 ，const 声明有以下特点：
声明必须赋初始值
标识符一般为大写（习惯）
不允许重复声明
值不允许修改
有块级作用域
📙const关键字代码说明
📙 三、模板字符串
模板字符串（template string）是增强版的字符串，用反引号（`）标识
模板字符串特点：
- 字符串中可以出现换行符；
- 可以使用 $xxx 形式引用变量
- 对于模板字符串 所有的空格 换行 缩进都会被保留在输出之中 怎么写就怎么输出
一般字符串："Cai" 'Lily'
模板字符串：`Cai`
const username1 = "Cai";
const username2 = `Cai`;
console.log(username1, username2); //Cai Cai
console.log(username1 === username2) //true
//输出`和\\等特殊字符
// const info = `\\``;
// console.log(info); //`
// const info = `\\\\`;
// console.log(info); //\\
只要最后可以得出一个值的就可以通过$注入到模板字符串中
看下面代码解说
const username = 'Cai';
const person =
age: 19,
sex: 'Female'
const getSex = function(sex)
return sex === 'Female' ? 'Female' : 'Male'
//只要最终可以得出一个值的就可以通过$注入到模板字符串中
const result = `$username,$person.age-1,$getSex(person.sex)`;
console.log(result); //Cai,18,Female
📙 四、模板字符串案例练习
<script>
const students = [
username: 'Cai',
age: 18,
sex: 'male'
,
username: 'zhangsan',
age: 30,
sex: 'male'
,
username: 'lisi',
age: 13,
sex: 'male'
]
const list = document.getElementById("list");
let html = '';
for (let i = 0; i < students.length; i++)
html += `<li>我的名字是$students[i].username,我的年龄是$students[i].age,我的性别是$students[i].sex</li>`;
list.innerHTML = html;
</script>
📙 五、箭头函数
ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义
箭头函数的注意点：
- 如果形参只有一个，则小括号可以省略
- 函数体如果只有一条语句，则花括号可以省略，并省略return，函数的返回值为该条语句的执行结果
- 箭头函数 this 指向声明时所在作用域下 this 的值
- 箭头函数不能作为构造函数实例化
- 不能使用 arguments
<script>
//箭头函数
//箭头函数的结构：const/let 函数名= 参数=>函数体
const add = (x, y) =>
return x + y;
;
console.log(add(1, 2)); //3
//将一般函数改写成箭头函数
function add() ; //声明形式
const add = function() ; //函数表达式形式
const add = () => ; //箭头函数的形式
</script>
箭头函数的注意事项
🚩注意事项1：单个参数可以省略圆括号
//单个参数可以省略圆括号
const add = x =>
return x + 1
;
console.log(add(1)); //2
🚩注意事项2：无参数或多个参数不可以省略圆括号
//无参数或多个参数不可以省略圆括号
const add = () =>
return 1 + 1
console.log(add()); //2
🚩 注意事项3：单行函数体:可以同时省略和return
//单行函数体:可以同时省略和return
const add = (x, y) => x + y;
console.log(add(1, 2)); //3
//如果箭头函数返回单行对象 可以在外面加上()让浏览器不再认为那是函数体的花括号
const add = (x, y) => (
value: x + y
)
console.log(add(1, 1));
📙 六、非箭头函数中的this指向问题
- 全局作用域中的this指向window
- 函数中的this，只有在函数被调用的时候，才有明确的指向
- this指向调用其所在函数的那个对象
- 没有具体调用对象，this指向undefined，在非严格模式下，转向window
<script>
//全局作用域中的this指向
// console.log(this); //window
//一般函数（非箭头函数）中的this指向问题
// 'use strict';
function add()
console.log(this);
//严格模式下this指向undefined
//undefined ->window(非严格模式下转化为window)
add();
//构造函数中的this指向
function Person(username, password)
this.username = username;
this.password = password;
console.log(this); //构造函数中的this指向构造函数实例化后生成的对象
var p = new Person('Cai', 12);
</script>
📙 七、箭头函数中的this指向问题
- 箭头函数没有自己的this
- 箭头函数中的this是通过作用域链查找的
//箭头函数中的this指向问题
//箭头函数没有自己的this
const calc =
add: () =>
console.log(this);
calc.add(); //window
//练习
const calc =
add: function()
const adder = () =>
console.log(this);
adder();
calc.add();//calc
//练习
const calc =
add: function()
const adder = () =>
console.log(this);
adder();
const addFn = calc.add;
addFn(); //undefined->window
🚩不适用箭头函数的场景
- 作为构造函数
- 需要this指向调用对象的时候
- 需要使用arguments的时候
📙 八、解构赋值
解构赋值：解析某一数据的结构，将我们想要的东西提取出来 赋值给变量
🚩数组解构赋值的原理
数组解构赋值的原理：模式（结构）匹配，索引值相同的完成赋值
//模式匹配 索引值完成赋值
const [a, b, c] = [1, 2, 3];
console.log(a, b, c);
//不取的直接用逗号跳过
const [a, [b, , ], e] = [1, [2, 4, 5], 3];
console.log(a, b, e); //1 2 3
🚩数组解构赋值的默认值
默认值的基本用法
<script>
// 默认值的基本用法
// const [a, b] = [];
// const [a, b] = [undefined, undefined];
// const [a = 1, b = 2] = [];
// console.log(a, b); //1 2
//默认值的生效条件
//只有当一个数组成员严格等于undefined时对应的默认值才会生效
// const [a = 1, b = 2] = [3, 0];
// console.log(a, b); //3 0
// const [a = 1, b = 2] = [3, null];
// console.log(a, b); // 3 null
// const [a = 1, b = 2] = [3];
// console.log(a, b); //3 2
//默认值表达式 默认值表达式是惰性求值的
// const func = () =>
// console.log('我被执行了');
// return 2;
//
// const [x = func()] = [1];
// console.log(x); //1
const func = () =>
console.log('我被执行了');
return 2;
const [x = func()] = [];
console.log(x); // 我被执行了 2
</script>
🚩常见的类数组解构赋值
//arguments
function func()
const [a, b] = arguments;
console.log(a, b); //1 2
func(1, 2)
//NodeList
const [p1, p2, p3] = document.querySelectorAll('p');
console.log(p1, p2, p3);
//函数参数的结构赋值
const array = [1, 2];
const add = ([x, y]) => x + y;
console.log(add(array)); //3
//交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x, y); //2 1
🚩对象的解构赋值
//模式匹配，属性名相同的完成赋值
const
age,
username,
password
=
age: 18,
username: 'Cai',
password: 123
console.log(age, username, password); //18 'Cai' 123
//取别名
const
age: age,
username: uname
=
age: 19,
username: 'Li'
console.log(age, uname); //19 'Li'
//对象的属性值严格等于undefined时对应的值才会生效
const
username = 'Zhang', age = 0
=
username: 'alex'
console.log(username, age); //alex 0
//如果将一个已经声明的变量用于对象的解构赋值
//整个赋值需要在圆括号中进行
let x = 2;
(
x
=
x: 1
)
console.log(x); //1
//函数参数的解构赋值
const Person = (
age,
username
) => console.log(username, age); //
Person(
age: 19,
username: 'Cai'
)
//复杂的嵌套
const obj =
x: 1,
y: [1, 2, 3],
z:
a: 5,
b: 6
;
const
y,
y: [, , ss],
z
= obj;
console.log(ss, y, z);
🚩字符串的解构赋值
//字符串的解构赋值
//按照数组的形式
const [a, b, , , e] = 'hello';
console.log(a, b, e); // h e o
//字符串的解构赋值
//按照对象的形式
const
0: a,
1: b
= 'hello'
console.log(a, b); // h e
📙 九、对象字面量的增强与函数参数的默认值
//对象字面量
//实例化构造函数生成对象
const person = new Object();
person.age = 18;
person.speak = function() ;
//对象字面量
const person =
age: 18,
speak: function()
🚩 属性的简洁表示法:键名和变量或者常量名一样的时候，可以只写一个
//属性的简洁表示法:键名和变量或者常量名一样的时候，可以只写一个
const age = 19;
const person =
// 'age': age
age
;
console.log(person);
🚩 方法的简洁表示法：方法可以省略冒号和function关键字
//方法的简洁表示法
//方法可以省略冒号和function关键字
const person =
// speak: function()
speak()
console.log(person);
🚩方括号语法
//方括号语法和点语法
const prop = 'age';
const person =
[prop]: 19
;
console.log(person);
📙 函数参数的默认值
🚩调用函数的时候传参了，就用传递的参数如果没传参，就用默认值
const multiple = (x, y) =>
if (typeof y === 'undefined')
y = 1;
return x * y;
console.log(multiple(2, 2)); //4
函数参数默认值的注意事项
//默认值的生效条件
// 不传递参数或者明确的传递undefined参数 只有这两种情况下 默认值才会生效
const multiply = (x, y = 1) => x * y
console.log(multiply(2, 0)); //0
console.log(multiply(2, null)); //0
console.log(multiply(2, undefined)); //2
//函数参数的默认值 最好从列表的右边开始
// const multiply = (x = 1, y) => x * y;
// console.log(multiply(undefined, 2)); //2
const multiply = (x, y = 1) => x * y;
console.log(multiply(2)); //2
📙 十、剩余参数
🚩剩余参数：剩余参数永远是个数组 即使没有值 也是空数组
// 认识剩余参数
//剩余参数永远是个数组 即使没有值 也是空数组
const add = (x, y, z, ...args) =>
console.log(x, y, z, args);
add(1, 2, 3, 4, 5)
🚩剩余参数的注意事项
//箭头函数的剩余参数
// 箭头函数的参数部分即使只有一个剩余参数也不能省略圆括号
const add = (...args) =>
//使用剩余参数替代arguments获取实际参数
// const add = function()
// console.log(argments);
//
//
const add = (...args) =>
console.log(args); //[1, 2]
add(1, 2)
//剩余参数的位置
//剩余参数只能是最后一个参数 之后不能再有其他参数 否则会报错
const add = (x, y, ...args) =>
console.log(x, y, args);
add(1, 2, 3, 4, 5, 6)
🚩剩余参数的应用
// 剩余参数与解构赋值结合使用
// const [a, ...args] = [1, 2, 3, 4, 5];
// console.log(a, args);
const func = ([num, ...args]) =>
func([1, 2, 3, 4])
const
x,
y,
...z
=
x: 1,
b: 2,
y: 3,
d: 4
console.log(x, y, z);
📙 十一、展开运算符
//数组展开运算符的基本用法
console.log(Math.min(...[2, 33, 44])); //2
//相当于
console.log(Math.min(3, 33, 22)); //3
🚩区分剩余参数和展开运算符
//区分剩余参数和展开运算符
//剩余参数 2,3,4->:[2,3,4]
//展开运算符: [2,3,4]->2,3,4
const add = (...args) =>
console.log(args);
add(1, 2, 3, 4) //[1,2,3,4]
const add = (...args) =>
// console.log(args);
console.log(...args);
add(1, 2, 3, 4) //1 2 3 4
console.log([
es基础知识与高频考点梳理(代码片段)
知识点梳理目录列表变量类型JS的数据类型分类和判断值类型和引用类型原型与原型链(继承)原型和原型链的定义继承写法作用域和闭包执行上下文this闭包是什么异步同步VS异步异步和单线程前端异步的场景ES6/7新标准的考查箭头... 查看详情
redis高频面试题汇总（2021最新版）(代码片段)
...是让你自由发挥，给了你引领面试官往自己最熟悉的知识点引导 查看详情
web前端面试高频考点——vue的高级特性（动态组件异步加载keep-alivemixinvuexvue-router）(代码片段)
系列文章目录文章目录系列文章目录一、Vue高级特性1、动态组件2、vue异步加载组件3、vue缓存组件（keep-alive）4、mixin二、Vuex1、Vuex基本概念2、用于Vue组件三、Vue-router1、动态路由2、懒加载一、Vue高级特性1、动态组件按... 查看详情
大数据开发面试之26个spark高频考点(代码片段)
... 大家好，我是梦想家Alex~今天为大家带来大数据开发面试中，关于Spark的28个高频考点。另外文末为大家准备了福利，不要错过!1、Spark如何保证宕机迅速恢复? 适当增加sparkstandbymaster 编写shell脚... 查看详情
大数据开发面试之26个spark高频考点(代码片段)
... 大家好，我是梦想家Alex~今天为大家带来大数据开发面试中，关于Spark的26个高频考点。另外文末为大家准备了福利，不要错过!1、Spark如何保证宕机迅速恢复? 适当增加sparkstandbymaster 编写shell脚... 查看详情
2021年秋招java研发岗的面试高频考点(代码片段)
高频考点建议收藏！！！（稍后整理答案！！！）东方财富一面JAVA1、集合常用哪些类，arraylist和linkedlist的比较2、Java多线程（线程如何创建、怎么使用线程池）3、锁升级4、JMM5、垃圾回... 查看详情
2021年秋招java研发岗的面试高频考点(代码片段)
高频考点建议收藏！！！（稍后整理答案！！！）东方财富一面JAVA1、集合常用哪些类，arraylist和linkedlist的比较2、Java多线程（线程如何创建、怎么使用线程池）3、锁升级4、JMM5、垃圾回... 查看详情
大数据flink面试考题___flink高频考点,万字超全整理(建议收藏)(代码片段)
引言大家好,我是ChinaManor,直译过来就是中国码农的意思,我希望自己能成为国家复兴道路的铺路人,大数据领域的耕耘者,平凡但不甘于平庸的人。Flink知识回顾考卷如下:选择题1.下面哪个不是Dataset的转换算子()A.readTextFileBreducedistinc... 查看详情
es6复习干货知识点汇总(代码片段)
一、问：ES6是什么，为什么要学习它，不学习ES6会怎么样?答：ES6是新一代的JS语言标准，对分JS语言核心内容做了升级优化，规范了JS使用标准，新增了JS原生方法，使得JS使用更加规范，更加优雅，更适合大型应用的开发。学习E... 查看详情
前端中高级基础知识面试汇总(代码片段)
持续更新ing～前端基础github地址。README.md可以下载到typora中打开，会有整个大纲目录显示（github中markdown目录快捷生成方式不现实，之后可能会想办法生成贴过来，暂时不做相关处理）前端基础gitbook地址。... 查看详情
刷完前端面试题高频考点，再琢磨深挖题，面试官你还有什么招尽管使出来！(代码片段)
前言逛网站时看到个网友在说，自己面试时被问到了刷到的题目当时很开心，信心满满的回答，但紧接着下一秒就笑不出来了，以为面试官是换问题问了，没想到在这个问题基础上发问，这让他就有点措手... 查看详情
后端一次性传了10w条数据，前端该如何处理？——面试高频(代码片段)
...—前端分页6.再次优化7.极致优化（最佳方案）8.知识点补充1.这道题在考什么？对于性能优化的处理方案对于前端渲染机制的了解极端情况下的处理及知识领域的广度2.先用node.js整个10w条数据const 查看详情
常见大数据面试题汇总带答案(代码片段)
大数据面试题汇总redisflink(大部分知识点写过的帖子里都有)mr，java,集群算法题kafka维度建模分为哪几种?SQL高频面试题hbasejvmmysqlsql递归hiveredis为什么快首先，采用了多路复用io阻塞机制然后，数据结构简单，操作节... 查看详情
tcp/ip高频考点之一个数据包的流浪日记(代码片段)
往期推荐TCP/IP开胃菜之HTTP面试反客为主TCP4网络层IP数据包的传输主要经过应用层、传输层、网络层、链路层。承接应用层HTTP、传输层TCP讲解，应用层数据被传输层包裹后接下来就需要被网络层包裹了，网络层的核心任务... 查看详情
java高频面试题汇总--java职场范儿(代码片段)
经历了两周的面试，终于收到了几个满意的offer。换工作的过程是痛苦的，除了一天马不停蹄地跑好几家公司面试，剩下的时间基本就是背面试题了。想找到一份适合自己的面试题并不简单，比如我找的是高级Java开发的职位。出... 查看详情
web前端面试宝典——带你直击面试重难点（40个经典题目，涵盖近90%的考点，码字2w，干货满满！）(代码片段)
系列文章目录JavaScript知识梳理，收录了web前端面试95%以上的高频考点，满满的干货。给你做一个高效的知识梳理，为你的面试保驾护航！内容参考链接HTML&CSS篇HTML&CSS篇JavaScript篇（一）JavaScript篇... 查看详情
spark知识点八万字长文最全汇总和高频面试题目
...调优十、Spark故障排除十一、Spark大厂面试真题Spark涉及的知识点如下图所示，本文将逐一讲解：一、Spark基础1.激动人心的Spark发展史大 查看详情
html&css面试高频考点
【面试·回看】♥HTML&CSS面试高频考点（一）♥HTML&CSS面试高频考点（二）♥HTML&CSS面试高频考点（三）16.CSS动画@keyframes规则用于创建动画为兼容有的浏览器，需要加上前缀：@keyframesmyfirst{from{background:red;}... 查看详情