今年的金三银四没有往年的火热,有好多小伙伴都没有找到心仪的工作,所以,分享一些常见的前端面试问题,今天聊聊ES6的新特性:
在开始之前,先简单的介绍一下ES6:ES 全称 ECMAScript,它是由欧洲计算机协会(ECMA)制定的一种脚本语言的标准化规范。说白了就是给 JavaScript 制定的一种语法规范,并不是必须按照这个标准去写才可以运行,但是如果按照 ES6 中的规范去的代码不仅简洁而且效率很高。
所以今天聊的更像是基于ES6要求的代码编写技巧:
变量
在ES6之前,一直使用var来声明变量,但是使用的时候需要了解变量提升(使用var声明的变量,当前作用域的所有变量的声明提升到程序的顶部点。但是在ES6当中有了两个新的变量申明方法:
首先说,相比较var,let和const不会有变量提升的情况,申明的变量只会在当前作用域当中生效,这个在实际开发当中一定要注意,不是所有场景都是使用let和const申明变量才好,比如全局的状态还是使用var申明比较好。
if(1){
var a = 1;
let b = 2;
const c = 3;
}
console.log(a); // 1
console.log(b); // Uncaught ReferenceError: b is not defined
console.log(c); // Uncaught ReferenceError: c is not defined
并且let和const在同一个作用域当中是不可以生命同名的变量的,这个习惯使用var生命变量的小伙伴一定要注意啦:
var a = 1;
var a = 2;
console.log(a) // 2
let a = 1;
let a = 2;
console.log(a) // Uncaught SyntaxError: Identifier 'a' has already been declared
const a = 1;
const a = 2;
console.log(a) // Uncaught SyntaxError: Identifier 'a' has already been declared
var a = 1;
let a = 2;
console.log(a) // Uncaught SyntaxError: Identifier 'a' has already been declared
这里一定要注意,哪怕是let、const和var一起用也是不可以的,在写代码的时候,使用同名变量是很容易出问题的。
当然let和const还是有区别的:
let是用来生命变量的,const是用来声明常量的,变量可以修改,常量不可以被修改
let a = 1;
a = 2;
console.log(a); // 2
const b = 1;
b = 2;
console.log(b); // Uncaught TypeError: Assignment to constant variable.
数组
es6对数组也有了很多新的修改,这里主要了两个方面:
数组便利
forEach
采用回调函数的方式便利数组元素使用,回调函数有三个参数(元素,索引,数组),这里一定要注意,在便利js对象的时候,注意便利出来的类型。
let a = ["Python","PHP","Java","c++"];
a.forEach((item, index, array) => {
console.log(item); //"Python","PHP","Java","c++"
});
但是:forEach会遍历数组, 没有返回值, 不允许在循环体内写return, 不会改变原来数组的内容.
map
和forEach类似,但是他不会修改原数组,会生成一个新的数组,在考虑内存效率的情况下需要注意啊,map可以有返回值,他的返回值就是新的数组的元素。
let a = ["Python","PHP","Java","c++"];
let b = a.map((item, index, array) => {
return item+" 2023";
});
console.log(a); //['Python', 'PHP', 'Java', 'c++']
console.log(b); //['Python 2023', 'PHP 2023', 'Java 2023', 'c++ 2023']
//还有一个超赞的使用技巧
let a = [1,2,3,4];
let b = a.map(String);
console.log(a); //[1, 2, 3, 4]
console.log(b); //['1', '2', '3', '4']
剩下的方法和map,forEach都是类似的,就不一一举例了,我们了解他的使用场景就可以了
| 方法 | 描述 |
|---|---|
| filter | 会过滤掉数组中不满足条件的元素, 把满足条件的元素放到一个新数组中, 不改变原数组 |
| reduce | 斐波那契数列类型的运算 |
| some | 遍历数组的每一项, 有一个返回true, 就停止循环 |
| every | every遍历数组, 每一项都是true, 则返回true, 只要有一个是false, 就返回false |
API
| API | 描述 |
|---|---|
| push() | 从后面添加元素,返回值为添加完后的数组的长度,这个返回值其实很有用 |
| pop() | 弹出元素,从后面删除元素,只能是一个,返回值是删除的元素 |
| shift() | 弹出元素,从前面删除元素,只能删除一个 返回值是删除的元素 |
| unshift() | 从前面添加元素, 返回值是添加完后的数组的长度。 |
| splice(i,n) | 删除从i(索引值)开始之后的那个元素。返回值是删除的元素。 |
| concat() | 和push类型,但是注意,这里对象是一个数组,是从前面依次将数组元素添加进去, 返回值是添加完后的数组的长度。 |
| slice | 采用索引截取元素,这个很常用 |
当然api还有很多,这里只是聊一下我常用,欢迎各位大佬哆嗦指点。
对象
对象简写
这个大家使用的比较多,实际上就是以变量作为对象的键的对象
let age = 18;
let name = "laowang";
let sex = "男";
let result = {age,name,sex};
console.log(result) //{age: 18, name: 'laowang', sex: '男'}
对象合并
类似Python的解包赋值,使用...可以拼接对象
let name = { name: "laowang" };
let age = { age: 38 };
let sex = { sex: "男" };
var person = { ...name, ...age, ...sex };
console.log(person); // { name:'lisi',age:15,sex:'female' }
还是老样子,请各位大佬多多指点。