ES6中的類，模板字符串，Promise，拼接表格無序列表等等，回調地獄，ajax【詩書畫唱】
內容索引：
1、通過ES6語法創(chuàng)建學生類（姓名，性別，班級）和游戲類（名稱，公司，發(fā)行年份），添加各自的構造方法。
2、創(chuàng)建一個學生（姓名，性別，班級）數組，通過模板字符串拼接顯示學生的所有信息（表格）
3、創(chuàng)建一個游戲數組（名稱，公司，發(fā)行年份），通過模板字符串拼接顯示游戲的所有信息（無序列表）
學習記錄
示范例子
ES6Promise.html
ES6模板字符串.html
ES6中的類.html
回調地獄
ajax
1、通過ES6語法創(chuàng)建學生類（姓名，性別，班級）和游戲類（名稱，公司，發(fā)行年份），添加各自的構造方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
?
? ? ? ? ? ? class Student{
? ? ? ?
? ? ? ? ? ? constructor(n,s,a){
? ? ? ? ? ? this.name = n;
? ? ? ? ? ? this.sex = s;
? ? ? ? ? ? this.age = a;
? ? ? ? ? ?
? ? ? ? ? ? }
? ? ? ? ? ?
? ? ? ? ? ?
? ? ? ? ? ? }
let s1= new Student('詩書畫唱','男',20);
console.log(s1)
class Game{
? ? ? ?
? ? ? ? ? ? constructor(n,c,y){
? ? ? ? ? ? this.name = n;
? ? ? ? ? ? this.company = c;
? ? ? ? ? ? this.year =y;
? ? ? ? ? ?
? ? ? ? ? ? }
? ? ? ? ? ?
? ? ? ? ? ?
? ? ? ? ? ? }
let g1= new Game('詩書畫唱游戲','詩書畫唱游戲公司',2021);
console.log(g1)
</script>
<body>
</body>
</html>
2、創(chuàng)建一個學生（姓名，性別，班級）數組，通過模板字符串拼接顯示學生的所有信息（表格）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
window.onload = function(){
let studentArray = [{name:'詩書畫唱1',sex:'男',banJi:'高三（6）班'},
{name:'詩書畫唱2',sex:'男',banJi:'高三（7）班'},
{name:'詩書畫唱3',sex:'男',banJi:'高三（8）班'}];
? ? ? ? ? ? ? ? let html = `<tr><th>姓名</th><th>性別</th><th>班級</th></tr>`;
//下面的o就是數組中的object對象? ?
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? for(let o of studentArray) {
? ? ? ? ? ? ? ? html += `<tr>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<td> ${o.name}</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<td>${o.sex}</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<td>${o.banJi}</td>
? ? ? ? ? ? ? ? ? ? ? ? ?</tr>`;
? ? ? ? ? ? ? ? }
? ? document.getElementById('tableId1').innerHTML = html;
}
</script>
<body>
<table id="tableId1" border="1">
</table>
</body>
</html>
3、創(chuàng)建一個游戲數組（名稱，公司，發(fā)行年份），通過模板字符串拼接顯示游戲的所有信息（無序列表）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
window.onload = function(){
let gameArray = [{name:'詩書畫唱游戲1',company:'詩書畫唱游戲分公司1',year:2000},
{name:'詩書畫唱游戲2',company:'詩書畫唱游戲分公司2',year:2001},
{name:'詩書畫唱游戲3',company:'詩書畫唱游戲分公司3',year:2002}];
? ? ?let html = ``;
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? for(let o of gameArray) {
? ? ? ? ? ? ? ? html += `<ul>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<li> ${o.name}</li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<li>${o.company}</li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<li>${o.year}</li>
? ? ? ? ? ? ? ? ? ? ? ? ?</ul>`;
? ? ? ? ? ? ? ? }
? ? document.getElementById('ulId1').innerHTML = html;
}
</script>
<body>
<div id="ulId1" border="1">
</div>
</body>
</html>
學習記錄
越高級的語言，越接近于人類的語言，越好用，但是技術含量就越低
匯編語言
Promise內置對象。
Object,Date,Number,Array
promise:發(fā)誓，承諾
異步執(zhí)行代碼：幾段代碼同時執(zhí)行。
示范例子
ES6Promise.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//Promise的構造方法中必須傳入一個函數，當運行new Promise的時候，
//就會直接運行這個傳入的函數
// let p = new Promise(function(){
// console.log('Hello world');
// });
//為了在需要的時候才創(chuàng)建Promise對象，將代碼封裝在一個函數中
function runAsync(){
return new Promise(function(){
console.log('Hello world');
});
}
//只有調用函數時才會創(chuàng)建Promise
let p = runAsync();
//回調地獄
// $.ajax({
// url: '',
// success: function(data){
// $.ajax({
// url: '?d=' + data,
// success: function(){
//
// }
// });
// }
// });
// setTimeout(function(){
// console.log('做完了第一道題');
// setTimeout(function(){
// console.log('做完了第二道題');
// setTimeout(function(){
// console.log('做完了第三道題')
// },3000);
// },3000);
// },5000);
</script>
</head>
<body>
</body>
</html>
ES6模板字符串.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
let pros = [{id:4,name:'德芙巧克力',unit:'塊',price:9.5},
{id:8,name:'辣條',unit:'包',price:3.5},
{id:11,name:'爆米花',unit:'盒',price:10.0}];
? ? //ES5語法
// ? ? let html = '<tr><th>商品名稱</th><th>單位</th><th>價格</th></tr>';
// ? ? for(let i = 0;i < pros.length;i ++) {
// ? ? let p = pros[i];
// ? ? html += '<tr><td><a href="javascript:show(' + p.id + ');">'?
// ? ? ? ? + p.name + '</a></td><td>' + p.unit
// ? ? ? ? + '</td><td>' + p.price + '</td></tr>';
// ? ? }
? ? ? ? ? ? ? ? //ES6語法:模板字符串不是使用單引號或者雙引號引起來的，而是使用`
? ? ? ? ? ? ? ? let html = `<tr><th>商品名稱</th><th>單位</th><th>價格</th></tr>`;
? ? ? ? ? ? ? ? for(let p of pros) {
? ? ? ? ? ? ? ? html += `<tr>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href='javascript:show(${p.id});'>${p.name}</a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<td>${p.unit}</td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<td>${p.price}</td>
? ? ? ? ? ? ? ? ? ? ? ? ?</tr>`;
? ? ? ? ? ? ? ? }
? ? document.getElementById('mytb').innerHTML = html;
}
function show(id){
alert('選擇的商品id是：' + id);
}
let code = 'return `Hello,${name}`';
let fn = new Function('name',code);
// function fn(name){
// return `Hello,${name}`;
// }
console.log(fn('Ktty'));
let fun = n => `Hello,${n}`;
console.log(fun('張三'));
</script>
</head>
<body>
<table id="mytb" border="1">
</table>
</body>
</html>
ES6中的類.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//ES5語法定義類
// let Person = function(n,a){
// this.name = n;
// this.age = a;
// }
// //覆蓋Person類的toString方法
// Person.prototype.toString = function(){
// console.log(123);
// }
// Person.prototype.study = function(){
// console.log('正在學習');
// }
// //定義靜態(tài)的方法
// Person.test = function(){
// console.log('人類測試');
// }
? ? ? ? ? ? //ES6語法定義類
? ? ? ? ? ? class Person{
? ? ? ? ? ? //定義構造函數
? ? ? ? ? ? constructor(n,a){
? ? ? ? ? ? this.name = n;
? ? ? ? ? ? this.age = a;
? ? ? ? ? ? }
? ? ? ? ? ? toString(){
? ? ? ? ? ? return '姓名是：' + this.name?
? ? ? ? ? ? ? ? + '，年齡是：' + this.age;
? ? ? ? ? ? }
? ? ? ? ? ? study(){
? ? ? ? ? ? console.log('正在學習');
? ? ? ? ? ? }
? ? ? ? ? ? //getter和setter
? ? ? ? ? ? get name(){//當獲取對象的name屬性時就會觸發(fā)get name函數
? ? ? ? ? ? console.log('調用get方法');
? ? ? ? ? ? return this._nm;
? ? ? ? ? ? }
? ? ? ? ? ? set name(val){//當給對象的name屬性賦值時會觸發(fā)set name函數
? ? ? ? ? ? console.log('調用set方法');
? ? ? ? ? ? this._nm = val;
? ? ? ? ? ? }
? ? ? ? ? ? //定義靜態(tài)的方法:只能通過類名點出來調用，不能通過對象點出來調用
? ? ? ? ? ? static test(){
? ? ? ? ? ? console.log('人類測試');
? ? ? ? ? ? }
? ? ? ? ? ? }
let xm = new Person('小明',19);
//alert(xm);//默認調用對象的toString方法
//xm.study();
//xm.name = 'Kite';
//console.log(xm.name);
//Person.test();
class Father{
constructor(money){
console.log('調用父類的構造方法');
this.account = money;
}
cost(){
console.log('父親花錢了');
}
}
class Son extends Father{
constructor(m){
super(m);//調用父類中的構造方法
console.log('調用子類中的構造方法');
}
cost(){//覆蓋了父類中的cost方法
console.log('兒子花錢了');
}
}
let s = new Son(200000);
console.log(s.account);
s.cost();
</script>
</head>
<body>
</body>
</html>
