[ ES6 ] 快速掌握常用 ES6 (一)

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了[ ES6 ] 快速掌握常用 ES6 (一)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

关于 ES6

稍微介绍下 ES6 吧,详细介绍请自行 baiduGoogle

  1. ES2015 = ES6
  2. ES6 泛指 ES2015、ES2016、ES2017 等等,JavaScript 的下一代标准
  3. 现代浏览器支持大部分(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();//顺利完成

结构赋值

  1. 左右两边必须是一样的数据类型,或者转换后是一样的类型;
  2. 等号右边的值应该数组或对象,不是对象或数组,就先将其转为对象;
  3. 定义和赋值必须同步完成

例如声明变量

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(
  '<div>你的用户名是:' + userName + '<br> ' +
  '你已经注册了 ' + oNumber +'年</div>'
);

ES6中相对简单

$('#dom').append(
  `<div>你的用户名是:${userName}<br>你已经注册了${oNumber}年</div>`
);

面向对象

  • 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 (二)

脚本宝典总结

以上是脚本宝典为你收集整理的[ ES6 ] 快速掌握常用 ES6 (一)全部内容,希望文章能够帮你解决[ ES6 ] 快速掌握常用 ES6 (一)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。