前端常见面试题总结——ES6部分(三)
1.es6熟悉吗,说几个es6的新增方法
(1)新增声明命令let和const
在es6中通常用 let
和 const
来声明,let
表示变量、const
表示常量。
特点:
let
和const
都是块级作用域。以{}代码块作为作用域范围 只能在代码块里面使用。- 不存在变量提升,只能先声明再使用,否则会报错。在代码块内,在声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
- 在同一个代码块内,不允许重复声明。
- const声明的是一个只读常量,在声明时就需要赋值。(如果
const
的是一个对象,对象所包含的值是可以被修改的。抽象一点儿说,就是对象所指向的地址不能改变,而变量成员是可以修改的。)
(2)模板字符串(Template String)
用一对反引号(`)标识,它可以当作普通字符串使用,也可以用来定义多行字符串,也可以在字符串中嵌入变量,js表达式或函数,变量、js表达式或函数需要写在${ }中。
var str = `abc
def
gh`;
console.log(str);
let name = "小明";
function a() {return "ming";
}
console.log(`我的名字叫做${name},年龄${17+2}岁,性别${'男'},游戏ID:${a()}`);
(3)函数的扩展
- 函数的默认参数
ES6为参数提供了默认值。在定义函数时便初始化了这个参数,以便在参数没有被传递进去时使用。
function A(a,b=1){console.log(a+b);
}
A(1); //2
A(2+3); //5
- 箭头函数
在es6中,提供了一种简洁的函数写法,我们称作“箭头函数”。
写法:函数名=(形参)=>{……} 当函数体中只有一个表达式时,{}和return可以省略,当函数体中形参只有一个时,()可以省略。
特点:箭头函数中的this始终指向箭头函数定义时的离this最近的一个函数,如果没有最近的函数就指向window。
//省略写法
var people = name => 'hello' + name;var getFullName = (firstName, lastName) => {var fullName = firstName + lastName;return fullName;
}
(4)对象的扩展
- 属性的简写。ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值。
var foo = 'bar';
var baz = {foo}; //等同于 var baz = {foo: foo};
- 方法的简写。省略冒号与function关键字。
var o = {method() {return "Hello!";}
};// 等同于
var o = {method: function() {return "Hello!";}
};
- Object.keys()方法,获取对象的所有属性名或方法名(不包括原形的内容),返回一个数组。
var obj={name: "john", age: "21", getName: function () { alert(this.name)}};
console.log(Object.keys(obj)); // ["name", "age", "getName"]
console.log(Object.keys(obj).length); //3console.log(Object.keys(["aa", "bb", "cc"])); //["0", "1", "2"]
console.log(Object.keys("abcdef")); //["0", "1", "2", "3", "4", "5"]
Object.assign (),assign方法将多个原对象的属性和方法都合并到了目标对象上面。可以接收多个参数,第一个参数是目标对象,后面的都是源对象。
var target = {}; //目标对象
var source1 = {name : 'ming', age: '19'}; //源对象1
var source2 = {sex : '女'}; //源对象2
var source3 = {sex : '男'}; //源对象3,和source2中的对象有同名属性sex
Object.assign(target,source1,source2,source3);console.log(target); //{name : 'ming', age: '19', sex: '男'}
(5)for...of 循环
是遍历所有数据结构的统一的方法。for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、Generator 对象,以及字符串。
var arr=["小林","小吴","小佳"];
for(var v of arr){console.log(v);
}
//小林
//小吴
//小佳
(6)import和export
ES6标准中,JavaScript原生支持模块(module)了。这种将JS代码分割成不同功能的小块进行模块化,将不同功能的代码分别写在不同文件中,各模块只需导出公共接口部分,然后通过模块的导入的方式可以在其他地方使用。
export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口。
import用于在一个模块中加载另一个含有export接口的模块。
import和export命令只能在模块的顶部,不能在代码块之中。
//导入部分
//全部导入
import Person from './example'//将整个模块所有导出内容当做单一对象,用as起别名
import * as example from "./example.js"
console.log(example.name)
console.log(example.getName())//导入部分
import { name } from './example'//导出部分
// 导出默认
export default App// 部分导出
export class User extend Component {};
(7)Promise对象
Promise是异步编程的一种解决方案,将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。
它有三种状态,分别是pending-进行中、resolved-已完成、rejected-已失败。
Promise 构造函数包含一个参数和一个带有 resolve(解析)和 reject(拒绝)两个参数的回调。在回调中执行一些操作(例如异步),如果一切都正常,则调用 resolve,否则调用 reject。对于已经实例化过的 promise 对象可以调用 promise.then() 方法,传递 resolve 和 reject 方法作为回调。then()方法接收两个参数:onResolve和onReject,分别代表当前 promise 对象在成功或失败时。
var promise = new Promise((resolve, reject) => {var success = true;if (success) {resolve('成功');} else {reject('失败');}
}).then((data) => { console.log(data)},(data) => { console.log(data)}
)
promise的执行过程
setTimeout(function() {console.log(0);
}, 0);
var promise = new Promise((resolve, reject) => {console.log(1);setTimeout(function () {var success = true;if (success) {resolve('成功');} else {reject('失败');}},2000);
}).then((data) => { console.log(data)},(data) => { console.log(data)}
);
console.log(promise); //<pending> 进行中
setTimeout(function () {console.log(promise); //<resolved> 已完成
},2500);
console.log(2);//1
//Promise {<pending>}
//2
//0
//成功
//Promise {<resolved>: undefined}
(8)解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
- 数组的解构赋值
数组中的值会自动被解析到对应接收该值的变量中,数组的解构赋值要一一对应 如果有对应不上的就是undefined
var [name, pwd, sex]=["小周", "123456", "男"];
console.log(name) //小周
console.log(pwd)//123456
console.log(sex)//男
- 对象的解构赋值
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
var obj={name:"小周", pwd:"123456", sex:"男"}
var {name, pwd, sex}=obj;
console.log(name) //小周
console.log(pwd)//123456
console.log(sex)//男//如果想要变量名和属性名不同,要写成这样
let { foo: foz, bar: baz } = { foo: "aaa", bar: "bbb" };
console.log(foz) // "aaa"
console.log(foo) // error: foo is not defined
(9)set数据结构
Set数据结构,类似数组。所有的数据都是唯一的,没有重复的值。它本身是一个构造函数。
属性和方法:
- size 数据的长度
- add() 添加某个值,返回 Set 结构本身。
- delete() 删除某个值,返回一个布尔值,表示删除是否成功。
- has() 查找某条数据,返回一个布尔值。
- clear() 清除所有成员,没有返回值。
应用:数组去重。
var arr = [1,1,2,2,3];
var s = new Set(arr);
console.log(s); //{1, 2, 3}console.log(s.size); //3
console.log(s.add(4)); //{1, 2, 3, 4}
console.log(s.delete(4)); //true
console.log(s.has(4)); //false
s.clear();
(10)Spread Operator 展开运算符(...)
- 将字符串转成数组
var str="abcd";
console.log([...str]) // ["a", "b", "c", "d"]
- 将集合转成数组
var sets=new Set([1,2,3,4,5])
console.log([...sets]) // [1, 2, 3, 4, 5]
- 两个数组的合并
var a1=[1,2,3];
var a2=[4,5,6];
console.log([...a1,...a2]); //[1, 2, 3, 4, 5, 6]
- 在函数中,用来代替arguments参数
rest参数 …变量名称
rest 参数是一个数组 ,它的后面不能再有参数,不然会报错
function func(...args){console.log(args);//[1, 2, 3, 4]
}
func(1, 2, 3, 4);function f(x, ...y) {console.log(x);console.log(y);
}
f('a', 'b', 'c'); //a 和 ["b","c"]
f('a') //a 和 []
f() //undefined 和 []
前端常见面试题总结——ES6部分(三)相关推荐
- 前端常见面试题及答案
文章转自http://www.cnblogs.com/syfwhu/p/4434132.html 前言 本文是在GitHub上看到一个大牛总结的前端常见面试题,很多问题问的都很好,很经典.很有代表性. ...
- 前端常见面试题---flex:1 是什么?
前端常见面试题-flex:1 是什么 文章目录 前端常见面试题---flex:1 是什么 Flex-grow Flex-shrink Flex-basis flex=1得应用 一个高度自适应的div, ...
- web前端常见面试题
Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted ...
- 前端常见面试题之----js单线程,微任务宏任务
js单线程,微任务宏任务 前言 一.什么是单线程? 二.为什么JS是单线程? 三.任务队列 1. 什么是任务队列 2. 什么是微任务宏任务 四.常见面试题例子 总结 前言 他来了他来了,前端必问题之一 ...
- 前端常见面试题 - JS篇
以下会是JS常见面试题: 面试题将会以系列不定时更新,编写不宜,如有用到,请动动小手关注一下. 1. 简述ES6 1. let: 块级作用域. 2. const: 常量; 块级作用域; 一旦声明, 则 ...
- 前端常见面试题:js去除空格的三种方法
用js去除空格: 1.用str.replace (/\s*/g,"") 去除所有空格 2.str.trim() 无法去除中间的空格 3.$.trim(str) 无法去除中间的空格
- web前端常见面试题总结
人生的路上少不了尝试,人人都是打工人,但愿这份面试题可以帮助到你 H5有哪些新特性? 绘画canvas(随时随地绘制2D图形).svg(描述XML中的2D图形)元素 语义化标签header.ment. ...
- 中级前端常见面试题(附答案),持续更新
文章目录 Q:JS有哪些数据类型? 7种基本类型 1种引用类型 Q:ES6数据结构 Set / Map Set Map Q:call, apply, bind 用法和区别 call() 和 apply ...
- 【面试】前端常见面试题总结
1.什么是mvvm . mvc 模型? MVVM是Model-View-ViewModel的简写.即模型-视图-视图模型. [模型]指的是后端传递的数据. [视图]指的是所看到的页面. [视图模型 ...
最新文章
- mc有什么红石机器人_mc:作为一个mc萌新应该掌握哪些基本功?还需要知道些什么?...
- Java基础知识:IO
- 关于Linux你了解多少?Linux由来!
- Java中性能优化的35种方法汇总
- nyist oj 37 回文字符串 (动态规划经典)
- 作者:劳保强(1989-),男,中国科学院上海天文台助理工程师
- label里面的文字换行_如何在JLabel中自动换行文本?
- python 颜色大全 颜色对应 matplotlab plot 颜色对应
- 点云数据(point cloud)
- CAD图层管理技巧 使画图效率事半功倍
- Spring 框架的学习心得
- 互联网寒冬怎么过?一程序员裸辞之后,找不到理想的工作,慌的很
- error: C++ requires a type specifier for all declarations
- java 获取docker ip_docker容器内部获取宿主机ip地址方法以及报错解决
- ISP算法:gamma矫正
- NAND、NOR、FLASH、Memory
- 32位与64位操作系统的区别
- python是不是现在主流的人工智能编程语言_AI编程:5种最流行的人工智能编程语言...
- 微信小程序开发(一) 微信登录流程
- 电脑怎么设置动态壁纸?关于Windows和Mac壁纸的设置方法
热门文章
- 莆田学院计算机系录取分数线,莆田学院2019录取分数线_高考升学网
- 球形罩铆接机械臂设计(lunwen+开题报告+指导记录+设计图纸+PLC控制程序)
- Free SQL Server tools that might make your life a little easier
- linux系统可以玩星际争霸吧,Linux下也玩星际争霸
- 用python编程、假设一年期定期利率_第二章-习题答案
- Etcd教程 — 第二章 Etcd集群静态发现
- python爬虫抓取双色球_Python爬虫练习:爬取双色球每期的中奖号码,看能不能中奖...
- uni-app小程序滑动到顶部固定
- PLC通讯-串口通讯
- C语言实验——一元二次方程Ⅱ