都2021年了,你还在写ES5 ?快醒醒吧,这份ES6超全教程拯救你

Posted autofelix

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了都2021年了,你还在写ES5 ?快醒醒吧,这份ES6超全教程拯救你相关的知识,希望对你有一定的参考价值。

〝 古人学问遗无力,少壮功夫老始成 〞

都2021年了,你还在写ES5 ?快醒醒吧,这份ES6超全教程拯救你,作为javascript语言的下一代标准。ES6其实在2015年就已经发布了,很多人并不清楚ES和JavaScript之间的关系,其实ES是JavaScript书写的标准规范,而ES6就是让JavaScript的编写习惯得到更好的优化和改善,而ES5相对ES6落后了很多,很多人现在写JavaScript的规范还停留在ES5,所以就让飞兔小哥哥救你们于水深火热中吧,如果这篇文章能给你带来一点帮助,希望给飞兔小哥哥一键三连,表示支持,谢谢各位小伙伴们。

目录

一、let定义变量与const定义常量

 二、模版字符串

三、数组的变量的解构赋值

四、对象的变量的解构赋值

五、箭头函数

六、展开运算符

七、函数参数的扩展

 九、class类

十、对象的扩展

 十一、Set结构

十二、Map结构

十三、Promise


一、let定义变量与const定义常量

  • 在es5中是使用var这个关键词定义变量和常量的
  • 但是var的缺点很明显,它存在变量提升问题,降低代码的可阅读性
  • var这个关键字它没有块级作用域,很容易造成变量污染
  • 而let和const都是块级作用于,且在同一个代码块中不允许重复申明,也不存在变量提升问题
  • const定义的常量,无法被重新赋值,而且在定义常量的时候就必须赋值,否则会报错
//变量提升缺点、在变量定义前就可以访问
console.log(name) //autofelix

var name = 'autofelix'
//没有块级作用域、导致在循环体外可以访问
for (var i = 0; i < 10; i++) {
    /** 你的逻辑 **/
}

console.log(i) //10
//let和const都无法被重新赋值
let name = 'autofelix'
name = '飞兔小哥哥' //Identifier 'name' has already been declared

const PI = 3.1415926
PI = 3.14 //Identifier 'PI' has already been declared
//let有块级作用域,在外部调用会报错,不会造成变量污染
for (let i = 0; i < 10; i++) {
     /** 你的逻辑 **/
}

console.log(i) //i is not defined
const name; // 只定义未赋值会报错,Missing initializer in const declaration

console.log(nickname); //不存在变量提升,Cannot access 'nickname' before initialization
const nickname = 'autofelix';

const uname = 'autofelix';
uname = '飞兔小哥哥'; //不可以重新赋值,Assignment to constant variable.

const obj = {
    name: 'autofelix'
}
obj.name = '飞兔小哥哥';
console.dir(obj.name); //对象的值是可以被修改的

 二、模版字符串

  • 减少拼接,代码看起来更加的美观

const name = 'autofelix'

//es5
console.log('我的名字是:' + name + ';谢谢大家');
//es6
console.log(`我的名字是:${name};谢谢大家`);

三、数组的变量的解构赋值

  • ES6允许按照一定的模式 ,从数组和对象中提取值 ,对变量进行赋值 ,这被称作解构赋值

  • 数组中的会自动解析到对应接收该值的变量中 ,数组的解构赋值要一一对应 ,否则就是undefined

let [name, age, hobby] = ['autofelix', 26, 'women'];
console.log(name, age, hobby); //autofelix 26 women

四、对象的变量的解构赋值

  • 对象与数组不同的是 ,对象不需要一一对应 ,但是变量必须和属性同名,才能取到正确的值

let user = {
    name: 'autofelix',
    age: 26,
    hobby: 'women'
}

const {name, age, hobby} = user
console.log(name, age, hobby); //autofelix 26 women

五、箭头函数

  • 更简单的方式定义函数 
//单个参数定义
//es5
function fn(x) {
    return x + 2;
}
//es6
let fn = x => x+2;
//多个参数定义
//es5
function fn(x, y) {
    return x + y;
}
//es6
let fn = (x, y) => x+y;

六、展开运算符

  • 功能一:将字符串变为数组

  • 功能二:合并数组

//功能一
let name = 'autofelix';
const Arr = [...name]
console.log(Arr) //["a", "u", "t", "o", "f", "e", "l", "i", "x"]
//功能二
let arr1 = [1,2,3]
let arr2 = [4,5,6]

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

七、函数参数的扩展

  • 默认参数 ,可以给函数体参数添加默认参数 ,这样即使不传也不会报错
  • 不定参数 ,可以不传或者随意传多个参数也不会报错
//默认参数
function fn(a, b=10) {
    return a+b;
}

var a = fn(5);
console.log(a); //15

var b = fn(2, 10);
console.log(b); //12
//不定参数
function fn(...item) {
    console.log(item.length)
}

var a = fn('autofelix');
console.log(a);//1

