ES6进阶之路
Posted gavinjay
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6进阶之路相关的知识,希望对你有一定的参考价值。
1.说出至少5个ES6的新特性,并简述它们的作用。
1、 let关键字,用于声明只在块级作用域起作用的变量。 2、 const关键字,用于声明一个常量。 3、 结构赋值,一种新的变量赋值方式。常用于交换变量值,提取函数返回值,设置默认值。 4、 Symbol数据类型,定义一个独一无二的值。 5、 Proxy代理,用于编写处理函数,来拦截目标对象的操作。 6、 for...of遍历,可遍历具有iterator 接口的数据结构。 7、 Set结构,存储不重复的成员值的集合。 8、 Map结构,键名可以是任何类型的键值对集合。 9、 Promise对象,更合理、规范地处理异步操作。 10、Class类定义类和更简便地实现类的继承。
2.使用结构赋值,实现两个变量的值的交换
答案: let a = 1; let b = 2; [a,b] = [b,a];
3.使用结构赋值,完成函数的参数默认值
function demo({name="前端君"}){ console.log(name); }
4.利用数组推导,计算出数组 [1,2,3,4] 每一个元素的平方并组成新的数组
var arr1 = [1, 2, 3, 4]; 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":799 }; Reflect.ownKeys(product);
9.有一本书的属性为:{“name”:“《ES6基础系列》”, ”price”:56 };要求使用Proxy对象对其进行拦截处理,name属性对外为“《ES6入门到懵逼》”,price属性为只读。
let book = {"name":"《ES6基础系列》","price":56 }; 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] = 56; } } });
10.阅读下面的代码,并用for...of改成它。
let arr = [11,22,33,44,55]; let sum = 0; for(let i=0;i<arr.length;i++){ sum += arr[i]; } 改写: let arr = [11,22,33,44,55]; let sum = 0; for(value of arr){ sum += value; }
11.关于Set结构,阅读下面的代码,回答问题。。
let s = new Set();
s.add([1]);
s.add([1]);
console.log(s.size);
问:打印出来的size的值是多少?
答:2。如果回答为1的同学,多必是记得Set结构是不会存储相同的值。 其实在这个案例中,两个数组[1]并不是同一个值,它们分别定义的数组, 在内存中分别对应着不同的存储地址,因此并不是相同的值。 所以都能存储到Set结构中,size为2。
12.关于Map结构,阅读下面的代码,回答问题。
let map = new Map();
map.set([1],"ES6系列");
let con = map.get([1]);
console.log(con);
问:打印出来的变量con的值是多少,为什么?
答:undefined。因为set的时候用的数组[1]和get的时候用的数组[1]是分别两个不同的数组,只不过它们元素都是1。它们是分别定义的两个数组,并不是同一个值。新手避免在这里犯错。如果想达到预期的效果,你要保证get的时候和set的时候用同一个数组。比如: let map = new Map(); let arr = [1]; 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 = 15; var say = function(){ //.... }; export {name,age,say} //---module-B.js文件--- import { name as nickname, say } from "模块A的相对路径";
以上是关于ES6进阶之路的主要内容,如果未能解决你的问题,请参考以下文章
我的Android进阶之旅NDK开发之在C++代码中使用Android Log打印日志,打印出C++的函数耗时以及代码片段耗时详情