ES6相关知识

ES6相关知识

箭头函数和普通函数有什么区别?
https://www.cnblogs.com/biubiuxixiya/p/8610594.html
https://www.jianshu.com/p/e5fe25edd78a
普通函数的this指向调用它的那个对象
箭头函数的this永远指向其上下文的 this ,任何方法都改变不了其指向,如 call() , bind() , apply()(或者说箭头函数中的this指向的是定义该函数时所在的对象)
箭头函数通过 call() 或 apply() 方法调用一个函数时,只传入了一个参数,对 this 并没有影响。
箭头函数是匿名函数,不能作为构造函数,不能使用new
箭头函数没有原型属性
箭头函数不绑定arguments,取而代之用rest参数...解决
箭头函数不能当做Generator函数,不能使用yield关键字
箭头函数
(1)特点
不需要function关键字来创建函数
省略return关键字
继承当前上下文的 this 关键字
当箭头函数有且仅有一个参数的时候,可以省略掉括号
(2)注意事项
在使用=>定义函数的时候,this的指向是定义时所在的对象,而不是使用时所在的对象
不能够用作构造函数,这就是说,不能够使用new命令,否则就会抛出一个错误
不能够使用arguments对象
不能使用yield命令

说出至少5个ES6的新特性,并简述它们的作用。(简答题)
https://www.cnblogs.com/xkloveme/p/7456656.html
https://www.cnblogs.com/Wayou/p/es6_new_features.html
https://www.cnblogs.com/leyan/p/6432661.html
1、let关键字,用于声明只在块级作用域起作用的变量。
2、const关键字,用于声明一个常量。
3、解构赋值,一种新的变量赋值方式。使用解构从数组和对象提取值并赋值给独特的变量
4、Symbol数据类型,定义一个独一无二的值。
5、箭头函数
6、for...of遍历,可遍历具有iterator 接口的数据结构。可以循环任何可迭代(也就是遵守可迭代协议)类型的数据。
7、Set结构,存储不重复的成员值的集合。
8、Map结构,键名可以是任何类型的键值对集合。
9、Promise对象,更合理、规范地处理异步操作。
10、Class类定义类和更简便地实现类的继承。
11、模块
12、Proxy代理,用于编写处理函数,来拦截目标对象的操作。
13、模板字面量:模板字面量本质上是包含嵌入式表达式的字符串字面量.

使用解构赋值,实现两个变量的值的交换(编程题)。
let a = 1;let b = 2;
[a,b] = [b,a];

使用解构赋值,完成函数的参数默认值(编程题)。
function demo({name="王德发"}){ console.log(name);
}

利用数组推导,计算出数组 [1,2,3,4] 每一个元素的平方并组成新的数组。(编程题)
var arr1 = [1, 2, 3, 4];var arr2 = [for (i of arr1) i * i];console.log(arr2);

使用模板字符串改写下面的代码。(ES5 to ES6改写题)
let iam = "我是";let name = "王德发";let str = "大家好,"+iam+name+",多指教。";
改:
let iam = `我是`;let name = `王德发`;let str = `大家好,${iam+name},多指教。`;

用对象的简洁表示法改写下面的代码。(ES5 to ES6改写题)
let name = "王德发";
let obj = {
"name":name,
"say":function(){
alert('hello world');
}
};
改:
let name = "王德发";
let obj = {
name,
say(){
alert('hello world');
}
};

用箭头函数的形式改写下面的代码。(ES5 to ES6改写题)
arr.forEach(function (v,i) {
console.log(i);
console.log(v);
});
改:
arr.forEach((v,i) => {
console.log(i);
console.log(v);
});

设计一个对象,键名的类型至少包含一个symbol类型,并且实现遍历所有key。(编程题)let name = Symbol('name');
let product = {
[name]:"洗衣机",
"price":799
};
Reflect.ownKeys(product);

有一本书的属性为:{“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;
}
}
});

阅读下面的代码,并用for...of改成它。(ES5 to ES6改写题)
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;
}

