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 块. ...
随机推荐
- Springboot & Mybatis 构建restful 服务四
Springboot & Mybatis 构建restful 服务四 1 前置条件 成功执行完Springboot & Mybatis 构建restful 服务三 2 restful ...
- windows kafka 环境搭建踩坑记
版本介绍(64位): Windows 10 JDK1.8.0_171 zookeeper-3.4.8/ kafka_2.11-0.10.0.1.tgz 点击链接进行下载 1. JDK安装和环境搭建 自 ...
- jQuery子页面获取父页面元素并绑定事件
父页面HTML文件: <ul id="faul"> <li class="sonli">子页面列表1</li> <li ...
- enum枚举类
枚举类可用于定义常量ch01 package edu.nf.demo.ch01; /** * * 枚举类型 */ public enum Color { /** * 红色 */ RED, /** * ...
- struct,map,json 互相转换
1.1 struct to json 准备 很简单,使用encoding包可以互相转换,没什么好说的,但是有几点注意: 1.结构体内需要序列化的字段首字母大写(遵循驼峰式命名),不需要序列化的字段小写 ...
- Oracle去除重复(某一列的值重复),取最新(日期字段最新)的一条数据
转自 : http://blog.csdn.net/nux_123/article/details/45037719 问题:在项目中有一张设备检测信息表DEVICE_INFO_TBL, 每个设备每天都 ...
- 负载均衡器之 Haproxy
1. 编译安装haproxy 官网: http://www.haproxy.org 1.1 下载haproxy # wget http://www.haproxy.org/download/1.6/s ...
- Python Flask学习笔记之模板
Python Flask学习笔记之模板 Jinja2模板引擎 默认情况下,Flask在程序文件夹中的templates子文件夹中寻找模板.Flask提供的render_template函数把Jinja ...
- How to setup Visual Studio without pain
Visual Studio (VS) can be very hard to install. If you are lucky, one whole day may be enough to ins ...
- Office Web addin 踩坑计:替换后台网站为MVC框架时遇到的问题
Office Web Addin 模板程序的后台本质上是一个网站,你在调试的时候可以发现它的进程是一个32位的IE进程 所以可以把它替换成Asp.net的网站. 替换方法: 1.点击WordRevie ...