运用javascript的小技能

1、Array.includes 与前提推断

平常我们推断或用 ||

// condition
function test(fruit) {
if (fruit == "apple" || fruit == "strawberry") {
console.log("red");
}
}


假如我们有更多生果

function test(fruit) {
const redFruits = ["apple", "strawberry", "cherry", "cranberries"]; if (redFruits.includes(fruit)) { console.log("red"); }
}

2、Set 与去重

ES6 供应了新的数据构造 Set。它类似于数组，然则成员的值都是唯一的，没有反复的值。Set 自身是一个组织函数，用来天生 Set 数据构造。

数组去重

const arr = [3, 5, 2, 2, 5, 5];
const unique = [...new Set(arr)];
// [3,5,2]


Array.from 要领能够将 Set 构造转为数组。我们能够特地编写运用一个去重的函数

function unique(array) {
return Array.from(new Set(array));
}
unique([1, 1, 2, 3]); // [1, 2, 3]


字符去重

let str = [...new Set("ababbc")].join("");
console.log(str);
// 'abc'


别的 Set 是云云壮大，因而运用 Set 能够很轻易地完成并集(Union)、交集(Intersect)和差集(Difference)。

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}
// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}
// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}


3、Map 与字典范例数据

平常罢了，Javascript 完成字典数据是基于 Object 对象。然则 Javascript 的对象的键只能是字符串。关于编程来讲有许多不方便。 ES6 供应了 Map 数据构造。它类似于 Object 对象，也是键值对的鸠合，然则“键”的局限不限于字符串，各种范例的值，字符串、数值、布尔值、数组、对象等等都能够看成键。

const resultMap = new Map()
.set(-1, {text:'小于',color:'yellow')
.set(0, {text:'即是',color:'black')
.set(1, {text:'大于',color:'green')
.set(null,{text:'没有物品',color:'red'})
let state = resultMap.get(null)
// {text:'没有物品',color:'red'}


Map 的遍历递次就是插进去递次

const map = new Map([["F", "no"], ["T", "yes"]]);
for (let key of map.keys) {
console.log(key);
}
// "F"
// "T"
for (let value of map.value()) {
console.log(value);
}
// "no"
// "yes"


4、函数式的体式格局处置惩罚数据

根据我的明白，函数式编程主意函数必需接收最少一个参数并返回一个值。所以一切的关于数据的操纵，都能够用函数式的体式格局处置惩罚。

假定我们有如许的需求，须要先把数组 foo 中的对象构造变动，然后从中挑选出一些相符前提的对象，而且把这些对象放进新数组 result 里。

let foo = [
{
ame: "Stark",
age: 21
},
{
ame: "Jarvis",
age: 20
},
{
ame: "Pepper",
age: 16
}
];
//我们愿望获得构造轻微差别，age大于16的对象：
let result = [
{
person: {
ame: "Stark",
age: 21
},
friends: []
},
{
person: {
ame: "Jarvis",
age: 20
},
friends: []
}
];

从直觉上我们很轻易写出如许的代码：

let result = [];
//偶然以至是一般的for轮回
foo.forEach(function(person){
if(person.age > 16){
let newItem = {
person: person,
friends: [];
};
result.push(newItem);
}
})


运用函数式的写法，能够文雅很多

let result = foo
.filter(person => person.age > 16)
.map(person => ({
person: person,
friends: []
}));


数组乞降

let foo = [1, 2, 3, 4, 5];
//不文雅
function sum(arr) {
let x = 0;
for (let i = 0; i x += arr[i];
}
return x;
}
sum(foo); // => 15
//文雅
foo.reduce((a, b) => a + b); // => 15


5、compose 与函数组合

以下代码称为组合 compose

const compose = function(f, g) {
return function(x) {
return f(g(x));
};
};


因为函数式编程大行其道，所以如今将会在 Javascript 代码看到大批的箭头()=>()=>()=>的代码。

ES6 版本 compose

const compose = (f, g) => x => f(g(x));


在 compose 的定义中， g 将先于 f 实行，因而就创建了一个从右到左的数据流。如许做的可读性远远高于嵌套一大堆的函数挪用.

我们挑选一些函数，让它们连系，天生一个极新的函数。

reverse 反转列表， head 取列表中的第一个元素;

const head = arr => arr[0];
const reverse = arr => [].concat(arr).reverse();
const last = compose(head, reverse);
last(["jumpkick", "roundhouse", "uppercut"]);
// "uppercut"


然则我们这个这个compose不够完美，只能处置惩罚两个函数参数。redux源码有个很完整的compose函数，我们自创一下。

function compose(...funcs){
if (funcs.length === 0){
return arg => arg
}
if (funcs.length === 1 ){
return funcs[0]
}
return funcs.reduce((a,b)=>(...args) => a(b(...args)))
}


有了这个函数，我们能够随便组合无数个函数。如今我们增添需求，组合出一个lastAndUpper函数，内容是先reverse 反转列表， head 取列表中的第一个元素, 末了toUpperCase大写。

const head = arr => arr[0];
const reverse = arr => [].concat(arr).reverse();
const toUpperCase = str => str.toUpperCase();
const last = compose(head, reverse);
const lastAndUpper = compose(toUpperCase, head, reverse,);
console.log(last(["jumpkick", "roundhouse", "uppercut"]));
// "uppercut"
console.log(lastAndUpper(["jumpkick", "roundhouse", "uppercut"]))
// "UPPERCUT"