ES6的总结一

ECMAScript 6.0(2015年)

es6核心知识

1. 变量上的变化 let/const
   babel可以编译成var的形式
2. 不允许重复定义变量

var num=0;   var num=20; console.log(num);//var可以重复定义
let num=0;  let num=20;    console.log(num);//此处报错

3. 不存在变量提升，

 console.log(b); // 变量声明提升
        var b = 20;

 <input type="button" value="按我" />
    <script>
        /*
          es6类没有变量提升 所以必须先定义类 后实例化对象
        */
        var _this;
        class Student {
            constructor(sname) {
                _this = this;
                this.sname = sname;
                //this.study();
                this.btn = document.querySelector('input');
                this.btn.onclick = this.study.bind(this);
            }
            study() {
                console.log(this.sname + 'work hard');
            }
        }
        let s1 = new Student('jack');
        s1.study();
        console.log(_this === s1);
    </script>

4. 支持块级作用域

if(10>5) {
            let c = 20; // 只能在当前块级作用域下有效
            console.log(c);
        }
        //console.log(c); // c is not defined 

if(true) {
            var c = 20; // 不支持块级作用域
        }
        console.log(c);

5. const用于定义常量

const PI=3.141592653 
PI=2;不能修改
const PI;必须初始化
const obj={a:10,b:20};
obj.a=12;
console.log(obj);//可以修改不可以重新赋值

闭包

<script>
    /* 全局作用域 局部作用域
    var num = 10;
    function f() {
        var num2 = 20; // 函数内定义的变量 局部变量
        console.log(num);
        console.log(num2);    
    }
    f();
    console.log(num2);
    */

  // 闭包 有权利访问另外一个函数作用域中的变量的函数
    // fun闭包函数 fun2闭包
    function fun() {
        var a = 10;
        function fun2() {
            console.log(a);
        }
        //fun2();
        return fun2;
    }
    var f = fun();
    f(); // 闭包可以延伸变量作用范围
    
</script>

{
    var i=10; //解决用闭包，自执行
}

console.log(i);

{
    let i=10;
}

console.log(i); 报错

//结果为3
for(var i=0;i<3;i++){
    setTimeout(function(){
        console.log(i);
    });
}
闭包
for(var i=0;i<3;i++){
    (function(i){
        setTimeout(function(){
            console.log(i);
        });
    })(i);
    
}

var arr=[];
for(var i=0;i<2;i++){
    arr[i]=function(){
        console.log(i);
    }
}
arr[0]();
arr[1]();//2

单击li 打印每个li的序号：

<ul class="nav">
        <li>北京</li>
        <li>上海</li>
        <li>深圳</li>
    </ul>

1 ）思路一 动态添加属性

<script>
       var lis = document.querySelector('ul.nav').querySelectorAll('li');
        //思路一 动态添加属性
     for(var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onclick = function() {
                console.log(this.index);
            }
        } 

2）思路二闭包

 // 思路二闭包
        for(var i = 0; i < lis.length; i++) {
            (function(i) {
                lis[i].onclick = function() {
                   console.log(i);
                } 
            })(i);
        } 

3） es6 let

 for(let i = 0; i < lis.length; i++) {   
        lis[i].onclick = function() {
            console.log(i);
        } 
    } 
     3秒后 打印每个城市
        for(var i = 0; i < lis.length; i++) {
            // 闭包
            (function(i) {
                setTimeout(function() {
                    console.log(lis[i].innerHTML);
                },3000);
            })(i);  
        }

// 滴滴打车 3公里以内 14 每增加1公里收5元
        // 堵车 在原来收费上多收5元
        var c = (function() {
            var base = 14;
            var sum = 0;
            return {
                normal: function(n) {
                    if (n <= 3) {
                        sum = base;
                    } else {
                        sum = base + (n - 3) * 5;
                    }
                    return sum;
                },
                yj: function(flag) {
                    return flag ? sum + 5 : sum
                }
            }
        })();
        c.normal(5);
        console.log(c.yj(false));

解构赋值

let [a, b, c] = [10, 20, 30];
console.log(a, b, c);

let [{ name }, { hobby }] = [{ id: 1, name: 'zs', age: 23 }, { id: 2, name: 'lisi', hobby: ['sleeping', 'eating'] }];
console.log(name);
console.log(hobby);

解构重命名

let { name: userName } = { name: 'along', age: 33 };
console.log(userName);

省略解构

let [, , c] = [10, 20, 30];
console.log(c);

默认解构
age没有赋值的话，默认为8

let { name, age = 8 } = { name: 'zs', age: 12 }
console.log(name, age);

默认赋值解构更清晰

function ajax(options) {
    var method = options.method || 'get';
}

function ajax({ method = 'get', data }) {
    var method = options.method || 'get';
}

ajax({
    method: 'post',
    data: {
        "a": 10,
        "b": 20
    }
})

es6字符串的变化

let name = 'n1';
let age = 30;
let str = 'My name is ${name}, I am ${age}';
str = str.replace(/\$\{([^}]*)\}/g, function() {
    console.log(arguments);
    return eval(arguments[1]); // eval('name')
});
console.log(str);

// 模版字符串换行
let name = 'n1';
let age = 30;
let userInfo = [name, age];
let lis = userInfo.map(function(item) {
    return `<li>${item}</li>`;
})
let ul = `
  <ul>
     ${lis.join('')}
  </ul>`;
console.log(ul);

// 模版标签
let name = 'n1';
let age = 30;

function tag(strs) {
    console.log(strs);
    console.log(arguments);
    let values = Array.prototype.slice.call(arguments, 1);
    console.log(values);
    let res = '';
    for (let key in values) {
        res += strs[key] + values[key].toString().toUpperCase();
    }
    res += strs[strs.length - 1];
    return res;
}
let str = tag `My name is ${name}, I am ${age}`;
console.log(str);

// 新增常用api
console.log('http://www.baidu.com'.startsWith('http'));
console.log('1.jpg'.endsWith('png'));
console.log('welcometobeijing'.includes('to'));
console.log('hi'.repeat(10));
console.log('0'.padEnd(8, 5));

严格模式

 'use strict';
        // if(true) {
        //     function fun() {
        //         console.log(123);
        //     }
        // }
        // fun()
        function fun() {
            function fun2() {
                
            }
        }
        /*
          正常模式
          严格模式 在严格的条件下执行js代码 ie10以上
        */
        /*
        function fn() {
            'use strict';
            num = 10; 
        }
        fn();
        console.log(num);
        */
        /*
        var num = 20;
        delete num; // 删除已经声明的变量
        console.log(num);
        */
        // Cannot delete unqualified property 'num' in strict mode.
         
        //  function fn() {
        //      console.log(this);
        //  }
        //  fn(1,2);
        //  function Student(name) {
        //      this.name = name;
        //  }
         //Student('zs');
        //  setInterval(function(){
        //      console.log(this); 
        //  }, 1000);
        function fn(num1,num2) {
            console.log(num1+num2);  
        }
        fn(2,3);
        /*
          严格模式一些变化
          1 严格模式禁止变量没有声明就赋值 变量必须先定义后赋值
          2 禁止删除已经声明的变量
          3 严格模式下 全局作用域中函数this是undefined
            构造函数不加new this会报错
          4 严格模式下 参数名不能重复 
          5 不允许在非函数代码块中定义函数 
        */
    </script>

高阶函数

 <script>
        // 高阶函数 函数的参数是函数或者返回值是函数
        // animate(obj,500,function(){})
        function fn() {
            return function() {
                console.log(123);
            }
        }
        // var newFn = fn();
        // newFn();

        fn()();
    </script>