JavaScript on 菜鸟程序员

键盘事件编码

Mon, 01 Jan 0001 00:00:00 +0000

event.keycode大全(javascript)


keycode 8 = BackSpace BackSpace 
keycode 9 = Tab Tab 
keycode 12 = Clear 
keycode 13 = Enter 
keycode 16 = Shift_L 
keycode 17 = Control_L 
keycode 18 = Alt_L 
keycode 19 = Pause 
keycode 20 = Caps_Lock 
keycode 27 = Escape Escape 
keycode 32 = space space 
keycode 33 = Prior 
keycode 34 = Next 
keycode 35 = End 
keycode 36 = Home 
keycode 37 = Left 
keycode 38 = Up 
keycode 39 = Right 
keycode 40 = Down 
keycode 41 = Select 
keycode 42 = Print 
keycode 43 = Execute 
keycode 45 = Insert 
keycode 46 = Delete 
keycode 47 = Help 
keycode 48 = 0 equal braceright 
keycode 49 = 1 exclam onesuperior 
keycode 50 = 2 quotedbl twosuperior 
keycode 51 = 3 section threesuperior 
keycode 52 = 4 dollar 
keycode 53 = 5 percent 
keycode 54 = 6 ampersand 
keycode 55 = 7 slash braceleft 
keycode 56 = 8 parenleft bracketleft 
keycode 57 = 9 parenright bracketright 
keycode 65 = a A 
keycode 66 = b B 
keycode 67 = c C 
keycode 68 = d D 
keycode 69 = e E EuroSign 
keycode 70 = f F 
keycode 71 = g G 
keycode 72 = h H 
keycode 73 = i I 
keycode 74 = j J 
keycode 75 = k K 
keycode 76 = l L 
keycode 77 = m M mu 
keycode 78 = n N 
keycode 79 = o O 
keycode 80 = p P 
keycode 81 = q Q at 
keycode 82 = r R 
keycode 83 = s S 
keycode 84 = t T 
keycode 85 = u U 
keycode 86 = v V 
keycode 87 = w W 
keycode 88 = x X 
keycode 89 = y Y 
keycode 90 = z Z 
keycode 96 = KP_0 KP_0 
keycode 97 = KP_1 KP_1 
keycode 98 = KP_2 KP_2 
keycode 99 = KP_3 KP_3 
keycode 100 = KP_4 KP_4 
keycode 101 = KP_5 KP_5 
keycode 102 = KP_6 KP_6 
keycode 103 = KP_7 KP_7 
keycode 104 = KP_8 KP_8 
keycode 105 = KP_9 KP_9 
keycode 106 = KP_Multiply KP_Multiply 
keycode 107 = KP_Add KP_Add

keycode 108 = KP_Separator KP_Separator 
keycode 109 = KP_Subtract KP_Subtract 
keycode 110 = KP_Decimal KP_Decimal 
keycode 111 = KP_Divide KP_Divide 
keycode 112 = F1 
keycode 113 = F2 
keycode 114 = F3 
keycode 115 = F4 
keycode 116 = F5 
keycode 117 = F6 
keycode 118 = F7 
keycode 119 = F8 
keycode 120 = F9 
keycode 121 = F10 
keycode 122 = F11 
keycode 123 = F12 
keycode 124 = F13 
keycode 125 = F14 
keycode 126 = F15 
keycode 127 = F16 
keycode 128 = F17 
keycode 129 = F18 
keycode 130 = F19 
keycode 131 = F20 
keycode 132 = F21 
keycode 133 = F22 
keycode 134 = F23 
keycode 135 = F24 
keycode 136 = Num_Lock 
keycode 137 = Scroll_Lock 
keycode 187 = acute grave 
keycode 188 = comma semicolon 
keycode 189 = minus underscore 
keycode 190 = period colon 
keycode 192 = numbersign apostrophe 
keycode 210 = plusminus hyphen macron 
keycode 211 = 
keycode 212 = copyright registered 
keycode 213 = guillemotleft guillemotright 
keycode 214 = masculine ordfeminine 
keycode 215 = ae AE 
keycode 216 = cent yen 
keycode 217 = questiondown exclamdown 
keycode 218 = onequarter onehalf threequarters 
keycode 220 = less greater bar 
keycode 221 = plus asterisk asciitilde 
keycode 227 = multiply division

