美文网首页胡言乱语es6
es6中有新意的特性

es6中有新意的特性

作者: 魏三公子 | 来源:发表于2018-11-02 09:44 被阅读0次

说起es6大家都很熟悉,有些es6新特性chrome等高级浏览器已经实现,不用我们去编译了。今天我简单说下es6的一些特性,算是简单回顾,梳理下自己的知识体系。

1、声明变量有变化,不再傻傻分不清

声明变量有两种方法,let和const。 let用来声明变量,const用来声明常量。

什么是变量?变化的量。比如你的名字,公司地址。

什么是常量?永远不会变的东西。比如你的生日。

平时我们声明var的变量可以重复声明,但let声明的变量不能重复声明,但是它们都可以重复赋值。

const声明的常量即不能重复赋值也不能重复声明。

2、作用域定义有变化,让你随手画个圈

之前js的作用域是用function来定义的,一个function内是一个作用域。现在是通过{}来定义的,
一个花括号内是一个作用域。

//var声明的i
var arr=[];
for (var i=0; i<10; i++){
    arr[i]=function(){
        console.log(i);
    }
}
arr[6]();//var声明的i指向i的地址,所以是10

//var声明的i如果要得到6,需要用一个立即执行和闭包。把i给num,

//然后在function里面console.log(num)即可,每一个num都是一个新变量。
    var arr=[];
    for (var i=0; i<10; i++){
        arr[i]=(function(num){
             return function () {
            console.log(num);
        }
        })(i);
    }
arr[6]();

//let声明的i
var arr=[];
for (let i=0; i<10; i++){
//let声明的i在这个花括号内是一直存在的,到下次循环的时候i=i+1
    arr[i]=function(){
        console.log(i);
    }
}
arr[6]();//6

3、解构赋值二合一,省时省力好简洁

用人话来说就是左边和右边结构一样。

第一可以省一部分赋值代码,让代码看起来简洁。

let [a,b]=[1,2];
console.log(a); //1
console.log(b); //2

第二json简洁,提取方便。如果key和value是同样的命名,可以缩写。

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

4、有了字符串模板,远离+++拼接

let str="真好啊";
console.log("今天天气"+str+",心情也好!");
//现在可以写成
console.log(`今天天气${str},心情也好! `);

5、函数增加新特性,箭头函数省省省,rest参数略略略

函数里面加了一个箭头函数和rest参数

箭头函数可以极大的缩写我们的函数

如果参数只有一个,可以省略function();
如果有return 返回,可以省略{return };

//一个参数和返回

//以前
let show=function(r){
    return r;
}

//现在
let show=r=>r;

//两个参数和返回
let show=(a,b)=>{return a+b};

rest参数(...rest)顾名思义就是拿剩下的参数呗

function show(a,b,...arg){
    console.log(arg);
}
show(1,2,3,4,5);//[3,4,5]

rest参数还可以帮我们展开数组

let arr=[1,2,3];
console.log(...arr);

明天我们说数组,对象的继承,和promise


微信搜索“魏三公子”,欢迎关注

相关文章

  • es6中有新意的特性

    说起es6大家都很熟悉,有些es6新特性chrome等高级浏览器已经实现,不用我们去编译了。今天我简单说下es6的...

  • es6中有新意的特性(2)

    书接上回我们说了展开,展开有什么用呢? 可以看到展开后可以做合并和赋值。 6、数组有了新方法,遍筛累加很省劲儿。 ...

  • [ES6-新一代的javascript]

    8个ES6中的新特性 compat-table ES6新特性概览

  • ES6小结

    原文链接 es6中有很多特性,使javascript语法更加丰满,总结一波常用的es6知识点。 1.变量声明con...

  • 快速上手ES6

    es6中有很多特性,使javascript语法更加丰满,总结一波常用的es6知识点。 1.变量声明const和le...

  • 此中有新意

    释题: 此是这的意思,可以指什么?一本书,一篇文,一部电影,一帧风景,一幅画,一个见解,一道题的解法,一个...

  • 此中有新意

    今天是个阴雨天,连空气都是湿漉漉的,窗外深红的月季花羞羞答答,好像还坠着几滴泪花。 第一场考语文,凝视着今...

  • 此中有新意

    今天晚上,陪闺女写作业,她说作文太难写了,一个字写不出来,甚至还哭了,我一看作文题目《此中有新意》,这个题目确实有...

  • ES6核心特性

    摘要: 聊JS离不开ES6啊 原文:ES6核心特性 作者:ljianshu 前言 ES6 虽提供了许多新特性,但我...

  • ES6教程 从入门快速掌握ES6新特性 精讲(四) 一文看懂!

    ES6教程 从入门快速掌握ES6新特性 精讲(四) 一文看懂! 附:【ES6教程】快速掌握ES6新特性(一)[ht...

网友评论

    本文标题:es6中有新意的特性

    本文链接:https://www.haomeiwen.com/subject/wbdqxqtx.html