函数
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.数组的声明
三种声明方式：
- 通过new运算符创建数组
v ar arr = new Array(10, 20, true, "hello");
- 省略new运算符创建数组
var arr = Array( 10, 20, true, "hello");
- 直接通过常量赋值
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数组的赋值
- 给数组赋值，就是给数组的元素赋值，需要通过给数组的每个元素一一赋值。
如： arr[0] = 20; //让数组的第一个元素的值为20;
arr[1] = 12; //让数组的第二个元素的值为12;
- 以下通过循环给数组的每个元素赋值，赋成下标的平方。
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标签中使用严格模式。
<script>
"use strict”;
console.log(“已经进入了严格模式")
</script>
1.2.使用严格模式以后行为变更
- 局变量声明时，必须加var
<script>
“use strict”;
a = 10; //报错,因为a没有被var声明
</script>
2. this无法指向全局对象；(后面再讲)
<script>
“use strict”;
console.log(“已经进入严格模式”);
function a(){
this.b = 10; //报错，因为this是undefined
}
a();
</script>
- 3.函数内重名属性
<script>
“use strict”;
function a(b, b, c){ //报错
//语法错误：在此上下文中不允许重复的参数名称
}
</script>
-
4.arguments对象;
- 4.1arguments对象不允许被动态改变：
<script> function fn1(a){ a = 2; return [a, arguments[0]]; } console.log(fn1(1)); //正常模式为[2,2]; function fn2(a){ “use strict”; a = 2; return [a, arguments[0]]; } console.log(fn2(1)); //正常模式为[2,2]; </script>
- 4.1arguments对象不允许被动态改变：
-
5.新增保留字：implements, interface, let, package, private, protected, public, static, yield。
<script>
“use strict”;
function package(protected){ //语法错误
var implements; //语法错误
}
</script>
2、ES5新增数组常见方法（indexOf/forEach/map/filter）
红色参数为必选参数也就是必须传递的参数，蓝色参数为非必选参数，也就是可以不传的参数；
- indexOf(data,start) O要大写
用于返回某个数组或者字符串中规定字符或字符串的位置;
var arr = ["a","b", "c, "d", "e", "f","g" ]
var str = 'abcdefg';
arr.indexOf('a');
- 第二个参数表示从该字符串的第n位开始检索
- forEach() 循环;
var arr = [2, 3, 4, 5, 6, 7];
arr.forEach(function(item, index, arr){
三个参数分别代表 item 当期遍历到的元素 index 当前遍历到的下标 arr 数组本身
})
- map() 会遍历当前数组，然后调用参数中的方法，返回当前方法的返回值;
var arr = [2, 3, 4, 5, 6, 7];
var newArr = arr.map(function(item, index, arr){
return item + 1;
})
console.log(newArr);
- map不会改变原有数组，而是将函数执行一次之后的返回值组成一个数组，返回回来。
- 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]
- reduce() 归并
var res = [1,2,3,4].reduce(function(pre, next, index, array){
//参数中的x和y，代表了之前的处理结果和下一个元素 return x+y; //return的结果会赋值给下一个函数的x参数
}); 结果 ： 10
- some() 某些
if(["yt","hr","wc","jk"].some(function(item){
//判断数组中是否存在yt？
return item=="yt”;
})){
alert("好的！");
}
-
every()
跟some一样，但要求每一项都符合，才返回true 有一项不合格就返回false -
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.字符串的查找方法
- indexOf(“abc”, start); 查找字符串第一次出现的位置，可以传两个参数
- lastIndexOf("abc”); 查找字符串最后一次出现的位置 如果没有找到 返回-1
- search() 正则匹配(返回出现的位置)
如：
var str="Visit W3School!"
alert(str.search(/w3school/i))
- search()与indexOf()类似，但是search参数可以是正则表达式，用/ /包围起来，“i”表示忽略大小写；‘g’表示全局匹配
- replace(); 替换字符串
如：
var str = "how are you”;
alert(str.replace(“are”, “old are”));
- 这里的替换只能执行一次，不能够进行全局匹配，如果需要全局匹配，则应使用正则表达式： str.replace(/are/gi,“old are”) g表示进行全局匹配，i表示匹配的时候忽略大小写
- substring(start, end); 字符串截取方法
var str = “hello world!”;
alert(str.substring(2,5));
- split( separator, howmany); 根据分割符、拆分成数组
- separator(字符串或正则表达式)
- howmany(可以指定返回的数组的最大长度)
【注】如果空字符串(“”)用作separator,那么stringObject中的每个字符之间都会被分割。
- 将字符串转成全大写或全小写
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();
951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
