JavaScript(下)

JavaScript函数及应用

为什么要有函数？
函数 可以封装一段特定功能的代码，通过函数名可以重复调用此段代码

定义函数

function 函数名(){
	函数体(一段代码);
}
 *：函数不会自己运行

调用函数

函数名();

函数的参数：形参和实参

在调用函数时，可以向其传递值，这些值被称为参数
传多个参数时，由逗号（,）分隔
1、形式参数：在声明一个函数的时候，为了函数的功能更加灵活，有些值是固定不了的，对于这些固定不了的值，我们可以给函数设置参数。这个参数没有具体的值，仅仅起到一个占位置的作用，我们通常称之为形式参数，也叫形参。
2、实际参数：如果函数在声明时，设置了形参，那么在函数调用的时候就需要传入对应的参数，我们把传入的参数叫做实际参数，也叫实参。

函数内部是一个封闭的环境，可以通过传参的方式，把外部的值传递给函数内部
在函数内部修改形参的值，不会影响函数外部的实参的值，是因为在调用函数的时候，是把实参的值复制了一份赋给形参的

	function fun(形参1,形参2...){	//函数声明
		alert("函数使用");
	}
	
	fun(实参1,实参2...);		//函数调用
注：把形参看做是没有经过声明的变量就好

函数的返回值

当函数执行完的时候，并不是所有时候都要把函数打印。我们期望函数给我们一些反馈（比如计算的结果的返回进行后续的运算）,这个时候可以让函数返回一些东西，也就是返回值。函数通过return返回一个返回值

返回值语法：
//声明一个带返回值的函数
function 函数名(形参1，形参2，形参3...){
	//函数体
	return 返回值;
}

//可以通过变量来接收这个返回值
var 变量 = 函数名(实参1，实参2，实参3...);

函数的调用结果就是返回值，因此我们可以直接对函数调用结果进行操作
注：
1、如果函数没有显示的使用return语句，那么函数有默认的返回值：undefined
2、如果函数使用return语句，那么跟在return后面的值，就成了函数的返回值
3、如果函数使用return语句，但是return后面没有任何职，那么函数的返回值为undefined
4、函数使用return语句后，这个函数会在执行完return语句之后停止并立即退出，也就是说return后面的所有其它代码都不会再执行

arguments的使用

JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参，arguments是一个伪数组，因此可以进行遍历

//求任意个数的最大值
function getMax(){
	var max = arguments[0];
	for(var i = 1;i < arguments.length;i++){
		if(max < arguments[i]){
			max = arguments[i];
		}
	}
	return max;
}

var max = getMax(5,10,1,5,11);
console.log(max);

函数其它

1、匿名函数：没有名字的函数
	匿名函数如何使用：
	1、将匿名函数赋值给一个变量，这样就可以通过变量进行调用
	2、匿名函数自调用
2、自调用函数：当函数书写完成之后立即调用
	匿名函数不能通过直接调用来执行，因此可以通过匿名函数的自调用的方式来执行

1、函数声明-命名函数
	function fn(){}
2、函数表达式 -- =后是 匿名函数
	var fn = function(){}
3、自调用函数 --()表达式/函数()调用
	(function(){console.log("自调用")})()
4、函数也是一种数据类型 function也是一种数据类型
	因为函数是一种数据类型，所以函数可以作为另一个函数的参数
	因为函数是一种数据类型，所以函数可以作为另一个函数的返回值

代码规范

1、命名规范：
	变量、函数的命名 必须有意义
	变量 的名称一般用名词
	函数 的名称一般用动词
2、变量规范
	操作符的前后要有空格
3、注释规范
	// 这里是注释    //后有空格
4、空格规范
	if语句 -- if () {} --()前后要有空格
	for语句 -- for (; ; ) {} --()前后要有空格, ;后面要有空格
	数组 -- var arr = [1, 3, 5]; -- ,后面要有空格
5、换行规范
	if (a > b) {
	}
	--起始的花括号要与if语句在同一行
	--花括号之前要有一个空格

作用域：变量可以起到作用的范围

