JavaScript总结

快速入门

数据类型

• number

不区分整数和浮点数,统一用number (NaN表示not a number,Infinity 表示无限大)

• 字符串

单引号或者双引号括起来的任意文本,如果有单引号和双引号可以用\来转义

模板字符串
var name ='小明' 
var message = `hello,${name}.`  反点号用来表示多行字符串

操作字符串
var s = "hello,world" 
s.length; //13
indexOf函数会搜索指定字符串出现的位置 .substring()返回指定索引区间的子串.

• 布尔值
• null和undefined

null表示空,undefined表示未定义

• 数组

[1, 2, 3.14, 'Hello', null,true]
//(不建议)或者用Array()函数创建数组    new Array(1,2,3);
数组用索引来访问
常见方法有indexOf(),slice(截取部分元素),push(末尾添加元素),pop(删除最后一个元素),sort(排序),reverse(反转)

• 对象

键值对组成的无序集合

var ｐｅｒｓｏｎ=
{
    name:'Wkn',
  	age: 22,
  	tags: ['NLP','Java','Python'],
  	city：　'Beijing',
  	zipＣｏｄｅ: null,
  	hasgirlfriend:false
  	//如果包含特殊字符,用引号括起来
  	'school':'eighteen school'
};

要获取对象的属性，用对象变量.属性名

person.name //'wkn'
person['school']// 'eighteen school'

用in判断一个属性是否存在
'name' in person; // true

• 变量

申请一个变量用 var语句

var a;
var b =1;

使用var申明的变量不是全局变量,它的范围被限制在该变量被申明的函数体中.

Map和Set

Map是一组键值对的结构，具有极快的查找速度。

var m = new Map([['w',95],['b',1],['t',5]]);
m.get('w') //95

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

Set是一组key的集合

var s1 =new Set();
var s2 = new Set([1,2,3]);
s.add(4);
s.delete(4);

Iterable

遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。

具有iterable类型的集合可以通过新的for ... of循环来遍历。

函数

定义函数

var abs = function(x)
{
    if(x>=0) return x;
  	else return -x;
};

调用函数

abs(10) //返回10

arguments

它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array：利用arguments，你可以获得调用者传入的所有参数。也就是说，即使函数不定义任何参数，还是可以拿到参数的值：

function abs() {
    if (arguments.length === 0) return 0;
    var x = arguments[0];
    return x >= 0 ? x : -x;
}
abs(); // 0
abs(10); // 10
abs(-9); // 9

全局作用域

不在任何函数内定义的变量就具有全局作用域,实际上,Javascript默认有一个全局对象window,全局作用域的变量实际上被绑定到window的一个属性

为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量：

方法

var person =
{
    name:'wkn',
  	a:22,
  	age: function()
  	{
    	var y =new Date().getFullYear();
      	return y -this.a;
  	}
}

绑定到对象上的函数称为方法，和普通函数也没啥区别，但是它在内部使用了一个this关键字.在一个方法内部，this是一个特殊变量，它始终指向当前对象，也就是person这个变量。所以，this.a可以拿到xiaoming的a属性。

标准对象

Date

Date 对象用来表示日期和时间

var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳

创建一个指定日期和时间的Date对象

var d = new Date(2015, 5, 19, 20, 15, 30, 123);
d; // Fri Jun 19 2015 20:15:30 GMT+0800 (CST)

JSON

在JavaScript中，我们可以直接使用JSON，因为JavaScript内置了JSON的解析。

序列化

var person =
    {
        name:'wkn',
      	age:14,
      	gender:'nan',
      	height:1.75
    }
var s =JSON.stringify(person);
console.log(s);
要输出好看一些,带上一些参数
JSON.stringify(xiaoming, null, '  ');

反序列化

拿到一个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()还可以接收一个函数，用来转换解析出的属性：

面向对象

JavaScript不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程。

var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};
var xiaoming = {
    name: '小明'
};
xiaoming.__proto__ = Student;

JavaScript的原型链和Java的Class区别就在，它没有“Class”的概念，所有对象都是实例，所谓继承关系不过是把一个对象的原型指向另一个对象而已。

创建对象

JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。当我们用obj.xxx访问一个对象的属性时，JavaScript引擎先在当前对象上查找该属性，如果没有找到，就到其原型对象上找，如果还没有找到，就一直上溯到Object.prototype对象，最后，如果还没有找到，就只能返回undefined。

浏览器

浏览器对象

• window

window对象不但充当全局作用域,还表示浏览器窗口.

• navigator

navigator对象表示浏览器的信息.

• screen

screen 对象表示屏幕的信息.

• location

location 对象表示当前页面的URL信息

• document

document对象表示当前页面.用document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点.

document 对象还有一个cookie属性,可以获取当前页面的cookie 通过docement.cookie读取当前页的cookie

• history

history 对象保存了浏览器的历史记录,JavaScript可以调用history对象的back()或者forward(),相当于用户点击了后退或者前进.

操作DOM

首先拿到节点,最常用的方法就是document.getElementById()和documment.getElementsByTagName()以及CSS选择器document.getElementByClassName().

更新DOM

一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树,第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签.

还可以设置CSS

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

操作表单

HTML表单的输入控件主要有以下几种：

• 文本框，对应的<input type="text">，用于输入文本；
• 口令框，对应的<input type="password">，用于输入口令；
• 单选框，对应的<input type="radio">，用于选择一项；
• 复选框，对应的<input type="checkbox">，用于选择多项；
• 下拉框，对应的<select>，用于选择一项；
• 隐藏文本，对应的<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。

如果我们获得了一个<input>节点的引用，就可以直接调用value获得对应的用户输入值.

这种方式可以应用于text、password、hidden以及select。但是，对于单选框和复选框，value属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用checked判断.

提交表单

js两种方式提交表单,方式一是通过<form>元素的submit()方法提交一个表单，例如，响应一个<button>的click事件，在JavaScript代码中提交表单：

<form id="test-form">
    <input type="text" name="test">
    <button type="button" onclick="doSubmitForm()">Submit</button>
</form>
<script>
function doSubmitForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 提交form:
    form.submit();
}
</script>

这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击<button type="submit">时提交表单，或者用户在最后一个输入框按回车键。

因此，第二种方式是响应<form>本身的onsubmit事件，在提交form时作修改.

<form id="test-form" onsubmit="return checkForm()">
    <input type="text" name="test">
    <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 继续下一步:
    return true;
}
</script>