一、全局变量以及对应的作用域、this动态作用域
1）变量提升
在es5中var变量 在一个作用域内，变量的声明会提升，也就是一个作用域里面，无论变量声明的位置在什么地方，在执行过程中，都会把声明提到代码最前执行
funcation example(){
console.log(a);
var a;
}
# 输出内容:undefined 因为a这个变量已经声明 ，但是并没有初始化内容
2)全局变量的声明和属性值的区分
# 在index.js中
var a = 0 #声明了一个window的全局变量
a = 0 # 声明了一个window属性
在实际用到的过程中，看似效果差不多，但是其实本质并不同。
3）闭包的作用
#在es5中
function fun1(){
var a = 2;
function fun2(){
return a + 4；
}
return fun2;
}
输出：6
在es5中，如果在fun2函数中找不到变量a的声明，则会一层一层向上直到找到声明,否则会报错。如下就实现了闭包。
4）块变量 let 和const
在es5中var变量根据作用域分有：全局作用域、局部作用域
#es5用法
function test(){
var a = 1;
}
二、array数组的遍历、转换、生成、查找有哪些相关的函数
1)数组遍历
- forEach 输出的每一项都是key所对应的value值，不支持continue，break这些关键词
let arry = [2,3,4,5];
array.forEach(functon(item){
console.log(item)
})
- 如果回调函数返回了false时 则结束遍历，否则继续循环
arry.every(funcation(item){
console.log(item)
return true
})
- for ....in 循环 获取到的是key 也就是获取索引值,针对的是对象，数组可以看做是一种特殊的对象
for(let i in arry){
console.log(array[i])
}
- for ... of 循环，获取到的key所对应的value值
for(let item of arry){
console.log(item)
}
2）数组的查找
- 使用过滤器filter,筛选过程中，无论是否寻找到合适的内容，都会返回一个数组。
var arr = [1,2,3,4,5,6];
arr.filter(item=>{
return item%2 == 0
})
输出:[2,4,6]
- 使用find进行查找，只会查找到第一个符合条件的第一个value,而findIndex返回索引
array.find(function(item){
return item % 2 == 0;
})
输出：2
array.findIndex(funcation(item){
return item % 2 == 0;
})
输出:1
三、es6和es5在class类的原型链中挂载一个函数
- es5 定义构造函数
let Animal = function(type){
this.type = type;
this.fun1 = function(){
console.log("输出内容")
}
}
let dog = mew Animal("dog");
#在原型链挂载函数,所有实例公用一个
dog.constructor.prototype.eat =function(){
console.log("输出内容")
}
- es6中无需手动挂载，自动实现
class Animal(){
contructor(type){
this.type = type;
}
eat(){
consolo.log("自动挂载在原型链中")
}
}
四、es6使用set和get进行class属性的读写操作（内含闭包）
let realage =7 ;
class example(){
get age(){
return realage;
}
set age(val){
realage = val;
}
}
let ww = new example();
console.log(ww.age);
ww.age = 10;
console.log(ww.age);
输出：7,10
五、es5与es6的继承
//在es5中继承
let dog = function(){
//初始化构造函数
Animal.call(this,"dog") //使用call改变this的指向
//在子类中挂载一些方法
this.run = function(){
////
}
}
//把子类原型链指向到父类原型链
this.dog.prototype = this.Animal.prototype
总结es6在class的声明、 属性、方法、继承
class parent{
//重定义构造函数
constructor(type){
this.type = type //定义属性
}
//定义静态·方法
static walk(){
console.log("This is a static methods！")
}
func1(){
console.log("自动被挂载在原型链的method")
}
class child extends parent(){
constructor(type){
super(type) //继承
this.type = type //定义属性
}
this.run = funcation(){
console.log("自定义函数")
}
}
}
六、 处理不确定参数
对于es5 使用arguements获取执行的参数
function sum(x,y,z){
console.log(Array.from(this.arguement))
return x + y + z;
}
在es6 使用 ...num 浅拷贝的形式获取 Rest parameter
function sum(...data){
let nums = 0;
data.forEach(function(item){
nums += item;
})
return data;
}
let datas=[1,2,4];
sum(...datas);
九、Arrow Function (箭头函数)
箭头函数是对函数写法一个简化,对this的指向也有了一个变化，之前的函数 是谁执行函数this指向谁，而箭头函数中的this是定义时的绑定
# 当参数有且仅有一个的时候小括号可以省略，当函数体内容是表达式花括号可以省略
let arrow = () =>{}
下面举一个经典的例子
let x = 11;
let obj={
x:22,
say:()=>{
console.log(this.x);
}
}
obj.say();
//输出的值为11
原因如下,say和箭头函数相当于是obj对象中key和value的关系，say函数本身所在的对象是obj，可是因为obj只有在函数被调用，或者通过构造函数new Object()的形式才会有this,因此this向上执行继承父类window的this
十、对象属性
在es6中，对对象的使用更加便捷化，对象中的key值可以是表达式、变量，且当key和value相同，可以省略很多东西
let x = 1, y = 2, z=3;
let obj = {
x,
y,
[z+x]:5,
}
console.log(obj);
输出：{x:1,y:2,4:5}
十一、set数据结构
set对象的增删改查，以及常用的一些函数，最大的特点是会自动去重，但是不可以修改内容，遍历方法可参照数组遍历方法。
let s =new Set();//声明一个set对象
s.add(1).add(2); //增加一个元素
console.log(s.keys(),s.values(),s.entries());//获取所有key、value值、所有的内容
s.size //获取元素个数
s.has(1) //true 获取某元素是否存在
s.delete(1)//删除某个元素
十二、map数据结构
map对元素有一定的要求，需要是可遍历的，并且每一个元素都有对应的键值对，相对于来说比set类型的数据性能更好，以下是和set数据结构有些不同的部分
let m = new Map([[2,"value1"],[4,"value3"]]); //声明形式如下，[2,"value1"] 是其中的一个元素
m.set(5,"values"); //增加元素
m.set(2,"value11"); //修改元素
m.has(2) //判断的是key值
m.get(5) //获取对应的value
# 两种遍历方式
m.forEach(function(value,key){ //注意key和value的位置
console(value,key);
})
for(let [key,value] of m){
console(value,key);
}
十三、字符串模板
字符串模板可以解决在和字符串拼接过程中遇到 字符串换行、包含变量、逻辑运算的简洁方法
const price = 10;
const retails = "retail"
const showText1 = `您购买的价格是${price}`; //和字符串常量中加入表达式
const showText2 = `我是第一行
我是第二行` //可以直接识别模板
function hanlePrice(strings,type){ //strings是获取到的
let s1 = `这个是一个测试！`
return `${strings[0]}${s1}`
}
let showText3 = handlePrice`您好${retail}`
console.log(showText3)
输出：您好这个是一个测试！
十四、解构赋值
解构赋值是对可遍历对象的取值做了一个极大的贡献，使得赋值的过程变得简洁.可以尝试的用在获取接口数据、函数参数的场景中。
- 数组的解构赋值
let arry = [1,2,3,4];
let [one,two] = array;
console.log(one,two);
//输出：1,2
- 获取需要的内容
let [one,,three] = array;
console.log(one,three);
//输出：1,3
- 获取需要内容并且使用rest变量保留剩余内容
let [one,two,...last] = array;
console.log(one,two,last);
//输出：1,2,[3,4]
- 解构对象
let option ={width:100,height:30}
let [width,height] = option
console.log(width,height);
//输出 100 30
let options ={
size:{
width:100,
height:20
},
items:['Cakes','Dount'],
extra:true
}
let [size:{width},items:[one]] = options;
console.log(width,one);
//输出：100，Cakes