ES6基础学习总结(1)

声明变量方式

  • let
  • const

在ES5用var来声明变量,但是var声明需要对作用域有一个严格的控制,否则会出现下面的这个例子:

var a = [];
for (var i = 0; i < 5 ; i++) {
  a[i] = function () {
    console.log(i)
  }
}
a[4]() // 5

为什么会有这个问题呢,首先“闭包”二字,何为闭包,通俗来说:闭包就是能够读取其他函数内部变量的函数。闭包概念
说完闭包来说一下上面那个例子,首先a[i]和a[i] ()是有区别的
a[i]不会执行函数,i不能被替换,代表的意思是:

a[i] = function () {console.log(i)} // 没有执行函数,只是定义了方法,知道log里面有i就得了,不用显示i是多少。

a[i] ()会执行函数, 代表的意思是:

a[i] = function () {console.log(i)}执行函数,不光知道是log里面有i,还要知道它是多少
a[1]() // 是1就是1

所以来解释解释为什么闭包会导致这个问题呢?
正常来说就是因为i是全局定义的变量只有这么一个i,在循环里,函数可以不执行但是i还是要循环相加的,所以最后在执行时,指向的都是这个i不管怎么输出都是一样的。
问题:
1.变量只有1一个,每次改变的都是一个
2.没有立即执行,损失了这次机会
解决方法
都知道问题所在了所以就应该知道解决方法:
方法1:let 命名变量

var a = [];
for (let i = 0; i < 5 ; i++) {
  a[i] = function () {
    console.log(i)
  }
}
a[4]() // 5

let命名变量只在代码块的范围中有效,所以每一次循环中的i都是不一样的。这么写就可以正常显示。
方法2:自执行函数

var a = [];
for (let i = 0; i < 5 ; i++) {
  a[i] = (function () {
    console.log(i)
  })(i)
}
a[4]() // 4

默认值

是个变量就可以给自己个默认值,这是ES6对变量的新的关爱
常用在function和解构赋值中

// function用法
function fn(x = 1, y = 2){
  return [x, y]
}
fn() // [1, 2]
fn(3,4) // [3,4]

解构赋值

首先要明白一个概念什么叫解构赋值,个人理解意思从字面上来说就是分解结构去赋值,其实在应用中也是这样的一个概念。

// es5中
var a = 1;
var b = 2;
var c = 3;
// es6中
let [a, b, c] = [1, 2, 3]

这种方式最明显的阐述了结构赋值的意义,当然这些只是其中的一部分。
想使用这个方法一定要记住最关键的一点
“=”左右两边的结构要相同,虽然不同也可能会成功...还是规范点好。
ES6这本书中就讲到了:数组,对象,字符串,数值,布尔、函数都可以结构赋值,每一种的结构赋值都各不相同。


数组:按下标确定内容

let [a, b, c] = [1, 2, 3]
a //1
b //2
c //3

特殊方法:(原理)
数组是特殊的对象

let arr = [1, 2 ,3]
let {0:fir, 1:sec, 2:last} = arr;
fir // 1
sec // 2
last //3

对象:变量名和属性名相同

let {a, b} = {a:'123', b:'321'}
a // '123'
b // '321'

此处在书里对对象的解构赋值提到了一点,如果对象的方式如下

let { a: b, c: d } = { a: 'aa', c: 'cc' }
// 真实含义
let{ a: 'aa', c: 'cc' }
// 解释一下就是如书上所说,其实解构赋值的步骤是:
// a:b , c:d
// b:'aa' , c:'cc'
//a:'aa', c:'cc'

书中也提到过一个特殊又常见的情况:此处引用一下书中的例子

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

可能突然一看感觉跟上面的例子很相像,但是这里又引出了一个新的观念,叫做模式。什么叫模式?个人理解就是对象的标志开头,不作为变量存储值,只作为一个标志告诉使用者,这里有这么个对象,里面的内容需要自己去获取。
当然既然作为标志也应该有“预览”功能告诉使用者这里面都有什么,书里也提供了专用方法

let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

关于默认值在对象的解构赋值中的用法可以参考下方引用的书中例子:
默认值引用的条件是 ===是undefined

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

字符串:

const [a, b, c, d] = 'tian';
a // "t"
b // "i"
c // "a"
d // "n"
// legth属性
let { length : len } = 'tian';
len // 4

布尔值/数值:
将布尔值/数值先转换成对象,然后使用toString()方法
注:null和undefined没有办法解构赋值

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

函数解构赋值:
终于又到了一个大货,方法很简单,只要记住一句话“11对应”
通过几个例子来解释一下

// 1.方法1
function fn(a, b){
  return a + b;
}
a // 3
b // 4
fn(3, 4) // 7
// 2.方法2
[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [3, 7]
// [1, 2] 1+2=3
// [3, 4] 3+4=7
// [3, 7]
// 3.默认值
//{}和不填内容都会使默认值生效

重要知识点
圆括号的使用规范——不能使用的3种情况
变量声明语句

let [(a)] = [1]// 错误

函数参数

function fn ( [(a)] ){ return a } // 错误

赋值语句

({a:b}) = {a: 'aa'} // 错误,a是一个“模式”

圆括号的使用规范——可以使用的情况
赋值语句

[ (a) ]  = [1] // 这个可以的原因是因为它[(a)]不是一定变量,这只是在赋值。
[(parseInt.prop)] = [1]// 原因如上

括号中没有模式

({ p: (d) } = {});

总结了那么多其实最主要还是想说它的用途,首先,每个东西的出现总会有它特定的含义,赋值结果的出现,方便啦我们以下几点:
1.交换变量值

let x = 1;
let y = 2;
[x, y] = [y, x];
  1. 获取函数返回值
数组
function fn() {
  return [1,2]
}
对象
function fn() {
  return {
    a:'123',
    b:'321'
}
}
  1. 函数传参
function fn([x, y, z]){}
fn([1, 2, 3])

4.获得json数据
let json = {
a:1,
b:'ok',
c:[111, 222]
}
let [a, b, c: num] = fn
5.输入模块的指定方法
常用加载单独模块方法

const { SourceMapConsumer, SourceNode } = require("source-map");
  1. 遍历结构
对于遍历结构
const map = new Map();
for ([index, val] of map) // 获取索引和内容
for (let [index] of map) // 获取索引
for (let [, val] of map) // 获取内容

没想到写了这么长,虽然很多都是书上有的,但是对于不爱翻书喜欢翻材料的童鞋来说还是很适合看的。有问题请下方评论留言~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354

推荐阅读更多精彩内容