1 新特性(上)

1 新特性(上)

【考点简介】

ES6提出了一些新特性,对js进行补充与优化,在日常开发中得到了广泛应用,也是前端笔试面试的必考点,本章将分析ES6的每个新特性,列举相关校招考点,主要知识点如下图所示。大家除了学习以下考点外,可以看看ES2015语言标准官方文档,另外,阮一峰老师的《ECMAScript 6 入门教程》也是一本很好的ES6入门之书。希望大家能多看例题与代码,在理解原理基础上,做到灵活运用。

【例题示例】

1.1 请问什么是ES6,它有哪些新特性?

【考点映射】

  • ES6新特性

【频率】★★★★★(几乎是前端岗必考题,尽量答多点新特性)

【难度】☆☆

【参考答案】

ECMAScript规定了浏览器脚本语言(js)的标准,ES6是一个泛指,包含ES5.1版以后的js的下一代标准,涵盖了ES2015、ES2016、ES2017等,(ES2015/2016/2017是正式名称,特指发布的正式版本语言标准的年份),通常提到的ES6一般指ES2015标准,有时也泛指“下一代js语言”

ES6相对于更加简洁,大幅度提高了开发效率,主要新增了以下特性:

(1)let声明变量、const声明常量

(2)箭头函数

(3)解构赋值变量(数组、变量)

let [a, b, c] = [1, 2, 3];
let[a,[[b], c]]=[1,[[2],3]]; //a:1 b:2 c:3

(4)Set、Map数据结构

(5)Symbol数据类型

(6)Promise对象

(7)async、await

(8)class类

(9)ES 模块化(Moudule)

(10)函数默认参数

(11)函数的rest参数(...变量名),用于获取函数的多余参数,就不需要用arguments对象

function add(...values){
    let sum = 0;
    for(var val of values){     
        sum += val;
    }
    return sum;
}
add(2,5,3)  //10

(12)模板字符串

(13)… 展开运算(延展操作符)

(14)元编程Proxy、Reflet

(15)迭代器Iterator 和 for...of 

(16)新增了一些Object对象方法


1.2 请问var、let 和 const 有何区别?

【考点映射】

  • var、let 和 const 区别总结

【频率】★★★★★

【难度】☆

【参考答案】

作用域不同:

var 声明的变量的作用域是当前执行上下文,或者说对于声明在任何函数外的变量来说是全局的

let 、 const 声明的是块级作用域变量,只在它所在的代码块内有效

变量提升现象:

var声明的变量会被提升到作用域顶部,并初始化为undefined

let、 const 声明的变量会被提升到顶部,但在声明代码前不能使用(暂时性死区),会被初始化undefined

变量/常量:

var 和 let 声明变量,const 声明只读常量

暂时性死区:

var 可以先使用,后声明,值为undefined

let 、const 必须先声明,后使用;且const必须初始化赋值

在let、const声明之前就访问对应的变量与常量,会抛出ReferenceError,产生原因:

由let/const声明的变量,当它们包含的词法环境(Lexical Environment)被实例化时会被创建,但只有在变量的词法绑定(LexicalBinding)已经被求值运算后,才能够被访问(摘自ES2015语言标准)

简单来说:用let/const声明的变量会先在作用域中被创建出来,但此时还未进行词法绑定,是不能被访问的,会抛出错误。从在作用域创建变量开始,到变量开始可被访问之间的一段时间,称之为TDZ(暂时性死区)

【延伸考点】

1、const声明的变量是绝对的不可变吗?

实际上,不是const变量的值不得改动,而是变量指向的那个内存地址不得改动。对于基础类型数据,值保存在变量指向的那个内存地址,等同于常量

对于复合类型数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指针,const只能保证这个指针是不变的,至于它指向的数据结构是否变化,是不可控的


1.3 请问ES6新增的Symbol数据类型有何特点?

【考点映射】

  • Symbol数据类型

【频率】★★★★

【难度】☆

为保证每个属性的名字都是独一无二,从根本上防止属性名冲突,ES6 引入Symbol数据类型

Symbol是第7种基础数据类型,表示独一无二的值,Symbol 值通过Symbol函数生成,对象的属性名现在可以有两种类型,一种是本来的字符串,另一种就是新增的 Symbol 类型

Symbol 数据类型特点:

(1)、凡属性名属于 Symbol 类型,就是独一无二的,可以保证不会与其他属性名产生冲突

(2)、Symbol数据类型可用 typeof 检测出来,返回“symbol”

(3)、Symbol函数前不能使用 new 操作,会报错,因为生成的 Symbol 是一个基础类型的值,不是对象,可理解为它是一种类似于字符串的数据类型

(4)、Symbol函数的参数只表示对当前Symbol值的描述,就算参数相同,Symbol函数的返回值是不相等的

// 没有参数的情况 
let s1 =Symbol();
let s2 =Symbol();  
s1 === s2 // false  
// 有参数的情况 
let s1 =Symbol('foo');
let s2 =Symbol('foo');  
s1 === s2 // false

(5)、在Symbol 作为属性名,遍历对象的时,该属性不会出现在for...in、for...of循环中,也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()遍历返回

但它并不是私有属性,Object.getOwnPropertySymbols()方法,可以获取指定对象的所有 Symbol 属性名。该方法返回一个数组,成员是当前对象的所有用作属性名的 Symbol 值

Reflect.ownKeys()方法可以返回所有类型的键名,包括常规键名和 Symbol 键名

常用方法:Symbol.for():(全局注册)

接受一个字符串作为参数,随后搜索有没有以该参数作为名称的 Symbol 值。如果有,就返回这个 Symbol 值,否则就新建一个以该字符串为名称的 Symbol 值,并将其注册到全局,可以实现重新使用同一个 Symbol 值。


1.4 请问ES6 class与ES5构造函数有什么联系?(如何用ES5的方式实现class?)

【考点映射】

  • class与构造函数

【频率】★★★★★

【难度】☆☆

【参考答案】

class其实是一个语法糖,使得js的编码更清晰、更人性化、风格更贴合面向对象的思想,为代码编译器、检查器提供方便

js生成新对象的传统方法是通过构造函数定义的,这种写法与传统的面向对象语言差

剩余60%内容,订阅专栏后可继续查看/也可单篇购买

前端岗面试求职真题解析 文章被收录于专栏

前端岗位面试求职攻略及真题解析~~

全部评论

相关推荐

算法丰川祥:实际就两个人给他投,它这么说好显得自己比较抢手
点赞 评论 收藏
分享
10-17 23:18
已编辑
西北农林科技大学 Web前端
独行m:给25可以试试,但他只能给12,那就是纯纯的事精
秋招,不懂就问
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务