javascript相关基础
event
window.event...
键盘处理程序 onkeypress
字符代码会存放在event.which()//netscape或者event.keyCode()//IE
将ascii转换为字符串
String.fromCharCode(event.which);//event.keyCode;
全局、局部变量
任何再函数体内的用var声明的变量都是局部变量，即使和全局变量重名，也是可以的，是不同的变量
如果再函数体内不适用var，那么所声明的变量不是局部变量，如果这个时候函数体外有同名变量，就会错误的改变变量值，导致程序出错
var a = 10; function add() { a = 20; console.log(a); } add(); //20 console.log(a); //20
特性
动态性
var key = "property"
console.log(key)
var duixiang = {
property: "my canshu"
}
console.log(duixiang.property)
console.log(duixiang["property"])
console.log(duixiang[key])
delete duixiang["property"]
console.log(duixiang[key])
//property
my canshu
my canshu
my canshu
undefined弱类型
类型是和值相关的，而不是和变量相关的
定义变量无须显式声明，很大的灵活性
也有不利的一面，比如需要面向对象的时候
数据类型
原始类型：
ECMAScript 有 5 种原始类型（primitive type），即 Undefined、Null、Boolean、Number 和 String。
引用类型：对象
还有数组（跟对象差不多，因为都存的是首地址呀）
数组
不用new，直接"=[ ]"是一样的意思
string
.length只读属性
大小写转换
toUpperCase()
toLowerCase()
子字符串
.substring(a,b) a--(b-1)索引的字符 b可以没有
单个字符
.charAt(a)
查找字符串
.indexof("text"),返回开始的索引值
.indexof("text",2)可以指定从哪里开始查找（可以用于寻找重复的字符串）
.lastIndexOf("text") 从后向前搜索，即最后一个出现的目标，再返回索引值
.lastIndexOf("text",20) 制定位置参数，会从该位置向前搜索
分离字符串
.split(",") 返回字符串数组
合并字符串
.join(",") 返回字符串
字符串数组排序
.sort() 返回字符串数组！！！这里会改变原数组为有序哦！！！
.sort(numcompare) numcompare自定义函数，根据这个来排序
function numcom(a, b) {
return a - b;
}
strs = ['3', '4', '435', '13', '1', '2']
console.log(strs.sort(numcom));数字
处理金钱
toFixed(2) 非常适合处理金钱。 var x = 9.656; x.toFixed(0); // 返回 10 x.toFixed(2); // 返回 9.66 x.toFixed(4); // 返回 9.6560 x.toFixed(6); // 返回 9.656000
进制
但是您能够使用 toString() 方法把数输出为十六进制、八进制或二进制。 实例 var myNumber = 128; myNumber.toString(16); // 返回 80 myNumber.toString(8); // 返回 200 myNumber.toString(2); // 返回 10000000
JavaScript 会把前缀为 0x 的数值常量解释为十六进制。
绝不要用前导零写数字（比如 07）。
一些 JavaScript 版本会把带有前导零的数解释为八进制。
精确范围
整数
整数（不使用指数或科学计数***被精确到 15 位。
小数
小数的最大数是 17 位，浮点的算数并不总是 100% 精准
使用乘除法有助于解决上面的问题：
实例
var x = (0.2 * 10 + 0.1 * 10) / 10; // x 将是 0.3
===
第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；
第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。
由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。
==
数字啥的对象比较会更糟糕，是因为，两个都是对象无法比较
NaN
这个特殊的Number与所有其他值都不相等，包括它自己：
NaN === NaN; // false
唯一能判断NaN的方法是通过isNaN()函数：
浮点数
注意的相等比较：
Infinity
Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。
除以 0（零）也会生成 Infinity：
typeof Infinity; // 返回 "number"
## \- undefined
大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。
\- 强烈建议直接使用[]。
var arr = [1, 2, 3.14, 'Hello', null, true];
arr[0]; // 返回索引为0的元素，即1
arr[5]; // 返回索引为5的元素，即true
arr[6]; // 索引超出了范围，返回undefined
\- 只能用var申明一次，例如：
var a = 123; // a的值是整数123
a = 'ABC'; // a变为字符串
## \- strict模式
启用strict模式的方法是在JavaScript代码的第一行写上：
'use strict';
## \- 字符
如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果：
# ES6标准
\1. ES6模板字符串
console.log(\`你好, ${name}, 你今年${age}岁了!\`);
\2. 多行字符串的表示方法
反引号：\`这是一个多行字符串\`;
访问不存在的属性不报错，而是返回undefined：
xiaoming.age = 18;
// 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
\- 'name' in xiaoming; // true
这个属性不一定是xiaoming的，它可能是xiaoming继承得到的：
'grade' in xiaoming; // false
\- 要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法：
var xiaoming = {
name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false
\- null、undefined、0、NaN和空字符串''视为false，其他值一概视为true
\- for in
\-
var a = ['A', 'B', 'C'];
for (var i in a) {
console.log(i); // '0', '1', '2'
console.log(a[i]); // 'A', 'B', 'C'
}
\- 普通
var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in o) {
if (o.hasOwnProperty(key)) {
console.log(key); // 'name', 'age', 'city'
}
}map ES6标准
-
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
m.set('Adam', 67); // 添加新的key-value
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined多次对一个key放入value，后面的值会把前面的值冲掉
set ES6标准
- 在Set中，没有重复的key。
- 重复元素在Set中自动被过滤：
- 注意数字3和字符串'3'是不同的元素。
- 通过delete(key)方法可以删除元素：
## iterable ##
- Array、Map和Set都属于iterable类型。
-
var a = ['A', 'B', 'C'];
for (var x of a) { // 遍历Array
console.log(x);
}
\- for each
\-
var a = ['A', 'B', 'C'];
a.forEach(function (element) {
console.log(element);
});
\- 函数
箭头函数
其本身就是匿名函数，没有函数名
// 无参数: () => 3.14
只有一个内容行，就不需要写{}花括号
x => x * x
有一个以上参数，就要加（）和{}
(x, y, ...rest) => {
var i, sum = x + y;
for (i=0; i<rest.length; i++) {
sum += rest[i];
}
return sum;
}如果要返回一个对象，就要注意，如果是单表达式，这么写的话会报错：
// SyntaxError:
x => { foo: x }因为和函数体的{ ... }有语法冲突，所以要改为：
// ok:
x => ({ foo: x })不能作为构造函数，不能使用new
箭头函数不绑定arguments，取而代之用rest参数...解决
let C = (...c) => {
console.log(c);
}
C(3,82,32,11323); // [3, 82, 32, 11323]箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
箭头函数没有原型属性
箭头函数不能当做Generator函数,不能使用yield关键字
匿名函数
- 如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined。
var abs = function (x) {
if (x >= 0) {
return x;
} else {
return -x;
}
};function (x) { ... }是一个匿名函数，它没有函数名。但是，这个匿名函数赋值给了变量abs
## arguments ##
- arguments.length
- arguments[0]
- arguments类似Array但它不是一个Array
- 即使函数不定义任何参数，还是可以拿到参数的值
变量
- 由于JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行
- 全局变量会绑定到window上
### 块级作用域的变量 ###
let
-
'use strict';
function foo() {
var sum = 0;
for (let i=0; i<100; i++) {
sum += i;
}
// SyntaxError:
i += 1;
}
-const ##ES6
-
全部大写的变量
const PI = 3.14;
PI = 3; // 某些浏览器不报错，但是无效果！
### 名字空间 ###
全局变量
-
// 唯一的全局变量MYAPP:
var MYAPP = {};
// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;
// 其他函数:
MYAPP.foo = function () {
return 'foo';
};
重复声明定义（动态类型）
<script>
var x; // 现在 x 是 undefined
var x = 7; // 现在 x 是数值
var x = "Bill"; // 现在 x 是字符串值
document.getElementById("demo").innerHTML = x;//Bill
</script>赋值后在声明，没用，不会改成define
<script>
var x = 7;
var x; //赋值后在声明，没用，不会改成define
document.getElementById("demo").innerHTML = x;//7
</script>null
在 JavaScript 中，null 的数据类型是对象。
设置值为 null 清空对象
null === undefined // false null == undefined // true
typeof
typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4] // 返回 "object" (在 JavaScript 中数组即对象)
typeof null // 返回 "object"
typeof function myFunc(){} // 返回 "function"解构赋值 ES6
-
'use strict';
var person = {
name: '小明',
age: 20,
gender: 'male',
passport: 'G-12345678',
school: 'No.4 middle school'
};
var {name, age, passport} = person;
console.log('name = ' + name + ', age = ' + age + ', passport = ' + passport);
- 变量已经被声明了，再次赋值的时候，正确的写法也会报语法错误：
-
// 声明变量:
var x, y;
// 解构赋值:
{x, y} = { name: '小明', x: 100, y: 200};
- 交换
-
var x=1, y=2;
[x, y] = [y, x]
详见 https://www.liaoxuefeng.com/wiki/1022910821149312/1023021187855808
常见的 HTML 事件
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素已被改变 |
| onclick | 用户点击了 HTML 元素 |
| onmouseover | 用户把鼠标移动到 HTML 元素上 |
| onmouseout | 用户把鼠标移开 HTML 元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已经完成页面加载 |
innerhtml
<script>
document.getElementById("demo").innerHTML = 5 + 6;// 会覆盖之前html元素的内容
</script><button onclick="this.innerHTML=Date()">现在的时间是？</button>//改自己按钮的元素
document.write()
在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
对象
对象也是变量
var car = {type:"porsche", model:"911", color:"white"};//值以 名称:值 ，名称:值对被称为属性// 创建对象：
var person = {
firstName: "Bill",
lastName : "Gates",
id : 12345,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};引用对象的非函数属性，可以用objectName.propertyName；
函数属性，用objectName.methodName()，也就是加个“（）”
比较==&===
请注意 (x==y) 与 (x===y) 的区别。
JavaScript 对象无法进行对比，比较两个 JavaScript 将始终返回 false。
不把字符串、数值和布尔值声明为对象
如：
var x = new String(); // 把 x 声明为 String 对象 var y = new Number(); // 把 y 声明为 Number 对象 var z = new Boolean(); // 把 z 声明为 Boolean 对象
他们会增加代码的复杂性并降低执行速度
字符串
字符串长度
内建属性 length 可返回字符串的长度：
script中字符串换行
写两个script，写成如下可能不换行，不保险：
document.getElementById("demo").innerHTML = "Hello \
Kitty!";某些浏览器也不允许 \ 字符之后的空格，保险做法：
document.getElementById("demo").innerHTML = "Hello" +
"Kitty!";下标访问
它让字符串看起来像是数组（其实并不是）
如果找不到字符，[ ] 返回 undefined，而 charAt() 返回空字符串。
它是只读的。str[0] = "A" 不会产生错误（但也不会工作！）
转换为数组
var txt = "Hello"; // 字符串
txt.split(""); // 分隔为字符字符串是数字的比较
| "2" < "12" | false |
|---|---|
| "2" > "12" | true |
Boolean
var oFalseObject = new Boolean(false); var bResult = oFalseObject && true; //输出 true 在 Boolean 表达式中，所有对象都会被自动转换为 true，所以 oFalseObject 的值是 true
Boolean 对象将覆盖 Object 对象的 ValueOf() 方法，返回原始值，即 true 和 false。ToString() 方法也会被覆盖，返回字符串 "true" 或 "false"。 oFalseObject.valueOf () 就可以了
false: 0、-0、null、""、false、undefined、NAN
true：其余都是
方法
for each
<body>
<p id="demo"></p>
<script>
var txt="";
var nums = ['f','ad','ad'];
nums.forEach(shuchu);
document.getElementById("demo").innerHTML = txt;
function shuchu(value,index,array){
txt += value + "<br/>";
}
</script>
</body>
输出：
f
ad
ad随机整数
Math.floor(Math.random() * 10); // 返回 0 至 9 之间的数 Math.floor(Math.random() * 11); // 返回 0 至 10 之间的数
适当的整数
//介于 min（包括）和 max（不包括）之间的随机数：
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min) ) + min;
}
//介于 min 和 max（都包括）之间的随机数
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}跳出
有标签的
var cars = ["BMW", "Volvo", "Saab", "Ford"];
list: {
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
break list;
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
}
//如果有标签引用，则 break 语句可用于跳出任意代码块：练习
输入字符串并排序
<form *name*="theForm">
<input *type*="text" *name*="newName" *size*="20">
<input *type*="button" *name*="add" *value*="add" *onclick*="**SortNames**()">
<textarea *cols*="60" *rows*="10" *name*="sorted">the sorts</textarea>
</form>
------------------------------------------------------
var newName = 0;
var names = [];
function SortNames() {
theName = document.theForm.newName.value;
names[newName] = theName;
newName++;
names.sort();
document.theForm.sorted.value = names.join("\n");
console.log(names, "ss")
}
prototype
function addHead(level) {
title = "h" + level;
text = this.toString();
start = "<" + title + ">";
end = "</" + title + ">";
return start + text + end;
}
String.prototype.heading = addHead;//为string增加一个方法
document.write("this is one".heading(1));
document.write("this is two".heading(2));
document.write("this is three".heading(3));for in 循环
function Card(a, b) {
this.a = a;
this.b = b;
}
var tom = new Card("tom", "1231");
for (i in tom) {
console.log(i + ":" + tom[i]);
}
//a:tom
//b:1231
查看11道真题和解析