Javascript学习笔记

首先

先附上我看的这份教程吧！

其次其次，附上js几个常见的调试的代码

console.log(“console.log”);

console.info(“console.info”);

console.debug(“console.debug”);

console.warn(“console.warn”);

console.error(“console.error”);

最后-进入正题

基础知识

Nunber：包含整数，浮点数，负数。其中 NaN表示不是一个数字， Infinity表示无限大，超出了js的计算范围；

字符串：可以使用单引号，也可以使用双引号引起来，没有字符，只有字符串；

布尔值true false

运算符：与或非 && || ！

比较运算符 > < == === 其中 == 和 === 的区别是，==会自动转换数据类型， ===不会自动转换类型

特殊的情况:

NaN === NaN；//false 而 isNaN（NaN）；//true false==0；//true，false===0；//false

浮点数的比较不能直接比较，直接比较返回来的是false，要取他们之间的绝对值，小于某个阀值；

null 和 undefine null表示为空，undefine表示未定义，类似于java的未初始化

数组，声明数组的两种方式 var arr=[23,56,48]; var arr = new array(1,63,45);

对象，对象是由一组键值对组成的无序的集合，类似于java的map集合。var person={ name:’zhangsan’,age:20}对象取值的时候以.的方式取值，例如 person.name

字符串常用的api

取某个字符 和数组一样，var s = “abc”; s[2] 的值是 c;

字符串一旦定义，是不可改变的，var str=”asdfg”;str[2]=”5”;alert(str); 最后弹出来的还是asdfg

toUpperCase toLowerCase 将字符串转为大写(小写)

indexOf 搜索指定字符串的位置。

substring 截取字符串，传入1个参数时指从这里截取到结尾，两个参数表示从哪里到哪里。

数组常用的api

取值 arr[2] 取第三个值，如果长度为3，你下标写的是3，它不会报数组越界，而是返回给你一个undefine

赋值，和java一样，arr[2]=”dsa”;同样，赋值也不会报越界，如果超过了，会自动扩展，例如一个数组长度为3，那么arr[5]=”sad”; 那么执行完这句后，数组的长度会自动的扩展到6，而 arr[3] arr[4] 的值为undefine

取长度，直接使用数组的length属性就可以取到数组的长度。

indexOf 取某个元素的索引，没有则返回-1；这个时候需要注意的是数据类型要一一对应，数组里面的是30，你indexOf(“30”); 返回来的是-1；

slice()截取，和字符串的substring一样，当此函数不传任何参数的时候，将改数组复制一份。

push 和 pop push表示向数组的末尾添加若干个元素，pop则表示从该数组的结尾删除一个元素。

unshift 和 shift 和push，pop 一样。unshift表示往头部添加，shift表示从开头删除。

sort() 排序，直接调用的话，按照自然排序。

reverse() 反转

splice 修改数组， arr.splice(2, 3, ‘Google’, ‘Facebook’);// 从索引2开始删除3个元素,然后再添加两个元素,arr.splice(2, 2); // 只删除,不添加,arr.splice(2, 0, ‘Google’, ‘Facebook’); // 只添加,不删除

concat拼接数组，var arr = [‘A’, ‘B’, ‘C’];arr.concat(1, 2, [3, 4]); // [‘A’, ‘B’, ‘C’, 1, 2, 3, 4]

join()var arr = [‘A’, ‘B’, ‘C’, 1, 2, 3];arr.join(“-“); // ‘A-B-C-1-2-3’; join里面不能不传。可以传”“

对象：

对象和java中的map集合类似，写法和C的结构体有点类似。

对象以键值对的形式出现，访问属性的时候用.来表示。属性名和属性值之间用分号来表示。

对象的属性名必须是一个有效的变量名，如果是一个包含有特殊符号的变量，必须用单引号引起来，否则这个属性无法使用。

获取属性的两种方式：entity.key entity[‘key’] 如果key里面有特殊的符号，必须使用第二种方式获取。

in 判断某个属性是否存在，‘key’ in entity 判断entity中是否存在key属性。存在则true，不存在则false

hasOwnProperty() 判断自身是否存在某个属性。entity.hasOwnProperty(‘key’); 和 in 不一样的是，in可以判断它父对象的属性，任何对象最终都继承自Object。

流程跳转

if-else、和java没啥区别啊，支持嵌套，支持else if

循环

for 和 java中的好像没啥区别啊。

