ES6(ECMAScript 6 的简称), 是于 2015 年 6 月正式发布的 JavaScript 语言的标准
变量声明 let/const
//var
var a=1;
var a=5;
if(a>4){
var b=10;
}
console.log(b); //10
//let
let a=1;
let a=5; // 报错:dentifier ‘a’ has already been declared
let a=5;
if(a>4){
let b=10;
}
console.log(b); // 报错：b is not defined
//const
const a=1;
a=5; // 报错：Assignment to constant variable.
var 可以重复定义并无块级作用域，let 不能重复定义有块级作用域，const 定义常量
赋值
let list=[1,2,3]
let [a,b,c]=list
console.log(a,b,c) //1 2 3
let dict={name:’jim’,age:21}
let {name,age}=dict
console.log(name,age) //jim 21
let dict={name:’jim’,age:21}
let [name,age]=dict // 报错：dict is not iterable
在解构赋值过程总，必须左右结构相同
箭头函数 (python 中的 lambda)
#普通函数
function fn(arg1,arg2){
return arg1+arg2
}
# 箭头函数
(arg1,arg2)=>arg1+arg2
var fn=(arg1,arg2)=>arg1+arg2 // 方便以后多次调用
箭头函数中当参数只有一个的时候可以省略括号，当无参数时必须写一对小括号，当函数体只有一句时可以省略大括号，且语句默认就是返回值，不需要写 return
默认参数
// 之前
function fn(arg1,arg2){
let x=arg1 || 5;
let y=arg2 || 6;
return x+y
}
console.log(fn) //11
//es6
function fn(arg1=5,arg2=6){
return arg1+arg2
}
console.log(fn) //11
let list=[1,2,3,4,5,6]
function fn(arg1,arg2,…args){
console.log(arg1,arg2,args)
}
fn(…list) //1 2 Array(4) Array(4) 表示为 [3,4,5,6]
这种写法更直观清晰，且介绍内部的逻辑代码，和 python 写法很类似
数组
let list = [1, 2, 3, 4, 5, 6]
//map
let new_list=list.map((arg)=>{// 每个元素将作为参数依此传入
if(arg>4){
return true
}else{
return false
}
})
console.log(new_list) //[false, false, false, false, true, true]
//reduce
let list = [1, 2, 3, 4, 5, 6]
let new_list=list.reduce((sum,arg)=>{// 第一次将前两个参数传入，接下来将结果作为第一个参数，其他 list 元素以此传入
return sum+arg
})
console.log(new_list) //21
//filter
let new_list=list.filter((arg)=>{
if(arg>4){
return true // 根据返回的布尔值判断是否放入新 list
}
})
console.log(new_list) //[5,6]
//forEach
let new_list=list.map((arg)=>{// 每个元素将作为参数依此传入
return arg
})
console.log(new_list) //[1, 2, 3, 4, 5]
这和 python 中的 map,reduce，filter 高阶函数作用几乎相同，只不过在 js 中只作为了数组的方法，而 python 中是没有 forEach 方法的，原因可能是 map 可以达到作用吧，在我看来是这个样子，如有不同，请告知本宝宝，哈哈。- 对象
let name=’jim’
let age=21
let obj={
name:name,
age:age,
show:function(){
console.log(name,age)
}
}
obj.show() //jim 21
console.log(obj) //{name: “jim”, age: 21, show: ƒ}
// 以上可以简化为
let obj={
name,
age,
show(){
console.log(name,age)
}
}
同名的 key 和 value 我们可以省略成只写一个，对于函数我们可以省略 function
字符串
let str=”http://www.jim.com/index.html” // 不存在，瞎写的
//startsWith 判断是否以某字符串开始
if (str.startsWith(‘http://’)){
console.log(“ 这是一个 http 的地址 ”) // 这是一个 http 的地址
}
//endsWith 判断是否以某后缀结束
if (str.endsWith(‘.html’)){
console.log(“ 这是一个 html 文件 ”) // 这是一个 html 文件
}
很多语言的字符串都有这种判断方法，现在的 javascript 也在不断的完善，666
面向对象
// 以前
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.show=function(){ // 当然也可以在 Person 函数内部定义, 若使用箭头函数，则函数将失去效果，this 指向了 window 对象 this.show=function(){函数体}
console.log(this.name,this.age)
}
let p=new Person(‘jim’,’21’);
p.show() //jim 21
function Chil(name,age,role){
Person.call(this)
this.name=name
this.age=age // 可以直接将参数写入 call 函数内
this.role=role
}
Chil.prototype.show=Person.prototype.show 不写的话用不到 show 函数，当然这只是一种方式
let c=new Chil(‘han’,’23’,’student’)
c.show()
//es6
class Person{
constructor(name,age){
this.name=name
this.age=age
}
show(){
console.log(this.name,this.age)
}
}
let p=new Person(‘jim’,23)
p.show() //jim 23
class Chil extends Person{
constructor(name,age,role){
super(name,age)
this.role=role
}
}
let c=new Chil(‘han’,’23’,’student’)
c.show() han 23
使用 class 来定义类，constructor 定义构造函数 super 实现对基类构造的调用，还有 extends 的继承，都借鉴了 java 等语言，使 js 语法变得更易读，易编写。