JavaScript ECMAScript 6

块级作用域let
使用let声明的变量，只在块级作用域中有效，在块之外无法访问。
解构数组与对象

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

let [a, b, c] = breakfast();
console.log(a, b, c); // watermelon, burger, pizza

function breakfast() {
    return { a: 'watermelon', b: 'pizza', c: 'burger' }
}
let { a: a, b: b, c: c } = breakfast();
console.log(a, b, c); // watermelon, pizza, burger

模板字符串

let a = 'watermelon',
    b = 'movie';

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

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

判断字符串包含内容

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

默认参数

function say(str) {
    console.log(str);
}
function say1(str = '嘿嘿') {
    console.log(str);
}
say(); // undefined
say1(); // 嘿嘿
say1('heart'); // heart

展开操作符

let arr = ['heart', 'smile', 'love'];
console.log(arr); // ['heart', 'smile', 'love']
console.log(...arr); // heart, smile, love
let brr = ['王子', ...arr]; 
console.log(brr); // [王子,'heart', 'smile', 'love']
console.log(...brr); // 王子, heart, smile, love

function f1(a, b, ...c) {
    console.log(a, b, c);
    console.log(a, b, ...c);
}
f1('apple','rainbow','snowman','secreat');
// apple, rainbow, ["snowman", "secreat"]
// apple, raivbow, snoeman, secreat

函数名称

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

箭头函数
需要注意，箭头函数没有this

let f1 = a => a;

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

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

对象表达式
键值一致的时候可以省略值，函数写法可以省略function。

let a = 'rainbow';
let b = 'snowman';

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

    }
}

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

    }
}

console.log(obj); // { a: 'rainbow', b: 'snowman', say: [Function: say] }
console.log(es6obj); // { a: 'rainbow', b: 'snowman', say: [Function: say] }

常量
使用const关键字定义常量，限制的是给常量分配值的动作，但是不限制常量中的值。

const app = ['snowman', 'rainbow'];
console.log(...app); // snowman, rainbow
app.push('laugh');
console.log(...app); // snowman, rainbow, laugh
app = 10; // TypeError: Assignment to constant variable.

判断两个值是否相等
有些情况使用和=可能得到的结果不理想，可以使用Object.is()

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

复制对象

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

设置对象的prototype和proto

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

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

设置super

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

迭代器

// 迭代器
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 = ['snowman', 'laugh', 'rainbow'];

let dieArr = die(arr);
console.log(dieArr.next()); // { value: 'snowman', done: false }
console.log(dieArr.next()); // { value: 'laugh', done: false }
console.log(dieArr.next()); // { value: 'rainbow', done: false }
console.log(dieArr.next()); // { value: undefined, done: true }

// 简化迭代器
function* die(arr) {
    for (let i = 0; i < arr.length; i++) {
        yield arr[i];
    }
}
let test = die(['rainbow','snowman']);
console.log(test.next()); // { value: 'rainbow', done: false }
console.log(test.next()); // { value: 'snowman', done: false }
console.log(test.next()); // { value: undefined, done: true }

构建类，获取和修改类的属性

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

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()); // 大明

static
无需实例化对象也可以直接使用static修饰的方法。

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

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

set和map
set集合中不允许重复
map集合中存储键值对

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

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


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

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

console.log(food); // Map(3) { {} => 'apple', [Function: b] => 'pear', 'name' => '米饭' }
console.log(food.size); // 3
console.log(food.get(a)); // watermelon
food.delete(c);
console.log(food); // Map(2) { {} => 'apple', [Function: b] => 'pear'}
console.log(food.has(a)); // true

food.forEach((v, k) => {
    console.log(`${k} + ${v}`);
}); // [object Object] + apple   function () { } + pear
food.clear();
console.log(food); // Map(0) {}

模块化

// 27模块测试.js
let a = '🍉';
let f1 = function (str = '你丫的写参数') {
    console.log(str);
}
export { a, f1 };

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/871636.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

二进制安装php

二进制安装php

下载php二进制包&#xff1a; 官网地址&#xff1a;https://www.php.net/releases/ PHP: Releaseshttps://www.php.net/releases/在里边可以选择自己要下载的包进行下载&#xff1b; 下载完成后进行解压&#xff1a; tar xvzf php-7.3.12.tar.gz 解压后 进入目录进行预编…
阅读更多...
学习yolo+Java+opencv简单案例（三）

