html中let函数,es6es6（let关键字，const关键字，变量的解构赋值，模板字符串，对象简写，箭头函数，三点运算符，形参默认值，Promise对象，获取新闻内容）...

let关键字

01_let关键字

测试1

测试2

测试3

//面试题

//   console.log(username);//没有预解析 会报错

let username = "kobe";//不能重复声明

// let username = "wade";//不能重复声明

console.log(username);//没有预解析 会报错

let btns = document.getElementsByName("button");

for(let i=0; i

var btn = btns[i];

//var 无法获取正确的索引

btn.onclick = function () {

alert(i);

}

}

// (function (i) {

//   btn.onclick = function () {

//     alert(i)

//   }

// })(i)

const关键字

02_const关键字

var KEY = 'NBA';//var可修改

KEY = 'CBA'

const KEY = "NBA";//CBA

console.log(KEY);//CBA

const KEY = 'NBA';//const不可修改

//KEY ='CBA'; 当 var换成const时，不能写，会报错

console.log(KEY);

变量的解构赋值

03_变量的解构赋值

let obj = {username:"kobe",age:"40"};

// let username = obj.username;

// let age = obj.age;

// let xxx = obj.xxx;//undefined

//username

let{age} = obj;

console.log(age);

let arr  = [1,3,5,"abc",true];

// let[a,b,c,d,e] = arr;

// console.log(a,b,c,d,e);//1 3

let[,,a,b] = arr;

console.log(a,b);//5 "abc"

// function foo(obj) {

//   console.log(obj.username, obj.age);

// }

function foo({username,age}) {//{username.age}=obj

console.log(username,age);

}

foo(obj);

模板字符串

04_模板字符串

let obj = {username :"kobe",age:"40"};

// let str = "我的名字是："+ obj.username + "我的年龄是"+ obj.age;

str = '我的名字是: ${obj.username},我的年龄: ${obj.age}';

// console.log(str)//我的名字是：kobe我的年龄是40

console.log(str)

对象简写

05_简化的对象写法

let username = "kobe";

let age = 40;

let obj = {

username,

age,

getName(){

return this,username;

}

}

console.log(obj);

console.log(obj.getName());

箭头函数

06_箭头函数

测试箭头函数this_1

测试箭头函数this_2

// let fun = function () {

//     console.log('我是函数');

// }

// let fun = () => console.log("我是箭头函数");

fun()

let fun1 = () => console.log("我是箭头函数");//没有参数要用括号占位

fun1();

let fun2 = a => console.log(a);//只有一个形参括号可以省略

fun2("aaa");

let fun3 = (x,y) => console.log(x,y);//多个形参括号不可以省略

fun3("23,45");

let fun4 = (x,y) => x + y;

console.log(fun4(34,26));//60

let fun5 = (x,y) =>{

console.log(x,y);

return x + y;

};

console.log(fun5(35,49));//84

let btn1 = document.getElementById("btn1");

let btn2 = document.getElementById("btn2");

btn1.onclick = function () {

alert(this);//[object HTMLButtonElement]

console.log(this);

};

btn2.onclick = function () {

alert(this);//[object windows]

console.log(this);

};

// let obj = {

//     name:"箭头函数 ",

//     getName:function(){

//         btn2.onclick = () =>{

//             alert(this);//[object,Object]

//             con】sole.log(this);//{name : "箭头函数",getName:f

//     }

//     }普通函数

// }

let obj = {

name:"箭头函数 ",

getName:() =>{

btn2.onclick = () =>{

alert(this);//[object,windows]

console.log(this);//windows

}

}

}

// fun4()

三点运算符

07_3点运算符

function foo(a,...value) {

console.log(arguments);

// arguments.callee();//递归

//

console.log(value);

//   arguments.forEach(function (item,index) {

//   console.log(item,index);

// })

value.forEach(function (item,index) {

console.log(item,index);

})

}

foo(2,65,33,34);

let arr = [1,6];

let arr1 = [2,3,4,5];

arr = [1,...arr1,6];

console.log(arr);//[1,2,3,4,5,6]

console.log(...arr);

形参默认值

08_形参默认值

function Point(x=0,y=0) {

this.x = x;

this.y = y;

}

let point = new Point(23,35);

console.log(point);

let point1 = new Point();

console.log(point1);

Promise对象

11_Promise对象

// // 创建Promise对象

//   let promise = new Promise((resolve,reject) => {

//

//     //初始化Promise状态 pending(初始化)

//     console.log("111");

//

//     //执行异步操作，通常是发送AJAX请求，开启定时器

//     setTimeout(() => {

//       console.log('333');

//       //根据异步任务的返回结果，去修改Promise的状态

//       //异步任务执行成功

//       resolve('哈哈');//修改Promise的状态为fullfilled(成功状态)

//

//       //异步任务执行失败

//       reject('555');//修改Promise的状态为rejected: 失败状态

//     }, 2000);

//   })

//

//    console.log('222');

//   promise.then((data) => {//成功的回调

//     console.log('成功了！！!');

//   },(error) => {//失败的回调

//     console.log('失败了！！！');

// })

// 定义获取新闻的功能函数

function getNews(url){

let promise = new Promise((resolve, reject) => {

// 状态：初始化

// 执行异步任务

// 创建xmlHttp实例对象

let xmlHttp = new XMLHttpRequest();

console.log(xmlHttp.readyState);

//绑定readyState监听

xmlHttp.onreadystatechange = function(){

if(xmlHttp.readyState === 4){

if(xmlHttp.status == 200){//请求成功

// console.log(xmlHttp.responseText);

//修改状态

resolve(xmlHttp.responseText);//修改promise的状态为成功的状态

}else{//请求失败

reject('暂时没有新闻内容');

}

}

};

// open设置请求的方式以及url

xmlHttp.open('GET', url);

// 发送

xmlHttp.send();

})

return promise;

}

getNews('http://localhost:3000/new?id=2')

.tnen((data) =>{

console.log(data);

},(error) => {

console.log(error);

});

// getNews('http://localhost:30001/news?id=2')

// .then((data) => {

// console.log(data);

// // console.log(typeof data);

// // 准备获取评论内容的url

// let commentsUrl = JSON.parse(data).commentsUrl;

// let url = 'http://localhost:3000' + commentsUrl;

// // 发送请求获取评论内容

// return getNews(url);

// }, (error) => {

// console.log(error);

// })

// .then((data) => {

// console.2log(data);

// }, () => {

// });