keycode 228 = acircumflex Acircumflex 
keycode 229 = ecircumflex Ecircumflex 
keycode 230 = icircumflex Icircumflex 
keycode 231 = ocircumflex Ocircumflex 
keycode 232 = ucircumflex Ucircumflex 
keycode 233 = ntilde Ntilde 
keycode 234 = yacute Yacute 
keycode 235 = oslash Ooblique 
keycode 236 = aring Aring 
keycode 237 = ccedilla Ccedilla 
keycode 238 = thorn THORN 
keycode 239 = eth ETH 
keycode 240 = diaeresis cedilla currency 
keycode 241 = agrave Agrave atilde Atilde 
keycode 242 = egrave Egrave 
keycode 243 = igrave Igrave 
keycode 244 = ograve Ograve otilde Otilde 
keycode 245 = ugrave Ugrave 
keycode 246 = adiaeresis Adiaeresis 
keycode 247 = ediaeresis Ediaeresis 
keycode 248 = idiaeresis Idiaeresis 
keycode 249 = odiaeresis Odiaeresis 
keycode 250 = udiaeresis Udiaeresis 
keycode 251 = ssharp question backslash 
keycode 252 = asciicircum degree 
keycode 253 = 3 sterling 
keycode 254 = Mode_switch

使用event对象的keyCode属性判断输入的键值
eg：if(event.keyCode==13)alert(“enter!”);
键值对应表
A　　0X65 　U 　　0X85
B　　0X66　 V　　 0X86
C　　0X67　 W　　 0X87
D　　0X68　 X 　　0X88
E　　0X69　 Y　　 0X89
F　　0X70　 Z　　 0X90
G　　0X71　 0　　 0X48
H　　0X72　 1　　 0X49
I　　0X73　 2　　 0X50
J　　0X74　 3 　　0X51
K　　0X75　 4 　　0X52
L　　0X76　 5 　　0X53
M　　0X77　 6　　 0X54
N　　0X78 　7 　　0X55
O　　0X79 　8 　　0X56
P　　0X80 　9 　　0X57
Q　　0X81　ESC　　0X1B
R　　0X82　CTRL 　0X11
S　　0X83　SHIFT　0X10
T　　0X84　ENTER　0XD

如果要使用组合键，则可以利用event.ctrlKey，event.shiftKey，event .altKey判断是否按下了ctrl键、shift键以及alt键

ES6语法

Mon, 01 Jan 0001 00:00:00 +0000

声明变量

ES6之前声明变量的方式：var 、 let 、 const

var

变量提升: 声明的变量会提升到函数作用域的顶部

{
 var a = 1;
}
console.log(a);

var 可以声明多次


var a = 1;
var a = 2;
console.log(a);

let

块作用域,具有严格的作用于域

{
 let a = 1;
 console.log(a);
}
console.log(a); // ReferenceError: a is not defined

let 只能声明一次

let a = 1;
let a = 2;
console.log(a); // SyntaxError: Identifier 'a' has already been declared

### const

1. const 声明的变量必须初始化，并且不能被改变
```javascript
const a;
console.log(a); // SyntaxError: Missing initializer in const declaration

const a = 1;
a = 2; // TypeError: Assignment to constant variable.
console.log(a);

解构表达式

数组解构

let arr = [1,2,3];

// 传统用法
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];

// 解构用法
let [a,b,c] = arr;

对象解构

let obj = {
 name: 'zhangsan',
 age: 18
 sex: 'male'
}
// 传统用法
let name = obj.name;
let age = obj.age;
let sex = obj.sex;

// 解构用法
let {name,age,sex} = obj;
console.log(name,age,sex);

字符串扩展

let str = "hello.vue";
console.log(str.startsWith("hello"));//true
console.log(str.endsWith(".vue"));//true
console.log(str.includes("e"));//true
console.log(str.includes("hello"));//true


//多行字符串
let ss = `<div>
 <span>hello world<span>
