文档章节

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

杭城小刘
 杭城小刘
发布于 2017/04/27 10:24
字数 573
阅读 13
收藏 0
点赞 0
评论 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
博文 108
码字总数 47960
作品 0
杭州
iOS工程师
React Native 报错大全

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

大仁孙 ⋅ 2016/12/07 ⋅ 0

聊聊柯里化

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

LeuisKen ⋅ 2017/11/02 ⋅ 0

如何在ES5与ES6环境下处理函数默认参数

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

贾顺名 ⋅ 05/14 ⋅ 0

React Native babel编译异常问题

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

熊建刚 ⋅ 05/19 ⋅ 0

一个后端的前端学习之旅——1.决定学什么

年末学点新东西,后端的东西写久了考虑学点前端的东西。 首先考虑选择用什么,公司的前端同学给我了两个链接 es6 babel,大体看了下es6是下一波js规范,出了一些js的新语法,解决了一些坑(肯...

D咄咄 ⋅ 2017/11/29 ⋅ 0

webpack 1——核心概念的理解

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

AdityaSui ⋅ 05/17 ⋅ 0

一个后端的前端学习之旅——1.决定学什么

年末学点新东西,后端的东西写久了考虑学点前端的东西。 首先考虑选择用什么,公司的前端同学给我了两个链接 es6 babel,大体看了下es6是下一波js规范,出了一些js的新语法,解决了一些坑(肯...

duoduo3_69 ⋅ 2016/02/03 ⋅ 1

从ES6重新认识JavaScript设计模式(二): 工厂模式

1 什么是工厂模式? 工厂模式是用来创建对象的一种最常用的设计模式。我们不暴露创建对象的具体逻辑,而是将将逻辑封装在一个函数中,那么这个函数就可以被视为一个工厂。工厂模式根据抽象程度...

Lee_tanghui ⋅ 04/05 ⋅ 0

【探秘ES6】系列专栏(二):迭代器和for-of循环

ES6作为新一代JavaScript标准,即将与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系...

一配 ⋅ 2015/10/22 ⋅ 0

前端学习笔记!

作为一个前端新人,看了很多关于前端的博客,觉得有必要去记录点知识点和自己的总结,所以在工作之余写了这篇文章,该博客有引用到其他文章的内容,纯属学习,在此膜拜一下各位前端大大。 一...

黑人tao ⋅ 2017/02/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

思路分析 如何通过反射 给 bean entity 对象 的List 集合属性赋值?

其实 这块 大家 去 看 springmvc 源码 肯定可以找到实现办法。 因为 spirngmvc 的方法 是可以 为 对象 参数里面的 list 属性赋值的。 我也没有看 具体的 mvc 源码实现,我这里只是 写一个 简...

之渊 ⋅ 31分钟前 ⋅ 0

vim使用手册--配对括号的查找

1、把光标放在标记有(、[或{处。 2、按%字符 3、此时光标的位置应当在配对的括号处 4、再次按%就可以跳回配对的第一个括号处。

dragon_tech ⋅ 34分钟前 ⋅ 0

c++ 、object-c printf,%02X和%x有什么区别 ?

%x即按十六进制输出,英文字母小写,右对齐。 %02X有以下变化:英文字母变大写,如果输出字符不足两位的,输出两位宽度,右对齐,空的一位补0。超过两位的,全部输出。 如果不用 %02x 会出现...

yizhichao ⋅ 39分钟前 ⋅ 0

Spring源码解析(七)——实例创建(中)

前言 上一节讲到了,Spring 会根据实例的作用域执行不同的创建逻辑,分别是 Singleton、Prototype、其他 Scope,其中 Singleton 会调用 getSingleton 从缓存中获取,缓存中没有才会创建实例;...

MarvelCode ⋅ 40分钟前 ⋅ 0

Thrift RPC实战(六) spring集成thrift

1.服务端设置 对泛型Thrift Service的支持, 通过采用spring配置以及反射的方式来实现.对于一个服务提供者来说,需要提供端口,接口以及接口实现类,因此在接口中spring配置文件中配置如下 <!...

lemonLove ⋅ 42分钟前 ⋅ 0

oracle11g自动分区使用

为什么使用自动分区? 在oracle11g之前,oracle是不支持自动分区功能的,这就可能导致我们系统在运行一段时间之后,就需要看看分区是否创建或者写触发器进行创建分区,否则就会导致数据无法入...

strict_nerd ⋅ 53分钟前 ⋅ 0

Spring mvc ViewResolver视图解析器实现机制

概要 我们在controller里面经常这样return一个ModelAndView。 return new ModelAndView("userList", "users", userList); DispatcherServlet 靠 ViewResolver 把 userList 解析为 /WEB-INF......

轨迹_ ⋅ 今天 ⋅ 0

策略模式

1.策略模式 策略模式是同一个行为的不同处理办法。策略模式和简单工厂模式的区别:1.策略模式主要是方法的执行方式,工厂模式要获取的对象。两者的侧重点不同。 ...

Cobbage ⋅ 今天 ⋅ 0

行政区划代码转为字典形式

原数据为: http://www.mca.gov.cn/article/sj/xzqh/2018/201804-12/201804-06041553.html 手动替换了一下格式,并使用下面的代码处理. # 输入格式s = """110000:北京市110101:东城区1101...

漫步海边小路 ⋅ 今天 ⋅ 0

android apk 签名

创建key,需要用到keytool.exe (位于C:\Program Files\Java\jdk1.6.0_10\bin目录下),使用产生的key对apk签名用到的是jarsigner.exe (位于C:\Program Files\Java\jdk1.6.0_10\bin目录下),把...

国仔饼 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部