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

let关键字

<!DOCTYPE html>

<head>

<title>01_let关键字</title>

</head>

<body>

<br>

<br>

<br>

<!--

***let

1. 作用:

* 与var类似, 用于声明一个变量

2. 特点:

* 在块作用域内有效

* 不能重复声明

* 不会预处理, 不存在变量提升

3. 应用:

* 循环遍历加监听

* 使用let取代var是趋势

-->

//面试题

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

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

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

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

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

for(let i=0; i<btns.length; i++){

var btn = btns[i];

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

btn.onclick = function () {

alert(i);

}

// (function (i) {

// btn.onclick = function () {

// alert(i)

// }

// })(i)

</script>

</body>

</html>

const关键字

<!DOCTYPE html>

<head>

<title>02_const关键字</title>

</head>

<body>

<!--

1. 作用:

* 定义一个常量

2. 特点:

* 不能修改

* 其它特点同let

3. 应用:

* 保存不用改变的数据

-->

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);

</script>

</body>

</html>

变量的解构赋值

<!DOCTYPE html>

<head>

<title>03_变量的解构赋值</title>

</head>

<body>

<!--

1. 理解:

* 从对象或数组中提取数据, 并赋值给变量(多个)

2. 对象的解构赋值

let {n, a} = {n:'tom', a:12}

3. 数组的解构赋值

let [a,b] = [1, 'hello'];

4. 用途

* 给多个形参赋值

-->

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);

</script>

</body>

</html>

模板字符串

<!DOCTYPE html>

<head>

<title>04_模板字符串</title>

</head>

<body>

<!--

1. 模板字符串 : 简化字符串的拼接

* 模板字符串必须用 `` 包含

* 变化的部分使用${xxx}定义

-->

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)

</script>

</body>

</html>

对象简写

<!DOCTYPE html>

<head>

<title>05_简化的对象写法</title>

</head>

<body>

<!--

简化的对象写法

* 省略同名的属性值

* 省略方法的function

* 例如:

let x = 1;

let y = 2;

let point = {

setX (x) {this.x = x}

};

-->

let username = "kobe";

let age = 40;

let obj = {

username,

age,

getName(){

return this,username;

}

console.log(obj);

console.log(obj.getName());

</script>

</body>

</html>

箭头函数

<!DOCTYPE html>

<head>

</head>

<body>

<button id="btn1">测试箭头函数this_1</button>

<button id="btn2">测试箭头函数this_2</button>

<!--

* 作用: 定义匿名函数

* 基本语法:

* 没有参数: () => console.log('xxxx')

* 一个参数: i => i+2

* 大于一个参数: (i,j) => i+j

* 函数体不用大括号: 默认返回结果

* 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回

* 使用场景: 多用来定义回调函数

* 箭头函数的特点：

1、简洁

2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候所处的对象就是它的this

3、扩展理解：箭头函数的this看外层的是否有函数，

如果有，外层函数的this就是内部箭头函数的this，

如果没有，则this是window。

-->

// 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()

</script>

</body>

</html>

三点运算符

<!DOCTYPE html>

<head>

</head>

<body>

<!--

* 用途

1. rest(可变)参数

* 用来取代arguments 但比 arguments 灵活,只能是最后部分形参参数

function fun(...values) {

console.log(arguments);

arguments.forEach(function (item, index) {

console.log(item, index);

});

console.log(values);

values.forEach(function (item, index) {

console.log(item, index);

})

}

fun(1,2,3);

2. 扩展运算符

let arr1 = [1,3,5];

let arr2 = [2,...arr1,6];

arr2.push(...arr1);

-->

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);

</script>

</body>

</html>

形参默认值

<!DOCTYPE html>

<head>

<title>08_形参默认值</title>

</head>

<body>

<!--

* 形参的默认值----当不传入参数的时候默认使用形参里的默认值

function Point(x = 1,y = 2) {

this.x = x;

this.y = y;

}

-->

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);

</script>

</body>

</html>

Promise对象

<!DOCTYPE html>

<head>

<title>11_Promise对象</title>

</head>

<body>

<!--

1. 理解:

* Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)

* 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')

* ES6的Promise是一个构造函数, 用来生成promise实例

2. 使用promise基本步骤(2步):

* 创建promise对象

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

//初始化promise状态为 pending

//执行异步操作

if(异步操作成功) {

resolve(value);//修改promise的状态为fullfilled

} else {

reject(errMsg);//修改promise的状态为rejected

}

})

* 调用promise的then()

promise.then(function(

result => console.log(result),

errorMsg => alert(errorMsg)

))

3. promise对象的3个状态

* pending: 初始化状态

* fullfilled: 成功状态

* rejected: 失败状态

4. 应用:

* 使用promise实现超时处理

* 使用promise封装处理ajax请求

let request = new XMLHttpRequest();

request.onreadystatechange = function () {

}

request.responseType = 'json';

request.open("GET", url);

request.send();

-->

// // 创建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);

// }, () => {

// });

</script>

</body>

</html>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,214评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,307评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,543评论 0赞 341
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,221评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,224评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,007评论 1赞 284
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,313评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,956评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,441评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,925评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,018评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,685评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,234评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,240评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,464评论 1赞 261
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,467评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,762评论 2赞 345

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

推荐阅读更多精彩内容