ECMAScript简介及es6新增语法

前言
以前和大家分享的都是JavaScript的基础,今天就和大家分享的是JavaScript新增的语法ECMAScript,简称es6。

ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现。(前者是后者的规格,后者是前者的实现。但通常两者是可互换的。)

let关键字

  1. let 定义的变量,如果是定义在 { } 中,只能在 { } 中被执行被调用
          在 { } 之外,是不能被调用执行的
          { } 包括 if 、switch、for、forEach、for...in、while、function
    
    es6新增了let关键词,用来声明变量。let声明一个块级作用域的变量,而var声明一个函数作用域的变量。简单来说,let声明的变量只作用在它所在的花括号内。
    例子如下:首先用var声明的 i 变量,我们可以看到,for循环结束以后,我们仍然可以获取变量i的值。
        function fun1() {
            var sum = 0;
            for (var i = 0; i < 100; i++) {
                sum += i;
            }
            console.log(i) //输出为100
        }
        fun1();

下面用let,声明一个块级作用域的变量。一对花括号的内部范围即为一个块级作用域。 i的值为undefined,我们获取不到for循环内部的i的值。let有效!

		function fun2() {
            var sum = 0;
            for (let i = 0; i < 100; i++) {
                sum += i;
            }
            console.log(i); //输出为Uncaught ReferenceError: i is not defined...
	   	}
	 	fun2();
  1. let 定义的变量,不会进行预解析
    
// var 的情况
console.log(fun1); // 输出undefined
var fun1 = 6;
 
// let 的情况
console.log(fun2); // 报错Uncaught ReferenceError...
let fun2= 6;
  1. 不允许重复声明

    let不允许在相同作用域内,重复声明同一个变量,一个变量名称只能定义一次。
    
  2. let 在不同 { } 中,是不同作用域中定义let 变量。此时,变量的名称与 其他 { } 中的变量名称,或者{ }之外的变量名称,是可以重复 
    

2.const关键字

在JavaScript中往往管const定义的变量,称为常量

(1).const定义的变量,一旦赋值,不能改变。

例子: 对const定义的变量,重复赋值,会报错

        const str = 100;
        str = 200;// Uncaught TypeError: Assignment to constant variable.

(2).定义变量的名称,不能重复,否则会报错

 		const str = 100;
        const str = '';//Uncaught SyntaxError: Identifier 'strstr' has already been declared

(3). const定义在{ }中,不能在{ }外调用

        if (true) {
            const sss = 'sss';
            console.log(sss);//sss
        }
        console.log(sss);//Uncaught ReferenceError: sss is not defined...

(4). const中存储的是引用数据类型的地址,只要地址不改变,可以改变数组,对象中的单元存储的数据

	对于数组:给数组中第1个单元,修改存储的数据
	const arr 中存储的数组的地址是不改变的,可以执行的
        const arr = [1, 2, 3, 4, 5, 6];
        arr[0] = '北京';
        console.log(arr); //["北京", 2, 3, 4, 5, 6]
	对于对象;修改对象中,单元存储的数据,
	不是修改 obj中存储的内存地址,是可以执行的
        const obj = {
            name: '张三'
        };
        obj.name = '李四';
        console.log(obj);//{name: "李四"}

对let和const的小总结:

  	let    多用于定义 基本数据类型 以及 循环中
    const  多用于定义 引用数据类型

3.箭头函数

所谓的箭头函数,是函数的另一种语法形式。
    const fun = function(){}     普通函数
    const fun = ()=>{}           箭头函数
    将匿名函数的部分,从 function(){} 写成 ()=>{} 的形式
        普通函数
        oDiv.addEventListener('click' , function(){
            console.log('我是div标签')
        })

        箭头函数
        oDiv.addEventListener('click' , ()=>{
            console.log('我是div标签');
        })
        
        普通函数(只有一个参数)
        oDiv.addEventListener('click' , function(e){
            console.log(e);
        })
        
        箭头函数(只有一个参数,可以不写(),直接定义一个参数)
        oDiv.addEventListener('click' , e=>{
            console.log(e);
        })

		如果执行体中只有一行代码,可以不写{}
        const fun = e=>{console.log(e)}    普通箭头函数
        const fun = e=> console.log(e)     不写{}箭头函数

4.箭头函数中的this指向

普通函数的this指向
声明式,赋值式/匿名函数,对象中函数,绑定的事件处理函数
this都是指向的调用函数时,之前定义的内容

    1,声明式 --- 指向的是window
    function fun1(){
        console.log(this);
    }
    fun1();

    2,匿名函数/赋值式 --- 指向的是window
    const fun2 = function(){
        console.log(this);
    }
    fun2();

    3,定义在对象中的函数 --- 指向的是对象
    const obj = { 
        fun3 : function(){
            console.log(this);
        }
    }
    obj.fun3();
    
	4,绑定的事件处理函数 --- 指向的是绑定事件处理函数的标签
	<div>1234</div>
    const oDiv = document.querySelector('div');
    oDiv.addEventListener('click', function() {
        console.log(this);//<div>1234</div>
    })

2,箭头函数的this指向

  如果父级程序有this指向(父级程序也是函数),this指向的就是父级程序的this指向
  如果父级程序没有this指向(数组,对象....),this指向的是window
//this指向window
oDiv.addEventListener('click', () => {
            console.log(this);
        })
 箭头函数的this,是父级程序,forEach()的this,是window
     <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    const oLis = document.querySelectorAll('li');
     oLis.forEach(function(item, key) {
         console.log(this); // 输出的是forEach的函数的this指向
         item.addEventListener('click', () => {
             console.log(key, this);//key是li的索引下标   Window  
         })
     })

箭头函数有几个使用注意点。

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

(2)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

ok,这可累死我了,希望可以帮助你呀!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值