ES6新增语法总结（一）

最新推荐文章于 2023-11-30 12:25:17 发布

m0_47900991

最新推荐文章于 2023-11-30 12:25:17 发布

阅读量265

点赞数

文章标签： javascript js es6

本文链接：https://blog.csdn.net/m0_47900991/article/details/109107529

版权

1、简介

  ECMAScript 和 JavaScript
  ECMA是标准，JS是实现； 类似于HTML5是标准，IE10，Chrome是实现。
  ECMAScript简称ECMA 或 ES，目前比较流行的是ES6（2015）

2、ES6兼容性（查表）

2.1 兼容情况

   从https://www.caniuse.com上面可以查询到，ES的兼容性概览。
   ES6---IE10+ 、Chrome、FireFox、移动端、node.js

2.2 解决编译、转换

   在线转换、提前编译（推荐）
   Babel == browser.js
   在线转换：<script src="browser.js" charset="utf-8"></script>
            <sccript type="text/babel"></sccript>

3、ES6新特性

+ 变量
+ 函数
+ 数组
+ 字符串
+ 面向对象
+ promise
+ generator
+ 模块化

4、变量

var:     可以重复声明； 无法限制修改； 没有块级作用域
let:     不能重复声明；有块级作用域； 变量--可以修改
const:   不能重复声明；有块级作用域； 常量--不可修改

	<body>
     <input type="button" value="按钮1">
     <input type="button" value="按钮2">
     <input type="button" value="按钮3">
     <script>
         window.onload=function(){
   
            var btn = document.getElementsByTagName('input');
            for(var i=0;i<btn.length;i++){
   
                btn[i].onclick=function(){
   
                    alert(i);
                }
            }
         }
     </script>
    </body>

原始问题如上代码： var定义后，不管按哪个按钮，都弹出 i=3 的警示框，因为var没有作用域，
只认 for 这个函数创建的作用 域，当你点击某个按钮时，函数一直在循环，最终 i值始终为 3
原始解决方法如下：把点击事件用一个函数包起来，先存好 I 值人为的给他创建一个作用域

     <script>
         window.onload=function(){
   
            var btn = document.getElementsByTagName('input');
            for(var i=0;i<btn.length;i++){
   
                (function(i){
   
                    btn[i].onclick=function(){
   
                        alert(i);
                    }
                })(i)
            }
         }
     </script>

ES6解决方法：

     <script>
            window.onload=function(){
   
            var btn = document.getElementsByTagName('input');
            for(let i=0;i<btn.length;i++){
   
                btn[i].onclick=function(){
   
                    alert(i);
                }
            }
         }
     </script>

5、函数

5.1 箭头函数

  普通函数：
	Functin 函数名（参数）{
		函数体；
	}
  箭头函数：
      （参数）=>{
		函数体；
	}
	
  简写：
      如果只有一个参数，（）可以省；
      如果只有一个return，{ }可以省；

 例：let show = function( a, b ){
   
	    alert(a + b);
	 }
	简写为：
	 let show  = (a, b ) => {
   
	    alert(a + b);
	 }
	 show(4, 9);

5.2 参数

  <script>
     function show(a, b, ...args){
   
        alert(a);
        alert(b);
        alert(args);
    }
     show(3,5,89,3,45,2);
     </script>

5.2.1 参数扩展：

   1、收集剩余参数： args：89,3,45,2  （…args必须是最后一个）
   2、展开数组：展开后的效果，相当于直接把数组的内容写在这一样。

 <script>
     let arr=[4,5,6];  
     show(...arr);    相当于show（4,5,6）;
     function show(a,b,c){
   
         alert(a);
         alert(b);
         alert(c);
      }<

最低0.47元/天解锁文章

m0_47900991

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ES6新增语法总结（一）

1、简介 ECMAScript 和 JavaScript ECMA是标准，JS是实现；类似于HTML5是标准，IE10，Chrome是实现。 ECMAScript简称ECMA 或 ES，目前比较流行的是ES6（2015）2、ES6兼容性（查表）2.1 兼容情况从https://www.caniuse.com上面可以查询到，ES的兼容性概览。 ES6---IE10+ 、Chrome、FireFox、移动端、node.js2.2 解决编译、转换在线转换、提前编译（推
复制链接

扫一扫