全局变量和局部变量
 1、全局变量
 	在任何地方都可以访问到的变量就是全局变量，对应全局作用域
 2、局部变量
 	只在固定的代码片段内可访问到的变量，最常见的例如函数内部。对应局部作用域（函数作用域）
 注：
 不使用var声明的变量是全局变量，不推荐使用
 变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁

块级作用域
	任何一对花括号（{和}）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域

预解析

1、变量提升：把变量的声明提升到当前作用域的最上面，不包含变量的赋值
2、函数提升：把函数的声明提升到当前作用域的最上面，不包括函数的调用
3、在预解析的过程中如果函数和变量的名字相同，此时函数优先
eg1:
	console.log(num);
	var num = 5;
预解析：
	var num;
	console.log(num);
	num = 5;
	
eg2:
	var a = 25;
	function abc() {
		alert(a);
		var a = 10;
	}
	abc();
预解析：
	var a;
	function abc() {
		局部预解析：
		var a;
		alert(a);
		a = 10;
	}
	a = 25;
	abc();
	 ----undefined   全局定义变量a,给a赋值25，调用函数，函数内部有变量a,没赋值，则打印出来为undefined

eg3:
	console.log(a);
	function a() {
		console.log('aaaaa');
	}
	var a = 1;
	console.log(a);
预解析：
	var a;
	function a() {
		console.log('aaaaa');
	}
	
	console.log(a);     --函数a
	a = 1;
	console.log(a);     -- 变量a

JavaScript对象

JavaScript对象其实就是生活中事物的一个抽象
JavaScript对象是无需属性的集合：它的属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript中的对象想象成键值对，其中值可以是数据和函数。
对象 具有属性和方法：属性 – 特征（名词 描述这个对象的） 方法 – 行为（动词 用来做什么）

对象的字面量：{}

// 手机 不是对象 它是一类事物
// 汽车 不是对象 它是一类事物

函数和对象的区别

函数：可以封装一段代码
对象：封装一组属性和方法

对象的基本操作

创建dog对象：
	属性：昵称 name age color
	方法：叫 bark 吃 eat
	var dog = {
		name: 'puppy',
		age: 3
		color: 'black'

		bark: function () {
			//在方法中如何使用属性的值
			//this 在方法中代表的是当前对象 dog
			console.log(this.name + '汪汪');
		},

		eat:function () {
			console.log(this.name + '啃骨头');
		}
	} 

	//如何访问属性  对象.属性名
	console.log(dog.name);
	//如何访问方法  对象.方法名
	dog.bark();

属性的另一种访问方式
console.log(dog['name']);

函数和方法的区别

函数：独立存在的函数
方法：属于对象的函数

对象的创建方法：

1、对象字面量
	var hero = {
		name:'lucy';
		sex:'女';
	}
2、new Object()
	//Object 是一个构造函数
	//new 的方式来调用构造函数
	//new Object() 调用构造函数 会在内存中创建一个对象
	//JavaScript的动态特性，随时增加成员
	var hero = new Object();   创建了一个空的对象
	hero.name = 'lucy';
	hero.sex = '女';

注：1是2的缩写形式

3、工厂方法
	function createHero(name,sex){
		var hero = new Object(); //返回一个空的对象
		hero.name = name;
		hero.sex = sex;
		return hero;
	}	
4、自定义构造函数：构造函数第一个英文字母大写
	帕斯卡命名：第一个单词的第一个字母大写，后续的每一个单词的第一个字母都大写
	//自定义构造函数
	function Hero(name,sex){
		// this 动态的给对象增加成员
		// this指向new Hero的时候创建的对象
		this.name = name;
		this.sex = sex;
	}

new的执行过程

1、在内存中创建了一个空的对象
2、让构造函数中的this指向刚刚创建的对象
3、执行构造函数，在构造函数中设置属性和方法
4、返回了当前对象

this出现在以下位置分别代表什么

1、函数中	--this指向window
2、方法中	--this指向的是这个方法所属的对象
3、构造函数中	--this就是构造函数创建的对象

如何遍历和删除对象的属性

1、for in 可以遍历对象的成员
	for (var key in obj){
		console.log(key + '----' + obj[key]);
	}
