文档章节

本文介绍一些ES6的新语法可将代码化繁为简

杭城小刘
 杭城小刘
发布于 2017/04/27 10:24
字数 573
阅读 13
收藏 0

废话不多说,直接上代码,看注释即可

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
/*
* ES6的一些好玩的东西
*/
//1、ES6提供了新的数据结构Set
let arr = [1,2,3];
let set = new Set(arr);
let newArr = Array.from(set);
console.log(newArr);
//2、Object.assign()是ES6提供的对象的拓展方法,用于对象的合并拷贝
let obj1 = {"name":"lbp"};
let obj2 = {"age":"22"};
let obj3 = Object.assign({},obj1,obj2);
console.log(obj3);
//3、map()。方法用于遍历数组,有返回值,可以对数组的每一项进行操作并生成一个新的数组。有时候可以代替for和forEach循环,简写代码
let arr3 = [1,2,3,4,5];
let newArr3 = arr3.map((k,v)=>k*10);
console.log(newArr3);
//4、filter()方法同样用于遍历数组,过滤数组,在每一项元素后面触发一个回调函数。通过判断,保留或者移除当前项,最后返回一个新的数组
let arr4 = [1,2,3,4,5,6];
let newArr4 = arr4.filter((k,v)=>k%2==0);
console.log(newArr4);
//5、some方法用于遍历数组,在每一项元素后面触发一个回调函数,只要一个满足条件就返回true,否则返回false,类似于 || .
let arr5 = [{result:true},{result:false}];
let newArr5 = arr5.some((k,v)=>k.result);
console.log(newArr5);
//6、every()。every方法用于遍历数组。在每一项元素后面触发一个回调函数,只要一个不满足条件就返回false,否则返回true。类似于 &&
let arr6 = [{result:true},{result:false}];
let newArr6 = arr6.every((k,v)=>k.result);
console.log(newArr6);
//7、~~运算符.~符号用在Javascript中有按位取反的作用,~~是取反二次,而位运算符的操作值要求是证书,其结果也是整数,所以经过位运算符的都会自动变成整数,可以巧妙的去掉小数部分,类似于ParseInt()
let a = 1.23;
let b = -1.23;
console.log(~~a);
console.log(~~b);
//8、||运算符。巧妙滴使用||运算符可以给变量设置默认值
let c = 1;
let d = c||2;
console.log(d);
//9、...运算符。...运算符是ES6中用于解析数组的方法,可以用于快速获取数组的参数
let [num1,...nums] = [1,2,3];
console.log(num1);
console.log(nums);
//10、三元运算符。可以简化if else的写法
let e = true,
f = '';
if (e) {
f = "man";
}else{
f = "woman";
}
//等同于
f = e?"man":"womn";
console.log(f);
</script>
</head>
<body>
</body>
</html>

本文转载自:http://www.jianshu.com/p/043fa8dacb68

共有 人打赏支持
杭城小刘
粉丝 14
博文 109
码字总数 54955
作品 0
杭州
iOS工程师
React Native 报错大全

class RN extends Component 修改为 const RN = React.createClass() ES6新语法下onPress会报错 ES6新语法下:TouchableOpacity里执行onPress会报错 可参考这篇文章,内部有说明 本人刚接触R...

大仁孙
2016/12/07
24
0
ES6由一道前端阿里面试题的思考

题目 注意其中的的设置的tiemout比的长,所以同步执行的话,先输出2。 调用后可执行,所以 返回Promise对象或者本身也是Promise 我试过 Promise.all方法,但是 输出的是 2 1 3 done [1,2,3],...

大灰狼的小绵羊哥哥
10/16
0
0
聊聊柯里化

仅以此文献给我的学弟 誅诺_弥 ,并将逐风者的祝福送给他: 英雄,愿你有一份无悔的爱情! 什么是柯里化 维基百科中有如下定义: 在计算机科学中,柯里化(英语:Currying),是把接受多个参...

LeuisKen
2017/11/02
0
0
[译]JavaScript ES6  让我们写得少,做得多

JavaScript ES6 带来了新的语法和新的强大功能,使您的代码更现代,更易读。它允许您编写更少的代码并执行更多操作。 ES6 向我们介绍了许多强大的功能,如箭头函数,模板字符串,对象结构,模...

桃翁
09/29
0
0
如何在ES5与ES6环境下处理函数默认参数

函数默认值是一个很提高鲁棒性的东西(就是让程序更健壮) MDN关于函数默认参数的描述:函数默认参数允许在没有值或被传入时使用默认形参。 ES5 使用逻辑或来实现 众所周知,在ES5版本中,并...

贾顺名
05/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

HTTP get、post 中请求json与map传参格式

import java.io.IOException;import java.net.URI;import java.net.URISyntaxException;import java.nio.charset.Charset;import java.util.ArrayList;import java.util.List;im......

寒风中的独狼
21分钟前
0
0
IDEA中tomcat启动慢 耗时10分钟

用idea中的tomcat以debug模式启动,会非常的慢,而正常启动没啥问题;原因是debug模式中View Breakpoints断点代码,断点的是jar包,而现在启动由于jar包发生变化,导致启动时一直处于等待中。...

GoodMarver
33分钟前
2
0
Linux学习-10月18(awk)

9.6/9.7 awk 一、awk简介   1. awk是一种编程语言,用于对文本和数据进行处理的   2. 具有强大的文本格式化能力   3. 利用命令awk,可以将一些文本整理成为我们想要的样子   4. 命令awk...

wxy丶
34分钟前
0
0
「ThinkPHP开发者周刊」第3期——官宣:5.1版本发布LTS版本

[ 本周读数 ] 70——还剩70天,PHP5.6年底不再提供支持 PHP5.6的安全支持将于2018年12月31日终止。即两个多月后,使用 PHP 5.6 版本的网站将不再收到安全漏洞或错误更新。 较新的 PHP7.0在今...

流年
42分钟前
1
0
Spring IOC 之 注册 BeanDefinition

获取 Document 对象后,会根据该对象和 Resource 资源对象调用 registerBeanDefinitions() 方法,开始注册 BeanDefinitions 首先调用 createBeanDefinitionDocumentReader() 方法实例化 Bean...

职业搬砖20年
47分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部