资讯专栏INFORMATION COLUMN

es6中有新意的特性

zhoutao / 1900人阅读

摘要:说起大家都很熟悉,有些新特性等高级浏览器已经实现,不用我们去编译了。今天我简单说下的一些特性,算是简单回顾,梳理下自己的知识体系。声明的常量即不能重复赋值也不能重复声明。如果和是同样的命名,可以缩写。

说起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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98907.html

相关文章

  • es6中有新意特性(2)

    摘要:定义父类白色白色定义子类继承红色之前的继承做法是通过原型链先指向父类的原型,然后把子类的构造函数指向定义的构造函数。这样原型链上就有了父类的方法,构造函数里面也会有父类的构造函数。 书接上回,昨天我们说了展开,展开有什么用呢? var arr1 = [a, b]; var arr2 = [c]; var arr3 = [d, e]; // ES5 的合并数组 arr1.concat(a...

    LiangJ 评论0 收藏0
  • 个人分享--web前端学习资源分享

    摘要:前言月份开始出没社区,现在差不多月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了一般来说,差不多到了转正的时候,会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客,博文推荐分享给大家。 1.前言 6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天我就...

    sherlock221 评论0 收藏0
  • 个人分享--web前端学习资源分享

    摘要:前言月份开始出没社区,现在差不多月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了一般来说,差不多到了转正的时候,会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客,博文推荐分享给大家。 1.前言 6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天我就...

    Ethan815 评论0 收藏0
  • ES6模块特性中,import时如何正确使用花括号'{ }'

    摘要:在之前,社区制定了一些模块加载方案,最主要的有和两种。而我们这里要说的是在使用语法引用模块时,如何正确使用。也就是在这种不使用来引用模块的情况下,模块时的命名是随意的,即如下三种引用命名都是正确的因为它总是会解析到中默认的。 在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模...

    neuSnail 评论0 收藏0
  • JavaScript异步编程终极演变

    摘要:在诞生以前,异步编程的方式大概有下面四种回调函数事件监听发布订阅对象将异步编程带入了一个全新的阶段,中的函数更是给出了异步编程的终极解决方案。这意味着,出错的代码与处理错误的代码,实现了时间和空间上的分离,这对于异步编程无疑是很重要的。 写在前面 有一个有趣的问题: 为什么Node.js约定回调函数的第一个参数必须是错误对象err(如果没有错误,该参数就是null)? 原因是执行回调函...

    whjin 评论0 收藏0

发表评论

0条评论

zhoutao

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<