es6基础知识2

1. 块作用域

作用域指的是变量的作用范围,js本身具有了全局作用域和函数作用域,es6中新增了块作用域。块作用域可以理解为由{}包含的代码所产生的作用范围

es6中还新增了两种变量声明方式let和const,原来的var不支持块作用域

var与let的区别
var支持变量声明预解析,不支持块作用域,允许重复声明
let不支持变量声明预解析,支持块作用域,不允许重复声明

{
    var a = 1;  //var 不支持 {}
    let b = 2;
    const c = 3;
}

console.log(a);
console.log(b);
console.log(c);

const不支持变量声明预解析,支持块作用域,不允许重复声明,并且是一个常量(值一旦确认,不允许修改),同时声明常量必需复制,不允许声明后再赋值。

2. 解构赋值

解构赋值的含义是允许按照一定的模式从数组或者对象中提取值,并对变量进行赋值。

2.1 数组解构

数组解构的写法:

let arr = [1, 2, 3];

let [a, b, c] = arr; //提取数组中的值,并一一赋值给a,b,c

console.log(a, b, c); //1 2 3

上面这种写法等价于:

let arr = [1, 2, 3];


let a = arr[0];
let b = arr[1];
let c = arr[2];

console.log(a, b, c);//1 2 3

强调一点的是,使用数组解构需要值一一对应,比如说上面的那个例子,如果只是想把1,3赋值给a,b,那么应该这样写[a, , c] = arr

2.2 对象解构

对象解构的写法:

let { game, level } = { game: "bird", level: "king" };  // 左侧中变量的名称必须是右侧对象中存在的key,解构的顺序不需要对应

console.log(game, level);

对象解构需要注意变量中的名称需要和右边对象的键值(key值)对应,但是不要求顺序上对应。

有时候,不想用对象的key值作为变量名,这个时候可以在左侧给变量取一个别名

let  {left: L, top: T} = {left: 100, top: 200};
console.log(L, T);//100 200

// 这段代码就相当于
let obj = {left: 100, top: 200};

let L = obj.left;
let T = obj.top;

2.3 多重解构

一个简单的例子:

let { scores: [english, math], year} = {scores: [99, 98], 2019}

// 这样的写法相当于:
let english = 99;
let math = 98;
let year= 2019;

3. 扩展运算符

扩展运算符的含义是将数组或者对象转化为参数序列,可以理解为将数组外面的[]和对象外面的{}去掉,然后将数组或者对象转化为,分隔的参数化序列

// 解构赋值可以这样来理解
['a‘,'b','c'] => 'a','b','c'

{left:100, top:200} => left: 100, top: 200

解构赋值的表示法是...,在一个对象或者数组前面加上...代表对其进行解构

let arr = [1, 3, 4]

// ...arr表示 1,3 4

构赋值在一些函数的使用和对象、数组的合并方面非常好用,比如说想求得一个数组的最大值:

let arr = [1, 2, 3, 4, 5];

// 没有解构赋值的化可能需要这么做
let max = Math.max(arr[0], arr[1], arr[2], arr[3], arr[4]);

// 有了解构赋值,就可以这样做:
let max = Math.max(...arr)

使用解构赋值方便进行数组的合并

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2]; //arr3 = [1, 2, 3, 4, 5, 6]

包括对象的合并:

let obj1 = {left:100, top: 200};
let obj2 = {width: 200, height: 200};

let obj3= {
    ...obj1,
    ...obj2
};

4.模板字符串

模板字符串是es6新增的一种字符串表示法,区别于之前的或者便是字符串,模板字符串使用反引号`表示

模板字符串有两个主要的作用,一是保持字符串格式,二是变量表达式解析:

// 保持字符串的格式:
var str = `

    

    ${1+1}
    模板字符串

`; 

console.log(str);

//变量表达式解析
let score = 100

// 打印分数的话以前可能这么写:
console.log('your score is ' + score);
// 现在可以这样写:
console.log(`your score is ${score}`)

5. 对象拓展

在es6中,对于对象的拓展主要是对象简介表达式和属性名表达式。对象简介表达式指的是当对象的key与对应的属性所引用的变量或函数同名的时候,可以简写为一个;属性名表达式指的是对象的属性名可以接受表达式作为key,表达式计算的结果作为最终的key

简介表达式举例:

var name = 'john';
var score = function () {
    return 100
}

// 当对象是下面这种形式的时候
var obj = {
    name: name,
    score: score
}

// 就可以简写为
var obj = {
    name,
    score
}

属性名表达式举例:

在es6之前,对象的属性名只能是字符串,在es6中增加了属性名表达式,也就是说通过[]符号中的表达式计算出最终的值来作为属性名,满足了一些情况动态变化属性名的需求。

// 定义一个变量
var abc = 'name'

var obj1 = {
    abc: 'something',
    [abc]: 'john'
}

// obj1对象相当于:
var obj2 = {
    abc: 'something',
    name: 'john'
}
属性名表达式

在使用属性名表达式进行访问的时候,一定得注意obj1["abc"]obj1[abc]是不同的,第一种是正常访问对象的属性,第二种是属性名表达式,需要先计算出真正的属性名然后在访问。

注意访问上的区别

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

推荐阅读更多精彩内容