for(var key in entity){
if(entity.hasOwnProperty('key')){
alert(entity.[key])
}
}

for in 可以用来循环实体，用来把一个对象的所有属性都循环的取出来。

var a = ['A', 'B', 'C'];
for (var i in a) {
alert(i); // '0', '1', '2'
alert(a[i]);//'A','B','C'
}

循环还有while 和 do-while

Map

Map和java一样，key不可以重复。

Map的初始化：var map = new Map([[‘Michael’, 95], [‘Bob’, 75], [‘Tracy’, 85]]);

map.get(‘key’)；获取

map.set(‘key’,value); 设置，如果这个键对应的值已存在，则覆盖。

map.delete(‘key’); 删除

Set

和 java 中的set类似，里面的元素不能重复。

set的初始化：var s2 = new Set([1, 2, 3]); // 含1, 2, 3

set.add();添加 添加的时候可以重复添加，但不会有效果，也不会覆盖。

set.delete();删除

Iterable

迭代器，可迭代的。array map set 都是属于iterable

terable 可以用 for of 来循环遍历

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
alert(x);
}
for (var x of s) { // 遍历Set
alert(x);
}
for (var x of m) { // 遍历Map
alert(x[0] + '=' + x[1]);
}

函数function

函数的定义

function abs(x){
if(x>0){
return x;
}else{
return -x;
}
}
function 函数的关键字，函数不需要指定返回值类型
abs 函数名
x 参数，如果有多个参数则要用逗号分开，参数不用指定类型
大括号之间的是函数体
函数执行到return则返回，不再执行下去。

函数的第二种定义的方式，将一个匿名的函数赋值给一个变量

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

两种定义的方式实际上是一致的，不同的是，第二种需要在最后的大括号后面跟上一个分号，表示结束了。

函数的调用，调用函数和java差不多，函数名，然后小括号里面跟上参数。

当参数个数大于函数接受的参数个数的时候，后面的会直接忽略掉，当传入的参数个数小于函数可接受的参数个数的时候，会自动undefine补齐。

rest 可变参数，函数可以接受一个个数可变的参数，其实就是一个数组，function abc（x，y，…rest）这个函数除了接受x和y两个参数外，还接收一个rest参数，函数调用的时候和其他一样。当调用的时候只传递两个参数的时候，rest为一个空数组，当调用的时候传递3个参数的时候，那就是长度为1的数组。rest必须是函数中最后一个参数，且必须前面有.

argument 参数，它是所传进去函数的参数集。它只在函数中使用，使用起来和数组差不多，但不是一个数组。函数接受的参数个数为3个，但调用的时候传进去2个，那么argument里面就有2个，而不是3个。所以。argument实际上是参数的副本。是实际传递进去的。因为js是不限制参数的传递的个数的，所以argument经常用来判断传进去的参数的个数，来做进一步的。

函数的作用域：js中，函数支持嵌套。也就是函数里面可以有函数。里面函数可以访问外面函数的变量，外面函数就不能访问里面函数的变量。如果函数的名字重复，则使用本函数里面的。

全局作用域：当一个变量不是定义在function里面的时候，那么它就是一个全局的变量，作用域就是全局。可以使用windows来调用。

需要注意的是，函数里面的变量一定要 var 声明，不然就会变成一个全局变量。

方法

在一个对象中绑定函数，称之为这个对象的方法。例如：

var xiaoming={
name:'xiaoming',
birth:1990,
age:function(){
var y = new Date().getFullYear();
return y-this.birth;
}
};

上面的例子，age是匿名function计算出来的，这有别于其他，这样我们就可以做更多的事情了

其中例子中有一个关键字 this this到底是啥？this指向的是调用函数的对象。

高阶函数

函数接收变量，变量可以指向函数，那么一个可以接收函数作为变量的函数就是高阶函数。

function add（x，y，f）{
return f(x)+f(y);
}

这就是一个高阶函数，函数中的第三个参数就是一个函数。例如，add（-5，6，abs），运行的结果是11

map也是一个高阶函数，它对数组array起作用，可以对array里面的每一个元素做相应的动作。

array=[1,2,3]; fun = function(x){return x*x} 那么生成的新的数组那就是[1,4,9],对原数组中的每一个元素做平方的操作。

array.map(fun);这里是指，对数组array里面的每个元素都调用一下fun函数，生成一个新的数组，

