JS：ES6，const，箭頭函數(shù)，解構(gòu)，...操作符Spread，Rest，for...of循環(huán)【詩(shī)書畫唱】
查找關(guān)鍵詞：
學(xué)習(xí)記錄
ES6語(yǔ)法完成：
1、給頁(yè)面中的所有按鈕綁定點(diǎn)擊事件，當(dāng)點(diǎn)擊這些按鈕時(shí)彈出“這個(gè)頁(yè)面的第幾個(gè)按鈕”。
2、分別定義無(wú)參無(wú)返回，有參無(wú)返回，無(wú)參有返回和有參有返回的箭頭函數(shù)，并且調(diào)用它。
3、定義三個(gè)變量snum,name,classroom三個(gè)變量，通過(guò)解構(gòu)將這三個(gè)變量合并成一個(gè)對(duì)象。
4、var dog = {n:"旺財(cái)",weight:2,color:"黑色"};通過(guò)解構(gòu)取出旺財(cái)?shù)乃袑傩灾怠?/p>
5、定義一個(gè)學(xué)生對(duì)象，包含一個(gè)eat方法，通過(guò)解構(gòu)取出這個(gè)方法并調(diào)用它。
6、定義一個(gè)沒(méi)有參數(shù)個(gè)數(shù)限制的函數(shù)，打印出輸入的參數(shù)個(gè)數(shù)。
課堂里的知識(shí)面覆蓋豐富的值得一看的代碼例子
const
...操作符：Spread和Rest
箭頭函數(shù)
...進(jìn)行的是Spread操作
...進(jìn)行的是Rest操作
for...of循環(huán)
推薦：
想整個(gè)對(duì)象等等都修改不了，可用“設(shè)置訪問(wèn)器的屬性”的方法
單詞：
學(xué)習(xí)記錄
flex view:actionscript
ES6和JS可以互換
解構(gòu)：拆分一個(gè)普通對(duì)象或者數(shù)組，將對(duì)象的屬性或者數(shù)組元素賦值給指定的變量
以后常常使用let來(lái)定義變量，比較嚴(yán)格點(diǎn)，用var定義變量。容易成為全局變量，全局變量多了，有時(shí)會(huì)出現(xiàn)問(wèn)題。
箭頭函數(shù)中有參有返的情況內(nèi)容比其他情況用得更多。
ES6語(yǔ)法完成：
1、給頁(yè)面中的所有按鈕綁定點(diǎn)擊事件，當(dāng)點(diǎn)擊這些按鈕時(shí)彈出“這個(gè)頁(yè)面的第幾個(gè)按鈕”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
window.onload=function(){
var b=document.querySelectorAll('input[type="button"]');
// alert(b[0].value)
for (let i=0;i<b.length;i++) {
b[i].onclick=function(){
alert("這個(gè)頁(yè)面的第"+(i+1)+"個(gè)按鈕")
}
}
}
</script>
<body>
<input type="button" value="按鈕">
<input type="button" value="按鈕">
<input type="button" value="按鈕">
</body>
</html>
2、分別定義無(wú)參無(wú)返回，有參無(wú)返回，無(wú)參有返回和有參有返回的箭頭函數(shù)，并且調(diào)用它。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
//--------------
//無(wú)參無(wú)返回的箭頭函數(shù)的聲明:
let f1 = () => {
console.log('給詩(shī)書畫唱三連');
};
//無(wú)參無(wú)返回的箭頭函數(shù)的調(diào)用:
f1();
//--------------
//有參無(wú)返回的箭頭函數(shù)的聲明:
let f2 = s => console.log(s + 2+"個(gè)硬幣給詩(shī)書畫唱");
//有參無(wú)返回的箭頭函數(shù)的調(diào)用:
f2("投了");
//--------------
//無(wú)參有返回的箭頭函數(shù)的聲明:
let f3 = () => '點(diǎn)了贊';
//無(wú)參有返回的箭頭函數(shù)的調(diào)用:
console.log(f3());
//--------------
//有參有返回的箭頭函數(shù)的聲明:
let f4 = s => s+"三連！謝謝！好的！不用謝！";
//有參有返回的箭頭函數(shù)的調(diào)用:
console.log(f4("給詩(shī)書畫唱"));
//-------------
</script>
<body>
</body>
</html>
3、定義三個(gè)變量snum,name,classroom三個(gè)變量，通過(guò)解構(gòu)將這三個(gè)變量合并成一個(gè)對(duì)象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
function heBing(snum,name,classroom) {
? ? ? ? ? ? console.log({snum,name,classroom});
? ? ? ? ? ? }
? var o= ["學(xué)號(hào)：666","姓名：詩(shī)書畫唱","教室：三連教室"];
? ? ? ? ? ? heBing(...o);//...進(jìn)行的是Spread操作
</script>
<body>
</body>
</html>
4、var dog = {n:"旺財(cái)",weight:2,color:"黑色"};通過(guò)解構(gòu)取出旺財(cái)?shù)乃袑傩灾怠?/p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
? var dog = {n:"旺財(cái)",weight:2,color:"黑色"}
? ? ? ? ? ? let {n,weight,color} = dog;
? ? ? ? ? ? console.log(n,weight,color);
</script>
<body>
</body>
</html>
5、定義一個(gè)學(xué)生對(duì)象，包含一個(gè)eat方法，通過(guò)解構(gòu)取出這個(gè)方法并調(diào)用它。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
var student = {
? ? ? ? ? ? name: '詩(shī)書畫唱',
? ? ? ? ? ? age: 20,
? ? ? ? ? ? sex: '男',
? ? ? ? ? ? eat:function(){
? ? ? ? ? ? ? return "看到這句話說(shuō)明成功調(diào)用eat方法";
? ? ? ? ? ?
? ? ? ? ? ? }
? ? ? ? ? ? };
? ? ? ? ? ? ?let {eat} = student;
? ? ? ? ? ? console.log(eat());
</script>
<body>
</body>
</html>
6、定義一個(gè)沒(méi)有參數(shù)個(gè)數(shù)限制的函數(shù)，打印出輸入的參數(shù)個(gè)數(shù)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
? function f(...o) {
? ? ? ? ? ? console.log(o.length);
? ? ? ? ? ? }
? ? ? ? ? ? f("詩(shī)書畫唱",'創(chuàng)作的作品',666,"好棒",true);
</script>
<body>
</body>
</html>
課堂里的知識(shí)面覆蓋豐富的值得一看的代碼例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 引入ES6轉(zhuǎn)碼器 -->
<script type="text/javascript" srcc="js/browser.js" ></script>
<script>
//let和const關(guān)鍵字:都是用來(lái)聲明變量
{
var a = 3;
let b = 4;
//console.log(a,b);
}
//用let關(guān)鍵字聲明的變量當(dāng)出了作用域以后會(huì)被自動(dòng)銷毀
//console.log(a,b);//報(bào)錯(cuò)
for(let i = 0;i < 5;i ++){
//執(zhí)行代碼
//console.log(i);
}
//console.log(i);//報(bào)錯(cuò)
//解決閉包的問(wèn)題
let arr = [];
for(let i = 0;i < 5;i ++) {
arr[i] = function(){
console.log(i);
}
}
//arr[2]();
//const用來(lái)聲明變量,一旦使用const聲明變量,必須給這個(gè)變量賦值
//一旦這個(gè)變量被賦值,就再也不能夠被修改了
const PI = 3.14;
const TEST = true;
const MSG = 'Hello world';
//PI = 4;//沒(méi)有辦法再次修改一個(gè)const變量值
const STU = {name:'Tom',age:18};
STU.name = 'Kite';
STU.age = 20;
STU.sex = '男';
//console.log(STU);
//無(wú)參數(shù)無(wú)返回值的函數(shù)
// function fn1(){
// console.log('Hello world');
// }
let fn1 = () => {
console.log('Hello world');
};
fn1();
//有參數(shù)沒(méi)有返回值的函數(shù)
// function fn2(a){
// console.log(a + 1);
// }
? ? ? ? ? ? //箭頭函數(shù)只有一個(gè)參數(shù)時(shí),可以將括號(hào)省略掉
let fn2 = a => console.log(a + 1);
fn2(2);
//沒(méi)有參數(shù)有返回值的函數(shù)
// function fn3(){
// return 'Kitty';
// }
//如果函數(shù)只有一個(gè)return語(yǔ)句的話,return關(guān)鍵字可以省略
let fn3 = () => 'Kitty';
console.log(fn3());
//有返回值有參數(shù)的函數(shù)
// function fn4(num) {
// return num * 2;
// }
let fn4 = num => num * 2;
console.log(fn4(3));
// (function(){
// console.log('Hello world');
// })();
// + function(){
// console.log('Hello world');
// }();
//? ? ? ? ? function fn5(){
//? ? ? ? ? return {
//? ? ? ? ? name: '張三'
//? ? ? ? ? };
//? ? ? ? ? }
? ? ? ? ? ? //如果箭頭函數(shù)返回的是一個(gè)對(duì)象時(shí)，那么這個(gè)對(duì)象必須用()括起來(lái)
? ? ? ? ? ? let fn5 = () => ({name: '張三'});
? ? ? ? ? ? console.log(fn5().name);
? ? ? ? ? ??
? ? ? ? ? ? //...操作符：Spread和Rest
? ? ? ? ? ? function foo(x,y,z) {
? ? ? ? ? ? console.log(x + y + z);
? ? ? ? ? ? }
? ? ? ? ? ? //foo(1,2,3);
? ? ? ? ? ? var ay = [1,2,3,4];
? ? ? ? ? ? foo(...ay);//...進(jìn)行的是Spread操作
? ? ? ? ? ??
? ? ? ? ? ? function bar(...ar) {//...進(jìn)行的是Rest操作
? ? ? ? ? ? console.log(ar);
? ? ? ? ? ? }
? ? ? ? ? ? bar(true,'test',47);
? ? ? ? ? ??
? ? ? ? ? ? var stu = {
? ? ? ? ? ? sname: '李四',
? ? ? ? ? ? sage: 20,
? ? ? ? ? ? ssex: '女'
? ? ? ? ? ? };
//? ? ? ? ? let sname = stu.sname;
//? ? ? ? ? let sage = stu.sage;
//? ? ? ? ? let ssex = stu.ssex;
? ? ? ? ? ? //通過(guò)解構(gòu)的語(yǔ)法來(lái)獲取屬性值
? ? ? ? ? ? //被賦值的變量名跟屬性名是一致的
? ? ? ? ? ? let {sage,ssex,sname} = stu;
? ? ? ? ? ? console.log(sname,sage,ssex);
? ? ? ? ? ??
? ? ? ? ? ? let arr1 = ['mee',true,23,'txt'];
//? ? ? ? ? let x = arr1[0];
//? ? ? ? ? let y = arr1[1];
? ? ? ? ? ? //通過(guò)解構(gòu)的語(yǔ)法來(lái)獲取數(shù)組的元素
? ? ? ? ? ? let [x,y,z,w] = arr1;
? ? ? ? ? ? console.log(x,y,z,w);
? ? ? ? ? ??
? ? ? ? ? ? let pname = '德芙巧克力';
? ? ? ? ? ? let price = '8.5';
//? ? ? ? ? let pro = {};
//? ? ? ? ? pro.pname = pname;
//? ? ? ? ? pro.price = price;
? ? ? ? ? ? let pro = {
? ? ? ? ? ? pname,
? ? ? ? ? ? price
? ? ? ? ? ? };
? ? ? ? ? ? console.log(pro);
? ? ? ? ? ??
? ? ? ? ? ? //循環(huán)方式：for循環(huán)，for...in,for...of
? ? ? ? ? ? //for...of不能對(duì)對(duì)象進(jìn)行循環(huán)
? ? ? ? ? ? //for...in可以對(duì)對(duì)象進(jìn)行循環(huán)
? ? ? ? ? ? let nums = ['one','two','three','four'];
? ? ? ? ? ? Array.prototype.fn = function(){
? ? ? ? ? ? console.log('testing...');
? ? ? ? ? ? }
//? ? ? ? ? for(let i = 0;i < nums.length;i ++) {
//? ? ? ? ? //console.log(nums[i]);
//? ? ? ? ? }
//? ? ? ? ? for(let attr in nums) {
//? ? ? ? ? console.log(attr);
//? ? ? ? ? }
? ? ? ? ? ? //for...of循環(huán)中不會(huì)出現(xiàn)數(shù)組的下標(biāo)
//? ? ? ? ? for(let num of nums) {
//? ? ? ? ? console.log(num);
//? ? ? ? ? }
? ? ? ? ? ? let pros = [{name: '辣條',price:3.5},
? ? ? ? ? ? {name: '脆皮',price:3},
? ? ? ? ? ? {name: '雞腿肉',price:18},
? ? ? ? ? ? {name: '薯片',price:10}]
//? ? ? ? ? for(let i = 0;i < pros.length;i ++) {
//? ? ? ? ? let p = pros[i];
//? ? ? ? ? console.log(p.name,p.price);
//? ? ? ? ? }
? ? ? ? ? ? for(let p of pros) {
? ? ? ? ? ? console.log(p.name,p.price);
? ? ? ? ? ? }
</script>
</head>
<body>
</body>
</html>
