JavaScript基础笔记

虽然JavaScript坑很多，但是函数是一等公民这点挺让我喜欢的
在这推荐一下廖雪峰的JavaScript教程

数据类型

基本数据类型

类型	描述
数字类型：number	包含了小数和整数
布尔类型：boolean	true（真）/ false（假）
字符串类型：String	包含字符和字符串，既可以使用双引号又可以使用单引号
未定义类型：undefined	只有一个值，即 undefined未定义
空类型：null	只有一个值 null，表示空对象（使用typeof检测是Object）

引用数据类型（对象、函数等）（数组属于object）

运算符

==和===：
==含有隐式地类型转换，===则是正常的比较（!=和!==同理）

两者都可以用来比较两个变量的值是否相等。
== 先做数据类型的转换，再进行比较。比如可以将整数转换为字符串，或者将字符串转换为整数等。
=== 全等 严格的比较，如果符号两侧的数据类型不一致，则立刻返回false。

Js中所有值都可以参与判断，因此总共有6种假的：

数字0， 空字符串(''或者""), false,  null,  undefined,  NaN

函数

函数的声明：

//直接声明
function method(参数){

};
method(参数);//调用

//匿名函数
function(参数){
    匿名函数无法直接调用
};

//匿名函数直接赋值给变量，此时me类型是函数
var me = function(参数){

}

所有函数都有return ，无返回值的函数会自动返回undefined，函数内部可以声明函数，并且函数也可以被返回。

函数赠送两个免费参数this和arguments（但是对象内部的函数的this却被错误的绑定为window，而非外部函数或对象）

var声明的变量作用域：
如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量。不在函数内部声明的变量为全局变量（大坑）。并且var声明的变量作用域级别为函数级别，因此可以使用ES6的关键字let来声明块级变量（就像Java一样可以用花括号来限制变量作用域），用const声明常量。

变量提升

console.log(y);
var y = 10;

上例中浏览器不会报错，而是打印undefined

解构赋值
ES6引入，可以对一组变量同时赋值：

var [x, y, z] = ['hello', 'JavaScript', 'ES6'];
//还可以忽略某些元素：
var [, , z] = ['hello', 'JavaScript', 'ES6'];// 忽略前两个元素，只对z赋值第三个元素
z; // 'ES6'

数组、对象

声明：

//对象直接使用花括号声明
var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;//这个this绑定的是window，strict模式下指向undefined
    }
};
//数组使用方括号声明（但数组使用typeof检测却是object！）
var arr = [];

---

常用方法

使用JQuery的时候把自己的脚本引入位置放在页面尾部！！！ 否则在Dom未加载的时候会获取不到元素！！！

document.getElementById(id)用了JQuery之后这个貌似没啥用了
window.setInterval(method, millisec)定时器（循环执行）
window.clearInterval(method)清楚定时器
window.onload页面加载时执行的函数
window.setTimeout定时器（执行一次）
获取到DOM后设置节点的属性：obj.style.样式名= 样式值多个单词使用-连接时不再使用，而改为驼峰法
praseInt/parseFloat将字符串转化为数字（注意该方法有两个参数，因此不能使用在Lambda中）

window属性：
Window 、History、 Location（在AJAX广泛使用的今天不推荐使用History）

alert()提示框
confirm()确认框
prompt(提示信息, 默认值)输入框

Location表示的是当前浏览器的地址栏对象。

例如URL: http://127.0.0.1:8020/location.html?__hbt=150384448335#abc

属性	对应的值
hash:	#abc
host:	127.0.0.1:8020
hostname:	127.0.0.1
href:	http://127.0.0.1:8020/location.html?__hbt=1503844483351#abc
pathname:	location.html
port:	8020
protocol:	http:
search:	?__hbt=1503844483351

可以修改该属性来实现跳转

---

DOM对象的属性方法
有了JQuery估计这些使用不到了

属性名	描述
element.getAttribute(属性的名称);	根据标签的属性的名字来获取属性的值
element.setAttribute(属性的名称, 值);	给标签设置一个属性
element.removeAttribute(属性的名称);	根据标签的属性的名字来删除属性
element.children;	获取当前元素（标签）的子元素注意：获取的子级（一层），不管嵌套(不包括孙子，只包括儿子)
element.nodeName/tagName;	获取标签名 注意：获取的是大写的字符串的标签名
element.innerHTML;	获取当前元素（标签）的文本内容 哈哈

1、获取元素对象（查）（同样被JQuery代替2333）

方法名	描述
document.getElementById(id名称);	通过元素（标签）的id属性值获取标签对象，返回的是单个的标签对象注意：只能从document下面去获取
document.getElementsByName(name属性名称);	通过元素（标签）的name属性值获取标签对象，返回的是标签对象的数组。注意：只能从document下面去获取
document/parentNode.getElementsByTagName(标签名);	通过元素（标签）的名称获取标签的对象,返回的是标签对象的数组。注意：可以从document或者某一个父级标签下面去获取
document/parentNode.getElementsByClassName(类名);	通过元素（标签）的class属性获取标签对象，返回的是标签对象的数组。注意：可以从document或者某一个父级标签下面去获取