reduce 也是一个高阶函数，也对array起作用，指对array里面的元素做一些动作，使之最后得到一个结果，例如我要对数组[1,2,3] 里面的每一个元素加起来，也就是累加。那么可以使用reduce。例如下面的例子，运行的结果是25.

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x + y;// 25
}
);

filter 同样是一个对array起作用的一个高阶函数，它可以过滤掉一些元素，保留一些元素形成一个新的数组。是否保留某个元素由传递进去的函数的返回的true或者false决定，那么，传递进去的函数的返回值就必须是一个boolean类型的返回值。例：var arr=[1,2,3,4]; arr.filter(function (x) { return x % 2 !== 0; }); 得到的新的数组为[1,3]，例如下面的例子运行的结果是: [1, 2, 10, 20]。

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
if (x < y) {
return -1;
}
if (x > y) {
return 1;
}
return 0;
});
//这样就可以实现数字的排序，相应的，如果是按照字母来排序的话，
//可以全部转化成大写或者小写来排序（转化成大写 toUpperCase(),）

高阶函数不仅可以将函数作为一个参数传递进去，还可以将一个函数作为返回值进行返回。

//高阶函数的闭包
function sun(arr){
//返回一个函数
return function(){
//这个返回的函数的返回值是对数组做reduce
return arr.reduce(function(x,y){
//reduce做的是对数组里面的元素进行累加
return x+y;
});
}
}
var syy=[1,2,3];//数组
var fun = sun(syy);//函数。得到的是一个函数，也就是说fun是一个函数
var ff = fun();//ff 是函数 fun 执行得到的结果。
alert(ff);
//这就是典型的将函数作为返回值的情况。
//就上面这个例子，如果再次调用一下 var fun1=sun(ssy)；
//得到一个新的函数fun1 和fun 是两个不同的函数，
//当你对它们做 === 的操作的时候，返回来的是false，
//但对函数 fun fun1 的返回值做 ===  的操作，返回的是 true
//fun() === fun1();//true

闭包

在js中，方法里面可以读取全局的变量，而在方法外面是不能访问方法里面定义的变量的，所以，要在外面访问方法里面的变量，这就是函数的闭包。

所以，闭包就是定义在一个函数里面的函数，本质上，闭包就是连接函数里面和外面的一个桥梁

箭头函数

箭头函数相当于匿名函数，只用一个箭头来表示

例如 function(x){return x*x;} 可以写成这样 x => x*x;

也就是说，1，省略了 function 的声明 2，参数也省略了用小括号包裹 3，函数体也省略了用大括号包裹 4，返回也省略了return 关键字。

不是所有的箭头函数都可以这么省略的，function是可以省略的，其他需要注意的是

函数体超过一行的时候就要用大括号括起来，并且return也不能省了；

参数是两个或者两个以上，也要用小括号括起来，没有参数也要用小括号；

js函数的返回值是可以返回一个对象的，所以，当一个函数返回一个对象的时候。例如 function(x){return {name:x}} 这个函数，返回的是一个对象，这个对象中只有一个属性为name，那么使用箭头函数就不能这样写。x =>{name:x} 而是要把这个对象用小括号包起来，也就是这样 x => ({name:x})

this，箭头函数中的this和普通函数的this是有却别的，普通函数里面的this是在运行的时候决定的，也就是谁调用，this指向的就是谁，而箭头函数是，谁绑定，this就指向谁。

Generator

generator是一个新的数据类型，和方法差不多，不同的是，方法每次只能返回一个，而generator能够返回多次。如果我们要返回多个参数的话，那么就要用到数组，一次性的返回多个参数，而generator不用，可以一次一次的返回，这就是他们最大的区别

一次一次返回和一次返回全部也有千差万别的，一次一次的返回可以做到实时性，而一次返回多个，就要等到函数全部执行完毕才能接收到返回值

generator的声明和函数差不多，只是多了个* 函数的声明是：function 而generator 的声明是function* 。

generator也是遇到return的时候就结束函数，中间返回数据则使用yield，当执行到yield的时候，函数就暂停了，等到下一个返回的时候才继续执行。还有一点区别是，函数调用是这样的： fun(s) fun为函数名，s为参数。而generator调用是这样的 var f = fun(s); f.next()；调用next的时候才是正式的调用，当执行到yield的时候就暂停了，等到下一次的调用，当函数已经执行完毕了，也就是执行到return的时候，就不要再继续调用next了，其实generator的返回的时候是这样的[value:0,done:false]，其实返回的是一个对象，该对象里面有两个属性，一个是要返回的数据value，一个是返回是否已经全部完成done，当返回的done是true的时候，函数就执行完毕了。所以，执行generator的时候有一种类似于Java中for each 循环的方式：for…of… 来循环迭代对象，就变成了这样 for(var v of fun(3)){…函数体…}，这样我们就可以在函数体里面对v做操作了。

