JavaScript基础笔记

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

数据类型

基本数据类型

引用数据类型（对象、函数等）（数组属于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

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

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

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

新增元素（增）

事件

常用的事件

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

动态绑定：
动态绑定：事件不是直接写到标签中，即不是拿事件作为标签的属性名了。而是通过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}

参见廖雪峰的博客