1. 省略号文本截取方法
1.1 实现功能
当一段文本过长时，需要截取其中一部分进行显示，并且在结尾处添加省略号，以提示用户该内容不完整。
1.2 代码实现
function truncateText(text, maxLength) {
if (text.length > maxLength) {
return text.substr(0, maxLength - 1) + '...';
}
return text;
}
1.3 代码解释
substr()方法返回一个字符串中从指定位置开始的指定长度的字符。该方法有两个参数：起始位置和长度。在上述代码中，如果text的长度大于maxLength，则截取其前maxLength-1个字符并添加省略号“...”，否则返回原始字符串text。
2. 首字母大写转换方法
2.1 实现功能
将一个字符串的首字母转换为大写字母。
2.2 代码实现
function capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
2.3 代码解释
charAt()方法返回字符串中指定位置的字符，索引从0开始。 toUpperCase()方法将其转换为大写字母。slice()方法返回一段字符串中的选定部分，其中第一个参数为起始位置，第二个参数为结束位置，不包括结束位置本身。在上述代码中，将第一个字符的大写字母与原始字符串的其余部分拼接而成。
3. 判断数组中是否包含某个元素的方法
3.1 实现功能
判断一个数组中是否包含某个元素，返回布尔值。
3.2 代码实现
function contains(arr, elem) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === elem) {
return true;
}
}
return false;
}
3.3 代码解释
这是一种简单的遍历数组的方法，通过循环遍历数组中的每个元素，判断该元素是否与目标元素相同。如果找到了相同的元素，返回true，否则返回false。
4. 深拷贝对象的方法
4.1 实现功能
将一个对象进行深拷贝，即复制其所有属性和值。
4.2 代码实现
function deepClone(obj) {
if (typeof obj !== 'object') {
return obj;
}
var cloneObj = {};
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
cloneObj[key] = deepClone(obj[key]);
}
}
return cloneObj;
}
4.3 代码解释
这是一种递归方式的深拷贝方法。首先判断对象是否为一个对象，如果不是，则返回该对象本身。如果是一个对象，则创建一个新对象，并遍历原始对象中的属性，将属性和属性值递归地复制到新对象中。
5. 计算两个日期之间的时间差的方法
5.1 实现功能
计算两个日期之间的天数差、小时数差、分钟数差等。
5.2 代码实现
function timeDifference(date1, date2) {
var difference = date2.getTime() - date1.getTime();
var daysDifference = Math.floor(difference / 1000 / 60 / 60 / 24);
var hoursDifference = Math.floor(difference / 1000 / 60 / 60);
var minutesDifference = Math.floor(difference / 1000 / 60);
return {
days: daysDifference,
hours: hoursDifference,
minutes: minutesDifference
};
}
5.3 代码解释
这个方法基于JavaScript的Date对象，通过获取两个日期之间的差异，然后计算出它们之间的天数、小时数和分钟数差异。在上述代码中，首先获取两个日期之间的时间戳差，然后将其除以1000以及60等表示不同时间单位的数字，得到基本的数值差异。最后将这些值封装到一个对象中，以便于进行操作。
6. 防抖和节流函数的方法
6.1 实现功能
防抖和节流是两种优化JavaScript性能的常用技巧。在一些需要频繁触发的事件中，通过防抖和节流来减少函数的调用次数，减轻浏览器压力。
6.2 代码实现
// 防抖
function debounce(func, delay) {
var timer;
return function() {
var context = this;
var args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
func.apply(context, args);
}, delay);
};
}
// 节流
function throttle(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
};
}
6.3 代码解释
函数防抖是指在触发事件后，在一定的时间延迟后再调用函数，如果在这段时间内再次触发事件，则重新计算时间延迟；函数节流是指在多次触发事件时，每隔一段时间调用一次函数。在上述代码中，防抖函数和节流函数都是闭包函数，可以维护内部变量，并可以返回一个新的函数进行调用。
7. 数组扁平化方法
7.1 实现功能
将一个多维数组扁平化为一维数组。
7.2 代码实现
function flatten(arr) {
return arr.reduce(function(prev, cur) {
return prev.concat(Array.isArray(cur) ? flatten(cur) : cur);
}, []);
}
7.3 代码解释
将多维数组扁平化可以使用递归思想。在上述代码中，reduce()方法以空数组为初始值，遍历数组中的每个元素并将其连接到空数组中，如果元素是一个数组，则递归地调用flatten()函数直到该元素不是数组。
8. 随机数生成方法
8.1 实现功能
生成指定范围内的随机整数或随机字符串。
8.2 代码实现
// 生成随机整数
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 生成随机字符串
function randomString(length) {
var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var result = '';
for (var i = 0; i < length; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return result;
}
8.3 代码解释
生成随机数可以使用Math.random()方法，该方法会生成一个大于等于0且小于1的随机数。在上述代码中，要生成一个指定范围内的随机整数，首先将生成的随机数乘以范围差（max-min+1），然后将其向下取整，并加上最小值（min）。要生成指定长度的随机字符串，可以使用字符串中的字符和Math.random()方法，循环生成指定长度字符串，每次随机选择一个字符加到结果字符串中。
9. 检测数据类型的方法
9.1 实现功能
检测任意数据类型并返回其数据类型名称(如字符串、数值、布尔值、数组等)。
9.2 代码实现
function getType(obj) {
var type = typeof obj;
if (type !== 'object') {
return type;
}
return Object.prototype.toString.call(obj).replace('[object ', '').replace(']', '').toLowerCase();
}
9.3 代码解释
在JavaScript 中，typeof 运算符用来检测一个变量的数据类型。但是，typeof 运算符有一些限制，比如无法准确地检测对象和数组。因此，为了更加准确地检测数据类型，我们可以使用 Object.prototype.toString() 方法。在上述代码中，判断如果 obj 是一个简单数据类型，只需使用 typeof 运算符返回其数据类型；否则使用 Object.prototype.toString() 方法来捕获其数据类型。
10. 计算元素在视口中位置的方法
10.1 实现功能
计算元素相对于视口的位置。
10.2 代码实现
function getElementViewportPosition(el) {
var rect = el.getBoundingClientRect();
return {
top: rect.top,
left: rect.left,
bottom: rect.bottom,
right: rect.right,
width: rect.width,
height: rect.height
};
}
10.3 代码解释
在计算元素在视口中位置时，可以使用 getBoundingClientRect() 方法。该方法返回一个元素的大小和相对于视口的位置结合的矩形 DOMRect 对象。在上述代码中，通过获取矩形对象的 top、left、bottom、right 等属性值来计算元素相对于视口的位置。
11. 将驼峰字符串转换为短横线字符串
11.1 实现功能
将驼峰字符串转换为连字符字符串。
11.2 代码实现
function hyphenate(str) {
return str.replace(/[A-Z]/g, function(match) {
return '-' + match.toLowerCase();
});
}
11.3 代码解释
在将驼峰字符串转换为短横线字符串时，可以使用正则表达式来替换匹配的字符。在上述代码中，正则表达式 /[A-Z]/g 用于匹配所有大写字母，然后通过 replace() 方法回调函数返回一个短横杠字符以及匹配的小写字母。