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);


 
 


posted @ 2020-08-02 22:16  青橙娃娃  阅读(138)  评论(0编辑  收藏  举报