大部分实用工具都能在 native API 中找到. 其他高级功能可以选用专注于该领域的稳定性和性能都更好的库来代替,推荐 lodash。
6.1 基本工具
- isArray
检测参数是不是数组。
// jQuery
$.isArray(range);
// Native
Array.isArray(range);
- isWindow
检测参数是不是 window。
// jQuery
$.isWindow(obj);
// Native
function isWindow(obj) {
return obj !== null && obj !== undefined && obj === obj.window;
}
- inArray
在数组中搜索指定值并返回索引 (找不到则返回 -1)。
// jQuery
$.inArray(item, array);
// Native
array.indexOf(item) > -1;
// ES6-way
array.includes(item);
- isNumeric
检测传入的参数是不是数字。
Usetypeof
to decide the type or thetype
example for better accuracy.// jQuery
$.isNumeric(item);
// Native
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
- isFunction
检测传入的参数是不是 JavaScript 函数对象。
// jQuery
$.isFunction(item);
// Native
function isFunction(item) {
if (typeof item === 'function') {
return true;
}
var type = Object.prototype.toString(item);
return type === '[object Function]' || type === '[object GeneratorFunction]';
}
- isEmptyObject
检测对象是否为空 (包括不可枚举属性).
// jQuery
$.isEmptyObject(obj);
// Native
function isEmptyObject(obj) {
return Object.keys(obj).length === 0;
}
- isPlainObject
检测是不是扁平对象 (使用 “{}” 或 “new Object” 创建).
// jQuery
$.isPlainObject(obj);
// Native
function isPlainObject(obj) {
if (typeof (obj) !== 'object' || obj.nodeType || obj !== null && obj !== undefined && obj === obj.window) {
return false;
}
if (obj.constructor &&
!Object.prototype.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
return false;
}
return true;
}
- extend
合并多个对象的内容到第一个对象。
object.assign 是 ES6 API,也可以使用 polyfill。// jQuery
$.extend({}, defaultOpts, opts);
// Native
Object.assign({}, defaultOpts, opts);
- trim
移除字符串头尾空白。
// jQuery
$.trim(string);
// Native
string.trim();
- map
将数组或对象转化为包含新内容的数组。
// jQuery
$.map(array, (value, index) => {
});
// Native
array.map((value, index) => {
});
- each
轮询函数,可用于平滑的轮询对象和数组。
// jQuery
$.each(array, (index, value) => {
});
// Native
array.forEach((value, index) => {
});
- grep
找到数组中符合过滤函数的元素。
// jQuery
$.grep(array, (value, index) => {
});
// Native
array.filter((value, index) => {
});
- type
检测对象的 JavaScript [Class] 内部类型。
// jQuery
$.type(obj);
// Native
function type(item) {
const reTypeOf = /(?:^\[object\s(.*?)\]$)/;
return Object.prototype.toString.call(item)
.replace(reTypeOf, '$1')
.toLowerCase();
}
- merge
合并第二个数组内容到第一个数组。
// jQuery
$.merge(array1, array2);
// Native
// 使用 concat,不能去除重复值
function merge(...args) {
return [].concat(...args)
}
// ES6,同样不能去除重复值
array1 = [...array1, ...array2]
// 使用 Set,可以去除重复值
function merge(...args) {
return Array.from(new Set([].concat(...args)))
}
- now
返回当前时间的数字呈现。
// jQuery
$.now();
// Native
Date.now();
- proxy
传入函数并返回一个新函数,该函数绑定指定上下文。
// jQuery
$.proxy(fn, context);
// Native
fn.bind(context);
- makeArray
类数组对象转化为真正的 JavaScript 数组。
// jQuery
$.makeArray(arrayLike);
// Native
Array.prototype.slice.call(arrayLike);
// ES6-way
Array.from(arrayLike);
6.2 包含
检测 DOM 元素是不是其他 DOM 元素的后代.
// jQuery
$.contains(el, child);
// Native
el !== child && el.contains(child);
6.3 Globaleval
全局执行 JavaScript 代码。
// jQuery
$.globaleval(code);
// Native
function Globaleval(code) {
const script = document.createElement('script');
script.text = code;
document.head.appendChild(script).parentNode.removeChild(script);
}
// Use eval, but context of eval is current, context of $.Globaleval is global.
eval(code);
6.4 解析
- parseHTML
解析字符串为 DOM 节点数组.
// jQuery
$.parseHTML(htmlString);
// Native
function parseHTML(string) {
const context = document.implementation.createHTMLDocument();
// Set the base href for the created document so any parsed elements with URLs
// are based on the document's URL
const base = context.createElement('base');
base.href = document.location.href;
context.head.appendChild(base);
context.body.innerHTML = string;
return context.body.children;
}
- parseJSON
传入格式正确的 JSON 字符串并返回 JavaScript 值.
// jQuery
$.parseJSON(str);
// Native
JSON.parse(str);