铜仁建设厅官方网站,丰顺网站建设,绵阳做绵阳做网站网站,苏州做网站优化的公司自学参考#xff1a;http://es6.ruanyifeng.com/
一、ECMAScript 6 简介
ECMAScript 6.0#xff08;以下简称 ES6#xff09;是 JavaScript 语言的下一代标准#xff0c;已经在 2015 年 6 月正式发布了。它的目标#xff0c;是使得 JavaScript 语言可以用来编写复杂的大…自学参考http://es6.ruanyifeng.com/
一、ECMAScript 6 简介
ECMAScript 6.0以下简称 ES6是 JavaScript 语言的下一代标准已经在 2015 年 6 月正式发布了。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序成为企业级开发语言。
1、ECMAScript 和 JavaScript 的关系
一个常见的问题是ECMAScript 和 JavaScript 到底是什么关系
要讲清楚这个问题需要回顾历史。1996 年 11 月JavaScript 的创造者 Netscape 公司决定将 JavaScript 提交给标准化组织 ECMA希望这种语言能够成为国际标准。次年ECMA 发布 262 号标准文件ECMA-262的第一版规定了浏览器脚本语言的标准并将这种语言称为 ECMAScript这个版本就是 1.0 版。
因此ECMAScript 和 JavaScript 的关系是前者是后者的规格后者是前者的一种实现另外的 ECMAScript 方言还有 Jscript 和 ActionScript
2、ES6 与 ECMAScript 2015 的关系
ECMAScript 2015简称 ES2015这个词也是经常可以看到的。它与 ES6 是什么关系呢
2011 年ECMAScript 5.1 版发布后就开始制定 6.0 版了。因此ES6 这个词的原意就是指 JavaScript 语言的下一个版本。
ES6 的第一个版本在 2015 年 6 月发布正式名称是《ECMAScript 2015 标准》简称 ES2015。
2016 年 6 月小幅修订的《ECMAScript 2016 标准》简称 ES2016如期发布这个版本可以看作是 ES6.1 版因为两者的差异非常小基本上是同一个标准。根据计划2017 年 6 月发布 ES2017 标准。
因此ES6 既是一个历史名词也是一个泛指含义是 5.1 版以后的 JavaScript 的下一代标准涵盖了 ES2015、ES2016、ES2017 等等而 ES2015 则是正式名称特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方一般是指 ES2015 标准但有时也是泛指“下一代 JavaScript 语言”。
二、基本语法
ES标准中不包含 DOM 和 BOM的定义只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。
本部分只学习前端开发中ES6的最少必要知识方便后面项目开发中对代码的理解。
1、let声明变量
创建 let1.html
// var 声明的变量没有局部作用域
// let 声明的变量 有局部作用域
{var a 1;let b 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined创建 let2.html
// var 可以声明多次
// let 只能声明一次
var m 1
var m 2
let n 3
let n 4
console.log(m) // 2
console.log(n) // Identifier n has already been declared2、const声明常量只读变量
创建 const.html
// 1、声明之后不允许改变
const PI 3.14
PI 3 // TypeError: Assignment to constant variable.// 2、一旦声明必须初始化否则会报错
const AGE // SyntaxError: Missing initializer in const declaration3、解构赋值
创建 jgfz1.html
解构赋值是对赋值运算符的扩展。
它是一种针对数组或者对象进行模式匹配然后对其中的变量进行赋值。
在代码书写上简洁且易读语义更加清晰明了也方便了复杂对象中数据字段的获取。
//1、数组解构
// 传统
let a 1, b 2, c 3
console.log(a, b, c)
// ES6
let [x, y, z] [1, 2, 3]
console.log(x, y, z)创建 jgfz2.html
//2、对象解构
let user {name: Helen, age: 18}
// 传统 从对象里面获取值
let name1 user.name
let age1 user.age
console.log(name1, age1)
// ES6
let { name, age } user//注意结构的变量必须是user中的属性
console.log(name, age)4、模板字符串
创建 template.html
模板字符串相当于加强版的字符串用反引号 ,除了作为普通字符串还可以用来定义多行字符串还可以在字符串中加入变量和表达式。
// 1、多行字符串
let string1 你好,
请问你是刘洪涛吗
console.log(string1)
// 你好,
// 请问你是刘洪涛吗// 2、字符串插入变量和表达式。变量名写在 ${} 中${} 中可以放入 JavaScript 表达式。
let name 刘洪涛
let age 20
let info 我叫 ${name},我明年 ${age1}岁.
console.log(info)
// My Name is Mike,I am 28 years old next year.// 3、字符串中调用函数
function f(){return 调用函数!
}
let string2 你好,${f()}
console.log(string2); // 你好,调用函数!5、声明对象简写
创建 object.html
let age 10
let name 刘洪涛
// 传统
let person1 {age: age, name: name}
console.log(person1) //{age: 10, name: 刘洪涛}
// ES6
let person2 {age, name}
console.log(person2) //{age: 10, name: 刘洪涛}6、定义方法简写
创建 method.html
// 传统
const person1 {sayHi:function(){console.log(Hi)}
}
person1.sayHi();//Hi// ES6
const person2 {sayHi(){console.log(Hi)}
}
person2.sayHi() //Hi7、对象拓展运算符
创建 objectExtends.html
拓展运算符…用于取出参数对象所有可遍历属性然后拷贝到当前对象。
// 1、拷贝对象
let person1 {name: 刘洪涛, age: 20}
let someone { ...person1 }
console.log(someone) //{name: 刘洪涛, age: 20}// 2、合并对象
let age {age: 18}
let name {name: Hongtao Liu}
let person2 {...age, ...name}
console.log(person2) //{age: 18, name: Hongtao Liu}8、箭头函数
创建 arrow.html
箭头函数提供了一种更加简洁的函数书写方式。箭头函数多用于匿名函数的定义。
基本语法是(参数1,参数2) {函数体}
当箭头函数没有参数或者有多个参数要用 () 括起来。
当箭头函数函数体有多行语句用 {} 包裹起来表示代码块。
当只有一行语句并且需要返回结果时可以省略 {} , 结果会自动返回。 //传统var f1 function(a){let b a1return b}console.log(f1(2))//ES6 (参数1,参数2) {函数体}var f2 (a) {let b a1return b}console.log(f2(2))//ES6 当箭头函数没有参数或者有多个参数要用 () 括起来。var f3 (a,b) {let c abreturn c}console.log(f3(1,3))var f4 () {return 没有参数}console.log(f4())var f5 a {let b a1return b}console.log(f5(2))// 当箭头函数函数体有多行语句用 {} 包裹起来表示代码块。// 当只有一行语句并且需要返回结果时可以省略 {} , 结果会自动返回。var f6 () 没有参数console.log(f6())
