一文带你快速详解ES6，认识新增特性！

青灯夜游 137 阅读 0 评论 214 点赞

本篇文章带大家深入了解ES6，了解学习ES6新增特性，希望对大家有所帮助！

如何快速入门VUE3.0：进入学习

理解ES6

ECMAScript ，是由网景公司制定的一种脚本语言的标准化规范；最初命名为 Mocha ，后来改名为 LiveScript ，最后重命名为 JavaScript
ECMAScript 2015（ES2015），第 6 版，最早被称作 ECMAScript 6（ES6），添加了新的特性。

ES6 块级作用域 let

首先，什么是作用域？作用域简单讲就是声明一个变量，这个变量的有效范围，在 let 没来之前。js 只有 var 的全局作用域和 函数作用域 ，ES6 为 js 带来了块级作用域。【相关推荐：javascript学习教程】

在这里插入图片描述

{
    var a = "?";
    let b = "⛳";
}
console.log(a);
console.log(b);

?
Uncaught ReferenceError: b is not defined

可以看到，我们使用 var 关键字在块中定义了变量 a，其实全局可以访问到，所以说，var声明的变量是全局的，但我们想让变量就在块中生效，出了块就访问不了了，这时就可以使用 ES6 新增的块级作用域关键字 let 来声明这个变量 a，当我再次访问，报错了，说 a is not defined ，a 没有定义

在这里插入图片描述

ES6 解构数组

如下所示，首先定义了一个函数，返回一个数组，在未使用解构数组前，调用数组并把返回值赋值给 temp ，然后打印 temp 数组，使用了解构数组后，直接定义一个数组变量，然后将函数返回值指向该变量，他会自动把第一项的值赋值给第一个数组变量，第二项赋值给第二个数组变量，以此类推，最后打印三个变量，看到没有问题

function breakfast() {
    return ['?', '?', '?'];
}
var temp = breakfast();
console.log(temp[0], temp[1], temp[2]);

let [a, b, c] = breakfast();
console.log(a, b, c);

? ? ?
? ? ?

在这里插入图片描述

ES6 解构对象

首先 breakfast 函数返回一个对象，使用解构对象，定义对象，键值对中键表示映射的实际对象的键名，值就是自定义变量，解构完成，会自动完成赋值，然后调用 breakfast 函数，返回对象，随后打印变量 a，b，c ，可以看到没问题

function breakfast() {
    return { a: '?', b: '?', c: '?' }
}
let { a: a, b: b, c: c } = breakfast();
console.log(a, b, c);

? ? ?

在这里插入图片描述

ES6 模板字符串

在使用模板字符串前，我们拼接字符串变量使用 +

使用 ES6 提供的模板字符串，首先使用 `` 把字符串包起来，当要使用变量时，使用 ${变量}

let a = '?',
    b = '?️';

let c = '今天吃' + a + '吃完看' + b;
console.log(c);

let d = `今天吃 ${a} 吃完看 ${b}`;
console.log(d);

今天吃?吃完看?️
今天吃 ? 吃完看 ?️

在这里插入图片描述

ES6 判断字符串里是否包含其他字符串

使用这些函数，可以轻松的完成是不是以什么开头的字符串，是不是以什么结尾的字符串，是不是包含了什么字符串等的操作

let str = '你好，我是小周 ❤️';
console.log(str.startsWith('你好'));
console.log(str.endsWith('❤️'));
console.log(str.endsWith('你好'));
console.log(str.includes(" "));

true
true
false
true

在这里插入图片描述

ES6 默认参数

ES6里，可以使用默认参数，当调用函数时，没有给参数进行赋值时，就使用设置的默认参数执行，当给参数赋值时，就会使用新赋的值执行，覆盖默认值，使用如下：

function say(str) {
    console.log(str);
}
function say1(str = '嘿嘿') {
    console.log(str);
}
say();
say1();
say1('❤️');

undefined
嘿嘿
❤️

在这里插入图片描述

ES6 展开操作符

使用 ... 可以展开元素，方便操作，使用如下：

let arr = ['❤️', '?', '?'];
console.log(arr);
console.log(...arr);
let brr = ['王子', ...arr];
console.log(brr);
console.log(...brr);

[ '❤️', '?', '?' ]
❤️ ? ?
[ '王子', '❤️', '?', '?' ]
王子 ❤️ ? ?

在这里插入图片描述

ES6 剩余操作符

... 操作符用在函数参数上，接收一个参数数组，使用如下：

function f1(a, b, ...c) {
    console.log(a, b, c);
    console.log(a, b, ...c);
}
f1('?','?','☃️','㊙️');

? ? [ '☃️', '㊙️' ]
? ? ☃️ ㊙️

在这里插入图片描述

ES6 函数名字