学习yolo+Java+opencv简单案例（三）

主要内容&#xff1a;车牌检测识别&#xff08;什么颜色的车牌&#xff0c;车牌号&#xff09; 模型作用&#xff1a;车牌检测&#xff0c;车牌识别 文章的最后附上我的源码地址。 学习还可以参考我前两篇博客&#xff1a; 学习yoloJavaopencv简单案例&#xff08;一&#xff0…
阅读更多...
Cobalt Strike 4.8 用户指南-第二节-用户界面

Cobalt Strike 4.8 用户指南-第二节-用户界面

2.1、概述 Cobalt Strike用户界面分为两部分。界面顶部显示会话或目标的可视化。界面底部显示与你交互的每个 Cobalt Strike 功能或会话的选项卡。可以单击这两个部分之间的区域并根据自己的喜好调整它们的大小。 # 2.2、工具栏 顶部的工具栏提供对常见 Cobalt Strike功能的快…
阅读更多...
C/C++实现蓝屏2.0

C/C++实现蓝屏2.0

&#x1f680;欢迎互三&#x1f449;&#xff1a;程序猿方梓燚 &#x1f48e;&#x1f48e; &#x1f680;关注博主&#xff0c;后期持续更新系列文章 &#x1f680;如果有错误感谢请大家批评指出&#xff0c;及时修改 &#x1f680;感谢大家点赞&#x1f44d;收藏⭐评论✍ 前…
阅读更多...
LeetCode合并两个有序链表

LeetCode合并两个有序链表

题目描述&#xff1a; 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4] 示例 2&#xff1a; 输入&#xff1a;l1 [], l2…
阅读更多...
chromedriver下载地址大全（包括124.*后）以及替换exe后仍显示版本不匹配的问题

chromedriver下载地址大全（包括124.*后）以及替换exe后仍显示版本不匹配的问题

Chrome for Testing availability CNPM Binaries Mirror 若已经更新了系统环境变量里的chromdriver路径下的exe&#xff0c;仍显示版本不匹配&#xff1a; 则在cmd界面输入 chromedriver 会跳出version verison与刚刚下载好的exe不匹配&#xff0c;则再输入&#xff1a; w…
阅读更多...
http连接未释放导致生产故障

http连接未释放导致生产故障

凌晨4点运维老大收到报警&#xff08;公司官网页面超时&#xff0c;上次故障因为运维修改nginx导致官网域名下某些接口不可用后&#xff0c;运维在2台nginx服务器上放了检测程序&#xff0c;检测官网页面&#xff09;&#xff0c;运维自己先看了看服务器相关配置&#xff0c;后…
阅读更多...
小区物业维修管理系统/小区居民报修系统

小区物业维修管理系统/小区居民报修系统

摘要 小区物业维修是物业公司的核心&#xff0c;是必不可少的一个部分。在物业公司的整个服务行业中&#xff0c;业主担负着最重要的角色。为满足如今日益复杂的管理需求&#xff0c;各类小区物业维修管理系统也在不断改进。本课题所设计的小区物业维修管理系统&#xff0c;使用…
阅读更多...
IPC进程间通信方式及网络通信

IPC进程间通信方式及网络通信

一、IPC进程间通信方式 1.共享内存&#xff08;最高效的进程间通信方式&#xff09; 其允许两个或多个进程共享一个给定的存储区&#xff0c;这一段存储区可以被两个或以上的进程映射至自己的地址空间中&#xff0c;一个进程写入共享内存的信息&#xff0c;可以被其他使用这个…
阅读更多...
“面试宝典：高频算法题目详解与总结”

“面试宝典：高频算法题目详解与总结”

干货分享&#xff0c;感谢您的阅读&#xff01; &#xff08;暂存篇---后续会删除&#xff0c;完整版和持续更新见高频面试题基本总结回顾&#xff08;含笔试高频算法整理&#xff09;&#xff09; 备注&#xff1a;引用请标注出处&#xff0c;同时存在的问题请在相关博客留言…
阅读更多...
每日掌握一个科研插图·2D密度图｜24-08-21

每日掌握一个科研插图·2D密度图｜24-08-21

小罗碎碎念 在统计学和数据可视化领域&#xff0c;探索两个定量变量之间的关系是一种常见的需求。为了更深入地理解这种关系&#xff0c;我们可以使用多种图形表示方法&#xff0c;这些方法在本质上是对传统图形的扩展和变体。 散点图&#xff1a;这是最基本的图形&#xff0c…
阅读更多...
图算法-贪心策略-最小生成树（prim)和最短路径(dijkstra)

