ECMAScript6.0基础

2022-05-23 251

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 1.什么是ES6 ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。标准的制定者有计划，以后每年发布一次标准，使用年份作为版本。因为ES6的第一个版本是在2015年发布的，所以又称ECMAScript 2015（简称ES2015）。

2.ES6和JavaScript关系

1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA（欧洲计算机制造商协会European Computer Manufacturers Association），希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版

该标准从一开始就是针对JavaScript语言制定的，但是之所以不叫JavaScript，有两个原因。一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已经被Netscape公司注册为商标。二是想体现这门语言的制定者是ECMA，不是Netscape，这样有利于保证这门语言的开放性和中立性。

因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。日常场合，这两个词是可以互换的

ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。

ECMAScript定义了：

语言语法 – 语法解析规则、关键字、语句、声明、运算符等

类型 – 布尔型、数字、字符串、对象等

原型和继承

内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。

ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似node.js的非浏览器环境

3.基本语法

3.1声明变量

var 声明普通变量
let 定义局部变量
const 定义常量
var a = 1
let a = 1
const a = 1

let 声明局部变量

ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

const 声明常量

const声明一个只读的常量。一旦声明，常量的值就不能改变。

使用const命令声明变量，此变量必须立即初始化，不能留在后面赋值。否则会报错。

const的作用域与let命令相同：只在声明所在的块级作用域内有效

3.2模板字符串

模板字符串用于简化字符串拼接 ES6字符串拼接的符号是``

//ES5 ，拼凑字符串
var str = "<table>" +
            "<tr>" + 
              "<td>标题</td>" + 
            "</tr>" + 
         "</table";
//ES5 , /换行
var str2 = "<table> \
            <tr>  \
                <td>标题</td> \
            </tr> \
            </table>";
//ES6
var str3 = `
    <table>
        <tr>
            <td>
            </td>
        </tr>
    </table>
`;

在模板字符串中可以使用${变量名}获取变量的值

var username = 'jack';
var age = 18;
console.info(`你的姓名是${username} , 你的年龄是${age}`);

3.3对象简写

简化对象的写法同名属性名可以省略 function可以省略

let name = "张三";
let age = 18;
let person = {                      //ES5写法
    name : name,
    age : age,
    getAge : function(){
        return this.age;
    }
}
console.info( JSON.stringify(person));
console.info( person.getAge() );
let person2 = {                     //ES6写法
    name,                              //省略同名的属性值
    age,        
    getAge(){                          //省略 function
        return this.age;
    }
}
console.info( JSON.stringify(person2));
console.info( person2.getAge() );

3.4箭头函数

箭头函数：用于定义匿名函数的一种简洁写法。（与Java中Lambda表达式极其相似）

//匿名函数
let fn = function(a,b){
    return a + b;
}
console.info( fn(5,10) )    //15
//箭头函数基本语法
let fn2 = (a,b) => {
    return a + b;
}
console.info( fn2(5 , 3) )  //8
//省略1：只有一个参数的情况下，小括号可以省略
// 完整写法
let fn3 = (a) => {
    return a * a;
}
console.info( fn3(5) )      //25
// 省略写法
let fn32 = a => {
    return a * a;
}
console.info( fn32(5) )   //25
//省略2：函数体只有一个条，大括号可以省略。如果是return语句，关键字return必须省略
let fn4 = a => a * a;
console.info( fn4(10) )     //100
// 练习
let fn5 = () => console.info("abc");
fn5();          
let fn6 = (a,b,c) => a+b;
console.info( fn6() )       //NaN (Not a number) 
let fn7 = (a,b,c) => a+b;
fn7(3,4,5)

3.5JS中的循环遍历

准备数据

//准备数据
var arr4 = ['x','y','z'];

map函数的使用

//map函数 , 将数组转换一个新数组  
//var 新数组 = 旧数组.map( 处理函数 ); //旧数组中的每一个元素，都将通过“处理函数”进行处理
//实例：将数组 ['a','b','c'] 转换成字符串 'cba'
var m = arr4.map( s => {
    return s.toUpperCase();
}).reverse().join(",");
console.info(m)；

forEach函数的使用

//forEach遍历
arr4.forEach(s => {         //遍历数组
    console.info(s);
});