[ ES6 ] 快速掌握常用 ES6 （一）

ispring 发布于2019-08-23 14:01 / 2493人阅读

摘要：常量变量先说说常量和变量的概念吧，常量是说那种进行一次赋值后不会更改的值，比如说游戏账户的，变量是说赋值后有更改的需求的，比如游戏名，游戏密码。常用实例交换变量的值提取数据解构赋值对提取对象中的数据，尤其有用。

本系列文章适合快速掌握 ES6 入门语法，想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》
学习 20% 的知识完成 80% 的工作

关于 ES6

稍微介绍下 ES6 吧，详细介绍请自行 baidu 或 Google

ES2015 = ES6

ES6 泛指 ES2015、ES2016、ES2017 等等，JavaScript 的下一代标准

现代浏览器支持大部分（90%+）的原生 ES6 ，但是为了兼容老版本的浏览器，通常使用 Babel 将 ES6 代码转为 ES5 代码。

常量变量 let and const

先说说常量和变量的概念吧，

常量是说那种进行一次赋值后不会更改的值，比如说游戏账户的 ID，
变量是说赋值后有更改的需求的，比如游戏名，游戏密码。

在之前的 JavaScript 中是不区分常量和变量的统统使用 var 来定义全局变量，

var userId = 666;
var userPassword = "mimabunengshuo";

现在 ES6 中使用 let 定义局部变量，const 定义局部常量

const userId = 666;
let userPassword = "wobuzidao";

为什么需要使用局部变量与常量

//我希望重复打印 0 到 9 ，打印10次
//使用 var
function varI(){
    for(var i = 0;i < 10;i++){
        for(var i = 0;i < 10;i++){
            console.log("varI:"+i);
        }
    }
}
//使用 let
function letI(){
    for(let i = 0;i < 10;i++){
        for(let i = 0;i < 10;i++){
            console.log("letI:"+i);
        }
    }
}
varI();//结果打印只有一次 0 到 9
letI();//顺利完成

如果非要使用 var 完成这个需求的话可以使用闭包
关于闭包本次不多做讨论

function varI() {
    for (var i = 0; i < 10; i++) {
        function test() {
            for (var i = 0; i < 10; i++) {
                console.log("varI:" + i);
            }
        }
        test();
    
    }
}
varI();//顺利完成

结构赋值

左右两边必须是一样的数据类型，或者转换后是一样的类型；

等号右边的值应该是数组或对象，不是对象或数组，就先将其转为对象；

定义和赋值必须同步完成

例如声明变量

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];

常用实例
1.交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

2.提取 JSON 数据
解构赋值对提取 JSON 对象中的数据，尤其有用。

let jsonData = {
  status: true,
  data: ["nicai", "wobuzhidao"]
};

let { status, data } = jsonData;

console.log(status, data);// true ["nicai", "wobuzhidao"]

箭头函数

在 ES6 之前定义函数是这样写

var f = function (i){
    return  i + 5;
}

有了箭头函数可以这样写（去掉 function 关键词，在"()"后面加"=>"）

let f = (i) => {
    return  i + 5;
}

好像没有太大区别？

箭头函数只有一个参数时,可以省略"()",只写参数；当只有一条返回语句时，可以省略"{}",以及 return 语句

上面的可以这样写

let f = i => return  i + 5;

箭头函数的 this 是固定不变的，就是指向定义时所在的对象，而不是使用时所在的对象

假如将 ES6 的箭头函数转换为 ES5 的普通函数,可以看到，箭头函数的 this 是在引用外层的 this

// ES6
function foo() {
  setTimeout(() => {
    console.log("id:", this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log("id:", _this.id);
  }, 100);
}

字符串模板

字符串模板主要用来处理变量和字符串混合的情况

字符串使用反引号(`字符串`)来包裹字符串，用$符加大括号 ( ${JavaScript}) 来包裹任意的 JavaScript 表达式

字符串模板中可以使用回车

比如用 JavaScript 来生成 HTML 元素，元素的文本想使用自己 JavaScript 运算后的结果
ES5 中比较麻烦

$("#dom").append(
  "你的用户名是：" + userName + "
 " +
  "你已经注册了 " + oNumber +"年"
);

ES6中相对简单

$("#dom").append(
  `你的用户名是：${userName}
你已经注册了${oNumber}年`
);

面向对象

class 用来定义一个类

extends 用来表示继承哪个类

constructor 构造函数可以定义私有方法和属性,此函数外的为共享的

super() 在 constructor 使用该方法继承父类的 this 对象

代码示例

class user {
    constructor() {
        this.name = "用户1";
    }
    sayHello(say) {
        console.log(`${this.name}，有人对你说：${say}`);
    }
}

let user1 = new user();
user1.sayHello("你好"); //用户1，有人对你说：你好

class xiaoming extends user {
    constructor() {
        super();
        this.name = "小明";
    }
}

let xiaoming1 = new xiaoming();
xiaoming1.sayHello("你好"); //小明，有人对你说：你好
let user2 = new user();
user2.sayHello("你好")//用户1，有人对你说：你好

[ES6] 快速掌握常用 ES6 （一）
[ES6] 快速掌握常用 ES6 （二）

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99951.html

[ ES6 ] 快速掌握常用 ES6 （二）

摘要：本系列文章适合快速掌握入门语法，想深入学习的小伙伴可以看看阮一峰老师的入门本篇文章是对之前文章的一个补充，可以使代码更简洁函数参数默认值在传统语法中如果想设置函数默认值一般我们采用判断的形式在新的语法中我们可以在参数声明的同时赋予默认值参数本系列文章适合快速掌握 ES6 入门语法，想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》本篇文章是对之前文章...

hidogs 2019-08-23 14:07 评论0 收藏0
ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
前端基础进阶（十四）：es6常用基础合集

摘要：在继承的构造函数中，我们必须如上面的例子那么调用一次方法，它表示构造函数的继承，与中利用继承构造函数是一样的功能。 showImg(https://segmentfault.com/img/remote/1460000009078532); 在实际开发中，ES6已经非常普及了。掌握ES6的知识变成了一种必须。尽管我们在使用时仍然需要经过babel编译。 ES6彻底改变了前端的编码风格，...

Ryan_Li 2019-08-21 18:31 评论0 收藏0
es6精简学习

摘要：需要更多地去学习应用。当你调用一个时，它将返回一个迭代器对象。这个迭代器对象拥有一个叫做的方法来帮助你重启函数并得到下一个值。那么问题来了，咱们也不能手动一直调用方法，你需要一个能够调用生成器并启动迭代器的方法。开始用vue或者react，很多时候我们都会把ES6这个大兄弟加入我们的技术栈中。但是ES6那么多那么多特性，我们需要全部都掌握吗？秉着二八原则，掌握好常用的，有用的这个可以...

RiverLi 2019-08-20 18:11 评论0 收藏0
30分钟掌握ES6/ES2015核心内容（上）

摘要：以下简称是语言的下一代标准。的继承机制，实质是先创造父类的实例对象所以必须先调用方法，然后再用子类的构造函数修改。总结以上就是最常用的一些语法，可以说这的语法，在的日常使用中占了追加十分钟好的吗分钟掌握核心内容下 ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说...

YPHP 2019-08-19 17:30 评论0 收藏0