</div>`;
console.log(ss);

// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。

function fun() {
 return "这是一个函数"
}

let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;
console.log(info);

函数参数优化

默认值

//在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
function add(a, b) {
 // 判断b是否为空，为空就给默认值1
 b = b || 1;
 return a + b;
}
// 传一个参数
console.log(add(10));


//现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
function add2(a, b = 1) {
 return a + b;
}
console.log(add2(20));

不定参数

function fun(...values) {
 console.log(values.length)
}
fun(1, 2)      //2
fun(1, 2, 3, 4)  //4

箭头函数

// case1
var print = function (obj) {
    console.log(obj);
}

var print = obj => console.log(obj);
print("hello");

// case2
var sum = function (a, b) {
 c = a + b;
 return a + c;
}
// case2 箭头函数1
var sum2 = (a, b) => a + b;
console.log(sum2(11, 12));
// case2 箭头函数2
var sum3 = (a, b) => {
 c = a + b;
 return a + c;
}
console.log(sum3(10, 20))

// case3 箭头函数+解构
const person = {
 name: "jack",
 age: 21,
 language: ['java', 'js', 'css']
}

// 传统用法
function hello(person) {
 console.log("hello," + person.name)
}

//箭头函数+解构
var hello2 = ({name}) => console.log("hello," +name);
hello2(person); // 直接把包含name属性的一个对象扔进来就行

对象优化

// case1
const person = {
 name: "jack",
 age: 21,
 language: ['java', 'js', 'css']
}

// [
// "name",
// "age",
// "language"
// ]
console.log(Object.keys(person));

// [
// "jack",
// 21,
// [
// "java",
// "js",
// "css"
// ]
// ]
console.log(Object.values(person));

// [
// [
// "name",
// "jack"
// ],
// [
// "age",
// 21
// ],
// [
// "language",
// [
// "java",
// "js",
// "css"
// ]
// ]
// ]
console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]


// case2
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };

//{a:1,b:2,c:3}
Object.assign(target, source1, source2);

// {
// "a": 1,
// "b": 2,
// "c": 3
// }
console.log(target);

// case3 声明对象简写
const age = 23
const name = "张三"
const person1 = { age: age, name: name }

const person2 = { age, name }
console.log(person2);

// case4 对象的函数属性简写
let person3 = {
 name: "jack",
 // 以前：
 eat: function (food) {
 console.log(this.name + "在吃" + food);
 },
 //箭头函数this不能使用，对象.属性
 eat2: food => console.log(person3.name + "在吃" + food),
 eat3(food) {
 console.log(this.name + "在吃" + food);
 }
}

person3.eat("香蕉");

person3.eat2("苹果")

person3.eat3("橘子");

// case5 对象拓展运算符

// 1、拷贝对象（深拷贝）
let p1 = { name: "Amy", age: 15 }
let someone = { ...p1 }
console.log(someone)  //{name: "Amy", age: 15}

// 2、合并对象
let age1 = { age: 15 }
let name1 = { name: "Amy" }
let p2 = {name:"zhangsan"}
p2 = { ...age1, ...name1 } 
console.log(p2)

map和reduce

数组中新增了map和reduce方法。

mybatisSql语句拼装

Mon, 01 Jan 0001 00:00:00 +0000


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Mybatis Log Helper</title>
 <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
 <link rel="shortcut icon" href="" />
 <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
 <!-- 引入样式 -->
 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 <!-- 引入组件库 -->
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 <style>
 #app {
 margin-top: 70px;
 display: flex;
 justify-content: space-evenly;
 align-items: center;
 font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
 }
 </style>
</head>
<body>
 <div id="app">
 <el-input type="textarea" v-model="pre" placeholder="请复制输入Mybatis打印的日志，须完整Prepareing语句和Parameter语句"
 :rows="28" style="width: 600px"></el-input>
 <el-button type="success" @click="convert" style="height: 60px; width: 80px;">转换</el-button>
 <el-input type="textarea" v-model="res" placeholder="输出结果"
 :rows="28" style="width: 600px"></el-input>
 </div>

 <script type="text/javascript">
 const app = new Vue({
 el: '#app',
 data() {
 return {
 // 原始str
 pre: '',
 // 输出结果
 res: ''
 }
 },
 methods: {
 convert() {
 const str = this.pre
 
 if (str.indexOf('Preparing') == -1 || str.indexOf('Parameters') == -1) {
 this.$message({
 message: '请将Preparing和Parameters语句复制进来',
 type: 'error',
 center: true
 })
 }
 // str为完整的三行或两行SQL 提取预编译语句
 // const prepare = str.substring(str.indexOf('Preparing') + 11, str.indexOf('\n'))
 var prepare=""
 var params=new Array()
 var arr = str.split("\n");
 for(const strItem of arr) {
 if (strItem.indexOf("Preparing") != -1) {
 prepare = strItem.substring(strItem.indexOf('Preparing') + 11)
 // console.log("prepare="+prepare)
 }
 
 if (strItem.indexOf("Parameters") != -1) {
 params.push(strItem.substring(strItem.indexOf('Parameters') + 12))
 // console.log("params["+i+"]="+params[i])
 }
 }


 if(params.length > 1) {
 var placeholder = prepare.substring(prepare.indexOf('( ?')-1)
 console.log(prepare)
 for(let i=0; i < params.length-1;i++) {
 prepare = prepare+','+placeholder
 }
 console.log(prepare)
 } 
 var paramStr = params.join(',')
 // 获取参数,去空格
 paramStr = paramStr.replace(/ /g, '')
 // 参数数组
 const array = paramStr.split(',')
 console.log(array)
 // 循环替换占位符，字符串方式替换每次替换第一个
 array.map(item => {
 youKuoHaoWeiZhi = item.indexOf('(')
 console.log(item+":右侧括号"+youKuoHaoWeiZhi)
 let newValue = ""
 if (youKuoHaoWeiZhi != -1) {
 newValue = item.substring(0, item.indexOf('('))
 console.log(item+":最新值"+newValue)
 // 获取参数类型
 const type = item.substring(item.indexOf('(') + 1, item.indexOf(')'))
 console.log(item+":参数"+type)
 if ('String' === type) {
 newValue = "'" + newValue + "'"
 }
 } else {
 newValue = item
 }
 
 
 
 prepare = prepare .replace('?', newValue)
 })
 
 
 this.res = prepare
 }
 }
 })

 // 返回字符串str中的第n字符串reg在str中的索引值index
 function index(str, reg, n) {
 if (!str || !reg || n <= 0) return -1
 // 先求出第一个，再递归n-1
 if (n === 1) {
 return str.indexOf(reg)
 }
 // 注意n-1的索引后一定要加1，负责会一直是第一个reg的索引
 return str.indexOf(reg, index(str, reg, n - 1) + 1)
 }
 // 测试index函数
 // const str = 'hello world ok'
 // const reg = 'o'
 // console.log(index(str, reg, 3))
 </script>
</body>
</html>

Vue

Mon, 01 Jan 0001 00:00:00 +0000

看看人家的就行了：

cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式

Mon, 01 Jan 0001 00:00:00 +0000

写在前面：

前端开发的时候，在网页刷新的时候，所有数据都会被清空，这时候就要用到本地存储的技术，前端本地存储的方式有三种，分别是cookie，localstorage和sessionStorage ，这是大家都知道的。本文的主要内容就是针对这三者的存放、获取，区别、应用场景。有需要的朋友可以做一下参考，希望可以帮到大家。

本文首发于blog：obkoro1.com 本文版权归作者所有，转载请注明出处。

使用方式：

很多文档都是说了一大堆，后面用法都没有说，先要学会怎么用，不然后面的都是扯淡，所以这里我先把使用方式弄出来。

保存cookie值：

 var dataCookie='110';
 document.cookie = 'token' + "=" +dataCookie; 复制代码

获取指定名称的cookie值

 function getCookie(name) { //获取指定名称的cookie值
// (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) {
 console.log(arr);
 return unescape(arr[2]);
}
return null;
}
 var cookieData=getCookie('token'); //cookie赋值给变量。复制代码

先贴这两个最基础的方法，文末有个demo里面还有如何设置cookie过期时间，以及删除cookie的、

localStorage和sessionStorage:

localStorage和sessionStorage所使用的方法是一样的，下面以sessionStorage为栗子：

var name='sessionData';
var num=120;
sessionStorage.setItem(name,num);//存储数据
sessionStorage.setItem('value2',119);
let dataAll=sessionStorage.valueOf();//获取全部数据
console.log(dataAll,'获取全部数据');
var dataSession=sessionStorage.getItem(name);//获取指定键名数据
var dataSession2=sessionStorage.sessionData;//sessionStorage是js对象，也可以使用key的方式来获取值
 console.log(dataSession,dataSession2,'获取指定键名数据');
sessionStorage.removeItem(name); //删除指定键名数据
 console.log(dataAll,'获取全部数据1');
 sessionStorage.clear();//清空缓存数据：localStorage.clear();
 console.log(dataAll,'获取全部数据2'); 复制代码

使用方式，基本上就上面这些，其实也是比较简单的。大家可以把这个copy到自己的编译器里面，或者文末有个demo，可以点开看看。

JavaScript on 菜鸟程序员

键盘事件编码

ES6语法

声明变量

var

let

解构表达式

字符串扩展

函数参数优化

对象优化

map和reduce

mybatisSql语句拼装

Vue

cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式

写在前面：

使用方式：

cookie:

localStorage和sessionStorage: