• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Recommended Posts

自学: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和ES6是什么关系?

2011年,ECMAScript 5.1版本发布后,6.0版本的制定工作开始。所以ES6这个词的原意是指JavaScript语言的下一个版本。

2015年6月发布的第一个版本ES6,正式命名为《ECMAScript 2015 标准》(简称ES2015)。

2016年6月,略有修改的版本《ECMAScript 2016 标准》(简称ES2016)如期发布。这个版本可以算是ES6.1版本,因为两者差别很小,基本上是同一个标准。按照计划,ES2017标准将于2017年6月发布。

因此,ES6既是一个历史术语,也是一个通用术语,意指5.1版本之后的JavaScript下一代标准,涵盖ES2015、ES2016、ES2017等。而ES2015是正式名称,特指当年发布的正式版本的语言标准。本书中提到ES6的地方,一般是指ES2015标准,但有时也指“下一代JavaScript语言”。

00-1010ES标准不包含DOM和BOM的定义,只涵盖基本数据类型、关键字、语句、运算符、内置对象、内置函数等常用语法。

这部分只学习前端开发中ES6最起码的必要知识,便于后期项目开发中理解代码。

00-1010创建let.html//变量声明的变量没有局部范围。

let声明的变量有局部作用域。

{

var a=0

设b=1

}

console.log(a) //0

console . log(b)//reference error : b是n

ot defined
// 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 declared
2、const声明常量(只读变量)
创建 const.html
// 1、声明之后不允许改变    
const PI = "3.1415926"
PI = 3  // TypeError: Assignment to constant variable.
// 2、一但声明必须初始化,否则会报错
const MY_AGE  // SyntaxError: Missing initializer in const declaration

3、解构赋值

创建 解构赋值.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)
//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、模板字符串

创建 模板字符串.html
模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式。
// 1、多行字符串
let string1 =  `Hey,
can you stop angry now?`
console.log(string1)
// Hey,
// can you stop angry now?
// 2、字符串插入变量和表达式。变量名写在 ${} 中,${} 中可以放入 JavaScript 表达式。
let name = "Mike"
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
// My Name is Mike,I am 28 years old next year.
// 3、字符串中调用函数
function f(){
    return "have fun!"
}
let string2 = `Game start,${f()}`
console.log(string2);  // Game start,have fun!

5、声明对象简写

创建 声明对象简写.html
const age = 12
const name = "Amy"
// 传统
const person1 = {age: age, name: name}
console.log(person1)
// ES6
const person2 = {age, name}
console.log(person2) //{age: 12, name: "Amy"}

6、定义方法简写

创建 定义方法简写.html
// 传统
const person1 = {
    sayHi:function(){
        console.log("Hi")
    }
}
person1.sayHi();//"Hi"
// ES6
const person2 = {
    sayHi(){
        console.log("Hi")
    }
}
person2.sayHi()  //"Hi"

7、对象拓展运算符

创建 对象拓展运算符.html拓展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象。
// 1、拷贝对象
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }
console.log(someone)  //{name: "Amy", age: 15}
// 2、合并对象
let age = {age: 15}
let name = {name: "Amy"}
let person2 = {...age, ...name}
console.log(person2)  //{age: 15, name: "Amy"}

8、箭头函数

创建 箭头函数.html箭头函数提供了一种更加简洁的函数书写方式。基本语法是:
参数 => 函数体
// 传统
var f1 = function(a){
    return a
}
console.log(f1(1))
// ES6
var f2 = a => a
console.log(f2(1))
// 当箭头函数没有参数或者有多个参数,要用 () 括起来。
// 当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,
// 当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。
var f3 = (a,b) => {
    let result = a+b
    return result
}
console.log(f3(6,2))  // 8
// 前面代码相当于:
var f4 = (a,b) => a+b
箭头函数多用于匿名函数的定义

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now