Js标准对象

JavaScript中，标准的对象有，Number，String，Boolean，undefine，function，Object

alert(typeof 123);//Number
alert(typeof NaN);//Number
alert(typeof "Nam");//String
alert(typeof true);//booleam
alert(typeof undefine);//undefine
alert(typeof Math.abs);//function
alert(typeof null);//Object
alert(typeof []);//Object
alert(typeof {name:"xiaoming"});//Object

number，string，boolean，undefine，function是可以用typeof 来判断的。 object就不行了，因为数组和null都是Object,如果要判断数组可以使用Array.isArray(arr) 来判断，如果判断null可以使用 ===

对象的包装

Number，String，Boolean都有其对应的类，类似于java的装箱拆箱。但装箱后，那么数据类型就不再是基本的标准类型了，而是Object了。所以，装箱后，再去判断是否相等，都是false。123 === new Number(123); //false 因为前面的是数字类型，而后面的是Object类型。

不要使用new Number()、new Boolean()、new String()创建包装对象；

用parseInt()或parseFloat()来转换任意类型到number；

用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；

通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {…}；

typeof操作符可以判断出number、boolean、string、function和undefined；

判断Array要使用Array.isArray(arr)；

判断null请使用myVar === null；

判断某个全局变量是否存在用typeof window.myVar === ‘undefined’；

函数内部判断某个变量是否存在用typeof myVar === ‘undefined’。

任何对象都有toString的方法，但null和undefine是没有的。number调用toString是会报SyntaxError，需要如下处理：

123.toString(); // SyntaxError

123..toString(); // ‘123’, 注意是两个点！

(123).toString(); // ‘123’

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形式表示的时间戳
//new一个Date对象，还可以使用：
var d = new Date(2015, 5, 19, 20, 15, 30, 123);
var d = Date.parse('2015-06-24T19:49:22.875+08:00');
var d = new Date(1435146562875);
//第一种指明了年月日时分秒毫秒，
//第二种直接由字符串转换而来，
//第三种传入一个时间戳，也就是毫秒数。
//Date还有一个方法，转换成本地时间，toLocalString()
//可以转换成当前时区的时间，还可以转换成UTC时间，toUTCString()
//获取当前的时间戳，Date.now() 老版本的ie需要用new Date().getTime();

正则表达式

创建一个RegExp对象的两种方式

var re = /abc-101/;

var re = new RegExp(“abc\-101”);

要匹配的时候直接调用test方法即可，re.test(“1244ds”);这个方法返回的是一个boolean

字符串的切割 split() 这个方法可以接收字符，字符串，也可以接受一个正则表达式，也就是说可以根据正则表达式来匹配，在进行分割。

JSON

js中，支持Json的String字符串和对象直接互相转换.

字符串转换成js：JSON.parse(obj);，json对象转换成字符串：JSON.stringify(str);

JSON.stringify(value,releace,space);完整的语法是这样的，后面两个为可选参数

releace表示筛选，筛选可以传递一个数组，也可以传递一个方法进去，当传一个数组进去的时候，表示保留该数组里面的这几个key对应的key和value。当传递一个方法的时候，方法接收的是key和value，表示方法对其进行处理。

space表示间隔，也就是每一个键值对之间用什么分开。

var xm = {name:"xiaoming",age:12};
//表示只保留age字段，然后用空格进行分隔。
var sxm = JSON.stringify(xm,['age'],' ');
alert(sxm);

//方法表示如果value是字符串，
//就将value全部转换成大写，不是就照原样返回。
var sxm1 = JSON.stringify(xm,function(key,value){
if(typeof value === 'string')
return value.toUpperCase();
return value;
});
alert(sxm1);

//将字符串转换成对象的时候处理该对象
var sxm2 = JSON.stringify(xm);
var xm2 = JSON.parse(sxm2,function(key,value){
if(key === 'age'){
return value*2;
}
return value;
});
alert(JSON.stringify(xm2));

面向对象

