(七)前端javascript中的函数式编程技巧2

函数式编程范式的技巧

• 迭代算法-可以替代for in

let count = 10;

while (count--) {
   console.log(count);
}

• 斐波拉契的实现

 function fabci(n) {
   console.log("🚀 ~ fabci ~ n:", n);
   if (n === 1 || n === 2) {
     return 1;
   }
   return fabci(n - 1) + fabci(n - 2);
 }

 const result = fabci(10);
 console.log(result);

• 不使用递归，实现斐波那契数列

function getFb(num) {
  let n1 = 1,
    n2 = 1,
    n3;

  for (let i = 3; i <= num; i++) {
    n3 = n1 + n2;
    console.log(n3);
    n1 = n2;
    n2 = n3;
  }
  return n3;
}

const fb1 = getFb(10);
console.log("🚀 ~ fb1:", fb1); //55

• 查询最小索引

//随机10个数据，范围在20,100之间，不重复，直接声明一个数组
const data = [21, 23, 45, 67, 89, 100, 12, 14, 16, 18];

function getMinIndex(data) {
  let min = 0;
  for (let i = 1; i < data.length; i++) {
    if (data[i] < data[min]) {
      min = i;
    }
  }
  return min;
}

const ret = getMinIndex(data);
console.log(ret); //6

• 查询最小值

function getMin(data) {
  let min = data[0];
  for (let i = 1; i < data.length; i++) {
    if (data[i] < min) {
      min = data[i];
    }
  }
  return min;
}
const ret2 = getMin(data);
console.log(ret2); //12

函数式编程

• 求最小值

function getMinFn(data) {
  return Math.min(...data);
}
const ret3 = getMinFn(data);
console.log(ret3); //12

• 优化

const getMinFn2 = (data) => Math.min(...data); //箭头函数
const ret4 = getMinFn2(data);
console.log(ret4); //12

• map
  • 不使用map

let result = [];
for (let i = 0; i < data.length; i++) {
  result.push(data[i] * 2);
}

console.log("🚀 ~ result:", result);
// 🚀 ~ result: [
//   42, 46, 90, 134, 178,
//  200, 24, 28,  32,  36
// ]

• 使用map

const ret5 = data.map((item) => item * 2);
console.log("🚀 ~ ret5:", ret5);
// 🚀 ~ result: [
//   42, 46, 90, 134, 178,
//  200, 24, 28,  32,  36
// ]
console.log("🚀 ~ data:", data);

• reduce
  // 1.求和

const arr2 = [1, 2, 3, 4];
const ret6 = arr2.reduce((prev, next) => prev + next, 0);
console.log("🚀 ~ ret6:", ret6);

// 合并对象

const a = {
  name: "张三",
  age: 18,
};
const b = {
  sex: "男",
  height: 170,
};
const c = {
  name: "孙悟空",
};
const a1 = [a, b, c];
const ret7 = a1.reduce((prev, next) => {
  return Object.assign(prev, next);
}, {});
console.log("🚀 ~ ret7 ~ ret7:", ret7);

//命名空间，路径转对象 a.b.c 转成 obj = {a:{b:c}},

let ns = {};
function createNamespace(path) {
  // 将路径分解为组成部分
  var parts = path.split(".");

  var parent = ns; // 命名空间的根是ns对象
  // debugger;
  // 遍历路径的各个部分
  for (var i = 0; i < parts.length; i++) {
    var part = parts[i];
    // 如果当前父对象上没有这个属性，则创建它
    if (typeof parent[part] === "undefined") {
      parent[part] = {};
    }
    // 移动到下一级命名空间
    parent = parent[part];
  }

  // 返回创建的命名空间的最里层对象
  return ns;
}

// 使用示例
var ns1 = createNamespace("a.b.c.d");
console.log(ns1);
// 🚀 ~ ns: { a: { b: { c: { d: {} } } }
const ns2 = createNamespace("e.f");
console.log(ns2);
// 1. a.b.c 转成 obj = {a:{b:c}}
let obj = {};

obj["a"] = {};
obj["a"]["c"] = 2;
obj["b"] = 2;

console.log(obj, "999");