2、delete 删除对象的属性
	var o = {
		name:'abc';
		say: function () {
		}
	}
	
	delete o.name;
	delete o.say;

JavaScript简单类型和复杂类型

简单类型 存储在内存中的栈上
复杂类型 存储在内存中的堆上
JavaScript中没有堆栈的概念，通过堆栈的概念更容易理解一些

简单类型在内存中如何存储

var n1 = 10;
var n2 = n1;

复杂类型在内存中如何存储

function Person(name,age){
	this.name = name;
	this.age = age;
	this.sayHi = function(){
		console.log(this.name +':Hello');
	}
}

var p1 = new Person(‘zs’,18);
var p2 = p1;
p1.name = ‘ls’
p2.name = ?

p2.name = 'ls'

JavaScript内置对象

JavaScript组成：ECMAScript BOM DOM
ECMAScript:变量 注释 数据类型 类型转换 操作符 流程控制语句（判断和循环） 数组 对象 构造函数 内置对象

JavaScript中的对象有三种：自定义对象、内置对象、浏览器对象
ECMAScript中的对象：自定义对象、内置对象

如何学习一个方法？ 查文档：MDN

方法的功能
参数的意义和类型
返回值意义和类型
demo进行测试

内置对象：Math/Array/Date…
最常用的属性和方法:
1、Math对象

Math对象不是构造函数，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供
Math.PI							//圆周率
Math.random()					//生成随机数
Math.floor()/Math.ceil()		//向下取整/向上取整
Math.round()					//取整，四舍五入
Math.abs()						//绝对值
Math.max()/Math.min()			//求最大值和最小值
Math.sin()/Math.cos()			//正弦/余弦
Math.power()/Math.sqrt()		//求指数次幂/求平方根

2、Date对象

Math对象和Date对象的区别：
	Math 不是一个构造函数，里面提供的是静态成员
	Date 是一个构造函数，首先要通过new Date()来创建日期实例（对象），里面提供的是实例成员 

日期构造函数 Date()

1、空构造函数 获取的是当前时间对象
var d = new Date();
2、构造函数中传入毫秒值
var d = new Date(1502080);
3、传入日期形式的字符串
var d = new Date('1988-8-8 10:8:8');
4、传入数字
var d = new Date(1988,8,8);

如何获取日期对象的毫秒值

1、valueOf()
var d = new Date();
console.log(d.valueOf());    -- 不推荐在代码中显示使用
2、getTime()
console.log(d.getTime());
3、var num = Date.now()     //浏览器兼容问题 Html5
4、var num = + new Date();  // +在这里是取正

日期格式化方法

 toString()				//转换成字符串
 valueOf()				//获取毫秒值

获取日期指定部分

 getTime()				//返回毫秒数和valueOf()结果一样
 getMilliseconds()		
 getSeconds()			//返回0-59
 getMinutes()			//返回0-59
 getHours()				//返回0-23
 getDay()				//返回星期几 0周日
 getDate()				//返回当前月的第几天
 getMonth()				//返回月份，***从0开始***
 getFullYear()			//返回4位的年份，如2016

3、Array对象

如何创建数组对象

1、数组字面量 []
var array = [];
var numbers = [1,5,1];

2、数组的构造函数Array
var array = new Array();			//空数组
var numbers = new Array(4,1,6);		

如何判断一个变量是否是数组对象

function fn(arr){
	//判断参数arr是否是数组对象    
	
	//方式1
	if(!(arr instanceof Array)){
		console.error('参数err 不是数组对象');
		return;
	}
	
	//方式2     浏览器兼容性问题 HTML5
	if(!(Array.isArray(arr))){
		console.error('参数err 不是数组对象');
		return;
	}
}

JavaScript数组常用方法及应用

toString()/valueOf() 每一个对象都有这两个方法

var arr = [5,1,8,0];
console.log(arr);
console.log(arr.toString());		--toString() 把数组转换成字符串，并且使用"，"分割每一项
console.log(arr.valueOf());			--valueOf()返回数组对象本身

数组常用方法：

