分类目录归档:JavaScript

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 数组降维/扁平化(减少层级)方法已关闭评论

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 数组操作方法已关闭评论

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 算数运算符的运算规则已关闭评论

JS对象浅拷贝与深拷贝方法

JS 对象浅拷贝是将对象的属性和值复制出来给另一个对象,可能没有将对象的所有层级的属性复制,新对象的属性的引用地址可能与原对象相同。而深拷贝就是将对象完全复制一份,复制出来的对象与原对象具有相同层级的属性和值,并且新对象的属性拥有独立的引用地址。 继续阅读

发表在 JavaScript | 标签为 , , , , , | JS对象浅拷贝与深拷贝方法已关闭评论

JS 不支持冒泡的DOM事件

事件冒泡是指在元素上某事件被触发时,这个事件将会在该元素的所有祖先元素上被触发。但是有些事件支持冒泡,有些则不支持。

不支持冒泡的事件

打印事件:
onafterprint、onafterprint
页面加载、卸载事件:
onload、onbeforeunload、onunload
滚动条滚动、浏览器窗口调整事件
onscroll、onresize 继续阅读

发表在 JavaScript | 标签为 , , , , | JS 不支持冒泡的DOM事件已关闭评论