web代码片段
Posted web半晨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web代码片段相关的知识，希望对你有一定的参考价值。
目录
- 1、变量
- 2、函数
- 3、字符串
- 4、32个有用的JS 代码片段，让你的代码显得更专业
- 4.1、字节大小
- 4.2、转换为数组
- 4.3、首字母转大写
- 4.4、获取当前网址
- 4.5、数字转数组
- 4.6、计数出现次数
- 4.7、字谜
- 4.8、检查浏览器标签焦点
- 4.9、检查浏览器
- 4.10、isNull
- 4.11、isNumber
- 4.12、isString
- 4.13、最大数字
- 4.14、最小数字
- 4.15、反转
- 4.16、从列表中随机
- 4.17、列表的头部元素
- 4.18、列表的尾部元素
- 4.19、重定向到网址
- 4.20、isUpper Case
- 4.21、isLower Case
- 4.22、范围生成器中的整数数组
- 4.23、范围生成器中的随机整数
- 4.24、获取类型
- 4.25、从数组中删除重复项
- 4.26、半径的度数
- 4.27、一年中的一天
- 4.28、从列表中删除 False 元素
- 4.29、检查所有相等
- 4.30、删除元素
- 4.31、争取时间
- 4.32、读取文件行
- 5、学会这20+个JavaScript单行代码，可以让你的代码更加骚气
- 5.1、随机获取布尔值
- 5.2、检查日期是否为周末
- 5.3、检查数字是偶数还是奇数
- 5.4、获取数组中的唯一值(数组去重)
- 5.5、检查变量是否为数组
- 5.6、在两个数字之间生成一个随机数
- 5.7、生成随机字符串（唯一ID？）
- 5.8、滚动到页面顶部
- 5.9、切换布尔
- 5.10、交换两个变量
- 5.11、计算两个日期之间的天数
- 5.12、将文字复制到剪贴板
- 5.13、合并多个数组的不同方法
- 5.14、获取javascript语言的实际类型
- 5.15、在结尾处截断字符串
- 5.16、从中间截断字符串
- 5.17、大写字符串
- 5.18、检查当前选项卡是否在视图/焦点内
- 5.19、检查用户是否在Apple设备上
- 5.20、三元运算符
- 5.21、短路评估速记
- 5.22、短路评估速记
- 6、演示
1、变量
1.1、对象
let obje = {
newArray: arrayData.map((item)=> item.id)
};
1.2、数组
2、函数
2.1、函数式编程
案例 1
var add = function (a, b) {
return a + b;
};
var multiply = function (a, b) {
return a * b;
};
var a = 5;
var b = 2;
var c = 0;
// ---
// 结合律（assosiative）
console.log(add(add(a, b), c) == add(a, add(b, c)));
// true
// 交换律（commutative）
console.log(add(a, b) == add(b, a));
// true
// 同一律（identity）
console.log(add(a, 0) == a);
// true
// 分配律（distributive）
console.log(multiply(a, add(b, c)) == add(multiply(a, b), multiply(a, c)));
// true
// ---
// 原有代码
console.log(add(multiply(b, add(a, c)), multiply(a, b)));
// 20
// 应用同一律，去掉多余的加法操作 -- add(a, c) == a
console.log(add(multiply(b, a), multiply(a, b)));
// 20
// 再应用分配律
console.log(multiply(b, add(a, a)));
// 20
案例 2
// 暂无
2.2、一等公民的函数
案例 1
const hi = (name) => `Hi ${name}`;
const greeting = (name) => hi(name);
console.log(greeting('parameter'));
// Hi parameter
console.log(hi);
// ƒ hi(name) { return "Hi ".concat(name); }
console.log(hi('jonas'));
// Hi jonas
案例 2
const BlogController = {
index(posts) {
return Views.index(posts);
},
show(post) {
return Views.show(post);
},
create(attrs) {
return Db.create(attrs);
},
update(post, attrs) {
return Db.update(post, attrs);
},
destroy(post) {
return Db.destroy(post);
},
};
// 简化后的代码
const BlogControllerSimplify = {
index: Views.index,
show: Views.show,
create: Db.create,
update: Db.update,
destroy: Db.destroy,
};
3、字符串
案例 1
function cuttingString(data, i) {
let splitOne = data.split(' ');
let splitTwo = splitOne[i].split(',');
return {
splitOne,
splitTwo: splitTwo.map((item) => Number(item)),
};
}
console.log(cuttingString('00 00 00 1,18,19,17,10,8,25,21 * ? *', 3));
// {splitOne: Array(7), splitTwo: Array(8)}
// splitOne: ["00", "00", "00", "1,18,19,17,10,8,25,21", "*", "?", "*"]
// splitTwo: [1, 18, 19, 17, 10, 8, 25, 21]
4、32个有用的JS 代码片段，让你的代码显得更专业
4.1、字节大小
显示字符串或整数的字节大小。简单来说，它会显示字符串或整数的长度。
const byteSize1 = str => new Blob([str]).size;
const byteSize2 = int => new Blob([int]).size;
console.log(byteSize1("javascript")); // 10
console.log(byteSize2(101)); // 3
4.2、转换为数组
这个代码片段方法会将非数组值或数据转换为数组形式。
const convertToArray = val => (Array.isArray(val) ? val : [val]);
console.log(convertToArray("Pro")); // [Pro]
console.log(convertToArray(101)); // [101]
4.3、首字母转大写
const capitalize = str => str.replace(/\\b[a-z]/g, char => char.toUpperCase());
console.log(capitalize('code')); // Code
console.log(capitalize('javascript programming')); // Javascript Programming
4.4、获取当前网址
此代码段将有助于获取运行 javascript 的当前 URL。这在前端调试中派上用场。
const currentURL = () => window.location.href;
console.log(currentURL()); // https://medium.com/@codedev101
4.5、数字转数组
它会将数字转换为数字数组。
const digitize = n => [...`${n}`].map(i => parseInt(i));
console.log(digitize(345)); // [3,4,5]
console.log(digitize(123)); // [1,2,3]
console.log(digitize(6)); // [6]
4.6、计数出现次数
此片段代码将计算数组中某个值的出现次数。当想知道一个值在大尺寸数组中出现多少次时，这会派上用场。
const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);
console.log(countOccurrences([2,4,6,2,5,2], 2)); // 3
console.log(countOccurrences([1,4,6,2,5,6], 6)); // 2
4.7、字谜
此片段代码用于检查特定字符串是否为字谜。字谜是可以改写成另一个词的词。
const Anagram = (string1, string2) => {
const normalize = str => str.toLowerCase().replace(/[^a-z0-9]/gi, '').split('').sort().join('');
return normalize(string1) === normalize(string2);
};
console.log(Anagram("race", "care")); // true
console.log(Anagram("part", "trap")); // true
4.8、检查浏览器标签焦点
此片段代码将告诉你当前运行 javaScript 的浏览器选项卡是否处于焦点状态。
const Browser_Tab_Focused = () => !document.hidden;
console.log(Browser_Tab_Focused()); // true
4.9、检查浏览器
这段代码会告诉你运行 JavaScript 的环境是浏览器还是非浏览器。众所周知，我们可以在浏览器中运行 JavaScript，node js如果我们可以检查我们在哪个环境中工作，那就太好了。
const isBrowser = () => ![typeof window, typeof document].includes('undefined');
console.log(isBrowser()); // true if on isBrowser
console.log(isBrowser()); // false if we are on node js or any other environment
4.10、isNull
这段代码将检查变量或值是否为空。
const checkNull = val => val === undefined || val === null;
console.log(checkNull()); // true
console.log(checkNull(234)); // false
4.11、isNumber
这个简单的片段代码将检查值的变量是否为数字。
function isNumeric(num) {
return !isNaN(parseFloat(num)) && isFinite(num);
}
console.log(isNumeric(324)); // true
console.log(isNumeric("Code")); // false
4.12、isString
此片段代码将检查变量或值是否为字符串。
const isString = val => typeof val === 'string';
console.log(isString('hello world')); // true
console.log(isString('1234')); // true
console.log(isString(345)); // false
4.13、最大数字
此代码段方法将返回列表中的最大数字。这是从列表中找到最大数字的最快方法。
const maxN = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n);
console.log(maxN([3,8,7])); // 8
console.log(maxN([1,5,6,23])); // 23
4.14、最小数字
这段代码将快速返回列表中最小的数字。
const minimum = (arr, n = 1) => [...arr].sort((a, b) => a - b).slice(0, n);
console.log(minimum([2,4,6,1])); // 1
console.log(minimum([22, 55, 66, 77, 11, 19])); // 11
4.15、反转
此片段代码只是反转字符串。这在你需要反转字符串或检查回文的简短任务中派上用场。
const reverseStr = str => [...str].reverse().join('');
console.log(reverseStr("JavaScript")); // tpircSavaJ
console.log(reverseStr("123")); // 321
4.16、从列表中随机
此片段代码用于从列表中选择随机数。
const random = arr => arr[Math.floor(Math.random() * arr.length)];
console.log(random([1,4,5,6])); // 6
console.log(random([1,4,0,6])); // 1
4.17、列表的头部元素
这段代码将展示如何快速获取任何列表的第一个元素。
const head = arr => arr[0];
console.log(head([1,2,3])); // 1
console.log(head(["JavaScript", "Python", "C++"])); // JavaScript
4.18、列表的尾部元素
这段代码将展示如何以简单快捷的方式获取任何列表的尾部元素。
const tail = arr => arr[arr.length - 1];
console.log(tail([1,2,3])); // 3
console.log(tail(["JavaScript", "Python", "C++"])); // C++
4.19、重定向到网址
这个片段会将重定向到 URL。当重定向到网站时，这在 Web 开发中会派上用场。当用户执行任何操作时。
const redirect = (url, asLink = true) => asLink ? (window.location.href = url) : window.location.replace(url);
redirect('https://medium.com/');
redirect('https://codedev101.medium.com/');
4.20、isUpper Case
当想检查 String 是否为大写时，此片段代码将很有用。
const isUpperCase = str => str === str.toUpperCase();
console.log(isUpperCase("Code")); // false
console.log(isUpperCase("PROGRAMMING")); // true
console.log(isUpperCase("aB")); // false
4.21、isLower Case
我们看到的这个大写片段代码将检查字符串是否为小写。
const isLowerCase = str => str === str.toLowerCase();
console.log(isLowerCase("code")); // true
console.log代码片段 - Golang 实现简单的 Web 服务器