就读书籍:
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 内容安全策略 eval
、new 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 结构
-
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()
的行为。
遇到0xD800
到0xDFFF
之间的单个码点,
或者不存在的配对形式,
它会返回转义字符串,留给应用自己决定下一步的处理。
解构函数,别名的应用
trim
方法去掉首尾空格
模板字符串(template string)
插入值`${ }`
模板嵌套
**模板编译:**这个好复杂,表示看不太懂
类似于 EJS (Embedded JavaScript) 的模板引擎语法
编译: 看不太懂 直接用ejs了
标签模板 tagged template
重要应用,就是过滤 HTML 字符串,防止用户输入恶意内容。
就是多语言转换(国际化处理)
调用函数处理字符串?
休息了,今天就到这里 2024/8/6 20:09