es6

1 ES5与ES6转换     babel==browser.js    script  type=text/babel

2. var ，let ， const 的区别：

1. 不存在变量提升

   • var 命令会发生变量提升现象，即变量可以在声明之前使用，值为undefined。
   • let 和 const 则没有变量声明提升的功能，必须要先声明才能使用

2. 不允许重复声明

   • var命令能重复声明，后者覆盖前者
   • let 和 const不允许在相同作用域内，重复声明同一个变量

3. 作用域

   • var 的作用域是以函数为界限
   • let 和 const 的作用域是块作用域，块级作用域指 { } 内的范围
   • var 可以定义全局变量和局部变量，let 和 const 只能定义局部变量
   • const 的声明的常量不能被修改，但对于引用类型来说，堆内存中的值是可以被改变的。

4. 变量作为全局属性

   • 定义的变量会作为window对象的属性，let不会

定义:

全局变量: 在函数外部声明的变量/在函数内部直接赋值的变量

局部变量: 在函数内部声明的变量

李子0：

{

 var a=10;

 console.log(a)//10

}

console.log(a)// 10  a是全局变量，只是在{}中，并不在函数中

函数体内部可以读取到函数外的变量，而函数外不能读取到函数内的变量！如果函数外部想要读取函数内部的变量，可以使用闭包。

函数的作用域链：当前函数对象-->上一层函数对象...-->window全局对象

相互转换:

局部变量和全局变量重名时，局部变量会覆盖全局变量

变量提升:

出现的情况：变量先使用后声明时

提升方式：变量的声明（var y）提升，初始化赋值（y=7）不会。会显示未定义undefined

提升存在范围：代码块指的是function的一个{}，通常的if、while、for的{}中变量不会提升。

JS引擎的工作方式：先获取所有被声明的变量再逐一执行，所有变量的声明语句都会被提升到当前代码块的头部’。

李子1：

Var a=10;

(function (){

Console.log(a) //undefined，存在变量提升，就是相当于var a；但赋值 a=10，未提升，全局变量和局部变量机制都一样

Var a=10;// 局部变量覆盖全局变量，a 变成局部变量

Console.log(a) //10

})()

李子2：

Console.log(b);var b=20;//undefined存在变量提升，就是相当于

Var b;console.log(b); b=20;//undefined

李子3：

var a=2;

(function show(){

console.log(a);//2

a=3;//还是全局变量(可以被函数内部访问—本来就是这样的)，重新赋值，覆盖了原来的值，并且之前声明过了，属于先声明后使用，不存在变量提升

console.log(a)//3

})();

es6 let

1 不能重复声明

2 不存在变量提升现象(一定要先声明后使用，否则会直接报错)--->typeof不再是一个百分之百安全的操作

3出现代码块级作用域  {代码块}

4允许在块级作用域之中声明函数，----块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。----环境差异大，避免在块级作用域内声明函数

例子3：

var a=1;

if(true){

console.log(a);//1

(function fn(){ var a=2;console.log(a);})();//2

console.log(a);//1

};

console.log(a);//1

作用域有4种：全局  函数  eval（es5的严格模式下） 块级{}

   var  :函数作用域   可重复声明  存在变量提升（先使用后声明  undefined）可修改

   let：块级作用域  不可重复声明  不存在变量提升（报错）可修改

例子1：

  const：块级作用域 不可修改  不存在变量提升 常量用大写

　　　　tip: 修改数组和对象里面的值 不算修改常量（地址没有变）

　　　　　　=>可修改数组和对象里面的值

 块级作用域的经典案例：

 

先循环后调用回调函数

3函数

