ES6学习笔记 – let、const和块及作用域

本站所有文章均为博主人工写作,绝无AI辅助成分,请放心参阅。

最近粗略看了一下ES6的一些特性,如果运用成熟,写JS的感觉将比ES5要愉悦很多。随着微信小程序开发量的增加,自己也觉得是时候拿起ES6了。买了一本阮一峰的《ES6标准入门》,从第二章开始慢慢看了起来。在自己的博客上也整理一些笔记,记录学习轨迹。

let 和 const 命令声明的变量,有严格的块级作用域限制,当前{}内声明的变量,在当前{}外无法使用;同一作用域下在变量声明之前,也不能使用;否则都会报错。另外,不允许重复声明同一变量。

for(let i=0 ; i<3; i++){
  let i="a";
  console.log(i); //输出三次a;在()内声明的i和在{}内声明的i并不在同一作用域内
}
console.log(i); //报错

数组解构赋值

let [a,b,c] = [1,2,3];
console.log(b); //2
 
let [d,e,f] = [1,2];
console.log(e); //2
console.log(f); //undefined;
 
let [g, [h,i]] = [1,[2,3]];
console.log(h); //2;模式匹配
 
let [j, ...k] = [1,2,3,4];
console.log(k); //[2,3,4];
let [l, ...m] = [1];
console.log(m); //[];尾部匹配

带默认值的

let [a="1", b] = [ ,3];
console.log(a); //1
 
let [c=d, d]=[]; //报错,因为b使用在了声明之前
let [c=d, d]=[1]; //不报错,因为没有执行c=d默认赋值

对象解构赋值

let {a , b} = {a: "aaa", b: "bbb"};
console.log(a); //"aaa"
 
let {a:b} = {a: "aaa", c: "bbb"};
console.log(b); //"aaa"
console.log(a); //error 此时a并没有被赋值,这里的a变成仅仅是匹配模式了
 
let {x=3} = {x:undefined}
console.log(x); //3
let {x=3} = {x:null}
console.log(x); //null 默认值生效的条件是赋值严格等于(===)undefined
 
let [a,b,c,d,e]="hello";
console.log(d); //"l" 字符串解构赋值,感觉挺实用
 
let {length : len}="hello";
console.log(len); //5 因为"hello"字符串对象有length属性,因此可以根据属性赋值

一些用途
直接交换值而不需要中间值或其他计算

[a,b]=[b,a];

不需要讲顺序的输入函数变量

function f({x,y,z}){
  ...
}
f({z:3, y:2, x:1});

快速提取对象、JSON值

let data={
  id: 10,
  name: "brain1981",
  age: 35,
  skill: ["JS", "PHP"]
};
let {name, skill:skillName} = data;
console.log(name); //"brain1981"
console.log(skillName); //["JS", "PHP"]

以上大致为《ES6标准入门》第二、三章学习心得,暂时略过了没有深入理解的例程和概念,一边看后面的章程一边再理解补充。

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/1869.html。百度和各类采集站皆不可信,搜索请谨慎鉴别。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以查看本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

2 关于 “ES6学习笔记 – let、const和块及作用域” 的评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注