ECMAScript 6 入门 学习 日志&笔记 2024/8/6 13:59

就读书籍:

ECMAScript 6 入门

作者:阮一峰https://www.ruanyifeng.com/

个人理解笔记

{ } 块级 函数不能先用后声明 Let 优先函数表达

不可重复声明同一变量

{

let=function (){ }

}

不谈其他,只要在{ } 中即可 ,简单暴力理解

const 和 let 类似 ,指向对象 ,

简单理解:指向房子 可以加家具 不能换房

// 冻结对象 Object.freeze(obj); 把房子(obj)门关上
constantize(obj) 把房子里的所有门都关上 null 不注明会报错 还要检测是不是门
Object.keys(obj) 返回房子内部的物件名字
obj[ Object.keys(obj) ] 通过名字找到具体物品
函数的作用是确保一个对象及其所有嵌套的对象都被冻结,从而实现深层的不可变性。

变量声明方法

六种: let var import class const function

顶层变量: var function

++浏览器里面,顶层对象是window, Node 和 Web Worker 无 window。++

++浏览器和 Web Worker 里面,self指向顶层对象, Node 无self。++

++Node 里面,顶层对象是global,其他环境不支持。++

CSP 内容安全策略 evalnew Function 方法可能无法使用

解构赋值: 用于数组 [ ] and 对象 { } 键必须相同 键类似索引

写法: 模式匹配 两边模式相同

不是可遍历的结构 let [a,b,c] =1 错误

实用技巧

将现有对象的方法,赋值到某个变量。

VS好用的一个插件:A-super-comprehensive

古怪赋值方式 ( )内部包裹{ } 解构 语法合法 ( ) 防止 { } 被默认为块

({} = [true, false]);
({} = 'abc');
({} = []);

解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。

解构用途

//用途一 交换值

let x=1,y=2;

[x,y]=[y,x];

console.log(x,y);

//用途二 函数返回多个值

function f(){

return [1,2];

}

console.log(f());

let [a,b]=f(); //解构赋值

console.log(a,b);

//对象的解构赋值

function f1(){

return {

name:"网络",

ago:25

}

}

let {name,ago}=f1();//解构赋值

console.log(name,ago);

let {log}=console;//函数的解构赋值

//用途三 函数参数定义

//有序

function f2([h,v,n]){log(`Received: h={h}, v={v}, n=${n}`);}

f2([1,2,3]);

//无序

function f3({n,v,h}){log(`Received: h={h}, v={v}, n=${n}`);}

f3({h:1,n:2,v:3});

//提取json数据

let jsonData={

id:1,

namea:"网络",

age:25

}

let {id,namea,age}=jsonData;

log(`id={id},name={name},age=${age}`);

运行结果:

旧方法提取 JSON

const jsonString = '{"name": "John", "age": 30, "city": "New York"}';

const jsonObject = JSON.parse(jsonString);

// 访问对象属性

console.log(jsonObject.name);

// 输出:

John console.log(jsonObject['age']);

// 输出: 30

console.log(jsonObject.city);

用解构

const jsonString = '{"name": "John", "age": 30, "city": "New York"}';// JSON字符串

let {name,John,age,city}= JSON.parse(jsonString);// 解析JSON字符串

console.log(name,John,age,city);// 打印结果

const 也是可以的
const jsonString = '{"name": "John", "age": 30, "city": "New York"}';// JSON字符串

const {name,John,age,city}= JSON.parse(jsonString);// 解析JSON字符串

console.log(name,John,age,city);// 打印结果

用法五 函数参数的默认值

// 定义一个简化版的 jQuery.ajax 方法
jQuery.ajax = function (url, {
    // 默认配置项
    async = true,          // 是否异步,默认为 true
    beforeSend = function () {},  // 发送请求前的回调函数,默认为空函数
    cache = true,          // 是否启用缓存,默认为 true
    complete = function () {},  // 请求完成后的回调函数,默认为空函数
    crossDomain = false,   // 是否允许跨域,默认为 false
    global = true,         // 是否触发全局 AJAX 事件,默认为 true
    // ... 更多配置项
  } = {}) {
    // ... 执行具体的 AJAX 请求逻辑
  };

用法六 遍历 Map 结构

  1. Map 对象:

    • Map 是一种内置的 JavaScript 对象,它实现了键值对的集合,类似于对象,但键可以是任意类型的值(不仅仅是字符串或符号)。
    • Map 保证了键值对的插入顺序会被记住,这与普通的 JavaScript 对象不同,在普通对象中键值对的顺序是不确定的。
    • Map 提供了一些方法,如 set, get, has, delete, 和 clear 用于操作键值对。

方法七输入模块的指定方法

ES6 对字符的 Unicode 表示法做出了改进,只要将码点放入大括号,就能正确解读该字符。

遍历器for.... of 遍历器最大的优点是可以识别大于0xFFFF的码点,传统的for循环无法识别这样的码点。

JSON 不允许直接包含正则表达式。

JSON 格式允许字符串里面直接使用 U+2028(行分隔符)和 U+2029(段分隔符)。这样一来,服务器输出的 JSON 被JSON.parse解析,就有可能直接报错。

  • 字符串 json 包含了两个特殊字符 \u2028\u2029,分别代表行分隔符和段落分隔符。
  • 这些字符在 JSON 格式中是无效的,会导致解析错误。
  • 实验失败没有报错QAQ

JSON.stringify()的行为。

遇到0xD8000xDFFF之间的单个码点,

或者不存在的配对形式,

它会返回转义字符串,留给应用自己决定下一步的处理。

解构函数,别名的应用

trim方法去掉首尾空格

模板字符串(template string)

插入值`${ }`

模板嵌套

**模板编译:**这个好复杂,表示看不太懂

类似于 EJS (Embedded JavaScript) 的模板引擎语法

编译: 看不太懂 直接用ejs了

ejs基本语法理解和运用 - 不会代码的前端 - 博客园

标签模板 tagged template

重要应用,就是过滤 HTML 字符串,防止用户输入恶意内容。

就是多语言转换(国际化处理)

调用函数处理字符串?

休息了,今天就到这里 2024/8/6 20:09

相关推荐
优思学院1 小时前
优思学院|如何从零开始自己学习六西格玛?
大数据·运维·服务器·学习·六西格玛黑带·cssbb
LN花开富贵1 小时前
stm32g431rbt6芯片中VREF+是什么?在电路中怎么设计?
笔记·stm32·单片机·嵌入式硬件·学习
怀九日1 小时前
C++(学习)2024.9.18
开发语言·c++·学习·面向对象·引用·
一道秘制的小菜1 小时前
C++第七节课 运算符重载
服务器·开发语言·c++·学习·算法
qq21084629531 小时前
【stm32笔记】使用rtt-studio与stm32CubeMx联合创建项目
笔记·stm32·嵌入式硬件
极术社区2 小时前
ResNeXt学习
开发语言·学习·计算机视觉·php
liangbm32 小时前
MATLAB系列07:输入/输入函数
开发语言·数据库·笔记·matlab·函数·自定义函数·matlab函数
徳一3 小时前
【pytorch学习笔记,利用Anaconda安装pytorch和paddle深度学习环境+pycharm安装---免额外安装CUDA和cudnn】
pytorch·深度学习·学习
酒饮微醉-3 小时前
论文阅读--Planning-oriented Autonomous Driving(一)
论文阅读·笔记·学习·自动驾驶
GoppViper3 小时前
golang学习笔记28——golang中实现多态与面向对象
笔记·后端·学习·golang·多态·面向对象