var b = fn(26,'autofelix');
console.log(b);//2

 九、class类

  • 增加了class类 ,使得js更加的面向对象编程
  • 而且对象原型的写法更加清晰
  • 注意事项
  • 类的命名有两种 ,匿名类和命名类
  • 类不能被重复申明
  • 类定义不会被提升,必须在访问前定义,否则会报错
  • 类中的方法不需要function关键字
  • 方法间不能加分号
// 匿名类
let user = class {
    constructor(name) {
        this.name = name;
    }
}

// 命名类
let user = class user {
    constructor(name) {
        this.name = name;
    }
}
//属性的定义方式
//公共属性
class user{}
user.prototype.name = 'autofelix';

//实例属性
class user {
    name = 'autofelix';
    constructor () {
        console.log(this.name);
    }
}
class user {
    //默认参数学习,且方法中间不能用逗号
    constructor(name = 'autofelix', age = 26, hobby = 'women') {
        this.name = name;
        this.age = age;
        this.hobby = hobby;
    }
    say() {
        //使用es6语法模板字符串拼接
        return `我叫${this.name},年龄${this.age}`;
    }
    like() {
        //使用es6语法模板字符串拼接
        return `我爱好${this.hobby}`;
    }
}

let user1 = new user(); //默认参数
console.log(user1.say()); //我叫autofelix,年龄26
console.log(user1.like()); //我爱好women

let user2 = new user('飞兔小哥哥', 18, '阅读'); //自定义参数
console.log(user2.say()); //我叫飞兔小哥哥,年龄18
console.log(user2.like()); // 我爱好阅读

十、对象的扩展

  •  扩展运算符是三个点(...)。用于取出参数对象的所有可遍历属性,拷贝到当前对象中
  • Object.assign 就是进行对象的浅拷贝

var user = { name: 'autofelix', age: 26, hobby: 'women' }

//克隆一个新对象出来
var user1 = Object.assign({}, user);
console.log(user1);

//第二种方式使用扩展运算符克隆
var use2 = { ...user }
console.log(use2);

//其他相同,名字不同
var use3 = { ...user, name: '飞兔小哥哥' }
console.log(use3);

 十一、Set结构

  • ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值

  • 作用可以用于数组去重

var set = new Set([1, 2, 3]);
console.log(set); //Set {1, 2, 3}

//获取元素个数
console.log(set.size); //3

//添加元素
set.add(4);
console.log(set); //Set {1, 2, 3, 4}

//不会添加重复的值
set.add(4);
console.log(set); //Set {1, 2, 3, 4}

//删除元素
set.delete(4);
console.log(set); //Set {1, 2, 3}

//查找元素
console.log(set.has(1)); //true

//遍历元素
set.forEach(E => {
    console.log(E); //1,2,3
});

//数组去重
var arr = [...new Set([1, 2, 3, 3, 4, 5])]
console.log(arr); //[1, 2, 3, 4, 5]

十二、Map结构

  • ES6提供了Map数据结构。它类似于对象,也是键值对的集合
  • 但是它与对象的不同点在于`键`的范围不限于字符串,各种类型的值(包括对象)都可以当作键

var map = new Map();
console.log(map); //Map {}

//添加元素
map.set('name', 'autofelix');
map.set('age', 26);
console.log(map); //Map {"name" => "autofelix", "age" => 26}

//元素个数
console.log(map.size); //2

//获取元素
console.log(map.get('name')); //autofelix

//删除元素
map.delete('age')
console.log(map);// Map {"name" => "autofelix"}

//查找元素
console.log(map.has('name')); //true

//遍历元素
map.forEach((E, K) => {
    console.log(E + '=' + K); //name=autofelix
});

十三、Promise

  • Promise是异步编程一种解决方案

  • 解决回调地狱的噩梦

//es5
$.get("/get/user/id", function (res) {
    $.get("/get/user/info", function () {
        $.get("/get/user/role", function () {
            //...
        })
    })
})

//es6
new Promise((resolve, reject) => {
    $.get("/get/user/id", res => {
        resolve(res)
    })
}).then(res => {
    //用户基本信息
    return new Promise(resolve => {
        $.get("/get/user/info", res => {
            resolve(res)
        })
    })
}).then(res => {
    //用户角色
    return new Promise(resolve => {
        $.get("/get/user/role", res => {
            resolve(res)
        })
    })
}).then(res => {
    //...
})

//错误解决
new Promise((resolve, reject) => {
    $.ajax({
        url: "/get/user/info",
        type: "GET",
        success: res => {
            resolve(res);
        },
        error: res => {
            reject(res)
        }
    })
}).then(resSuccess => {
    //成功的回调
}, resError => {
    //失败的回调
})

以上是关于都2021年了,你还在写ES5 ?快醒醒吧,这份ES6超全教程拯救你的主要内容,如果未能解决你的问题,请参考以下文章

都 2021 年了,你还在用 Kafka?快试试这个全新平台吧

都2021年了,你还在说测试比不上开发?

都2021年了,你还在说测试比不上开发?

都 2021 年了,你还在用 Jenkins ?赶快看看这些替代方案吧!

都2021年了,你还在用Jenkins?赶快看看这些替代方案吧!

你还在写垃圾代码?快用 Java 8 重构传统设计模式吧,是真的优雅!