ES6 常用语法介绍

我们先来了解一些ES6语法。好多小伙伴就是不注重基础,感觉这有什么难的,多写点项目,记住写法就行了,后面自然就会了。其实这种想法是错误的,要想代码写法规范,bug少及排错能力强,必须把基础掌握牢固。

1、let 与 const

ES2015(ES6) 新增2个JavaScript 关键字: let 和 const
**
let 声明的变量只在所在的代码块中生效。举例说明如下:

    function getShopList() {
        let shopCount = 10;
        console.log('shopCount1', shopCount); // 正确打印出10
    }
    getShopList();
    console.log('shopCount2', shopCount); // 报错,即 shopCount not defined

在控制台打印得:


所以,let 声明的变量只在所在的代码块中生效。

const 声明一个只读的常量,一旦声明,常量的值就不能改变。举例说明如下:

    function getShopList() {
        const shopCount = 10;
        shopCount = 20; // 重新赋值,就会报错
        console.log('shopCount', shopCount);
    }
    getShopList();

在控制台打印得:

反思点:
爱动脑筋的小伙伴可能会问,如果用 const 声明初始化一个数组或者对象时,为何能改变它的值?

    function getShopList() {
        const shopCount = [10];
        shopCount.push(30);
        console.log('shopCount', shopCount);
    }
    getShopList();

在控制台打印得:


总结:
const 其实保证的不是变量的值不变,而是保证变量指向的内存地址所保存的数据不允许改变。但是,简单类型和复合类型保存值的方式是不一样的。对于简单类型(数值 number、字符串 string 、布尔值 boolean),它的值就保存在变量指向的那个内存地址,因此 const 声明的简单类型变量等同于常量;而复杂类型(对象 object,数组 array,函数 function),变量指向的内存地址其实是保存了一个指向实际数据的指针,指针是可以移动的,所以变量的值也是可以改变的。
其实上面原理不太理解的小伙伴,也不用太过纠结,我们只需要记住,常用的数值和字符串用const声明初始化后,是不可以重新赋值的;而数组和对象用const声明初始化后,允许改变其值就ok了!

面试题问答:
我们在面试笔试过程中,有时候会遇到考察 const 与 let 关键字的其他知识点?你们遇到过吗,一起继续往下看

b() // 明天预报有大雨!
console.log(a) // undefined

var a = '今天天气不错!'

function b() {
    console.log('明天预报有大雨!')
}

上面输出的结果想必大家都知道了,之所以 变量a和b函数能够打印出结果,这就是变量和函数提升的原因。通常情况下,可以理解为将声明的代码移动了顶部。但是更准确的说,js在生成执行环境时,有两个阶段。第一个阶段是创建阶段,js会将变量和函数提升,并在存到开辟好的内存中。所以在第二代码执行阶段,我们可以直接提前使用,而不会报错。

好了,了解完原因之后,我们一起看下面的面试题:

    function fn() {
        const k = 1;
        fn1();
        function fn1() {
            console.log('k1', k);  // k1 1
        }
    }
    const k = 2;
    fn();
    console.log('k2', k); // k2 2

通过以上的讲解,想必这道面试题对大家来说也是小菜一碟了。我也不多唠叨了!


2、解构赋值

我们之前肯定很常见下面赋值:

const girl = { name:"Tom" , age:18};
let boy = { name:"Jim" , age:24};

 
今天我们聊的是:将他们反过来赋值

const { name:"Tom" , age:18} = girl;
let { name:"Jim" , age:24} = boy;

这样的就可以拿到相应的name与age值了。上面的用法依然适用于数组。

解析赋值很多用于函数组件中,接下来,就让我们一起看看吧

//这是不使用解析赋值的写法
handlePersonInfo = (props) =>{
	return <div>你好!{props.name}</div>	
}


//使用解析赋值
handlePersonInfo = ({name}) =>{
	return <div>你好!{name}</div>	 
}

另外,

属性展开是JSX中的一个新特性
咱们尽量少写文字,多代码展示,这样大家能很快掌握并正确使用。先举个例子:

let props = {};
props.userList = a;
props.roleList = b;

const component = <Component {...props} />
//这里的属性展开就是传入对象的属性会被复制到组件内
//相当于 const component = <Component userList ={a} roleList ={b}>

这样写是不是方便很多了呢。

一、覆盖特性

既然它使用起来如此方便,有哪些注意点呢?
它能被多次使用,也可以和其它属性一起用。注意顺序很重要,后面的会覆盖掉前面的。

let props = { name:"Tom" };
const component = <Component name={"Jim"} {...props} />
console.log(conponent.props.name); // "Tom"

二、合并特性

在一些场合下,我们需要将两个对象数组合并成一个对象数组,如何使用属性展开来操作呢?

const a = { name:"Tome" };
const b = { age:18 };

const userInfo = { ...a, ...b};   //合并之后: userInfo = { name:"Tom", age:18}

三、分离特性

如果希望将某个值从对象数组中分离出来,嘿嘿,分离特性就可以帮到你了

const arrObject = { name:"Tom", age:18, school:"zhongshan" };

const { age, ...a } = arrObject;

//此时,a = { name:"Tom", school:"zhongshan" }

3、Promise 对象

它是异步编程的一种解决方案。我们在这不去过多的了解它的历史及刻板概念描述,比如Promise对象状态:pending、fulfilled、rejected 及它们之间如何相互转换的。
我们终极目的是帮助小伙伴们快速掌握并使用它,让学习不再有压力。

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

推荐阅读更多精彩内容

  • ES6语法跟babel: 一、首先我们来解释一下什么是ES? ES的全称是ECMAScript。1996 11 ,...
    Mooya_阅读 998评论 0 0
  • ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。...
    joker731阅读 268评论 0 0
  • let 和 const 命令 let 命令 只在let命令所在的代码有效 let命令,用来声明变量。它的用法类似于...
    镜轩夕照阅读 312评论 0 5
  • ES6阮一峰老师的书已经出到第三版了,从中受益匪浅,第二版读了三遍,在项目中常用到的一些语法和方法做些总结 字符串...
    任雨丶阅读 15,593评论 0 11
  • ES6常用语法 [TOC] let 它的作用类似于var,用来声明变量,但是所声明的变量,只在let命令所在的代码...
    NearZXH阅读 587评论 0 1