在 vscode 编辑器中自定义用户代码片段
{
// 把你的javascript代码片段放在这里。每个代码段都在一个代码段名称下定义，并具有前缀、正文和描述。
// prefix 前缀是用来触发代码片段的，正文将被展开并插入。
// 可能的变量: $1， $2表示制表位，$0表示最终光标位置，${1:label}， ${2:another}表示占位符。
// 占位符的相同的id被连接。
// 例子:
"浏览器控制台打印 Print to console": {
"prefix": "log",
"body": [
"console.log('$1');"
],
"description": "console.log('1') 浏览器控制台打印"
},
// ================= promise 相关
"Promise 函数代码块": {
"prefix": "promise",
"body": [
"new Promise((resolve, reject) => { ",
" $1",
"});"
],
"description": "ES6 Promise 函数"
},
"Promise 抛出成功代码": {
"prefix": [
"promise.resolve",
"Promise.resolve"
],
"body": [
"Promise.resolve($1)"
],
"description": "ES6 Promise 函数"
},
"Promise 抛出错误代码": {
"prefix": [
"promise.reject",
"Promise.reject"
],
"body": [
"Promise.reject($1)"
],
"description": "ES6 Promise 函数"
},
"Promise...then 成功代码块": {
"prefix": [
".then",
"promise"
],
"body": [
".then((res) => {",
" $1",
"});"
],
"description": [
"then promise 成功回调"
]
},
"Promise...catch 失败代码块": {
"prefix": [
".catch",
"promise"
],
"body": [
".catch((err) => {",
" $1",
"});"
],
"description": [
"catch promise 失败回调"
]
},
"Promise...finally 失败或者成功代码块": {
"prefix": [
".finally",
"promise"
],
"body": [
".finally((err) => {",
" // 返回状态为(resolved 或 rejected)",
" $1",
"});"
],
"description": [
"finally promise 失败或者成功回调",
"finally() 方法返回一个Promise。",
"在promise结束时，无论结果是fulfilled或者是rejected，",
"都会执行指定的回调函数。",
"这为在Promise是否成功完成后都需要执行的代码提供了一种方式。",
]
},
// =============
"async...await函数代码块": {
"prefix": [
"async",
"sync"
],
"body": [
"(async () => {",
" const a = await $1",
" console.log('执行完毕');",
"})();"
],
"description": "ES6 async 函数 await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。 相当于 Promise.all"
},
"async return 函数块": {
"prefix": [
"async",
"sync"
],
"body": [
"async function sayHello(){",
" let hi = 'hello world'",
" return hi // 等同于return Promise.resolve(hi);",
"}"
],
"description": "ES6 async 函数 await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。 相当于 Promise.all"
},
"Object.assign 复制对象": {
"prefix": "Object.assign",
"body": [
"Object.assign(target, object2, object3);"
],
"description": [
"Object.assign 用于将源对象的所有可枚举属性复制到目标对象中。(assign 的属性拷贝是浅拷贝:)",
"let target = {a: 1};",
"let object2 = {b: 2};",
"let object3 = {c: 3};",
"Object.assign(target,object2,object3);",
"// 第一个参数是目标对象，后面的参数是源对象",
"target; // {a: 1, b: 2, c: 3 }",
"如果目标对象和源对象有同名属性，或者多个源对象有同名属性，则后面的属性会覆盖前面的属性。",
"如果该函数只有一个参数，当参数为对象时，直接返回该对象；当参数不是对象时，会先将参数转为对象然后返回。",
"Object.assign([2,3], [5]); // [5,3]",
"会将数组处理成对象，所以先将 [2,3] 转为 {0:2,1:3} ，然后再进行属性复制，所以源对象的 0 号属性覆盖了目标对象的 0。"
]
},
"Object.is 比较两个值是否严格相等": {
"prefix": "Object.is",
"body": [
"Object.is(value1, value2) //比较两个值是否严格相等"
],
"description": [
"Object.is 比较两个值是否严格相等",
"基本用法",
"Object.is('q','q'); // true",
"Object.is(1,1); // true",
"Object.is([1],[1]); // false",
"Object.is({q:1},{q:1}); // false",
"与（===）的区别",
"//一是+0不等于-0",
"Object.is(+0,-0); //false",
"+0 === -0 //true",
"//二是NaN等于本身",
"Object.is(NaN,NaN); //true",
"NaN === NaN //false"
]
},
"Array.of 将参数中所有值作为元素形成数组": {
"prefix": "Array.of",
"body": [
"Array.of($1) //将参数中所有值作为元素形成数组。"
],
"description": [
"基本用法",
"Array.of(1, 2, 3, 4); // [1, 2, 3, 4]",
"Array.of(1, '2', true); // [1, '2', true]",
"Array.of(); // []",
]
},
"Array.from 将参数中所有值作为元素形成数组": {
"prefix": "Array.from",
"body": [
"Array.from([1, 2, 3],(item,index)=>{",
" console.log(item,index)",
"}) "
],
"description": [
"基本用法",
"Array.from([1, 2, 3], (n) =>{ return n * 2})); // [2, 4, 6]"
]
},
"Array.find 查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素": {
"prefix": ".find",
"body": [
".find((item) => { // 查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。",
" return item > 2; // 查询条件",
"});",
],
"description": [
"let arr = Array.of(1, 2, 3, 4);",
"console.log(arr.find(item => item > 2)); // 3",
"// 数组空位处理为 undefined",
"console.log([, 1].find(n => true)); // undefined"
]
},
"Array.findIndex 查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引": {
"prefix": ".findIndex",
"body": [
".findIndex((item) => { // 查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。",
" return item > 2; // 查询条件",
"});",
],
"description": [
"let arr = Array.of(1, 2, 1, 3);",
"// 参数1：回调函数",
"// 参数2(可选)：指定回调函数中的 this 值",
"console.log(arr.findIndex(item => item = 1)); // 0 ",
"// 数组空位处理为 undefined",
"console.log([, 1].findIndex(n => true)); //0",
]
},
"Array.fill 将一定范围索引的数组元素内容填充为单个指定的值": {
"prefix": ".fill",
"body": [
".fill(0,1,2); // 参数1：用来填充的值 参数2：被填充的起始索引 参数3(可选)：被填充的结束索引，默认为数组末尾"
],
"description": [
"let arr = Array.of(1, 2, 3, 4);",
"// 参数1：用来填充的值",
"// 参数2：被填充的起始索引",
"// 参数3(可选)：被填充的结束索引，默认为数组末尾",
"console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]",
]
},
"for 函数代码块": {
"prefix": "for",
"body": [
"for (let i = 0, len = xxxx.length; i < len; i++) {",
" $1",
"}"
],
"description": "for 循环公用函数"
},
"for...entries 遍历键值对": {
"prefix": "for",
"body": [
"for(let [key, value] of ['a', 'b'].entries()){ // 遍历键值对。",
" console.log(key, value);",
"}"
],
"description": []
},
"for...keys 遍历键名": {
"prefix": "for",
"body": [
"for(let key of ['a', 'b'].keys()){ // 遍历键名",
" console.log(key);",
"}"
],
"description": []
},
"for...values 遍历键值": {
"prefix": "for",
"body": [
"for(let value of ['a', 'b'].values()){ // 遍历键值",
" console.log(value);",
"}",
],
"description": []
},
"for...of 遍历循环": {
"prefix": [
"for",
"of",
"forof"
],
"body": [
"for (let item of ['zero', 'one', 'two']) { // 遍历循环",
" console.log(item);",
"}",
],
"description": [
"for...of 是 ES6 新引入的循环，用于替代 for..in 和 forEach() ，并且支持新的迭代协议。它可用于迭代常规的数据类型，如 Array 、 String 、 Map 和 Set 等等。"
]
},
"for...in 遍历循环": {
"prefix": [
"for",
"in",
"forin"
],
"body": [
"for(let i in obj){ // 遍历循环",
" console.log(i,obj[i])",
"}"
],
"description": [
"for - in语句用于对数组或者对象的属性进行循环操作。",
"for - in循环中的代码每执行一次，就会对数组或者对象的属性进行一次操作。"
]
},
"forEach 遍历循环": {
"prefix": ".forEach",
"body": [
".forEach((item, index, arr)=>{",
" console.log(item, index, arr)",
"})",
],
"description": [
"for - in语句用于对数组或者对象的属性进行循环操作。",
"for - in循环中的代码每执行一次，就会对数组或者对象的属性进行一次操作。"
]
},
"try...catch 异常处理": {
"prefix": [
"try",
"catch"
],
"body": [
"try {",
" $1",
"} catch (error) {",
" console.log(error)",
"}"
],
"description": [
"该实例检测输入的值是否错误，如果错误则抛出异常。异常通过 catch 语句捕获"
]
},
"switch...case 条件执行语句": {
"prefix": [
"switch",
"case"
],
"body": [
"switch (n) {",
" case n:",
" $1",
" break;",
" default: // 默认代码块;",
" console.log('默认')",
"}"
],
"description": [
"switch 语句用于基于不同条件执行不同动作。"
]
},
"Math.pow(a,b) 求幂运算符": {
"prefix": [
"Math",
"math"
],
"body": [
"Math.pow(3, 2) //9",
],
"description": [
"3 ** 2 //9",
"效果同",
"Math.pow(3, 2) //9",
"由于是运算符，所以可以和 +=一样的用法",
"var b = 3;",
"b **= 2;",
"console.log(b); //9"
]
},
"filter用于对数组进行过滤": {
"prefix": [
".filter",
".Filter"
],
"body": [
".filter((item) => {",
" return $1 //条件;",
"});"
],
"description": [
"它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。",
"let a = [1,2,3,4,5];",
"let b = a.filter(item => item > 2);",
"b => [3,4,5]",
]
},
"map用于重新创建一个新数组（结果是该数组中的每个元素都调用一个提供的函数后返回的结果）": {
"prefix": [
".map"
],
"body": [
".map((item) => {",
" return $1 //条件;",
"});"
],
"description": [
"map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。",
"let a = [{id:1},{id:3}];",
"let b = a.map(item=>item.id);",
"b : [1,3];",
"let b = a.map(item=>item.id).join(',');",
"b => '1,3';",
]
},
"includes 用于查找一个值在不在数组里,若是存在则返回true,不存在返回false": {
"prefix": [
".includes",
".indexOf",
"includes",
"indexOf"
],
"body": [
".includes($1)",
],
"description": [
"接收俩个参数：要搜索的值和搜索的开始索引",
"['a', 'b', 'c', 'd'].includes('b') // true",
"['a', 'b', 'c', 'd'].includes('b', 1) // true",
"['a', 'b', 'c', 'd'].includes('b', 2) // false"
]
},
"FormData 模拟表单上传文件": {
"prefix": [
"FormData",
"formData"
],
"body": [
"const formData = new FormData();",
"formData.append('file', $1 /* file */);"
],
"description": []
},
"instanceof 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上": {
"prefix": [
"instanceof",
" instanceof",
],
"body": [
" instanceof ${1:type}",
],
"description": [
"instanceof 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上"
]
},
"[1,2,4] instanceof Array 判断当前值是否为数组 返回 Boolean": {
"prefix": [
"isArray",
"isarray",
"isarr",
" isArr",
"instanceof",
],
"body": [
" instanceof Array",
],
"description": [
"instanceof 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上",
"[1,2,4] instanceof Array // true",
"'12344' instanceof Array // false"
]
},
"{ a: 1 } instanceof Object 判断当前值是否为对象 返回 Boolean": {
"prefix": [
"isObject",
"isobject",
"isobj",
" isObj",
"instanceof",
],
"body": [
" instanceof Object",
],
"description": [
"instanceof 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上",
"{ a: 1 } instanceof Object // true",
"'12344' instanceof Object // false"
]
},
"new Date() instanceof Date 判断当前值是否为日期类型 返回 Boolean": {
"prefix": [
" isDate",
"isdate",
"instanceof",
],
"body": [
" instanceof Date",
],
"description": [
"instanceof 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上",
"new Date() instanceof Date // true",
"'12344' instanceof Date // false"
]
},
}
1532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