新增元素（增）

方法名	描述
document.createElement(元素名称)	在页面上根据标签名来创建元素，返回创建的标签（元素）对象注意：只能从document下面去创建元素
parentNode.appendChild(要添加的元素对象);	在某一个父级元素（标签)下面去添加一个元素，每次添加到父级元素的最后面，相当于一个追加的操作
parentNode.insertBefore(要添加的元素对象，在谁的前面添加);	在某一个父级元素（标签)下面去添加一个元素，可以指定在哪一个子元素（标签）的前面添加

---

事件

常用的事件

事件名	描述
onload	某个页面或图像被完全加载之后触发
onsubmit	当表单提交时触发该事件---注意事件源是表单form
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onblur	元素失去焦点(输入框)
onfocus	元素获得焦点(输入框)
onchange	用户改变域的内容。一般使用在select标签中。
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住，一直按住
onkeyup	某个键盘的键被松开
onmousedown	某个鼠标按键被按下
onmouseup	某个鼠标按键被松开
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开
onmousemove	鼠标被移动

静态绑定（使用较少）：
直接在标签中绑定：
<标签 事件名 = "函数名()" ... ></标签>

动态绑定：
动态绑定：事件不是直接写到标签中，即不是拿事件作为标签的属性名了。而是通过DOM技术来获取元素（标签），然后直接给标签添加事件，而事件一般后面跟着一个匿名函数。
document.getElementById(“div”).oDiv.onclick = function() { }

---

Array、RegExp

Array声明方式：

var arr = new Array();   
var arr = [];//一般使用这种
var arr = new Array(5);//创建数组大小是5的数组。
var arr = new Array(element0, element1, ..., elementn);
var arr = [element0, element1, ..., elementn];//一般使用这种

数组可以使用map()、reduce、filter()、sort()、forEach()等函数式方法（需要注意的是sort方法对数字排序时会自动转化字符串，因此需要手动传入函数）同时还有特有方法：
every()判断数组的所有元素是否满足测试条件
find()查找符合条件的第一个元素，如果找到了，返回这个元素，否则，返回undefined
findIndex()和find()类似，也是查找符合条件的第一个元素，不同之处在于findIndex()会返回这个元素的索引，如果没有找到，返回-1

RegExp声明方式：

var reg = new RegExp(“正则表达式”); 
var reg = /正则表达式/;//一般使用这种方式

RegExp对象的test(参数)方法用于测试给定的字符串是否符合条件。
字符串的split()分割方法是支持正则的

exec()方法在匹配成功后，会返回一个Array，第一个元素是正则表达式匹配到的整个字符串，后面的字符串表示匹配成功的子串。

可以添加参数g表示全局匹配var r1 = /test/g，这样每次调用exec()方法会返回下一个匹配到的值
正则表达式还可以指定i标志，表示忽略大小写，m标志，表示执行多行匹配。
全局匹配类似搜索，因此不能使用/^...$/，那样只会最多匹配一次。

---

使用JQuery改变的是标签的属性值，不一定会改变标签状态。（CheckBox的checked检测可以是true（boxName.checked），但该CheckBox不一定有checked属性）
并且，对于attr和prop两个方法，jQuery认为：attribute的“checked”、“selected”、“disabled”就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。贴个博客

---

JSON

JSON在JS里面其实就是一个对象：

var json = { key1: value1, key2:value2…};

number：和JavaScript的number完全一致；
boolean：就是JavaScript的true或false；
string：就是JavaScript的string；
null：就是JavaScript的null；
array：就是JavaScript的Array表示方式——[]；
object：就是JavaScript的{ ... }表示方式。

JSON的字符串规定必须用双引号""

序列化：

'use strict';

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '"W3C" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
var s = JSON.stringify(xiaoming);
//要输出得好看一些，可以加上参数，按缩进输出：
JSON.stringify(xiaoming, null, '  ');
//结果
{
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": ""W3C" Middle School",
  "skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
  ]
}


//第二个参数用于控制如何筛选对象的键值，如果我们只想输出指定的属性，可以传入Array
JSON.stringify(xiaoming, ['name', 'skills'], '  ');
//结果
{
  "name": "小明",
  "skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
  ]
}

//还可以传入一个函数，这样对象的每个键值对都会被函数先处理

//想要精确控制如何序列化小明，可以给xiaoming定义一个toJSON()的方法，直接返回JSON应该序列化的数据：
var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '"W3C" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: function () {
        return { // 只输出name和age，并且改变了key：
            'Name': this.name,
            'Age': this.age
        };
    }
};

JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

//拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个JavaScript对象：
JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45

//JSON.parse()还可以接收一个函数，用来转换解析出的属性：
var obj = JSON.parse('{"name":"小明","age":14}', function (key, value) {
    if (key === 'name') {
        return value + '同学';
    }
    return value;
});
console.log(JSON.stringify(obj)); // {name: '小明同学', age: 14}

参见廖雪峰的博客