ES6有哪些新特性

202 阅读4分钟

今年的金三银四没有往年的火热,有好多小伙伴都没有找到心仪的工作,所以,分享一些常见的前端面试问题,今天聊聊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, 就停止循环
everyevery遍历数组, 每一项都是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' }

还是老样子,请各位大佬多多指点。