js和java，c#不同的是，它两都是利用类（class）来创建对象，js是利用原型来指向某个对象来创建。

var Student={
name:"xh",
birth:1990,
age:function(){
return new Date().getFullYear()-this.birth;
}
};
var stu = new Student("xiaoming");

创建对象的时候调用Object.create(objectName);来创建，里面只需要传入相应的对象名就可以了。

function Student(name){
this.name=name;
this.say=function(){
alert("hello:"+this.name);
}
};
function createStudent(names){
var stu = Object.create(Student);
stu.name = names;
return stu;
}
var st = createStudent("xiaoming");
alert(st.name);

继承，JS的对象也支持继承。

Student.call(this,name);这句表示继承自Student，调用Student的构造函数创建一个对象，并给构造函数传递的参数为name。this是一定要传的，其他可以不传，不传的话，Student里面的name有没有默认值，没有那就是undefine。

function Student(name){
this.name=name;
this.say=function(){
alert("hello:"+this.name);
}
};
function PrimaryStudent(names){
var pri = Student.call(this,names);
this.age = 12;
}
var pri = PrimartStudent("PRI");
alert(pri.name+"--"+pri.age);

js创建对象也可以使用构造函数来创建对象，如下：

class Student{
constructor(names){
this.name = names;
}
hello(){
alert(this.name+":hello!");
}
}
class PriStu extends Student{
constructor(names,grades){
super(names);
this.grade = grades;
}
say(){
alert(this.name + "-*-" + this.grade);
}
}
var stu = new Student("stu");
stu.hello();//stu:hello!

var pstu = new PriStu("pstu",99);
pstu.say();//pstu-*-99

浏览器对象

window 窗口

window.inneeHeight 和 window.innerWidth 表示浏览器内部，网页的宽和高

window.outerHeight 和 window.outerWidth 表示整个浏览器的宽和高

navigator导航

navigator.appName 获取浏览器名称

navigator.appVersion 获取浏览器的版本

navigator.language 获取浏览器的语言

navigator.platform 浏览器平台，也就是操作系统类型

navigator.userAgent 为浏览器设置的 userAgent字符串

screen 屏幕

screen.width 整个屏幕的宽

screen.height 整个屏幕的高

screen.colorDepth 屏幕的色彩的位数 8 16 24 等

location 对象

location.href 表示获取当前页面的完整的url

location.protocol

location.host

locaton.port

location.pathname

location.search

location.hash

locationg.assign() 加载一个页面

location.reload() 重新加载页面

document 对象

document.title 可以获取当前网页的标题

document.cookie 可以获取浏览器的cookie

document.getElementById 根据Id来获取元素

document.getElementsByTagName 根据Tag 来获取页面上的元素

document.getElementsByClassName 根据css的类名来获取页面上的元素

document.history 表示获取该标签卡的历史记录

document.forward() history.back() 表示前进和后退

Dom操作

更新节点的信息

document.getElementById('pId').innerHTML='asd';

表示将id为pId的节点里面的文本内容更改为asd

dom节点的更新，不仅可以改变里面的内容，还可以改变该节点里面的结构，也就是插入html代码

插入

代码的作用是：当点击button按钮的时候，在id为pId的节点里面的最后追加一个a节点，a节点的超链接是#，内容为369，创建一个节点要使用document.create，而不是用上面的一种，上面的那种，会被认为是字符串，而不是节点。

追加还有一种操作是，在某个节点前面追加：

doc.insertBefore(odd,redoc);

这句的意思是：在doc节点里面的redoc节点之前插入odd节点

删除

删除节点直接使用removeChild方法即可

document.getElementById('ppId').parentElement.removeChild(document.getElementById('ppId'));

表单操作

表单的基本类型，

input 标签

type = “text” 普通文本

type = “password” 密码，口令

type = “radio” 单选按钮 一组单选按钮的name要相同才能正常实现单选

type = “checkbox” 多选按钮

type = “rest” 清空表单按钮

type = “file” 文件

type = “hidden” 隐藏

type = “image” 图片形式的按钮

type = “button” 普通按钮

select标签 选择一项，也就是下拉菜单

H5中的新控件中，type还有多种类型

date 日期

week 第几周

time 时间

month 月份

color 颜色选取

获取元素

首先先获取到表单里面的对象

var val = document.getElementById(“id”).value;

设置元素里面的值

document.getElementById("id").value="123";