JS 扁平化数据转树结构函数

将扁平化数据转为树结构是常见的开发需求。

实现原理:遍历数据,把没有父节点映射的节点作为根节点,再遍历一次数据,将当前遍历节点标识的值与前一次遍历节点的父节点映射标识的值对比,如果相等则当前遍历节点是前一次遍历节点的父节点。 继续阅读

发表在 JavaScript | 标签为 , , , | JS 扁平化数据转树结构函数已关闭评论

JS 函数柯里化

函数柯里化是一种函数转化方法,也是一种高阶函数,可以将一个接收多个参数的函数转化为只接收部分参数的函数。

函数柯里化实现:

function curry(fn, args) {
    var num = fn.length;
    args = args || [];
    return function() {
        // arr 用于收集传入的参数
        var arr = [].slice.call(arguments);
        // 将之前收集的参数合并到 arr
        arr = arr.concat(args);
        // 如果收集到的参数个数未达到 num,则递归调用继续收集参数
        if (arr.length < num) {
            return curry.call(this, fn, arr);
        }
        // 当收集到的参数个数达到 num, 就执行 fn
        return fn.apply(this, arr);
    }
}

继续阅读

发表在 JavaScript | 标签为 , | JS 函数柯里化已关闭评论

JS 数组降维/扁平化(减少层级)方法

二维数组降维

1.使用 for 循环降维/扁平化

var arr = [1, 2, [3, 4], [5, 6, 7]];
var i, j, val, result = [];
for (i = 0; i < arr.length; i++) {
  val = arr[i];
  if (Array.isArray(val)) {
    for (j = 0; j < val.length; j++) {
      result.push(val[j]);
    }
  } else {
    result.push(val);
  }
}
console.log(result);
// > [1, 2, 3, 4, 5, 6, 7]

继续阅读

发表在 JavaScript | 标签为 , , , , , , , | JS 数组降维/扁平化(减少层级)方法已关闭评论

CSS 浮动元素与行内元素、块元素的重叠规则

1.浮动元素与行内元素不会重叠。 2.浮动元素在前,块元素在后,浮动元素与块元素 … 继续阅读

发表在 CSS | 标签为 , , , , , , | CSS 浮动元素与行内元素、块元素的重叠规则已关闭评论

JS 匿名函数与闭包的this指向

匿名函数与闭包的 this 均指向 window。

function a() {
  (function () {
    console.log(this, 'function');
  })();
  function b() {
    console.log(this, 'function b')
  };
  b();
}
a();
// > Window {window: Window, self: Window, document: document, name: '', location: Location, …} 'function'
// > Window {window: Window, self: Window, document: document, name: '', location: Location, …} 'function b'

继续阅读

发表在 JavaScript | 标签为 , , , , | JS 匿名函数与闭包的this指向已关闭评论

JS 获取数组最大值/最小值的方法

1.for 循环遍历取数组最大值,取最小值同理

var arr = [1, 26, 8, 47, -5, 133, 90];
var max = arr[0]; // 先假设数组第一个元素即最大值
for (var i = 0; i < arr.length; i++) {
  if (arr[i] > max) {
    max = arr[i];
  }
}
console.log(max);
// > 133

继续阅读

发表在 JavaScript | 标签为 , , , | JS 获取数组最大值/最小值的方法已关闭评论

JS 数组操作方法

1、push() 向数组尾部添加元素

语法:

arrayObject.push(newelement1, newelement2, newelement3, ...)

参数说明:
newelement1 必需,要添加的第一个元素
newelement2, newelement3… 可选,要添加的第二个元素、第三个元素
返回值:数组被操作后的新长度。 继续阅读

发表在 JavaScript | 标签为 , , , , , , , , , | JS 数组操作方法已关闭评论

CSS 属性百分比值的相对元素

width、max-width、min-width、height、max-hei … 继续阅读

发表在 CSS | 标签为 , , , | CSS 属性百分比值的相对元素已关闭评论

JS 常用排序方法

1.数组 sort() 方法排序

var arr = [1, 4, 3, 11, 8, 23, 45, 96, 70, 31, 6, 57];
arr.sort();
console.log(arr);
// > [1, 11, 23, 3, 31, 4, 45, 57, 6, 70, 8, 96]

默认情况下,数组 sort() 方法将值作为字符串进行排序,即先对比第一个字符、第二个字符…。 继续阅读

发表在 JavaScript | 标签为 , , , , , , | JS 常用排序方法已关闭评论

JS 算数运算符的运算规则

1、+ 号运算符:
① + 号的两侧都是数字类型 规则:两侧数值相加。
② + 号的两侧都是字符串类型 规则:两侧字符串拼接。
③ + 号的两侧中有一侧是字符串类型或复杂数据类型。
规则:如果是对象,则先调用 valueOf 方法,如返回数值或字符串,就进行数值相加或字符串拼接,否则会再调用 toString 方法,然后进行数值相加或字符串拼接。
如果是数组,则调用 toLocaleString 方法,然后进行数值相加或字符串拼接。 继续阅读

发表在 JavaScript | 标签为 , , , , | JS 算数运算符的运算规则已关闭评论