JavaScript 基础3 函数、数组、字符串、Math对象

函数

2、函数的概念和作用

概念：

• 函数就是把完成特定功能的一段代码[抽象出来]，使之成为程序中的一个[独立实体]，起个名字（函数名）。可以在同一个程序或其他程序中多次重复使用（通过函数名调用）。

作用：

• 使程序变得简短而清晰
• 有利于程序维护
• 可以提高程序开发效率
• 提高了代码的重用性（复用性）

3、函数的分类

3.1.内置函数(系统函数、官方函数)

官方提供好的函数，直接使用，例如：

alert()
document.write()
console.log()
parseInt() parseFloat()...

3.2.自定义函数(用户自定义的函数)

用户根据实际需求，需要自己封装一个函数。

3.3.编程中函数的概念

函数是当它被调用时执行的可重复使用的代码块。

3.4事件驱动函数

• 什么是事件驱动函数？
  在和页面交互的过程中所调用的函数，该函数被称之为事件驱动函数。

• 什么是事件？
  和页面交互的行为称之为事件。比如：鼠标点击某个按钮时(onclick)、鼠标浮动或离开
  到某个区域时（onmouseenter、onmouseleave）、文本框获取焦点和失去焦点时(onfocus、onblur)等

• 事件驱动函数的使用

  节点对象.on+事件名 = 事件处理程序

  • 事件目标：节点对象，比如给某个按钮添加点击事件，该按钮就是节点对象或事件目标
  • 事件类型：如onclick、onmouseover、onmouseout
  • 事件处理程序： 函数

var btn = document.getElementById(“btn”);
btn.onclick = function(){
//执行代码
}

4、函数的定义

• function关键字定义一个函数

function 函数名(参数1名字, 参数2名字, …) 函数可以没有形参
{
    语句/代码块;
    return 返回值; 函数可以没有返回值(undefined)
}

4.1.形参、实参

函数的参数跟变量是一样使用。

形参就是在函数定义时，函数名后面的参数，不能用var修饰。
实参就是调用时，函数名后面的参数

在一般传值调用的机制中只能把实参传送给形参，而不能把形参的值反向地传送给实参。因此在函数调用过程中，形参值发生改变，而实参中的值不会变化。

function addNum(n){
    n += 5;
}
var a = 10;
addNum(a);
alert(a);

4.2.作用域

var a = 10;
function m1(){
    var a = 5;
    alert(a);
}
m1();
alert(a); //从下往上寻找

作用域：就是起作用的范围。或者说有效范围。

• 局部变量
  局部变量就是定义在函数内部的变量，这个变量只能在函数内部使用，即作用域范围只是函数内部，另外，形参也是局部变量。
• 全局变量
  全局变量就是定义在函数外部的变量，这个变量在任何函数中都有效，即作用域范围是当前文件的任何地方。

注意：定义变量时省略var是不安全的，不过是合法的，不写var的时候会被解释是全局变量

• 函数之间允许相互调用，也允许嵌套调用。其实我们一直在用函数相互调用。

数组

1、为什么使用数组

当我们需要表示一组数据，或者叫做一次性定义很多相似的数字或变量

2、数组的概念

• 概念：数组的字面意思就是一组数据，一组(一般情况下相同类型)的数据（不一定都是数字，可以是任意数据类型）。
  数组是一种数据类型。
• 作用：使用单独的变量名来存储一系列的值。

2.1.数组的声明

三种声明方式：

1. 通过new运算符创建数组

 v ar  arr = new Array(10, 20, true, "hello");

2. 省略new运算符创建数组

  var arr = Array( 10, 20, true, "hello");

