ES6高级技巧(二)
Array.from
const cities = [
{ name: 'Milan', visited: 'no' },
{ name: 'Palermo', visited: 'yes' },
{ name: 'Genoa', visited: 'yes' },
{ name: 'Berlin', visited: 'no' },
{ name: 'Hamburg', visited: 'yes' },
{ name: 'New York', visited: 'yes' }
];
const cityNames = Array.from(cities, ({ name}) => name);
解构
cities.map(({name}) => name);
//给数组分组
const chunk=(arr,size)=>{
return Array.from({length:Math.ceil(arr.length/size)},(v,i)=>arr.slice(i*size,size*(i+1)))
};
console.log(chunk([1, 2, 3, 4, 45], 2)); //[ [ 1, 2 ], [ 3, 4 ], [ 45 ] ]
面向接口???
去重
对象的属性是唯一的
let tempList = [12, 3, 43, 5, 56, 34, 2, 1, 3, 4, 5];
Object.keys(tempList.reduce((acc, val) => (acc[val] = 0, acc), {})).map(Number);
... 对象操作
返回想要的对象(1)
const noPassword=({password,...rest})=>rest;
const user={
id:100,
name: 'Howard Moon',
password: 'password'
};
noPassword(user);
//{ id: 100, name: 'Howard Moon' }
删除某个属性(2)
const user={
id:100,
name: 'Howard Moon',
password: 'password'
};
const removeProperty=prop=>({[prop]:_,...rest})=>rest;
//输入第二个参数的某个属性去掉
const removePassword = removeProperty('password');
//第二个参数是一个对象
removePassword(user);
//{ id: 100, name: 'Howard Moon' }
(3) 交换位置
const orgenize=({password,...object})=>({...object,password});
console.log(orgenize(user));
将数组中的 VIP 用户余额加 10(就是增加一个对象替换原来的)
const users = [
{ username: "Kelly", isVIP: true, balance: 20 },
{ username: "Tom", isVIP: false, balance: 19 },
{ username: "Stephanie", isVIP: true, balance: 30 }
];
users.map(v => (
v.isVIP ? {...v, balance: v.balance + 10} : v
));
判断一串字符是否含有["a", "e", "o", "i", "u"]
const randomStr = "hdjrwqpi";
const arr = ["a", "e", "o", "i", "u"];
[...randomStr].some(v => arr.includes(v));
reduce 对于函数的处理
[x=>x*2,x=>x+x].reduce((acc, val) => val(acc), 10);
复杂点
const double=x=>x+x;
const triple=x=>3*x;
const pipe = (...functions) => input => functions.reduce((acc, val) => val(acc), input);
console.log(pipe(double,triple)(10));
reduce返回数组的一个新方法
[1,2,3,2,3,3,1,2].reduce((acc,val)=>(val==3&&[...acc,val],acc),[])
reduce 的新技能
const users = [
{ name: "Adam", age: 30, sex: "male" },
{ name: "Helen", age: 27, sex: "female" },
{ name: "Amy", age: 25, sex: "female" },
{ name: "Anthony", age: 23, sex: "male" },
];
//男女分组
users.reduce(([one, two], val) =>
val.sex == 'male' ? [[...one, val], two] : [one, [...two, val]]
, [[], []]
);
filter
let a='www.baidu.com/ss/sss/';
a.split('/').filter(Boolean);
数组取整
['1','2','3'].map(Number)
递归的压栈出栈
你往一个箱子里放些东西,这个动作叫做压栈
最后把东西从箱子里面拿出来叫做出栈
在实际业务中,压栈的过程就是不断调用的过程,出栈的过程就不断执行的过程
注意点
- 设置终止点
- 除了递归不要掺入其他代码
也就是基数条件和递归条件
练习
字符串倒序
const reverse(str)=>{
if(str.length<=1) return str;
return reverse(str.slice(1))+str[0];
}
一串字符串,是否有两个字符相等
const isPalindrome=(str)=>{
if(str.length) return true;
if(str.length==2) return str[0] == str[1];
if(str[0]==str.slice(-1)){
return isPalindrome(str.slice(1))
}
};
console.log(isPalindrome('aka'));
数组扁平化
const flatten = arr => arr.reduce((acc, val) => {
return acc.concat(Array.isArray(val) ? flatten(val) : val);
}, []);
接受一个对象,这个对象的值是偶数,让其想加
let obj = {
a: 1,
b: 2,
c: {d: 3},
e: {f: {g: 6}},
t: {f: {g: {f:10}}},
};
const objSum = obj => {
let sum = 0;
for (let key in obj) {
if (typeof obj[key] == 'object') {
sum += objSum(obj[key])
} else if (typeof obj[key] == 'number' && obj[key] % 2 == 0) {
sum += obj[key];
}
}
return sum
};
console.log(objSum(obj));
const reduceSum=obj=>
Object.values(obj).
reduce((acc,val)=>
typeof val=='object'?
acc+reduceSum(val):
acc+val,0);
尾递归(js好像没有优化不强求)
听大佬说v8没有对尾递归进行优化,所以知道就行了,不强求
//尾递归
function f(x){
return g(x)
}
//非尾递归
function f(x){
return g(x)+1
}
那尾递归和非尾递归有什么不一样
执行上下文栈的变化不一样尾调用函数执行时,虽然也调用了一个函数,但是因为原来的函数执行完毕,执行上下文会被弹出,执行上下文栈中相当于只多压入了一个执行上下文,然而非尾递归,就会创建多个执行上下文压入执行上下文栈
const factorial=n=>{
if(n=1) return n
return n*factorial(n-1)
}
把阶乘改成尾递归
const fact=(n,res=1)=>{
if(n=1) return res;
return fact(n-1,n*res)
}
####################################################################################################################################################################################.......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
ES6高级技巧(二)的更多相关文章
- React和ES6(二)ES6的类和ES7的property initializer
React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...
- ES6入门(二)
目录 ES6入门(二) es6之解构赋值 数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 圆括号问题 ES6入门(二) es6之解构赋值 数组的解构赋值 ...
- 用vue.js学习es6(二):let和const使用
一.运行及关闭运行: 在上一节中我们用shift+右击在C:\vue\es6文件夹中打开命令行使用:npm run dev,打开了我们的vue界面. 如果要关闭则在命令行中按住ctrl+C则可以关闭. ...
- 深入浅出ES6(二):迭代器和for-of循环
作者 Jason Orendorff github主页 https://github.com/jorendorff 我们如何遍历数组中的元素?20年前JavaScript刚萌生时,你可能这样实现数 ...
- JavaScript学习笔记 -- ES6学习(二) let 和const
ES6 中新增了两个命令: let 和const. let命令: let 用于声明变量,和var 类似,但是所声明的变量只在代码块中有效,不存在变量提升,有暂时性死区. 1.只在代码块中有效 和var ...
- ES6核心内容精讲--快速实践ES6(二)
Iterator和for...of 是什么: Iterator(遍历器)是专门用来控制如何遍历的对象,具有特殊的接口. 怎么用: Iterator(遍历器)对象带有next方法,每一次调用next方法 ...
- es6(二)
三 . 正则扩展: 1.构造函数的扩展 let regex = new Regex('xyz','i'); let regex2 = new Regex(/xyz/i);//test() 方法用于检测 ...
- 从零开始学 Web 之 ES6(二)ES5的一些扩展
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- es6 学习二 Generator
安装babel的拓展包(Polyfill) ,对Generator的转义 这是一个补完babel支持es6的拓展包,配置步骤为3个: 打开命令行键入 npm install --save-dev ba ...
随机推荐
- 活动任务出现bug
之前做的一个活动任务发现一个bug,是以前和离职同事一起对逻辑的时候没有考虑到的,配置活动的时候应该要先查询下,如果这个产品线上在这段时间已经配置了并且上线了,则不能在做活动处理了,否则就和前面的活动 ...
- 大规模定制模式之于MES的三点思考
大规模定制(Mass Custermization) ,其目标是大规模生产定制化产品,并且在效率.质量(一致性)等指标方面与大规模批量生产等齐. 这是一种理想或者追求,其提出的背景是目前越发普遍的多品 ...
- window配合虚拟机VMware搭建虚拟ubuntu服务器入坑集锦
1.VMware虚拟机和主机进行网络连接设置 https://jingyan.baidu.com/article/adc81513b86621f723bf7383.html 2.解决linux虚拟机与 ...
- linux部署django项目流程(全)
1.python3和python2共存配置 流程在下面网址中 https://www.cnblogs.com/vinic-xxm/p/11358894.html 2.安装依赖包 yum install ...
- 基于开源博客系统(mblog)搭建网站
基于开源博客系统(mblog)搭建网站 上一章讲了基于jpress部署的博客系统,这一章了解一下 mblog这个开源的基于springboot的博客系统,相比与jpress 的热度fork数量要少一些 ...
- ng-zorror-antd------Input输入框
使用 ng-zorror-antd 来美化界面,带着问题挖掘技术: 一:基本使用 效果图: 问题一:如何人为控制输入框长度,如上效果图,让一个输入框长,一个输入框短?(注意:该输入框是最简单的输入框, ...
- Vmware samba 搭建——Win10 共享
配置环境 Win10 Vmware 15 ubuntu 16.04 Vmware 设置 安装 sudo apt-get install samba # 安装samba sudo apt-get ins ...
- 朱石景 201671010457 团队项目评审&课程学习总结
项目 内容 这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/ ...
- 《MySQL性能优化篇》阅读笔记
建表的时候,不要用null赋默认值,如:字符串的设置'',数据类型的设为0,不要将null设为默认值. 在MySQL中没有 full [outer] join,用union代替 各种 JOIN SQL ...
- Kubernetes 资源对象
概述 我将它们简单的分类为以下几种资源对象: 类别 名称 资源对象 Pod.ReplicaSet.ReplicationController.Deployment.StatefulSet.Daemon ...