1、栈操作（先进后出）
	push()  方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度
	pop()   返回数组中的最后一个元素，并且会修改数组的长度

2、队列操作（先进先出）
	push() 
	shift()    取出数组中的第一个元素，修改length属性
	unshift()		在数组最前面插入项，返回数组的长度
3、排序方法
	reserve()		翻转数组
	sort()		默认情况下是对字符编码，从小到大排序，直接在原数组上进行排序
	eg:
	从小到大
	var arr = [25,10,108,18];
	arr.sort(function(a,b){
	return a - b;
	})
4、操作方法
	concat()			把参数拼接到当前数组
	slice()				从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始，end从1开始
	splice()			删除或替换当前数组的某些项目，参数start,deleteCount,options(要替换的项目)
5、位置方法
	indexOf()、lastIndexOf()	如果没找到返回-1
6、迭代方法  不会修改原数组（可选）
	every()、filter()、forEach()、map()、some()
7、方法将数组的所有元素连接到一个字符串中
	join()

清空数组

 1、推荐  arr = [];
 2、arr.length = 0;
 // 第一个参数，是从什么位置开始删除 索引
 //第二个参数，删除多少个元素
 3、arr.aplice(0,arr.length)  

JavaScript字符串常用方法

字符串对象的常用方法
字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串

1、字符方法
	charAt()			获取指定位置处字符
	charCodeAt()		获取指定位置处字符的ASCII码
	str[0]				HTML5,IE8+支持，和charAt()等效
2、字符串操作方法
	concat()			拼接字符串，等效于+，+更常用
	slice()				从start位置开始，截取到end位置，end取不到
	substring()			从start位置开始，截取到end位置，end取不到
	subster()			从start位置开始，截取length个字符
3、位置方法
	indexOf()			返回指定内容在元字符串中的位置
	lastIndexOf()		从后往前找，只找第一个匹配的
4、去除空白
	trim()				只能去除字符串前后的空白
5、大小写转换方法
	to(Locale)UpperCase()	转换大写
	to(Locale)LowerCase()	转换小写
6、其它
	search()
	replace()
	split()	

eg:‘abcoefoxyozzopp’查找字符串中所有o出现的位置

var s = 'abcoefoxyozzopp';
当查找不到的时候返回的是-1
var index = -1;
do{
	index = s.indexOf('o',index + 1);
	if(index !== -1){
		console.log(index);
	}
}while(index !== -1);

eg:把字符串中所有的o替换成！

var s = 'abcoefoxyozzopp';
当查找不到的时候返回的是-1
var index = -1;
do{
	index = s.indexOf('o',index + 1);
	if(index !== -1){
		s = s.replace('o','!');
	}
}while(index !== -1);
console.log(s);

eg:判断一个字符串中出现次数最多的字符，统计这个次数

var s = 'abcoefoxyozzopp';
//出现次数最多的字符
var ch;
//统计这个次数
var num;
//记录字符串中每一个字符出现的次数
var o = {};
for(var i = 0;i< s.length;i++){
	var item = s.charAt(i);
	if(o[item]){
	//已经有该属性，+1
	o[item]++;
	}else{
		o[item] = 1;
	}
}

求最大值，并且找到次数最多的字符
假设最大值是1
num = 1;
for( var key in o){
	if(num < o[key]){
		num = o[key];
		ch = key;
	}
}

获取url中？后面的内容

var url = 'http://www.itheima.com/login?name=zs&age=18&a=1&b=2';
//
//console.log(url.substr(index));
获取url后面的参数
function getParams(url){
	//获取url?后面第一个字符的索引
	var index = url.indexOf('?') + 1;
	//url中?后面的字符串 name=zs&age=18&a=1&b=2'
	var params = url.substr(index);
	使用&切割字符串，返回一个数组
	var arr = params.split('&');
	var o = {};
	//数组中每一项的样子 key = value
	for(var i = 0;i < arr.length; i++){
	var tmpArr= arr[i].split('=');
	var key = tmpArr[0];
	var value = tmpArr[1];
	 o[key] = value;
	 }
	 return o;
}
	getParams(url);