3. 直接通过常量赋值

   var arr = [10, 20, true, "hello”];

注意：

         var arr = new Array(10);
        var arr = Array(10);
【注】上述两种写法，都是声明长

2.2使用数组元素（访问）

【注】在数组中存储的数据叫做数组的元素。

arr[0]:表示数组的第一个元素，0是下标，也叫索引
arr[1]:表示数组的第二个元素，1是下标
……

2.3数组中的几个名词

• 数组的长度（length属性）：
  数组的元素个数 arr.length
  【注】length属性，不是只读的，可以设置。

2.4.数组的下标

下标就是索引，即元素的序号，从0开始，下标最大取值是：数组的长度 length - 1。
下标可以是变量或表达式。

2.5数组的赋值

1. 给数组赋值，就是给数组的元素赋值，需要通过给数组的每个元素一一赋值。

如： arr[0] = 20; //让数组的第一个元素的值为20;
         arr[1] = 12; //让数组的第二个元素的值为12;

2. 以下通过循环给数组的每个元素赋值，赋成下标的平方。

for(var i = 0; i < 10; i++){
     arr[i] = i * i;
}

3.以下通过循环给数组每个元素赋值，随机数。

for(var i = 0; i < 10; i++){
     arr[i] = Math.random();
}

2.6数组的使用

遍历数组
普通for循环
for(var i = 0; i < 5; i++){
     document.write(arr[i]);
}

for…in语句用于遍历数组或者对象的属性（快速枚举法）
for(var i in arr){
     document.write(arr[i]);
}

3、数组的方法

3.1.栈方法

• 让数组像栈一样，可以限制插入和删除项的数据结构。

• 栈是一种数据结构(后进先出)，也 就是说最新添加的元素最早被移除。

• 而栈中元素的插入(或叫推入)和移除(或叫弹出)，只发 生在一个位置——栈的顶部。* ECMAScript 为数组专门提供了 push()和 pop()方法。

• push()方法可以接收任意数量的参数，把它们逐个添加到数组的末尾，并返回修改后数组的长度。

• pop()方法则从数组末尾移除最后一个元素，减少数组的length值，然后返回移除的元素。

alert(box.push("盐城”));   //数组末尾添加一个元素，并且返回长度
box.pop()                         //移除数组末尾元素，并返回移除的元素

3.2.队列方法

• 队列在数组的末端添加元素，从数组的前端移除元素。通过push()向数组末端添加一个元素，然后通过shift()方法从数组前端移除一个元素。

shift()方法可以移除数组首位元素，并且返回长度
alert(box.push("深圳”));       //数组末尾添加一个元素，并且返回长度
alert(box.shift());                   //移除数组开头元素，并返回移除元素
alert(box.unshift());                //数组开头添加两个元素

3.3.数组的一个函数

concat() 方法可以基于当前数组创建一个新数组。
slice() 方法可以基于当前数组获取指定区域元素 [start, end]
splice() 方法由于其参数的特殊性，可以完成 增、删、改三个功能
splice中的删除功能： var box2 = box.splice(0, 2);
splice中的插入功能： var box2 = box.splice(1, 0,  “钢铁侠”);
splice中的替换功能： var box2 = box.splice(1, 1, 100);
      4.  join() 方法用数组元素组成字符串。
      5. reverse() 逆向排序
      6. sort() 从小到大排序，字符串排序

字符串

1、严格模式

除了正常运行模式，ECMAscript 5 添加了第二种运行模式：“严格模式”（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。

目的：

• 目的

• 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

  • 消除代码运行的一些不安全之处，保证代码运行的安全；
  • 提高编译器效率，增加运行速度；
  • 为未来新版本的Javascript做好铺垫。

• 【注】"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它。

• 另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。

1.1.严格模式的使用规范

进入严格模式 "use strict”;
script标签中使用严格模式。

1.2.使用严格模式以后行为变更

• 局变量声明时，必须加var

	
	    2. this无法指向全局对象；(后面再讲)
	

• 3.函数内重名属性

• 4.arguments对象;

  • 4.1arguments对象不允许被动态改变：

• 5.新增保留字：implements, interface, let, package, private, protected, public, static, yield。

2、ES5新增数组常见方法（indexOf/forEach/map/filter）

红色参数为必选参数也就是必须传递的参数，蓝色参数为非必选参数，也就是可以不传的参数；

1. indexOf(data,start) O要大写
   用于返回某个数组或者字符串中规定字符或字符串的位置;

	 var arr = ["a","b", "c, "d", "e", "f","g" ] 
	 var str = 'abcdefg';
	 arr.indexOf('a');

• 第二个参数表示从该字符串的第n位开始检索

2. forEach() 循环;

	var arr = [2, 3, 4, 5, 6, 7]; 
	arr.forEach(function(item, index, arr){
	 三个参数分别代表 item 当期遍历到的元素 index 当前遍历到的下标 arr 数组本身 
	})

3. map() 会遍历当前数组，然后调用参数中的方法，返回当前方法的返回值;

	var arr = [2, 3, 4, 5, 6, 7]; 
	var newArr = arr.map(function(item, index, arr){ 
	    return item + 1; 
	})
	console.log(newArr);

• map不会改变原有数组，而是将函数执行一次之后的返回值组成一个数组，返回回来。

4. filter() 过滤

	var res = [88,69,92,77,90,96,98,99].filter(function(item, index, array){ 
	    return item>80; //找出所有大于80的元素 
	}); 结果：[88,92,90,96,98,99]

5. reduce() 归并

	var res = [1,2,3,4].reduce(function(pre, next, index, array){ 
	    //参数中的x和y，代表了之前的处理结果和下一个元素 return x+y; //return的结果会赋值给下一个函数的x参数 
	}); 结果 ： 10

6. some() 某些

	if(["yt","hr","wc","jk"].some(function(item){ 
	//判断数组中是否存在yt？ 
	    return item=="yt”; 
	})){ 
	    alert("好的！"); 
	}

7. every()
   跟some一样，但要求每一项都符合，才返回true 有一项不合格就返回false

8. String的trim方法

	" abc ".trim(); 
	首尾去空格 
	"abc"

3、字符串的概念和定义

• 字符串就是一串字符，由双（单）引号括起来。字符串是 JavaScript 的一种基本的数据类型。

  （1）定义一个字符串变量
  str = "str”，

  （2）var str = new String(“hello”);
  //引用类型 定义一个字符串变量str，内容为hello，
  注意此刻str为object(对象)类型 用new产生的变量都是引用类型的变量，也叫对象。

  （3）var str = String(‘hello’);

• 基本类型： Undefined / Null / Boolean / Number

• 引用类型：Object / Array / Function / Date/string ……

   var str1 = new String(‘hello world’);
   var str2 = String(‘hello world’);
   alert(typeof str1);
   alert(typeof str2);
  

• 当String()和元素符new一起作为构造函数使用时,它返回一个新创建的String对象,存放的是字符串s或s的字符串表示。

• 当不用new运算符调用String()是，它只把s转换成原始的字符串，并返回转换后的值。

4、字符串的属性

	str.length
	alert(str[0]);

• ECMAScript 中的字符串是不可变的，也就是说，字符串一旦创建，它们的值就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量，

	var str1 =  “Hello”;
	str1 = str1+” world!”;

5、字符串的方法（了解）格式：字符串.函数名()

• big() 用大号字体显示字符串
• blink() 显示闪动字符串(IE下无效)
• bold() 使用粗体显示字符串
• fixed() 以打字机文本显示字符串
• strike() 使用删除线来显示字符串
• fontcolor() 使用指定颜色来显示字符串
• fontsize() 使用指定尺寸来显示字符串
• link() 将字符串显示为链接
• sub() 把字符串显示为下标
• sup() 把字符串显示为上标
• document.write()中使用,用特殊的样式输出该字符串。

6、字符串的方法-字符串的获取方法

	charAt(3)         //获取下标为3的字符
	charCodeAt(3)     //获取下标为3的字符的编码

【注】上述两个方法使用字符串对象调用

	fromCharCode(94)  //编码转换成字符
	 该方法是 String 的静态方法，所以用String调用，        
	如：var str = String.fromCharCode(98,99);

7、字符串的方法-重点（要记忆）

7.1.concat() 链接字符串 +

7.2.字符串的查找方法

1. indexOf(“abc”, start); 查找字符串第一次出现的位置，可以传两个参数
2. lastIndexOf("abc”); 查找字符串最后一次出现的位置 如果没有找到 返回-1
3. search() 正则匹配(返回出现的位置)
   如：

   var str="Visit W3School!"
          alert(str.search(/w3school/i))

• search()与indexOf()类似，但是search参数可以是正则表达式，用/ /包围起来，“i”表示忽略大小写；‘g’表示全局匹配

4. replace(); 替换字符串
   如：
   var str = "how are you”;
   alert(str.replace(“are”, “old are”));

• 这里的替换只能执行一次，不能够进行全局匹配，如果需要全局匹配，则应使用正则表达式： str.replace(/are/gi,“old are”) g表示进行全局匹配，i表示匹配的时候忽略大小写

5. substring(start, end); 字符串截取方法

	  var str = “hello world!”;
	      alert(str.substring(2,5)); 

6. split( separator, howmany); 根据分割符、拆分成数组

• separator(字符串或正则表达式)
• howmany(可以指定返回的数组的最大长度)
  【注】如果空字符串(“”)用作separator,那么stringObject中的每个字符之间都会被分割。

7. 将字符串转成全大写或全小写

	toLowerCase()方法用于把字符串转换成小写
	toUpperCase()方法用于把字符串转换成大写

Math对象

1、Math对象

• Math对象用于执行数学任务。
• Math对象的常用函数
  ■ Math.random() //返回0-1之间的随机数
  ■ Math.max(num1, num2) //返回较大的数
  ■ Math.min(num1, num2) //返回较小的数
  ■ Math.abs(num) //绝对值
  ■ Math.ceil(19.3) //向上取整
  ■ Math.floor(11.8) //向下取整
  ■ Math.pow(x,y) //x的y次方
  ■ Math.sqrt(num) //开平方

2、认识对象

什么是对象，其实就是一种类型，即**【引用】类型**。而对象就是【引用类型】的实例。
在 ECMAScript 中引用类型是一种【数据结构】，用于将【数据和功能】组织在一起。它也常被称做为【类】，但 ECMAScript 中却没有这种东西。虽然 ECMAScript 是一门【面向对象】的语言，却不具备传统面向对象语言所支持的类等基本结构。

3、对象创建

• Object 类型
  创建 Object 类型有两种。一种是使用 new 运算符，一种是字面量表示法。

	1. 使用 new 运算符创建 Object
	var box=new Object();          //new 方式      
	box.name=‘田雨飞'; //创建属性字段 
	box.age= 18; //创建属性字段
	
	2. new 关键字可以省略 
	var box=Object();           //省略了 new 关键字
	
	
	3. 使用字面量方式创建 Object
	var box={ 
	         //字面量方式
	         name:’田雨飞', //创建属性字段
	         age:18 
	};
	
	4.  属性字段也可以使用字符串
	var box={
	‘name’: ‘田雨飞’, //也可以用字符串形式
	'age':28 
	};
	
	5. 使用字面量及传统赋值方式
	var box={}; //字面量方式声明空的对象
	box.name=‘田雨飞’;  //点符号给属性赋值
	box.age= 18;
	
	
	6. 两种属性输出方式
	alert(box.age); //点表示法输出
	alert(box['age']);  //中括号表示法输出，注意引号
	
	
	7. 给对象创建方法
	var box={
	run:function(){        //对象中的方法 return'运行';
	        }
	 }
	alert(box.run()); //调用对象中的方法
	
	8. 使用 delete 删除对象属性
	delete box.name; //删除属性

4、日期对象Date

• Date对象代表日期
  Date
  类型使用自 UTC（Coordinated Universal Time，国际协调时间）1970 年 1 月 1 日午夜（零时）开始经过的毫秒数来保存日期。Date 类型保存的日期能够精确到 1970 年 1 月 1 日之前或之后的 285616 年。
  创建一个日期对象，使用 new 运算符和 Date 构造方法(构造函数)即可。

	 var d = new Date();

在调用 Date 构造方法而不传递参数的情况下，新建的对象默认自动获取当前的时间和日期。
创建日期对象并指定时间

	    var d = new Date("2015/08/22");
	    var d = new Date(2016,04,13,14,34);
	【注】time可以是“2015/08/22”， “2015-08-22”  ，或1970年当前日期的毫秒数56521211021

5、日期对象Date（格式化方法，了解即可）

	alert(box.toDateString());
	//以特定的格式显示星期几、月、日和年
	alert(box.toTimeString());
	//以特定的格式显示时、分、秒和时区
	alert(box.toLocaleDateString());
	//以特定地区格式显示星期几、月、日和年
	alert(box.toLocaleTimeString());
	//以特定地区格式显示时、分、秒和时区
	alert(box.toUTCString());
	
	//以特定的格式显示完整的 UTC 日期。

6、日期对象Date方法

	Date.parse(“2015-08-24”);
	//转换格式默认支持2015-08-24或2015/08/24
	//返回距离1970年1月1日0时的毫秒数
	
	d.getTime()/d.setTime()
	getTime获取某个日期自1970年以来的毫秒数
	setTime修改日期的毫秒数，对应的日期时间也会修改
	var myDate = new Date();
	myDate.getTime();

7、日期对象方法

• 重点记忆（set/get既能获取又能够赋值 get只能获取）
  重点记忆
• set/getDate() 从Date对象中返回一个月中的某一天(1~31)
• getDay() 从Date对象返回一周中的某一天(0~6)
• set/getMonth() 从Date对象中返回月份(0~11)
• set/getFullYear() 从Date对象以四位数返回年份
• set/getHours() 返回Date对象的小时(0~23)
• set/getMinutes() 返回Date对象的分钟(0~59)
• set/getSeconds() 返回Date对象的秒数(0~59)
• set/getMilliseconds() 返回Date对象的毫秒
• set/getTime() 返回1970年1月1日至今的毫秒数
• getTimezoneOffset() 返回本地时间与格林威治标准时间(GMT)的分钟差

	了解即可
	set/getUTCDate() 根据世界时从Date对象返回月中的一天(1~31)
	getUTCDay() 根据世界时从Date对象返回周中的一天(0~6)
	set/getUTCMonth()       根据世界时从Date对象返回月份(0~11)
	set/getUTCFullYear()    根据世界时从Date对象返回四位年份
	set/getUTCHours()       根据世界时返回Date对象的小时(0~23)
	set/getUTCMinutes()     根据世界时返回Date对象的分钟(0~59)
	set/getUTCSeconds()     根据世界时返回Date对象的秒数(0~59)
	set/getUTCMilliseconds()根据世界时返回Date对象的毫秒(0~999)

了解即可
toString() 把Date对象转换为字符串
toTimeString()    把Date对象的时间部分转换为字符串
toDateString()    把Date对象的日期部分转换成字符串
toUTCString()     根据世界时,把Date对象转换为字符串
toLocaleString()  根据本地时间格式,把Date转换为字符串
toLocaleTimeString() 根据本地时间格式，把Date时间部分转换为字符串
toLocaleDateString() 根据本地时间格式,把Date对象的日期部分转换为字符串
UTC()       根据世界时返回1970年1月1日到指定日期的毫秒数
valueOf()   返回Date对象的原始值

注意事项
注意：

• 1、月份是从0-11，所以取得的值要加1才是当前月份
• 2、星期天是从0-6,0代表星期天

9、setInterval() 函数定时器

• setInterval()
  • 格式：var timer = setInterval(函数，毫秒数)
  • 功能：每隔对应的毫秒数，执行一次传入的函数
  • 返回值：启动定时器的，系统分配的编号

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

• clearInterval(timer); 清除定时器

setInterval(code,millisec)
Code      要调用的代码块或者函数
Millisec  周期性执行代码块或函数的间隔，以毫秒计
var timer = setInterval(function(){},1000);
clearInterval();