使用 .name 可以获取函数的名字，具体使用如下：

function f1() { }
console.log(f1.name);
let f2 = function () { };
console.log(f2.name);
let f3 = function f4() { };
console.log(f3.name);

f1
f2
f4

在这里插入图片描述

ES6 箭头函数

使用箭头函数可以让代码更简洁，但是也要注意箭头函数的局限性，以及箭头函数中自身没有 this，this指向父级

let f1 = a => a;

let f2 = (a, b) => {
    return a + b;
}

console.log(f1(10));
console.log(f2(10, 10));

10
20

在这里插入图片描述

ES6 对象表达式

使用es6的对象表达式，如果对象属性和值一样，可以省略值，函数写法可以省去function，用法如下：

let a = '㊙️';
let b = '☃️';

const obj = {
    a: a,
    b: b,
    say: function () {

    }
}

const es6obj = {
    a,
    b,
    say() {

    }
}

console.log(obj);
console.log(es6obj);

{ a: '㊙️', b: '☃️', say: [Function: say] }
{ a: '㊙️', b: '☃️', say: [Function: say] }

在这里插入图片描述

ES6 恒量

使用 const 关键字定义衡量，const 限制的是给衡量分配值的动作，并不限制衡量中的值，使用如下：

const app = ['☃️', '?'];
console.log(...app);
app.push('?');
console.log(...app);
app = 10;

可以看到当再次给衡量分配值就报错了

☃️ ?
☃️ ? ?
app = 10;
    ^
TypeError: Assignment to constant variable.

在这里插入图片描述

ES6 对象属性名

使用点定义对象属性时，如果属性名中含有空格字符，是不合法的，语法通不过的，使用 [属性名] 可以完美解决，并且不仅可以直接写明属性名，还可以使用变量来指定，具体使用如下：

let obj = {};
let a = 'little name';
obj.name = '王子';
// 使用点定义属性中间有空格是不合法的
// obj.little name = '小王子';
obj[a] = '小王子';
console.log(obj);

{ name: '王子', 'little name': '小王子' }

在这里插入图片描述

ES6 判断两个值是否相等

一些特殊值使用 === 或 == 进行比较的结果，可能不满足你的需求，这是你可以使用Object.is(第一个值，第二个值) 来进行判断，可能你就开心的笑了

console.log(NaN == NaN);
console.log(+0 == -0);
console.log(Object.is(NaN, NaN));
console.log(Object.is(+0, -0));

false
true
true
false

在这里插入图片描述

ES6 复制对象

使用 Object.assign() 可以把一个对象复制到另一个对象，使用如下：

let obj = {};
Object.assign(
    // 源
    obj,
    // 复制目标对象
    { a: '☃️' }
);
console.log(obj);

{ a: '☃️' }

在这里插入图片描述

ES6 设置对象的 prototype

使用es6可以设置对象的 prototype，使用如下：

let obj1 = {
    get() {
        return 1;
    }
}
let obj2 = {
    a: 10,
    get() {
        return 2;
    }
}
let test = Object.create(obj1);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
Object.setPrototypeOf(test, obj2);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);

1
true
2
true

在这里插入图片描述

ES6 proto

let obj1 = {
    get() {
        return 1;
    }
}
let obj2 = {
    a: 10,
    get() {
        return 2;
    }
}
let test = {
    __proto__: obj1
}
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
test.__proto__ = obj2;
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);

1
true
2
true

在这里插入图片描述

ES6 super

let obj1 = {
    get() {
        return 1;
    }
}
let test = {
    __proto__: obj1,
    get() {
        return super.get() + ' ☃️';
    }
}
console.log(test.get());

1 ☃️

在这里插入图片描述

ES6 生成迭代器

在学习前，先首写一个迭代器

function die(arr) {
    let i = 0;

    return {
        next() {
            let done = (i >= arr.length);
            let value = !done ? arr[i++] : undefined;

            return {
                value: value,
                done: done
            }
        }
    }
}
let arr = ['☃️', '?', '?'];

let dieArr = die(arr);
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());

{ value: '☃️', done: false }
{ value: '?', done: false }
{ value: '?', done: false }
{ value: undefined, done: true }

OK，看看简化的生成器

function* die(arr) {
    for (let i = 0; i < arr.length; i++) {
        yield arr[i];
    }
}
let test = die(['?','☃️']);
console.log(test.next());
console.log(test.next());
console.log(test.next());

{ value: '?', done: false }
{ value: '☃️', done: false }
{ value: undefined, done: true }

在这里插入图片描述

ES6 类

使用es6可以快速方便的构建类，好耶

class stu {
    constructor(name) {
        this.name = name;
    }
    say() {
        return this.name + '说奥里给';
    }
}
let xiaoming = new stu("小明");
console.log(xiaoming.say());

