文档章节

本文介绍一些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
聊聊柯里化

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

LeuisKen
2017/11/02
0
0
如何在ES5与ES6环境下处理函数默认参数

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

贾顺名
05/14
0
0
React Native babel编译异常问题

最近以React Native技术开发App应用,搭建项目时遇到坑颇多,网上查找解决方法费时,费精力,总结一些问题,希望能对读者有所帮助。 我的个人博客 这次遇见的问题是babel编译ES6源码时,抛出...

熊建刚
05/19
0
0
webpack 1——核心概念的理解

引子 为什么要写这篇文章?因为今天掘金的早报有一篇关于 Webpack 的入门的文章,读完之后发现自己确实该学习一下 Webpack 了,所以有了这篇文章。 我对于 webpack 的了解仅限于在 vue-cli ...

AdityaSui
05/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

[雪峰磁针石博客]软件测试专家工具包1web测试

web测试 本章主要涉及功能测试、自动化测试(参考: 软件自动化测试初学者忠告) 、接口测试(参考:10分钟学会API测试)、跨浏览器测试、可访问性测试和可用性测试的测试工具列表。 安全测试工具...

python测试开发人工智能安全
今天
2
0
JS:异步 - 面试惨案

为什么会写这篇文章,很明显不符合我的性格的东西,原因是前段时间参与了一个面试,对于很多程序员来说,面试时候多么的鸦雀无声,事后心里就有多么的千军万马。去掉最开始毕业干了一年的Jav...

xmqywx
今天
2
0
Win10 64位系统,PHP 扩展 curl插件

执行:1. 拷贝php安装目录下,libeay32.dll、ssleay32.dll 、 libssh2.dll 到 C:\windows\system32 目录。2. 拷贝php/ext目录下, php_curl.dll 到 C:\windows\system32 目录; 3. p...

放飞E梦想O
今天
0
0
谈谈神秘的ES6——(五)解构赋值【对象篇】

上一节课我们了解了有关数组的解构赋值相关内容,这节课,我们接着,来讲讲对象的解构赋值。 解构不仅可以用于数组,还可以用于对象。 let { foo, bar } = { foo: "aaa", bar: "bbb" };fo...

JandenMa
今天
1
0
OSChina 周一乱弹 —— 有人要给本汪介绍妹子啦

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享水木年华的单曲《中学时代》@小小编辑 手机党少年们想听歌,请使劲儿戳(这里) @须臾时光:夏天还在做最后的挣扎,但是晚上...

小小编辑
今天
54
8

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部