🍅程式員小王的博客：程式員小王的博客
🍅 歡迎點贊 👍 收藏 ?留言 📝
🍅 如有編輯錯誤聯系作者，如果有比較好的文章歡迎分享給我，我會取其精華去其糟粕
🍅java自學的學習路線：java自學的學習路線
一、前提：
- ECMAScript6新語法
ECMAScript版本的新語法，不是所有瀏覽器都兼容，有些瀏覽器兼容區域
二、ECMAScript的新語法
1、變數定義
5版本：var 變數名：變數使用范圍不明確
<script>
for (var i = 0; i < 10; i++) {
console.log("in:"+i)
}
console.log("out:"+i);
</script>
6版本： let const:宣告變數
- let 變數名 用于宣告區域變數 作用范圍：從定義行開始到所在代碼塊結束
<script>
for (let i = 0; i < 10; i++) {
console.log("in:"+i)
}
console.log("out:"+i);
</script>
- const修飾的值不可變（相當于java中的final）
- const修飾的物件地址不可以變，但是屬性可以變，可以修改屬性
const student={id:1,name:"王恒杰"}
console.log(student);
//const修飾的物件地址不可以變，但是屬性可以變，可以修改屬性
student.id=2;
console.log(student)
//增加屬性age
student.age=18;
console.log(student)
2、箭頭函式
- 使用場景：匿名函式作為函式的引數
- 語法：()=>{}等價于
function(){}簡化了function - 5版本：函式 function xx(){}
- 6版本：箭頭函式
//箭頭函式
function test(func) {
func(1);
}
//5版本：函式 function xx(){}
test(function (i) {
alert(i);
})
//6版本：箭頭函式 （）=>{函式體}
test((i)=>{
alert(i);
})
注意：
(1)函式只有一個引數時，（）可以省略不寫，引數是多個或者沒有引數需要加上小括號
(2)函式體中只有一行代碼，{}也可以省略
(3)箭頭函式沒有自己的this,如果在箭頭函式中的this,代表當前vue物件，不代表當前函式
3、模板字串 ``
在定義變數時 變數中包含html標簽可以使用
// 模板字串
let html="<button @click='test1("+'name'+")'>點我</button>"
+"<button @click='test1("+'name'+")'>點我</button>"
+"<button @click='test1("+'name'+")'>點我</button>"
+"<button @click='test1("+'name'+")'>點我</button>"
console.log(html);
//模板字串
let html1=`<button @click='test1("+name+")'>點我</button>
<button @click='test1("+name+")'>點我</button>
<button @click='test1("+name+")'>點我</button>
<button @click='test1("+name+")'>點我</button>`;
console.log(html1)
4、創建物件
// 定義物件
let id=1;
let name="王恒杰";
let age=18;
//5版本封裝物件
let student={id:id,name:name,age:age};
console.log(student);
//6版本封裝物件
var student2={id,name,age};
console.log(student2)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/387926.html
標籤：其他
上一篇：html實作個人自我介紹(精)