ES6 模板字符串: ~ ${变量名}~
<div id="app"></div>
<script>
/* 找到对应id */
let item = document.getElementById('app');
/* 声明变量 */
let username1 = 'ann';
let username2 = 'ben';
/* 替换内容 */
item.innerHTML = `
<h1> hello ${username1}</h1>
<h2> hello ${username2}</h2>
`
</script>
模板字符串
ES6 数据结构与赋值: let [a,b] = [b,a]
<div id="app"></div>
<script>
/* 找到对应id */
let item = document.getElementById('app');
/* 声明变量 */
let username1 = 'ann';
let username2 = 'ben';
/* 结构与赋值 */
[username1,username2]=[username2,username1]
/* 替换内容 */
item.innerHTML = `
<h1> hello ${username1}</h1>
<h2> hello ${username2}</h2>
`
</script>
结构与赋值
ES6 函数的扩展/箭头函数--
单个参数 : let foo = v => v+1;
多个参数需要{return xxxxx}:
let bar = (x,y)=>{
return x+y;
};
/* 默认值参数 */
function func(x, y = 10) {
let num = y;
return num
} ret1 = func(1, 2);
console.log(ret1);
ret2 = func(1);
console.log(ret2);
/* 如果传入参数为0的话,显示的还是默认值*/
ret3 = func(1, 0);
console.log(ret3); /* 箭头函数 let 声明变量 = 参数=>返回值 */ // 1个参数
let foo = v => v+1;
ret4 = foo("箭头函数");
console.log(ret4); // 0个或者多个参数
let bar = (x,y)=>{
return x+y;
};
ret5 = bar("牛","力");
console.log(ret5); function foo() {
console.log(this);
}
foo(); let bar = () => console.log(this); let obj = {
foo:foo,
bar:bar,
}; obj.bar();
obj.foo();
函数的扩展,箭头函数
ES6 类,类的继承, constructor
/* 类的格式 */
class Person{
constructor(name,age){
this.name = name;
this.age = age;
} showinfo(){
console.log(this.name,this.age);
}
} let ss = new Person("ben",1111);
ss.showinfo(); // 类的继承
class Dad{
constructor(name,age,account=1000){
this.name=name;
this.age=age;
this.account=account;
}
showinfo(){
console.log(this.name,"今年",this.age,"岁了","有",this.account,"亩地!");
}
} class Son extends Dad{
constructor(name,age){
super();/* 必须!!!*/
this.name=name;
this.age=age;
}
} let xiaohaizi = new Son('张三',12);
xiaohaizi.showinfo()
类,类的继承
ES6 对象的单体模式
<script>
let obj = {
name: "张三",
foo(){
console.log(this.name);
}
};
obj.foo();
</script>
对象的单体模式