【ES6】 — ECMAScript6快速入门01

最新推荐文章于 2025-02-20 20:09:53 发布

原创最新推荐文章于 2025-02-20 20:09:53 发布 · 302 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ecmascript6 #ES6

本文详细介绍了ES6作为JavaScript的最新版本所引入的新特性，包括let和const变量声明、增强的字符串操作、解构赋值等功能，并探讨了这些新特性如何提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES6和JS的关系

ES6：
- ECMAScript6
js：
- 组成部分：ECMA DOM BOM

什么是ECMA?

ECMA是标准，JS是实现，换句话来说也有可能有其他xxxScript来实现ECMA

ECMAScript：简写ECMA或者ES

目前版本：
- 低级浏览器：主要支持ES3.1
- 高级浏览器：正在从ES5过渡到ES6
历史：
- 1996 ES1.0 js稳定 Netscape将js提交给ECMA组织，ES正式出现
- 1998 ES2.0 ES2.0正式发布
- 1999 ES3.0 ES3被浏览器广泛支持
- 2007 ES4.0 ES4过于激进，被废除了
- 2008 ES3.1 ES4.0退化为严重缩水版的3.1 Harmony(和谐)
- 2009 ES5.0 ES5.0正式发布，同时公布了JavaScript.next也就是后来6.0
- 2011 ES5.1 ES5.1成为ISO国际标准
- 2013.03 ES6.0 ES6.0定制草案
- 2013.12 ES6.0 ES6.0草案发布
- 2015.06 ES6.0 ES6.0预计发布正式版，同时JavaScript.next指向ES7.0

ES6兼容性

目前为止ES5，ES6支持情况，凑合
09年，NodeJS用的就是chrome内核，在node中可以使用ES5，ES6很多新特性
ES5和ES6已经逐渐沦为后台语言

在浏览器里面如何使用？

需要用到编译工具
babel
traceur —— 由Google出的编译器，把ES6语法编译为ES5
bootstrap —— 引导程序，跟css里面认识的bootstrap不同

在网页上使用：

用法一：
- <script src="traceur.js"></script>
- <script src="bootstrap"></script>
- <script type="module"></script>
用法二：
- 直接在线编译 —— 主要用于测试
- http://bebaljs.io/repl
- http://google.github.io/traceur-compiler/demo/repl.html
用法三：
- 直接在node里面使用
- a)直接用，需要添加’user strict’
- b)node –harmony 1.js

定义let变量

    var a = 12;     //es5
    let a = 12;     //es6

代码块： {}包起来的代码
特点：智能在代码块里面使用
var只有函数作用域

a)let具备块级作用域
b)不允许重复声明

    let a = 12;
    let a = 5;      //错的

总结：其实let才接近其他语言的变量

用处：

ES5封闭空间：

(function(){
    var a = 12;
})();

ES6现在：

{
    let a = 12;
}

i问题：

//使用ES5
window.onload = function(){
    var aBtn = document.getElementsByTagName('input');
    for(var i=0;i<aBtn.length;i++) {
        (function(i){
            aBtn[i].onclick = function(){
                alert(i);
            }
        })(i);
    }
};
//使用ES6
window.onload = function(){
    var aBtn = document.getElementsByTagName('input');
    for(let i=0;i<aBtn.length;i++) {
        aBtn[i].onclick = function(){
            alert(i);
        }
    }
};

定义const变量

特性：一旦赋值，以后再也修改不了了

const a = 12;
a = 15;         //报错

注意：const必须给初始值，不能重复声明；因为以后再也没法赋值了，所以声明的时候一定得有值。
用途：为了防止意外修改变量
- 比如引入库名，组件名

字符串连接

之前
- var a = 'abc' + 变量 + 'ef';
现在
- var a = `abc${变量}\ef`;

解构赋值：

模式匹配：左侧的样子，需要和右侧的一样

var [a, b, c] = [3, 4, 5];
console.info(a, b, c);

json解构赋值和顺序无关

var {a,b,c} = {b:5,a:12,c:101};
console.info(a, b, c);

深层解构赋值

//案例一
var [d,[e,f],g] = [12,[1,2],5];
console.info(d,e,f,g);
//案例二
var [{a,e},[b,c],d] = [{e:'eeee',a:'aaaaaa'},[1,2],5];
console.info(a,b,c,d,e);

对方法返回值进行解构

function getPos() {
    return {left:100,stop:1000};
}
var {left,stop} = getPos();

解构赋值给定默认值

var {time=12,id=0} = {};
console.info(time,id);

用途

//用途：案例一
var json = {
    "statuses": [
        {
            "created_at": "Tue May 31 17:46:55 +0800 2011",
            "id": 11488058246
        }
    ],
    "ad": [
        {
            "id": 3366614911586452,
            "mark": "AB21312XDFJJK"
        }
    ]
};
var {statuses,ad} = json;
console.info(statuses);
//用途：案例二
var arr = [{title:'abc',href:'kkkk',img:'img1'}];
var [{title,href,img}] = arr;
console.info(title, href, img);
//用途：案例三
function move(obj,json,{time=300,dom}={}){
    console.info(obj,json,time,dom);    //测试 {a: 123} 200 body
}
move('测试',{a:123},{time:200,dom:'body'})