视频剪辑软件 CoreJava Python入门到实战 国外镜像 Nodepad docker安装部署 劝酒文化 Jetbains全家桶 php regex multithreading merge Avalon 网赚视频教程 jquery第一个子元素 css获取最后一个元素 js获取焦点事件 rxjava线程切换 oracle查看数据库 html好看的字体 matlab自然对数 matlab输入参数太多 判断bigdecimal是否为空 excel加减混合求和 docker导入镜像 python入门 mysql 选择数据库 python随机函数 python学习入门 python编程教程 python对象 python函数大全 java查找字符串 linuxsudo命令 linux硬盘 莫愁脚本 迷宫解锁 幽城幻剑录五内 rewritebase 高效能人士的七个习惯下载
当前位置: 首页 > 学习教程  > 编程语言

ES6实用属性--解放双手上篇

2020/12/5 11:01:30 文章标签:

ES6 S6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。ES6已经不再是JavaScript最新的标准,但是它已经广泛用于编程实践中。如果你还没用过ES6,现在还不算太晚… 我心中的神仙们 我心中的神…

ES6

S6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。ES6已经不再是JavaScript最新的标准,但是它已经广泛用于编程实践中。如果你还没用过ES6,现在还不算太晚…

我心中的神仙们

我心中的神仙们,排名不分先后:

  • 函数参数默认值
  • 模板字符串
  • 解构赋值
  • …运算符
  • 箭头函数
  • Promise
  • Let与Const
  • 模块化
  • 对象属性简写

1. 函数参数默认值

如果不使用ES6
为函数的参数设置默认值:
即使不传值,也能直接输出sum为6
在这里插入图片描述

但是如果我们传参为0,或者其他能转变为0的值呢?
在这里插入图片描述
这个时候我们就识别不到了
如果使用ES6
在这里插入图片描述
如果这里利用ES6就不会出现这个问题

2. 模板字符串

不使用ES6时
需要用加号拼接,像下面这样
在这里插入图片描述

利用ES6
利用``和${变量}的组合
在这里插入图片描述
这样也能实现和上面一样的效果

3. 解构赋值

不使用ES6时
【以变量赋值为例,需要一个个赋值】

var a=1,b=0,c=2;

利用ES6,当然这些在对象中同样适用

var [a,b,c]=[1,0,2];

4. …运算符

ES6中的…扩展运算符( spread )可以实现很多功能,这里简单的描述一下基本用法

扩展运算符的应用

  1. 合并数组
	let arr1=[1,2,3];
	let arr2=[4,5]
	let arr3=[...arr1,...arr2];
	console.log(arrr3)

11
和contact方法差不多要注意这里是浅拷贝;
2. 数组的截取插入

        var a1 = [12, 15, 16];
        var a2 = [18, 16, 19];

        a1.splice(1, 0, a2[0], a2[1], a2[2]);
        console.log(a1);
        console.log([12, ...a2, 15, 16]);

在这里插入图片描述
和splice方法达成了一样的效果
3. 与解构赋值结合

const arr = [1,2,3,4,5]

const [first,...rest] = arr;

这里我们发现first赋值为1,rest赋值为数组
在这里插入图片描述
极大的简化了变量的声明,但是要注意的是如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错像下面这样
在这里插入图片描述

  1. 将字符串变成数组
    在这里插入图片描述

可以避免我们记不住API,而且对于split,他还有一个重要的好处,那就是能够正确识别 32 位的 Unicode 字符。由于用的比较少,我们这里就举例说明。需要的可以去官方文档查看

  1. 数组的拷贝
	var arr=[13,23,24]
	//方法一
	var arr1=[...arr]
	//方法二
	var [arr2]=[arr]
	//方法三
	var [...arr3]=[arr]
	

在这里插入图片描述

5.箭头函数

不使用ES6时

	let sum=function Fn(aa,bb){
		return aa+bb
	}

当使用了ES6箭头函数

	let sum=(aa,bb)=>aa+bb

在这里插入图片描述
他们能起到一样的效果
当然箭头函数还有很多优点,上面后边的没有用大括号包起来是因为只有一条语句,如果只有一个参数前面的()也可以省略
要注意的是箭头函数的this
箭头函数与普通函数最大的不同就是this,前面已经讲过了,普通函数中this是根据上下文确定的。而在箭头函数中,没有this绑定。
箭头函数里面是没有this这个概念的 他的this是指向于父级执行上下文的this


上篇到这里差不多就结束啦,预知后续如何,请听下回分解。。。。


本文链接: http://www.dtmao.cc/news_show_450384.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?