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

let关键字

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

</head>

<body>

<button>测试1</button>

<br>

<button>测试2</button>

<br>

<button>测试3</button>

<br>

<!--

***let

1. 作用:

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

2. 特点:

  * 在块作用域内有效

  * 不能重复声明

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

3. 应用:

  * 循环遍历加监听

  * 使用let取代var是趋势

-->

<script type="text/javascript">

//面试题

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

<html lang="en">

<head>

  <meta charset="UTF-8">

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

</head>

<body>

<!--

1. 作用:

  * 定义一个常量

2. 特点:

  * 不能修改

  * 其它特点同let

3. 应用:

  * 保存不用改变的数据

-->

<!--var是声明变量 const是声明常量-->

<!-- var 可以修改 const 不能修改-->

<script type="text/javascript">

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>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

</head>

<body>

<!--

1. 理解:

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

2. 对象的解构赋值

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

3. 数组的解构赋值

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

4. 用途

  * 给多个形参赋值

-->

<script type="text/javascript">

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>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

</head>

<body>

<!--

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

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

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

-->

<script type="text/javascript">

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>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

</head>

<body>

<!--

简化的对象写法

* 省略同名的属性值

* 省略方法的function

* 例如:

  let x = 1;

  let y = 2;

  let point = {

    x,

    y,

    setX (x) {this.x = x}

  };

-->

<script type="text/javascript">

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>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>06_箭头函数</title>

</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。

-->

<script type="text/javascript">

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

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>07_3点运算符</title>

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

-->

<script type="text/javascript">

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>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

</head>

<body>

<!--

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

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

this.x = x;

this.y = y;

    }

-->

<script type="text/javascript">

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>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

-->

<script type="text/javascript">

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

推荐阅读更多精彩内容

  • ECMAScript ES5、ES6、ES7
    ECMAScript理解 它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范 而我们学的...
    咻咻咻滴赵大妞阅读 4,560评论 0赞 3
  • demo es5
    一：ECMAScript理解 1. 它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范 ...
    清清不快乐阅读 271评论 0赞 0
  • Es5
    一：_ECMAScript理解 1. 它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范...
    噬魂__1727阅读 199评论 0赞 0
  • ES5
    一：_ECMAScript理解 1. 它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范...
    发报员有问题私小鹏阅读 75评论 0赞 0
  • es5
    一：ECMAScript理解 1. 它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范 ...
    晚冬至雪阅读 306评论 0赞 0