图算法-贪心策略-最小生成树（prim)和最短路径(dijkstra)

参考来源&#xff1a;和感谢 1.代码随想录 (programmercarl.com) 2.【图-最小生成树-Prim(普里姆)算法和Kruskal(克鲁斯卡尔)算法】https://www.bilibili.com/video/BV1wG411z79G?vd_source0ddb24a02523448baa69b0b871ab50f7 3.【图-最短路径-Dijkstra(迪杰斯特拉)算法】ht…
阅读更多...
Vue3学习笔记之插槽

Vue3学习笔记之插槽

目录 前言 一、基础 (一) 默认插槽 (二) 具名插槽 (三) 作用域插槽 (四) 动态插槽 二、实战案例 前言 插槽&#xff08;Slots&#xff09;&#xff1f; 插槽可以实现父组件自定义内容传递给子组件展示&#xff0c;相当于一块画板&#xff0c;画板就是我们的子组件&…
阅读更多...
RabbitMQ发布订阅模式Publish/Subscribe详解

RabbitMQ发布订阅模式Publish/Subscribe详解

订阅模式Publish/Subscribe 基于API的方式1.使用AmqpAdmin定制消息发送组件2.消息发送者发送消息3.消息消费者接收消息 基于配置类的方式基于注解的方式总结 SpringBoot整合RabbitMQ中间件实现消息服务&#xff0c;主要围绕3个部分的工作进行展开&#xff1a;定制中间件、消息发…
阅读更多...
使用select

使用select

客户端 服务端 1 #include<myhead.h>2 3 #define SER_PORT 6666 //服务器端口4 #define SER_IP "127.0.0.1" //服务器ip5 6 7 int main(int argc, const char *argv[])8 {9 //创建套接字10 int sfdsocket(AF_INET,SOCK_STREAM,0);11 if(sfd-1)12 …
阅读更多...
开源大模型LLaMA架构介绍

开源大模型LLaMA架构介绍

大模型相关目录 大模型&#xff0c;包括部署微调prompt/Agent应用开发、知识库增强、数据库增强、知识图谱增强、自然语言处理、多模态等大模型应用开发内容 从0起步&#xff0c;扬帆起航。 swift与Internvl下的多模态大模型分布式微调指南&#xff08;附代码和数据&#xff…
阅读更多...
思科设备静态路由实验

思科设备静态路由实验

拓扑及需求 网络拓扑及 IP 编址如图所示&#xff1b;PC1 及 PC2 使用路由器模拟&#xff1b;在 R1、R2、R3 上配置静态路由&#xff0c;保证全网可达&#xff1b;在 R1、R3 上删掉上一步配置的静态路由&#xff0c;改用默认路由&#xff0c;仍然要求全网可达。 各设备具体配置…
阅读更多...
前端技巧——复杂表格在html当中的实现

前端技巧——复杂表格在html当中的实现

应用场景 有时候我们的表格比较复杂&#xff0c;表头可能到处割裂&#xff0c;我们还需要写代码去完成这个样式&#xff0c;所以学会在原生html处理复杂的表格还是比较重要的。 下面我们来看这一张图&#xff1a; 我们可以看到有些表头项的规格不太一样&#xff0c;有1*1 2*…
阅读更多...
Unity Protobuf3.21.12 GC 问题(反序列化)

Unity Protobuf3.21.12 GC 问题(反序列化)

背景&#xff1a;Unity接入的是 Google Protobuf 3.21.12 版本&#xff0c;排查下来反序列化过程中的一些GC点&#xff0c;处理了几个严重的&#xff0c;网上也有一些分析&#xff0c;这里就不一一展开&#xff0c;默认读者已经略知一二了。 如果下面有任何问题请评论区留言提…
阅读更多...
实现 FastCGI

实现 FastCGI

CGI的由来&#xff1a; 最早的 Web 服务器只能简单地响应浏览器发来的 HTTP 请求&#xff0c;并将存储在服务器上的 HTML 文件返回给浏 览器&#xff0c;也就是静态 html 文件&#xff0c;但是后期随着网站功能增多网站开发也越来越复杂&#xff0c;以至于出现动态技 术&…
阅读更多...
最新文章

Copyright @ 2022~2023