ES6整理

一,定义变量let

1、变量提升,var声明的变量会自动提升到最高级,在声明之前就能访问而且还不会报错,它的值是undefined。

console.log(a); //undefined
    var a = 2;

    // 1,let声明变量没有变量提升,提前访问会报错
    console.log(b);
    let b = 10;

2、let声明的变量是一个块级作用域,只在当前的作用域有效,外面的作用域访问不到。

if( 1 ==1 ){
        let c = 10;
    }
    // console.log(c); //报错

3、let声明的变量不能重复声明

    let d = 2;
    let d = 9; //报错

4、let声明的变量不会污染全局变量。

let RegEXP = 20;
console.log(RegEXP);
console.log(window.RegExp); //没有这个值

5,解决了for循环中变量提升的问题,var定义的变量会被外面作用域访问到

//解决了for循环中var定义的变量,会变量提升变成全局变量,会被外面作用域访问。
var arr = [];
for(var i = 0; i< 10; i++){
    arr[i] = i;
}
console.log(i); //10

二,const 声明一个常量

1、const 声明的常量,一旦被声明,值就无法修改

const pi = 3.01415;
//pi = 3;     //报错

    {
        const arr = [5,6,8,9,];
        arr.push(7);
        console.log(arr);  //(5) [5, 6, 8, 9, 7]
        arr = 10;     //值不能改变,否则报错
    }

2、const声明的对象可以修改里面的属性,但是不能直接修改常量的值

const person = {
    name:'小狗'
}
person.name = 'bobo';
console.log(person.name);

// 下面这个直接改变常量的值会报错
person = {
    age:20
}

 例如:应用场景,固定的地址就可以用常量

const path = 'path';
console.log(path);  //path

三,字符串的扩展

判断字符串”hello word”中是否存在”word”,用字符串中的方法只有indexOf:

var str = 'hello word';
var result = str.indexOf('word');
console.log(result);  //6

 在ES6中又为我们提供了其它的方法:

includes():  返回布尔值,用于判断字符串是否包含某些字符

var bool = str.includes('word');
console.log(bool);    //true

startsWith(str[,num]):  返回布尔值,用于判断字符串是否以某个字符开头

var bool2 = str.startsWith('hello');
console.log(bool2);    //true

//给这个方法传入2个参数
var bool3 = str.startsWith('word',6);
console.log(bool3);  //true

endsWith(str[,num]):  返回布尔值,用于判断字符串是否以某些字符结尾

var bool4 = str.endsWith('d');
console.log(bool4);  //true
//给这个方法传入两个参数
var bool5 = str.endsWith('o',7);
console.log(bool5);  //false

repeat(num):  传入数字,这个方法将字符串重复数字对应次数

var str322= '我爱我家,
';
console.log(str322.repeat(3));        //3行 我爱我家,

四, 5.0模板语法 :`模板字符串`

var obj33 = {
    name:'zhuzhu',
    age:18,
    sex:'男',
    hobby:'女',
    veight:120,
    height:180
};
// 字符串拼接方法
var str4 = '大家好,我叫:'+obj33.name+',今年'+obj33.age+',性别'+obj33.sex+',爱好'+obj33.hobby+'。';
console.log(str4);        //大家好,我叫:zhuzhu,今年18,性别男,爱好女。

// 但是字符串的拼接太麻烦了,有没有简单的方法来解决这个问题呢,有的,模板字符串就可以了
var temp111 = `大家好,我叫${obj33.name},今年${obj33.age},性别${obj33.sex},爱好${obj33.hobby}`;
console.log(temp111);    //大家好,我叫zhuzhu,今年18,性别男,爱好女

//1,可以是变量
let name8 = "美女";
let temp22 = `我叫${name8}`;
console.log(temp22);    //我叫美女

// 2,可以是方法
function getName(){
    return "宝宝";
}
let temp3 = `我叫${getName()}`;
console.log(temp3);        //我叫宝宝

// 3,可以是表达式
let aa = 1 ;
let bb = 2;
let temp4 = `a + b=${aa+bb}`;
console.log(temp4);        //a + b=3

五,6.0箭头函数:()=>{}

为了方便书写,es6规定了一种新的写法来简化匿名函数:去掉function改为=>,结构为()=>{}

// 最原始函数
var arr = [2,3,5,7];
 $(arr).each(function(index,item){
   console.log(item);
 });
// 改造一:函数中的funtion关键字我们可以省略,参数 和 方法体之间用=>
$(arr).each((index,item)=>{console.log(item);})
var fn = function(a, b) { return a + b; } // es6 箭头函数写法,当函数直接被return时,可以省略函数体的括号{} const fn = (a, b) => { a + b }; // {}可以省略
总结:
参数特点:
1)参数只有一个,可以去掉()
2)参数多个,不能去掉
3)参数没有,不能去掉
方法体特点:
1)方法体只有一句,可以省略{}
2)方法体只有一句,如果有return,也可以省略return
3)如果有多句代码,不能省略return
箭头函数没有固定的写法,它是根据当前方法的参数和方法的返回值来的。