关于Set结构,阅读下面的代码,回答问题。(代码阅读题)。
let s = new Set();
s.add([1]);
s.add([1]);
console.log(s.size);
问:打印出来的size的值是多少?
2。如果回答为1的,多必是记得Set结构是不会存储相同的值。其实在这个案例中,两个数组[1]并不是同一个值,它们分别定义的数组,在内存中分别对应着不同的存储地址,因此并不是相同的值。所以都能存储到Set结构中,size为2。

关于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); //ES6系列

定义一个类Animal,通过传参初始化它的类型,如:“猫科类”。它有一个实例方法:run,run函数体内容可自行定义。
class Animal {
constructor(type){
this.type = type;
}
run(){
alert('I can run');
}
}

基于第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');
}
}

利用module模块,实现两个模块A和B,A模块导出变量name,age和say方法。B模块只导入变量name和say方法,并且重命名name为nickname。
//-----模块A-------//
var name = "kitty";
var age = 15;
var say = function(){ //....

JavaScript中基本数据类型与引用数据类型
JavaScript 中共有 6 种基本数据类型:Undefined、Null、Boolean、Number、String、Symbol (new in ES 6)
基本数据类型的值是按值访问的,引用类型的值是按引用访问的.
基本类型的比较是它们的值的比较,引用类型的比较是引用的比较.
== : 只进行值的比较,=== : 不仅进行值得比较,还要进行数据类型的比较.
基本类型的变量是存放在栈内存(Stack)里的,引用类型的值是保存在堆内存(Heap)中的对象(Object)

let,const
let+const块级作用域,有了块级作用域,通常不存在变量提升现象。const定义常量值,不能够重新赋值,如果值是一个对象,可以改变对象里边的属性值。关于let的几个知识点:
let声明的变量具有块级作用域
let声明的变量不能通过window.变量名进行访问
形如for(let x..)的循环是每次迭代都为x创建新的绑定

promise的优点
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000
promise的理解与使用
promise对象有两个特点:(1)对象的状态不受外界外界影响;(2)一旦状态改变,就不会再改变,任何时候都可以得到这个结果。
promise对象代表一个异步操作,有三种状态;pending(进行中),fulfilled(已成功)和rejected(已失败)
只有异步操作的结果,可以决定当前是哪一种状态promise的状态改变,只有两种可能:从pending变为fulfilled和从pending变成rejected.只要这两种状态情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为resolved(已定型).
基本用法
new Promise( function(resolve, reject) { ... } )
promise接受一个函数作为参数,该函数的两个参数分别是resolve和reject.它们是两个函数,由JavaScript引擎提供,不用自己部署.
then方法 。Promise实例具有then方法,也就是说,then方法是定义在原型对象Promise.prototype上的,它的作用是是为Promise实例添加状态改变时的回调函数.then方法的第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数.并且then方法返回的是一个新的Promise实例。


模板字符串
在以往的时候我们在连接字符串和变量的时候需要使用+来实现字符串的拼接,但是有了模版语言后我们可以使用`string${varible}string`这种进行连接。这里需要注意的两个知识点:
${字符串变量} 和 反引号

module体系
历史上js是没有module体系,无法将一个大程序拆分成一些小的程序。ES6中module体系通过import和export实现。

Class的用法
Class语法相对原型、构造函数、继承更接近传统语法,它的写法能够让对象原型的写法更加清晰、面向对象编程的语法更加通俗。contructor内部定义的方法和属性是实例对象自己的,不能通过extends 进行继承。在ES6中,子类的构造函数必须含有super()函数,super表示的是调用父类的构造函数,虽然是父类的构造函数,但是this指向的却是Cat。


Set数据结构
Set本身是一个构造函数,类似于数组,符合数学上集合的概念,即元素没有重复。可以使用Set方便的实现数组去重复。

扩展的对象功能
对象初始化简写,当对象属性的名字和赋值的变量相等,可以只写一个。

为对象添加方法可以省略function关键字,只使用()即可


es6的...扩展运算符是浅拷贝还是深拷贝,...是怎么使用的?
...是深拷贝,
demo:
var arr = [1,2,3,4,5] var [ ...arr2 ] = arr
此题可以跟面试官聊以下深拷贝和浅拷贝的区别

猜你喜欢

转载自www.cnblogs.com/leftJS/p/10628063.html