定义方法

 （1）参数扩展（必须试最后一个参数）  function（a,b,...args)

          适用场景：入参个数不确定

          扩展：

          1）展开数组（类似于直接放数组）

          2） 拼接数组(1 concat 2遍历3push+扩展4 push+apply）

var a=[1,2,3];
var b=[4,5,6];
var c=[...a,...b];

console.log(c)
//[1, 2, 3, 4, 5, 6]

var arr = ['tom', 'jerry'];
var arr2 = [1, 2];

arr.push(...arr2);
console.log(arr)

var arr = ['tom', 'jerry'];
var arr2 = [1, 2];

arr.push.apply(arr, arr2);
console.log(arr)

 （2）默认参数   function（a，b=2，c=8）

（3）箭头函数

（this  函数声明时所在的作用域下的this的值）

         1修正this指向

          2 不适用与this有关的回调（vue的钩子函数不能使用）

          3 只有一个参数  可将（）省略

          4只有return 一个参数   可将 {}   省略      

         5只有一条语句 此时语句执行的结果必须试函数的返回值  可将 return {}   省略     

4 结构赋值

   满足的条件：1 左右两边的数据类型必须一致   2 右边必须是合法的数据类型   3声明和赋值必须一起

   例子：

6生成器  generator

定义：function *a(){}

调用：let ab=a();

            ab.next();//往下走

说明： yield   类似于墙 隔开函数（断点）暂停键

function getUser(){
setTimeout(()=>{
var data='用户';
gen.next(data);
},1000)
}
function getInfo(){
console.log(a)
setTimeout(()=>{
var data='订单';
gen.next(data);
},1000)
}
function getNum(){
console.log(b)
setTimeout(()=>{
var data='数量';
gen.next(data);
},1000)
}
var a,b,c;
function * ab(){
a=yield getUser();
console.log(a)
b=yield getInfo();
console.log(b)
c=yield getNum();
console.log(c)
}
var gen= ab();
gen.next();

next 一边将data反馈出来 一边推进执行

7  基本数据类型7种

USONB

undefined   

string   symbol

number   null

object

boolean

8 Set();

似于数组，但它的一大特性就是所有元素都是唯一的，没有重复。
可以利用这一唯一特性进行数组的去重工作。

let list=new Set([1,1,2,3,4])
(1)添加元素 add
let list=new Set();
list.add="1"
list.add(2)
(2)删除元素 delete
let list=new Set([1,2,3,4])
list.delete(2)//true
(3).判断某元素是否存在 has
let list=new Set([1,2,3,4])
list.has(2)//true
(4)清除所有元素 clear
let list=new Set([1,2,3,4])
list.clear()

//不能用for  in 

//这个本质上是遍历对象的key

(5)遍历 values()
let list=new Set(['a','b','c'])
for(let value of Set.values()){
console.log(value)//a,b,c
}

(6)遍历 forEach()
let list=new Set(['4','5','hello'])
list.forEach(function((item){
console.log(item)
})
(7)数组转Set
let set2 = new Set([4,5,6])
let set3 = new Set(new Array(7, 8, 9))
(8)Set转数组
let set4 = new Set([4, 5, 6])
console.log('set to array 1:', [...set4])
console.log('set to array 2:', Array.from(set4))

(9)实现并集、交集、差集

let a = new Set([1,2,3]);

let b = new Set([4,3,2]);

let union = new Set([...a, ...b]);//并集

console.log(union);

let intersect = new Set([...a].filter(x => b.has(x)));//交集

console.log(intersect);

let difference = new Set([...a].filter(x => !b.has(x)));//差集

console.log(difference);

数组的交集差集并集 filter+includes

9  高阶函数: 一个函数可以接收另一个函数作为参数

map 映射

• map和forEach等遍历方法不同，在forEach中return语句是没有任何效果的，
• 而map则可以改变当前循环的值，返回一个新的被改变过值之后的数组（map需return），一般用来处理需要修改某一个数组的值。

let arr1=[1,2,3,4];
let arr2 = arr1.map((value,index) => {
return value * value;
});
console.log(arr2)
// [1, 4, 9, 16]

fliter 过滤

let arr1=[1,2,3,4];
let arr2 = arr1.filter((item,index) => {
return item>2
});
console.log(arr2)
// [3,4]

reduce 汇总（有中间值）   相加 相减 计算平均值 

let arr1=[1,2,3,4];
let sum = arr1.reduce((sum1,n) => {
return sum1+n
},0);//     0 可加可不加
console.log(sum)
// 10

11.字符串遍历

    let str = "hello";
    //1.for遍历
    for (let i = 0; i < str.length; i++) {
        console.log(i, str[i]);     //i 索引    数值类型
    }
    
    //2.数组->for->for in
    let arr = [1, 2, 3];
    for (let i in arr) {
        console.log(i, arr[i]);     //i 索引    字符串类型
    }
    
    //3.for... of
    for(let i of str){
        console.log(i);     //数据
    }
    
    //4.解构----需要只要字符串的长度
    
    let [a, b, c, d ,e] = str;
    console.log(a, b, c, d ,e);

可以取字符串的第一位

 let [a] = str;
    console.log(a);

//字符串新增方法：
方法                返回值          作用
includes('str')     boolean         判断字符串中包含子串
endWith('str')      boolean         判断字符串以"str"结尾
startWith('str')    boolean         判断字符串以"str"开头
repeat(n)           重复拼接自身     重复n次输出字符串 repeat + repeat

//不全方法: 达不到length的长度就补全字符串长度

str=str.padStart(length, 's'); 字符串开头补全 

str=str.endStart(length, 's'); 字符串末尾补全
12 set 和数组相互转换3种方式

let set = new Set();
set.add(1).add(2).add(3).add(2);

// 1.Array.from();
var arr = Array.from(set);
console.log(arr);

// 2.遍历set然后push
var arr  = [];
set.forEach(i=>{
    arr.push(i);
});
console.log(arr);

// 3.扩展运算符
var arr = [...set];
console.log(arr);

map、对象和字符串之间转化

let map = new Map();
map.set('name', 'jack').set('age', 22).set('tel', 151);

// 1.map -> 对象 -> String
var obj = {};
map.forEach((v,k)=>{
    obj[k] = v;
})
console.log(obj);

var str = JSON.stringify(obj);
console.log(str);

// 2.String -> 对象 -> map
var obj1 = JSON.parse(str);
var map1 = new Map();
for(let i in obj1){
    map1.set(i,obj1[i]);
}
console.log(map1);