JavaScript学习笔记
几点注意：
- Javascript不用写分号，写也可以。
- script标签按标准应该写在<head></head>里面或者</body>前面，如果写在</body>后面，浏览器会自动改到里面，使用上不会有影响（不会解决任何bug）。
- var特点：声明前置（预解析）——无论在前后哪里声明，都会放在最前面，声明函数的时候好用；无视低级作用域——只被函数作用域限制。ES6的let可以解决这些问题。
ES6
- let局部变量
- "${value}":字符串中使用这个可以代表嵌入变量，代替之前的""+value+"".
- 箭头函数：
var func = (para) => {}函数体可用常规的也可以直接写返回值 - 面向对象——类
// 本质上还是一个function，继承用extends
class Person extends Animal{
// 静态成员
static str = "静态数据"
// 构造函数，可省略
constructor(name){
// 子类要在此加一个super，可以拿到父类包括静态的所有成员,也可用传参
super(name)
// 用this代表实例对象的成员,可以在此写函数
this.name = name
}
// 方法，放在原型上面（__proto__），公用空间，相当于静态
action(){
// 可以先执行父类的成员方法
super.action()
console.log(this.name)
}
}
简单输出：
- 弹窗：
alert("str"+value); - 文档内：
document.write("Hello World!"+value); - 控制台
console.log('')
Switch 语句
请使用 switch语句来选择多个需被执行的代码块之一。
switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
重要数据结构
字符串
字符串字面量（直接量）：
var str1 = '123abc'
字符串变量类型本身不含方法，但可以直接使用方法，因为使用的是字符串对象的方法（包装方法）。
字符串对象：
var str2 = new String('123abc')
是一种类似数组，属性和方法与数组类似，但比数组少一些方法。
console.log(str1,str2)通过输出可以看到，str1就是一个字符串，str2更像数组。二者都可以像数组一样用str[index]取其中的元素，也可以用str.charAt(index=0)兼容IE8以下。
字符串变量和字符串对象用法基本一样，平时使用不推荐用字符串对象。
字符串比较：
var c1 = '中'
var c2 = '文'
console.log(c1 > c2)
比较的是unicode
| 字符串方法 | 描述 |
|---|---|
| str.charCodeAt(index=0) | 查看unicode值 |
| String.fromCharcode(unicode1,unicode2) | 参数是unicode码，可以放多个 |
| str.indexOf(str0[,index]) | 查找是否有对应的字符串str0，如果有返回第一次出现的索引值；如果没有返回-1。可选参数index，查找起点 |
| str.lastIndexOf(str0[,index]) | 同上，从后往前查找 |
数组
虽然叫array，但功能很多，可以储存多种类型的变量，相当于list，也可以叫列表
新建数组：
var infos = new Array();（不推荐）
或者
var infos = []
数组长度
arr.length
数组方法[1]
常用：
数组属性，返回
查找
arr.indexOf(item[,startIndex])
从左往右查找item，找到返回第一次出现的索引，找不到返回-1。从startIndex开始查找，如果不填就是0.
数组连接
arrayObject.concat(arrayX,......)
连接两个或多个数组。
- arrayX 必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。添加的是数组中的元素，而不是数组。
数组切片
arrayObject.slice(start,end)
数组切片.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。原来的数组不改变。
- start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
- end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。 如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
添加/移除
arrayObject.splice(startIndex[,howmany,item1,.....,itemX])
数组元素添加/移除。可删除从 startIndex 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
- index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
- howmany 可选。要删除的项目数量。如果不设置此值，则从index处删除后面的所有。如果设置为 0，则不会删除项目。
- item1, ..., itemX 可选。向数组startIndex的位置添加的新元素。
ES6和数组
ES6的展开运算符写成...的形式，可以用于数组复制和类数组转化数组。
var arr1 = [1,2,3]; //如果arr是类数组也可以
var arr2 = [...arr]; //ES6的展开运算符(性能稍高)
var arr2 = Array.from(arr); //ES6
如果直接把旧数组赋值给新数组，只会将引用传递过去，这样改变新数组时旧数组的内容也会变。
类数组缺少一些数组的方法，如果要使用那些方法，要先用上面的方式转化成数组。
JS类型转换
ECMAScript中可用的3种强制类型转换如下：
- Boolean(value)——把给定的值转换成Boolean型；
- Number(value)——把给定的值转换成数字（可以是整数或浮点数）；
- String(value)——把给定的值转换成字符串。
字符串转数字：
方案一代码: Number(str)
方案二代码: parseInt(str)和parseFloat()
第二个方法有两个参数,第一个参数就是要转换的对象,第二个参数是进制基数。不写默认十进制。
注意： parseInt方法在 '00'开头的数字是会当做2进制转10进制的方法进行转换('0x'开头是16进制，'0'开头是8进制)。所以建议string转int类型最好用Number方法；
数字转换成字符串
方案一代码:String(value)
方案二代码:
var i = 10;
var s = i.toString();
alert(typeof s); //将输出 String
字符串（json）与对象的转换
var obj = JSON.parse(str)
var str = JSON.stringify(obj)
对象
判断对象中是否有某个键
- myObj.hasOwnProperty('myKey');
- if ('key' in myObj)
获得对象的键数组或值数组：
Object.keys(myObj)
Object.values(myObj)
获得对象的长度大小
Object.keys(myObj).length
删除一个键值对
- delete myObj.myKey
- delete myObj[myKey]
通信
上传文件
在网页中，从本地目录添加
<!-- 添加 s -->
<!-- [ATTENTION!!] 切换 .on -->
<div data-action="upload" >
<input id="_upload_html5_input"
name="file"
type="file"
multiple="multiple"
aria-label="上传文件，按空格选择文件。"
style="display: none;" />
<label for="_upload_html5_input">
<span class="btn btn-l btn-upload">
<img src="文件按钮.jpg" width="103" height="73" alt=""/>
</span>
</label>
<pre>菜单</pre>
</div>
AJAX
共分为四个步骤：
- XMLHttpRequest对象的创建
- 开启请求
- 返回数据后程序行为的绑定
- 发送
步骤一、三：
let xhr=new XMLHttpRequest(); // 创建对象
xhr.onreadystatechange=function(){ // 行为的绑定，onreadystatechange这个方法每次状态改变都调用
if (xhr.readyState==4 && xhr.status==200)
{ // 判断当前状态是服务器响应成功，则修改UI
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
}
xhr.onload = () => { // 行为的绑定的另一种形式，只在服务器响应成功后调用
console.log(xhr.responseText)
}
步骤二、四：
- GET请求，如果希望通过 GET 方法发送信息，则向 URL 添加信息（query string或者直接带参数）：
xhr.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xhr.send()
open()中的最后一个参数写true代表同步，false代表异步。
- POST请求，如果需要像 HTML 表单那样 POST 数据，使用 setRequestHeader() 来添加 HTTP 头，然后在 send() 方法中规定希望发送的数据：
xhr.open("POST","/try/ajax/demo_post2.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford");
setRequestHeader表示向HTTP协议头中添加信息，以上代码意味着添加一条CONTENT-TYPE:application/x-www-form-urlencoded，含义是表示客户端提交给服务器文本内容的编码方式是URL编码，即除了标准字符外，每字节以双字节16进制前加个“%”表示。当然还有其他编码方式,如：CONTENT-TYPE:multipart/form-data可以通过表单上传文件图片等。
一个使用例子：
let xhr = new XMLHttpRequest()
xhr.open('get','/check?username=123','true') // true同步，false异步
xhr.onload = () => {
console.log(xhr.responseText)
}
xhr.send()
form表单用Ajax提交数据
正常情况下form表单不能通过Ajax提交数据，因为其有自动提交自动跳转的功能。有一个方法可以取消自动提交和跳转，改为手动使用Ajax，等返回成功信息后再跳转。
<form>
姓名：<input class="inputStyle" type="text" name="username" /><br />
密码：<input class="inputStyle" type="password" name="pwd" /><br />
<input class="loginStyle" type="submit" value="登录" />
</form>
// 使用form.onsubmit，不要使用form.submit
form.onsubmit = (ev) => {
console.log(form[0].value,form[1].value)
let xhr = new XMLHttpRequest()
xhr.open('post','/login')
xhr.onload = () => {
const res = JSON.parse(xhr.response);
console.log(res);
if(res.message='success'){
// 如果正常收到了信息，再使用location.href跳转
location.href = '/photo.html'
}else{
console.log("err")
}
}
xhr.setRequestHeader("content-type", "application/json");
xhr.send(JSON.stringify({
username:form[0].value,
password:form[1].value
}))
// 让form的onsubmit返回false，可以取消自动提交和跳转
return false
}