注意:

         箭头函数可以替换函数表达式,但是不能替换函数声明;
         箭头函数本身没有this,箭头函数内部的this是定义时所在的对象;
         箭头函数不可以使用arguments对象,该对象在函数体内不存在;
         箭头函数不能作为构造函数,因为没有 prototype 和constructor属性 
// 箭头函数不能作为构造函数:因为没有 prototype 和constructor属性 
let foot = function (name, age){
    this.name = name;
    this.age = age;
}

let foot2 = (name, age)=>{
    this.name = name;
    this.age = age;
}

let obj = new foot('abd', '19');
let obj2 = new foot2('abd', '19'); //报错,foot2 is not a constructor

 六,解构赋值:对象/数组赋值

对象赋值:对象根据属性名一一对应,无序对应
        首先有这么一个对象const props = {
            className: 'tiger-button',
            loading: false,
            clicked: true,
            disabled: 'disabled'
            }
        // es5
        var loading = props.loading;
        var clicked = props.clicked;
        // es6
        const { loading, clicked } = props;
    数组赋值:数组以序列号一一对应,有序对应;允许指定默认值;内部使用严格相等运算符(===// es6
        const arr = [1, 2, 3];
        const [a, b, c] = arr;

        // es5
        var arr = [1, 2, 3];
        var a = arr[0];
        var b = arr[1];
        var c = arr[2];

七,for...of循环遍历

ES6 借鉴 Java、C# 语言,引入了for...of循环,作为遍历所有数据结构的统一的方法。

for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、后文的 Generator 对象,以及字符串。

 for(let codePointAt of 'hicai'){
        console.log(codePointAt);
        }  // h i c a i
        遍历对象用for...in

const arr = ['red', 'green', 'blue'];
for (let i of arr){
console.log(i); //打印出数组所有值
}

八,展开运算符:(提高代码效率)

ES6中用...来表示展开运算符,可以将数组方法或者对象方法进行展开;
        数组:
            const arr1 = [1, 2, 3];
            const arr2 = [...arr1, 10, 20, 30];
            // 这样,arr2 就变成了[1, 2, 3, 10, 20, 30];
        对象:
            const obj1 = {a:1,b:2,c:3}
            const obj2 = {
            ...obj1,  d: 4,  e: 5,  f: 6
        }
        // 结果类似于 const obj2 = Object.assign({}, obj1, {d: 4})

九,class(类)

在js中,每个对象都有原型对象,所有js对象都从原型上继承方法和属性;
ES5中,属性放在构造函数constructor里,方法放在原型prototype上;
ES6中引入类class来代替构造函数constructor;还提供了extends划分super关键字;

十,promise对象:解决异步编程

    特点:a)对象的状态不受外界影响,promise对象代表一个异步操作,有三种状态:pending(进行中)、resolve(成功)、rejected(失败)
        一旦状态改变,就不会改变
        基本用法:
        Promise构造函数的两个参数是resolve和reject;
        Promise实例生成后,可以用then方法分别制定resolve和rejected状态的回调函数;
        Promise的then方法是定义在原型对象Promise.prototype上的,then方法返回的是一个新的Promise实例,不是原来那个Promise实例,因此可以用链式写法;
        方法1:Promise.all()方法用于将多个promise实例包装成一个新的promise实例;
        方法2:Promise.race()方法只要有一个peomise执行完毕就执行

十一,模块化

export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口

import用于在一个模块中加载另一个含有export接口的模块。

十二,Set和Map数据结构:

Set
            a)Set实例成员值唯一存储key值,map实例存储键值对(key-value)
            b)Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。
            操作方法:
                add(value):添加某个值,返回Set结构本身
                delete(value):删除某个值,返回布尔值
                has(value):返回布尔值,表示该值是否为Set的成员
                clear():清除所有成员,没有返回值
            遍历方法:
                keys():返回键名
                values():返回键值   
                entries():返回键值对
                forEach():使用回调遍历每个成员
       Map  
            a)Map的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键;
            b)Map实例的属性和操作方法:
                size属性:返回Map结构的成员总数;
                set(key, value):设置键名key对应的键值为value,然后返回整个Map结构,若key已有值,则更新键值,否则生成该键。
                get(key):读取key对应的键值
                has(key):返回布尔值,表示某个键是否存在当前map对象中。
                delete(key):删除某个键,返回true,删除失败返回false
                clear():其清除所有成员,没有返回值
            c)map的遍历方法:
                keys():返回键名
                values:返回键值
                entries:返回所有成员
                forEach():遍历map的所有成员,map的遍历顺序就是插入顺序

十三,generator拦截器

参考:https://www.cnblogs.com/suihang/p/9961791.html

https://www.cnblogs.com/jolene/p/6067290.html

https://www.cnblogs.com/rocky-fang/p/5755755.html

https://blog.csdn.net/weixin_42412046/article/details/81459294

原文地址:https://www.cnblogs.com/yizhilin/p/7495542.html