ES6进阶之路
1.说出至少5个ES6的新特性,并简述它们的作用。
、 let关键字,用于声明只在块级作用域起作用的变量。
、 const关键字,用于声明一个常量。
、 结构赋值,一种新的变量赋值方式。常用于交换变量值,提取函数返回值,设置默认值。
、 Symbol数据类型,定义一个独一无二的值。
、 Proxy代理,用于编写处理函数,来拦截目标对象的操作。
、 for...of遍历,可遍历具有iterator 接口的数据结构。
、 Set结构,存储不重复的成员值的集合。
、 Map结构,键名可以是任何类型的键值对集合。
、 Promise对象,更合理、规范地处理异步操作。
、Class类定义类和更简便地实现类的继承。
2.使用结构赋值,实现两个变量的值的交换
答案:
let a = ;
let b = ;
[a,b] = [b,a];
3.使用结构赋值,完成函数的参数默认值
function demo({name="前端君"}){
console.log(name);
}
4.利用数组推导,计算出数组 [1,2,3,4] 每一个元素的平方并组成新的数组
var arr1 = [, , , ];
var arr2 = [for (i of arr1) i * i];
console.log(arr2);
5.使用模板字符串改写下面的代码
let iam = "我是";
let name = "前端君";
let str = "大家好,"+iam+name+",多指教。";
改写成:
let iam = `我是`;
let name = `前端君`;
let str = `大家好,${iam+name},多指教。`;
6.用对象的简洁表示法改写下面的代码
let name = "前端君";
let obj = {
"name":name,
"say":function(){
alert('hello world');
}
};
改写成:
let name = "前端君";
let obj = {
name,
say(){
alert('hello world');
}
};
7.用箭头函数的形式改写下面的代码。
arr.forEach(function (v,i) {
console.log(i);
console.log(v);
});
改写成:
arr.forEach((v,i) => {
console.log(i);
console.log(v);
});
8.设计一个对象,键名的类型至少包含一个symbol类型,并且实现遍历所有key。
let name = Symbol('name');
let product = {
[name]:"洗衣机",
"price":
};
Reflect.ownKeys(product);
9.有一本书的属性为:{“name”:“《ES6基础系列》”, ”price”:56 };要求使用Proxy对象对其进行拦截处理,name属性对外为“《ES6入门到懵逼》”,price属性为只读。
let book = {"name":"《ES6基础系列》","price": };
let proxy = new Proxy(book,{
get:function(target,property){
if(property === "name"){
return "《入门到懵逼》";
}else{
return target[property];
}
},
set:function(target,property,value){
if(property === 'price'){
target[property] = ;
}
}
});
10.阅读下面的代码,并用for...of改成它。
let arr = [,,,,];
let sum = ;
for(let i=;i<arr.length;i++){
sum += arr[i];
}
改写:
let arr = [,,,,];
let sum = ;
for(value of arr){
sum += value;
}
11.关于Set结构,阅读下面的代码,回答问题。。
let s = new Set();
s.add([1]);
s.add([1]);
console.log(s.size);
问:打印出来的size的值是多少?
答:。如果回答为1的同学,多必是记得Set结构是不会存储相同的值。
其实在这个案例中,两个数组[]并不是同一个值,它们分别定义的数组,
在内存中分别对应着不同的存储地址,因此并不是相同的值。
所以都能存储到Set结构中,size为2。
12.关于Map结构,阅读下面的代码,回答问题。
let map = new Map();
map.set([1],"ES6系列");
let con = map.get([1]);
console.log(con);
问:打印出来的变量con的值是多少,为什么?
答:undefined。因为set的时候用的数组[]和get的时候用的数组[]是分别两个不同的数组,只不过它们元素都是1。它们是分别定义的两个数组,并不是同一个值。新手避免在这里犯错。如果想达到预期的效果,你要保证get的时候和set的时候用同一个数组。比如:
let map = new Map();
let arr = [];
map.set(arr,"ES6系列"); let con = map.get(arr);
console.log(con);
这样的得到的变量con的值就是:“ES6系列”。
13.定义一个类Animal,通过传参初始化它的类型,如:“猫科类”。它有一个实例方法:run,run函数体内容可自行定义。
class Animal {
constructor(type){
this.type = type;
}
run(){
alert('I can run');
}
}
14.基于第12题的Animal类,定义一个子类Cat并继承Animal类。初始化Cat类的昵称name和年龄age。并拥有实例方法eat,eat函数体内容可自行定义。
答:
class Cat extends Animal{
constructor(type,name,age){
super(type);
this.name = name;
this.age = age;
} eat(){
alert('I am eating');
}
}
15.利用module模块,实现两个模块A和B,A模块导出变量name,age和say方法。B模块只导入变量name和say方法,并且重命名name为nickname。
答:
//-----模块A-------//
var name = "kitty";
var age = ;
var say = function(){
//....
};
export {name,age,say} //---module-B.js文件---
import { name as nickname, say } from "模块A的相对路径";
ES6进阶之路的更多相关文章
- nodejs打包成桌面程序(exe)的进阶之路
nodejs打包成桌面程序(exe)的进阶之路 node js bat 前端 计划任务 前言:最近的研究,请大佬们细品 第一篇 - 任务计划程序篇 说真的研究到将nodejs打包成可执行的exe文件是 ...
- JavaScript进阶之路(一)初学者的开始
一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...
- OpenCV进阶之路:神经网络识别车牌字符
1. 关于OpenCV进阶之路 前段时间写过一些关于OpenCV基础知识方面的系列文章,主要内容是面向OpenCV初学者,介绍OpenCV中一些常用的函数的接口和调用方法,相关的内容在OpenCV的手 ...
- MVC进阶之路:依赖注入(Di)和Ninject
MVC进阶之路:依赖注入(Di)和Ninject 0X1 什么是依赖注入 依赖注入(Dependency Injection),是这样一个过程:某客户类只依赖于服务类的一个接口,而不依赖于具体服务类, ...
- 【SSH进阶之路】Hibernate映射——多对一单向关联映射(四)
[SSH进阶之路]Hibernate基本原理(一) ,小编介绍了Hibernate的基本原理以及它的核心,採用对象化的思维操作关系型数据库. [SSH进阶之路]Hibernate搭建开发环境+简单实例 ...
- 【SSH进阶之路】一步步重构容器实现Spring框架——彻底封装,实现简单灵活的Spring框架(十一)
文件夹 [SSH进阶之路]一步步重构容器实现Spring框架--从一个简单的容器開始(八) [SSH进阶之路]一步步重构容器实现Spring框架--解决容器对组件的"侵入 ...
- 2017PHP程序员的进阶之路
2017PHP程序员的进阶之路 又是一年毕业季,可能会有好多毕业生即将进入开发这个圈子,踏上码农这个不归路.根据这些年在开发圈子总结的LNMP程序猿发展轨迹,结合个人经验体会,总结出很多程序员对未来的 ...
- 浅谈Android进阶之路
过去十年是移动互联网蓬勃发展的黄金期,相信每个人也都享受到了移动互联网红利,在此期间,移动互联网经历了曙光期.成长期.成熟期.现在来说已经进入饱和期.依然记得在 2010-2013 年期间,从事移动开 ...
- 处女作《Web全栈开发进阶之路》出版了!
书中源码下载地址:https://github.com/qinggee/WebAdvanced 01. 当初决定写博客的原因非常的纯洁:只要每个月写上 4 篇以上博客,月底的绩效奖金就多 500 块. ...
随机推荐
- ie9 不执行js,打开控制台就好了
IE仅在开启developer tools的时候,脚本才能访问到console这个对象 (console在代码调试时很有帮助,但是在生产环境中,应该移除掉,或至少应该先判断这个对象是否存在,毕竟无插件 ...
- 《Linux就该这么学》第十五天课程
本次课所学习的是DNS域名解析服务! 下面提供一些DNS有关的内容 如需进一步学习,请前往https://www.linuxprobe.com/chapter-13.html 工作模式: 1.主服务器 ...
- LOJ-10097(2-sat问题)
题目链接:传送门 思路: 2-sat问题,如果选每个集合最多有两个元素,eg:(Ai,Ai’),(Bi,Bi’): 如果Ai,Bi冲突,就只能选Ai,Bi’(建立边),然后缩点,查找有无相同集合的点在 ...
- HDU 5355 Cake (构造 + 暴力)
题意:给定 n,m,让你把 1 ~ n 分成 m 部分,而且每部分和是一样大的. 析:首先先判断不能分成的,第一种是 sum (1 ~ n 的和)不能被 m 整除,或者 sum / m < n, ...
- while read line 查找指定日期的文件夹
#!/bin/bash dir=/root/tmp targetdir=/root/tmp/tmp filenametxt=/tmp/filename.txt commandtxt=/tmp/comm ...
- [译]迁移到新的 React Context Api
随着 React 16.3.0 的发布,context api 也有了很大的更新.我已经从旧版的 api 更新到了新版.这里就分享一下我(作者)的心得体会. 回顾 下面是一个展示如何使用旧版 api ...
- CentOS 7 用firewall-cmd来开放端口
2.CentOS 7 用firewall-cmd来开放端口 如: firewall-cmd --permanent --add-port=3306/tcp 重新加载 firewall-cmd --re ...
- 使用django我的第一个简单项目流程
项目概述:本项目实现的是员工提交需要审批的事情给老板(例如请假事件.某些具体事务需要老板确认事件等),老板确认或者拒绝该事件,员工登录员工自己的页面可以查询响应的状态信息. 代码实现概略:需要创建两个 ...
- 无知小子踏入python web大门
学习python flask的第一天,费劲我小白的脑子,总算完成了环境配置 详情如下,其他小白误走弯路,希望和我一样爱好python的人坚信:python或许是最好的语言! 那么,开始喽,有不对的地方 ...
- 利用java解压,并重命名
由于工作需要,写了一个小工具,利用java来解压文件然后对文件进行重命名 主要针对三种格式,分别是zip,rar,7z,经过我的多次实践我发现网上的类库并不能解压最新的压缩格式 对于zip格式: ma ...