小明说奥里给

在这里插入图片描述

ES6 get set

定义get/set方法，用于获取或者修改类的属性

class stu {
    constructor(name) {
        this.name = name;
    }
    get() {
        return this.name;
    }
    set(newStr) {
        this.name = newStr;
    }
}
let xiaoming = new stu("小明");
console.log(xiaoming.get());
xiaoming.set("大明")
console.log(xiaoming.get());

小明
大明

在这里插入图片描述

ES6 static

使用static关键字修饰的方法，不用实例化对象也可以直接使用

class stu {
    static say(str) {
        console.log(str);
    }
}
stu.say("奥里给 静态方法");

奥里给 静态方法

在这里插入图片描述

ES6 extends

使用继承，可以减少代码冗余，比如：

class Person {
    constructor(name, bir) {
        this.name = name;
        this.bir = bir;
    }
    showInfo() {
        return '姓名：' + this.name + '生日：' + this.bir;
    }
}
class A extends Person {
    constructor(name, bir) {
        super(name, bir);
    }
}
let zhouql = new A("周棋洛", "2002-06-01");
// 周棋洛本身是没有showInfo方法的，是继承自Person的
console.log(zhouql.showInfo());

姓名：周棋洛生日：2002-06-01

在这里插入图片描述

ES6 Set

Set 集合，与数组不同，Set 集合中不允许有重复元素

// 创建Set集合
let food = new Set('??');
// 重复添加，只有一个能进去
food.add('?');
food.add('?');

console.log(food);
// 当前集合大小
console.log(food.size);
// 判断集合中是否存在某一元素
console.log(food.has('?'));
// 删除集合中某一元素
food.delete('?');
console.log(food);
// 循环遍历集合
food.forEach(f => {
    console.log(f);
});
// 清空集合
food.clear();
console.log(food);

Set(3) { '?', '?', '?' }
3
true
Set(2) { '?', '?' }
?
?
Set(0) {}

在这里插入图片描述

ES6 Map

Map结合存储键值对

let food = new Map();
let a = {}, b = function () { }, c = "name";

food.set(a, '?');
food.set(b, '?');
food.set(b, '?');
food.set(c, '米饭');

console.log(food);
console.log(food.size);
console.log(food.get(a));
food.delete(c);
console.log(food);
console.log(food.has(a));

food.forEach((v, k) => {
    console.log(`${k} + ${v}`);
});
food.clear();
console.log(food);

Map(3) { {} => '?', [Function: b] => '?', 'name' => '米饭' }
3
?
Map(2) { {} => '?', [Function: b] => '?' }
true
[object Object] + ?
function () { } + ?
Map(0) {}

在这里插入图片描述

ES6 模块化

使用模块化开发，es6可以方便的导入和导出一些内容，还有默认导出等等细节

let a = '?';
let f1 = function (str = '你丫的写参数') {
    console.log(str);
}
export { a, f1 };

import {a, f1} from './27模块测试.js';
console.log(a);
f1();
f1('知道了');

恭喜你，读完了本篇文章，能力 + 100 ，颜值 + 10，欢迎下次再来。先别走，如果觉得文章写的不错，还请点赞，收藏，关注帅气的博主啊，手动狗头，我会继续努力，原创不易，你的支持就是小周的动力

（学习视频分享：web前端开发、编程基础视频）

以上就是一文带你快速详解ES6，认识新增特性！的详细内容，转载自php中文网

点赞(214) 打赏

本文分类：js
本文标签：php
浏览次数：137 次浏览
发布日期：2022-08-25 09:50:08
本文链接：http://yinghuohong.cn/js/4652.html

上一篇 > JavaScript数组reduce()方法使用实例
下一篇 > JavaScript代理对象Proxy初体验简单的数据驱动视图

评论列表共有 0 条评论

暂无评论

一文带你快速详解ES6，认识新增特性！

理解ES6

ES6 解构数组

ES6 解构对象

ES6 模板字符串

ES6 判断字符串里是否包含其他字符串

ES6 默认参数

ES6 展开操作符

ES6 剩余操作符

ES6 函数名字

ES6 箭头函数

ES6 对象表达式

ES6 恒量

ES6 对象属性名

ES6 判断两个值是否相等

ES6 复制对象

ES6 设置对象的 prototype

ES6 proto

ES6 super

ES6 生成迭代器

ES6 类

ES6 get set

ES6 static

ES6 extends

ES6 Set

ES6 Map

ES6 模块化

PHP实现在线进制转换器，10进制，2、4、8、16、32进制转换

fileclude（文件包含漏洞及php://input、php://filter的使用）

PHP 对银行卡，手机号，真实姓名，身份证进行掩码加星号处理

悟空CRM11.0 PHP版本docker容器化部署全流程

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复