20分钟上手ES6，不会ES6好意思说自己会JS ？

news/2024/7/24 9:10:49 标签: javascript, es6, 前端

✍🏼作者：周棋洛，大二计算机学生
♉星座：金牛座
🏠主页：点击查看更多
🌐关键：ES6 javascript 前端

在这里插入图片描述

文章目录

  • 理解ES6
  • ES6 块级作用域 let
  • 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 模块化

理解ES6

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

这篇文章就是带大家学习ES6新增特性的，加油哦

在这里插入图片描述

ES6 块级作用域 let

首先，什么是作用域？作用域简单讲就是声明一个变量，这个变量的有效范围，在 let 没来之前。js 只有 var 的全局作用域和 函数作用域 ，ES6 为 js 带来了块级作用域

在这里插入图片描述

{
    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，欢迎下次再来。👋 先别走，如果觉得文章写的不错，还请点赞，收藏，关注帅气的博主啊，手动狗头，我会继续努力，原创不易，你的支持就是小周的动力 ☃️


http://www.niftyadmin.cn/n/5095977.html

相关文章

解决kong部署自定义插件报 helloworld plugin is enabled but not installed

解决kong部署自定义插件报 helloworld plugin is enabled but not installed

背景 我使用的是docker环境部署&#xff0c;使用的是自定义挂载plugins路径 -e "KONG_LUA_PACKAGE_PATH/plugins/?.lua" \ -v "/plugins:/plugins" \ -e "KONG_PLUGINSbundled,helloworld" \但是当我只需docker run的时候就报错 [error] 1#0:…
阅读更多...
FPGA基于1G/2.5G Ethernet PCS/PMA or SGMII实现 UDP 网络视频传输，提供工程和QT上位机源码加技术支持

FPGA基于1G/2.5G Ethernet PCS/PMA or SGMII实现 UDP 网络视频传输，提供工程和QT上位机源码加技术支持

目录 1、前言版本更新说明免责声明 2、我这里已有的以太网方案3、设计思路框架视频源选择OV5640摄像头配置及采集动态彩条UDP协议栈UDP视频数据组包UDP协议栈数据发送UDP协议栈数据缓冲IP地址、端口号的修改Tri Mode Ethernet MAC1G/2.5G Ethernet PCS/PMA or SGMIIQT上位机和源…
阅读更多...
你真的了解微服务架构吗？

你真的了解微服务架构吗？

目录 写在前面 从单体架构说起 聊到分布式架构 聊回到微服务架构 微服务架构的关键技术 写在前面 随着互联网行业的快速发展&#xff0c;对服务的要求也越来越高&#xff0c;服务架构早就从原来单体架构逐渐演变为现在流行的微服务架构。 微服务&#xff08;Micros…
阅读更多...
python 之enumerate()函数

python 之enumerate()函数

文章目录 enumerate() 是 Python 中的一个内置函数&#xff0c;它用于在遍历可迭代对象&#xff08;如列表、元组、字符串等&#xff09;时同时获取每个元素的索引和值。这个函数非常有用&#xff0c;因为它允许您在迭代过程中轻松地访问元素的索引&#xff0c;而不需要手动维护…
阅读更多...
rabbitmq 消费者报错 ListenerExecutionFailedException NullPointerException

rabbitmq 消费者报错 ListenerExecutionFailedException NullPointerException

报错信息&#xff1a; org.springframework.amqp.rabbit.support.ListenerExecutionFailedException: Listener method private void com.winkeytech.service.impl.DrawRecordServiceImpl.sendSmsToGuide(com.winkeytech.dto.DrawSms2GuideDTO) threw exception at org.spr…
阅读更多...
innovus：antenna设置

innovus：antenna设置

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口 innovus和ICC2还不一样&#xff0c;ICC2需要读antenna rule&#xff0c;innovus只看antenna lef&#xff0c;所以要检查一下lef里antenna信息全不全。 然后设置如下option: s…
阅读更多...
关于燃气智慧场站标准化建设的思考

关于燃气智慧场站标准化建设的思考

关键词&#xff1a;智慧燃气、智慧燃气场站、设备设施数字化管理、智慧燃气建设、智慧燃气平台 No.1 传统燃气场站存在的问题 随着自动控制技术与通信技术的发展&#xff0c;信息化建设在天然气行业越加受到重视。场站作为天然气行业的重要组成部分&#xff0c;智慧化场站建设…
阅读更多...
青藏高原连续日光诱导叶绿素荧光数据集（2000-2018）

青藏高原连续日光诱导叶绿素荧光数据集（2000-2018）

简介&#xff1a; 青藏高原连续日光诱导叶绿素荧光数据集&#xff08;2000-2018&#xff09;是通过MODIS各通道反射率和SIF观测数据建立神经网络模型&#xff0c;从而得到较高时空分辨率的SIF数据&#xff0c;常作为初级生产力的参考。前言 – 人工智能教程 源数据范围为全球&…
阅读更多...
最新文章

Copyright @ 2022~2023