本文共 52941 字,大约阅读时间需要 176 分钟。
JavaScript
(缩写:JS) 是互联网上最流行的脚本语言
,是一种动态类型
、弱类型
、基于原型
的语言,内置支持
类型不需经过编译
,而是将文本格式的字符代码
发送给浏览器由浏览器解释运行
脚本语言
解释型
的脚本语言, C、C++等语言先编译后执行
,而JavaScript 是在程序的运行过程中逐行进行解释
基于对象
基于对象
的脚本语言,不仅可以创建对象
, 也能使用现有对象
内置大量现成对象
,编写少量程序可以完成目标简单
弱类型
的变量类型,对使用的数据类型未做出严格的要求
, 设计简单紧凑
任何文本编辑工具
编写浏览器
就可以执行程序动态性
事件驱动
的脚本语言,它不需要经过 Web 服务器
就可以对用户的输入做出响应跨平台性
不依赖于操作系统
,仅需要浏览器
的支持动态效果
输出字符、数字、以及 HTML
动态
改变 HTML 内容,属性,样式,动态
显示或隐藏 HTML 元素,添加交互
行为验证表单数据
响应事件
语法标准
欧洲计算机制造商协会
操作网页
上的元素的API
操作浏览器
的部分功能的API
特效
数据处理
移动端
开发(RN,Weex)服务端
开发(Node.js)命令行
工具(Node.js)物联网与人工智能
(Ruff)游戏
开发(cocos2d-js)结构与行为耦合
,不方便维护
,不推荐使用// 方式一// 方式二点我
<script></script>
标签中的js代码一般写在文档的尾部
从上至下加载
, 而js代码通常是给标签添加交互(操作元素)
先加载HTML
HTML还未被加载
, 那么js代码将无法添加交互(操作元素)
<script>
标签后,就会让页面暂停等待脚本的解析和执行
等待脚本的执行完成
才能继续<head>
中, 那么js代码执行完毕之前后续网页无法被加载// 方法一:文档尾部 ...... // 方法二:文档头部
外部引入 JavaScript
,通过调用.js
为后缀的文件来引入body 的结尾处
,因为网页加载是从上到下加载script
代码块中不能编写js代码, 即便写了也不会执行提升网页的性能和加载速度
外链式优势
分离
HTML 和代码易于阅读和维护
加速页面加载
打印
或者输出
的函数不同的方式来输出数据
alert()
方法输出数据。控制浏览器弹出一个警告框alert("我是警告框。");
接收用户输入的信息
prompt("请输入");
显示信息
,该方法一般与if判断语句结合使用confirm("确定要删除?");
document.write()
方法来输出想要显示的内容完成加载后
执行 document.write()
,整个 HTML 页面将被覆盖
document.write("这是输入内容,输入到HTML中")
console.log()
将数据写入到控制台,数据只在控制台中显示
,并不显示在网页中检查错误
console.log("Hello World!");console.warn("警告输出!"); console.error("错误输出!");
提高代码的可读性
不会被执行
,常用来调试程序
注意点
嵌套
单行注释、多行注释嵌套
单行注释不能嵌套
多行注释1. 单行注释:以 // 开头2. 多行注释:以 /* 开始,以 */ 结尾
JavaScript语言用于程序控制
或者执行特定操作
的英语单词
它们是被JavaScript语言赋予了特殊含义
的英文单词
注意点
变量名、函数名
严格区分大小写
常见关键字
break | do | instanceof | typeof |
---|---|---|---|
case | else | new | var |
catch | finally | return | void |
continue | for | switch | while |
debugger* | function | this | with |
default | if | throw | delete |
in | try |
常见保留字
非严格
模式class | enum | extends | super |
---|---|---|---|
const | export | import |
严格
模式implements | package | public | interface |
---|---|---|---|
private | static | let | protected |
yield |
应避免使用的单词
内置对象或内置函数
的名称,如 String
或 parseInt
等goto、const、byvalue
等,他们是 JavaScript 的一部分保持相互兼容
而已变量定义
标识符
,在程序运行过程中用于保存临时数据
容器
"var
声明的且未赋初值
的变量,值会被设定为 undefined
变量命名
字母、数字、下划线或$
组成首字母不能是数字
保留字
区分大小写
变量的作用域
函数之外
声明的变量,叫全局变量
,可被当前文档中任何其他代码所访问
函数内部
声明的变量,叫做局部变量
,只能在该函数内部访问
注意
函数内
声明的变量在函数外
使用会出错,引用错误
声明
变量要在使用
变量之前
,如果在使用变量之后声明变量,会返回 undefined
大小写敏感
,a 和 A 代表不同的两个变量使用变量
1. 声明变量var name;2. 给变量赋值name = "张三"3. 声明变量时同时赋值var name = "张三"
JavaScript 中的用 const
来声明定义常量
const
定义的常量必须初始化
,不初始化会报错
常量在第一次定义之后不可再次赋值
,如果在严格模式
下运行会报错
注意
Firefox
和 Chrome
更早期的版本,Safari 5.1.7
和 Opera 12.00
,如果使用 const
定义一个变量,这个变量的值仍然可以修改IE6-10
不支持 const
,但是 IE11
支持字面量
的类型方便数据的运算和操作
, JavaScript对这些数据进行了分类
, 提供了丰富的数据类型检测
给定变量的数据类型
未定义
:undefined
布尔值
:boolean
字符串
:string
数值
:number
对象
或null
:object
函数
:function
var message = "哈哈哈";console.log(typeof(message)); // stringconsole.log(typeof 123); // number
缺少值
",就是此处应该有一个值
,但是还没有定义
典型用法
没有赋值
时,就等于 undefined
参数没有提供
,该参数等于 undefined
对象没有赋值的属性
,该属性的值为 undefined
函数没有返回值
时,默认返回 undefined
var num1;console.log(num1); // undefinedvar num2 = undefined; console.log(num2);// undefinedfunction f(x){ console.log(x)}f() // undefinedvar o = new Object();o.p // undefinedvar x = f();x // undefined
没有对象
",即该处不应该有值
null
值表示一个空对象指针
,而这也正是使用typeof
操作符检测null
值时会返回object
的原因典型用法
参数
,表示该函数的参数不是对象
对象原型链的终点
var car = null;alert(typeof car); // objectObject.getPrototypeOf(Object.prototype) // null
Null 和 Undefined 的区别
Number
转换的值
不同,Number(null)
输出为0
, Number(undefined)
输出为NaN
Null
表示一个值被定义
了,但是这个值是空值
Undefined
表示缺少值
,即此处应该有值,但是还没有定义
逻辑类型
,它只能有两个值:true 或 false
逻辑判断
,true 表示真 false 表示假
var bool = true;console.log(typeof bool); // booleanconsole.log(bool);
数值
都是Number类型,包括整数和浮点数(小数)
var num1= 123; // 整数型var num2= 3.14; // 浮点型console.log(typeof num1); // numberconsole.log(typeof num2); // number
最大数和最小数
内存的限制
,ECMAScript 并不能保存
世界上所有的数值
// 最大值:Number.MAX_VALUEconsole.log(Number.MAX_VALUE); // 1.7976931348623157e+308// 最小值:Number.MIN_VALUEconsole.log(Number.MIN_VALUE); // 5e-324// 无穷大:Infinity, 如果超过了最大值就会返回该值console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity// 无穷小:-Infinity, 如果超过了最小值就会返回该值console.log(typeof Infinity); // numberconsole.log(typeof -Infinity); // number
NaN
特殊的数字
,表示Not A Number
typeof
检查一个NaN
也会返回number
NaN
的操作都会返回 NaN
NaN
与任何值
都不相等
,包括 NaN
本身alert(NaN == NaN); // false
引号
引起来双引号或单引号
都可以,但是不要混着用
不能嵌套
,双引号不能放双引号,单引号不能放单引号var firstName = 'mike';console.log(typeof firstName); // string
转义字符
ASCII 码
都可以用“\
”加数字
(一般是 8 进制
数字)来表示转义字符 | ASCII 码值(十进制) | 意义 |
---|---|---|
\a | 007 | 响铃(BEL) |
\b | 008 | 退格(BS) ,将当前位置移到前一列 |
\f | 012 | 换页(FF),将当前位置移到下页开头 |
\n | 010 | 换行(LF) ,将当前位置移到下一行开头 |
\r | 013 | 回车(CR) ,将当前位置移到本行开头 |
\t | 009 | 水平制表(HT) (跳到下一个 TAB 位置) |
\v | 011 | 垂直制表(VT) |
\ | 092 | 代表一个反斜线字符’’’ |
’ | 039 | 代表一个单引号(撇号)字符 |
" | 034 | 代表一个双引号字符 |
? | 063 | 代表一个问号 |
\0 | 000 | 空字符(NULL) |
\ooo | 三位八进制 | 1 到 3 位八进制数所代表的任意字符 |
\xhh | 二位十六进制 | 1 到 2 位十六进制所代表的任意字符 |
所有事物都是对象
:字符串、数值、数组、函数……自定义对象
,对象只是带有属性和方法
的特殊数据类型例:直接
给属性赋值
//对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value)来定义var person={ name:"小明", sex:"男", old:20};
例:通过构造函数
来给属性赋值
function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; }
Boolean()
数据类型 | 转换为 true 的值 | 转换为 false 的值 |
---|---|---|
Boolean | true | false |
String | 任何非空 字符串 | “” (空字符串 ) |
Number | 任何非零 数字值(包括无穷大 ) | 0 和NaN |
Object | 任何对象 | null |
Undefined | N/A | undefined |
Number()
可以用于任何
数据类型Undefined --> Number(返回 NaN)var str1 = undefined;var n1 = Number(str1);console.log(n1); // NaN==========================================Null --> Number(返回 0)var str1 = null;var n1 = Number(str1);console.log(n1); // 0==========================================Boolean --> Number(true 转成 1, false 转成 0)var bool1 = true;var n1 = Number(bool1);console.log(n1); // 1var bool2 = false;var n2 = Number(bool2);console.log(n2); // 0==========================================String --> Number1.如果是`纯数字`的字符串,则直接将其转换为十进制数值(`前导的零忽略`)var str1 = "123";var str2 = "00011";var res1 = Number(str1);var res2 = Number(str2);console.log(res1); // 123console.log(res2); // 11console.log(typeof res1); // numberconsole.log(typeof res2); // number-----------------------------------------------------------------2.如果字符串中有`非数字`的内容,则转换为NaN,Number()函数中无论混合字符串`是否存在有效整数`都会返回NaNvar str3 = "hello 123";var res3 = Number(str3);console.log(res3); // NaN-----------------------------------------------------------------3.如果字符串是一个`空串`或者是一个全是`空格`的字符串,则转换为0var str4 = "";var res4 = Number(str4);console.log(res4); // 0var str5 = " ";var res5 = Number(str5);console.log(res5); // 0
parseInt()
与parseFloat()
专门用于把字符串转换成数值 parseInt()/parseFloat()
可以提取字符串中的有效整数
非String
使用parseInt()或parseFloat(), 它会先将其转换为String
然后在操作var num1 = parseInt("1234blue"); // 1234var num2 = parseInt(""); // NaNvar num3 = parseInt("0xA"); // 10(十六进制)var num4 = parseInt("22.5"); // 22var num5 = parseInt("070"); // 56(八进制)var num6 = parseInt("70"); // 70(十进制)var num1 = parseFloat("1234blue"); // 1234var num2 = parseFloat("0xA"); // 0var num3 = parseFloat("22.5"); // 22.5var num4 = parseFloat("22.34.5"); // 22.34var num5 = parseFloat("0908.5"); // 908.5
parseInt()
与parseFloat()
区别 parseInt()
只能提取整数parseFloat()
能提取小数parseFloat()
始终忽略前导的0
,可识别所有浮点数值格式,十六进制的字符串始终转换为0toString()
方法 不会影响
到原变量,它会将转换的结果返回
null
和undefined
这两个值没有toString()
方法,如果调用它们的方法,会报错
Number --> Stringvar num = 12306;var str= num .toString();console.log(str); // 12306console.log(typeof str); // string---------------------------------Boolean --> Stringvar num1 = true;var str1 = num1.toString();console.log(str1 ); // trueconsole.log(typeof str1 ); // string------------------------------------Undefined --> Stringvar num2 = undefined;var str2 = num2.toString(); // 报错console.log(str2 );------------------------------------Null --> Stringvar num3 = null;var str3= num3.toString(); // 报错console.log(str3);-------------------------------------NaN --> Stringvar num4 = NaN;var str4 = num4.toString();console.log(str4); // NaNconsole.log(typeof str4); // String
String()
方法 String()
函数,并将被转换的数据作为参数
传递给函数强制类型转换
时 Number和Boolean
实际上就是调用的toString()
方法null和undefined
,就不会调用toString()方法, 它会将 null 直接转换为 "null"
, 将 undefined 直接转换为 "undefined"
var a = null;a = String(a); b = undefined;b = String(b); console.log(typeof a); // stringconsole.log(a); // nullconsole.log(typeof b); // stringconsole.log(b); // undefined
编写Javascript注意语法规范
,一行代码结束后必须在代码最后加上;
自动添加
,但是会消耗一些系统资源
JavaScript 分号作用
分隔
JavaScript 语句一行中编写多条语句
可选
的空白字符
忽略
多个空格和换行增强可读性
console.log ( "Hello,JavaScript!" );
大小写是敏感
的getElementById
与 getElementbyID
是不同的myVariable
与 MyVariable
也是不同的comfirm("Hello,JavaScript!"); // 正确COMFIRM("Hello,JavaScript!"); // 错误
标识符格式
字母、数字、_、$
不能以数字开头
ES
中的关键字或保留字
+、-、*、/、%
不可以用于定义标识符驼峰命名法
Unicode编码
,所以UTF-8
中所有的字符都可以作为标识符Smalltalk 法则
常量
标识符应该全部使用大写字母
来表示区别全部使用小写字母
以示区别特殊常量
标识符应该以大写字母开头
以示区别函数
的标识符应该以小写字母开头
以示区别关键字
严格区分大小写字母
变量或值
之间的运算的符号一个或多个值
进行运算,并获取运算结果特定算术或逻辑操作
的符号不同进制
的数字,得看浏览器支持
16进制
的数字,则需要以0x
开头8进制
的数字,则需要以0
开头2进制
的数字,则需要以0b
开头十六进制数字num = 0x18;num = 0xcf;num = 0xAacf;八进制数字num = 016;二进制数字num = 0b1010;
注意
8进制
解析,有些会当成10进制
解析parseInt()
或parseFloat()
中传递一个第二个参数
,来指定数字的进制
str = "070";str= parseInt(str,10); // 十进制str = Number(str); console.log(typeof str);console.log(str);
算数运算
+
的特殊用法 连字符
,当数字和字符串进行相加时,按拼接字符串
的方式进行操作运算符 | 描述 |
---|---|
+ | 加 |
- | 减 |
* | 乘 |
/ | 除 |
% | 求余数 |
++ | 自增 |
- - | 自减 |
赋值
运算符 | 例子 | 等同于 |
---|---|---|
= | x = y | x = y |
+= | x += y | x = x + y |
-= | x -= y | x = x - y |
*= | x *= y | x = x * y |
/= | x /= y | x = x / y |
%= | x %= y | x = x % y |
返回值
只会是 true 或者 false
,如果成立则为 true,不然为 false运算符 | 描述 |
---|---|
> | 大于 |
>= | 大于等于 |
< | 小于 |
<= | 小于等于 |
== | 等于 |
=== | 等值等型 |
!= | 非等于 |
!== | 不等值或不等型 |
? | 三元运算符 |
变量或值之间的逻辑
运算符 | 描述 |
---|---|
&& | 逻辑与 |
|| | 逻辑或 |
! | 逻辑非 |
运算符 | 描述 |
---|---|
typeof | 返回变量的类型 |
instanceof | 返回 true,如果对象是对象类型的实例 |
数字、运算符、分组符号(括号)、变量和常量
等以能求得数值的有意义排列方法所得的组合
任何需要一个值
的地方数字和运算符号
组成的式子var m = 5 + 3 * 4; document.write(m);结果:17
逻辑运算符
将关系表达式或逻辑量连接起来的有意义的式子称为逻辑表达式true
或false
var m = 9 > 6; document.write(m);结果:true
三元运算符
构成的式子var m = ( 3 > 2 ) ? 3 : 4; document.write(m);结果:3
原始表达式和操作符(operator)组合
而成,包括属性访问表达式
、对象创建表达式
和函数表达式
括号→函数→乘方→乘、除→加、减→字符连接运算符→关系运算符→逻辑运算符
同级
的运算是按从左到右
次序进行多层括号由里向外
var x; var m = ( x = ( 3 > 2 ) ? 9 : 2 ) * ( 3 + ( 5 - 2 ) * 4 ); alert( "m is " + m ); 结果:m is 135
从上到下、从左到右
的顺序执行包含选择结构和循环结构
例:实现内容的替换
My Web Page
A Paragraph.
A DIV.结果 My Web Page Hello World How are you?
基本条件语句
指定条件为 true
时,该语句才会执行代码false
时执行其他代码大写字母(IF)
会生成 JavaScript 错误if (condition) { 当条件为 true 时执行的代码 } else { 当条件不为 true 时执行的代码 }
多重条件语句
if (条件1) { // JavaScript 代码} else if (条件2) { // JavaScript 代码} else if (条件3) { // JavaScript 代码}
嵌套条件语句
if (条件1) { if (条件) { // JavaScript 代码 } else { // JavaScript 代码 }} else if (条件2) { // JavaScript 代码}
举例
/* BMI计算公式:BMI =体重÷(身高*身高) 65kg,1.74m 过轻:低于18.5 正常:18.5-24.99999999 过重:25-27.9999999 肥胖:28-32 非常肥胖, 高于32*/ //1.人机交互 var height = prompt('请输入您的身高:') var weight = prompt('请输入您的体重:') //2.计算BMI var bmi = weight / (height * height) //3.条件判断,显示不同的结论 if(bmi < 18.5){ alert('您的体重太轻了,需要加强营养!') }else if(bmi < 25){ alert('您的体重正常,非常标准!') }else if(bmi < 28){ alert('您的体重有点超标,需要注意!') }else if(bmi < 32){ alert('您的体重有点肥胖了,需要减肥!') }else{ alert('您的体重超级肥胖,珍惜生命!') }
不同的条件
来执行不同的动作
,但条件必须是确定的值
绝对等于
判断,等值匹配
,数据类型
也要匹配说明
赋初始值
,值与每个 case 值匹配
break
语句来阻止运行
下一个case,结束贯穿执行不匹配
,执行 default
后的语句switch(表达式) { case 值 1: 执行代码块 1 break; case 值 2: 执行代码块 2 break; ... case 值 n: 执行代码块 n break; default: 与 case 值 1 、 case 值 2...}
举例
/* 根据星期几(一~日) ,输出特价菜 “一”、“二”、“三”,输出“干煸扁豆6元.” “四”、“五”,输出“蒜茸油麦菜 4元.” “六”、“日”,输出“口水鸡 8元.” 其他,输出“您输入的星期数不正确”*/var day = prompt('请输入星期数:') switch(day){ case 1: case 2: case 3:alert('特价菜是扁豆!');break; case 4: case 5:alert('特价菜是白菜!');break; case 6: case 7:alert('特价菜是口水鸡!');break; default:alert('输入的星期数不对!')}
循环次数可以为零
for (初始化变量; 判断条件; 更新迭代){ 循环语句 }
说明
初始化变量
在整个循环的最开始只执行一次
,for 循环中初始化的变量可以在 for 循环之外
使用先执行
初始化变量的代码,然后判断
条件是否返回 true,如果为 true 则执行循环语句,如果为 false 则不执行循环更新迭代
的代码,然后再判断
循环条件是否为 true,如果为true再次执行循环语句,直到循环条件返回值 false省略
的,如果没有退出循环的判断条件,就必须使用 break
语句退出循环,否则就是死循环举例
// 用 for 循环来输出 0 到 100 的累加值for (var i = 0,sum=0; i<=100; i++) { sum+=i; } document.write("0 到 100 的累加值是:"sum);结果:0到100的累加值是:5050
指定条件为真
时循环执行代码块,只要指定条件为true,循环就可一直执行
while (条件) { 需要执行的代码 }
跳出 switch()
跳出循环
举例
// 用 break 语句来跳出 for 循环for (var i = 1; i<8; i++) { document.write(i+""); if(i==3){ break; } }结果:12
跳过循环中的一个迭代
,continue 语句跳出循环后,会继续执行该循环之后的代码
(如果有的话)举例
// 通过 continue 来跳过当前循环,执行下一个循环for (var i = 1; i<=5; i++) { if(i==3){ continue; } document.write(i+""); } 结果:1245
总结
跳出整个循环
,不管当前循环之后还有没有代码都不再执行
跳出当前循环
,执行下一个循环
// 1. 设置变量var sum = 0;var max = 0;var min = 0;// 2. 获取课程数var count = prompt('请输入课程数')// 3. 循环遍历课程数for (var i = 1; i <= count; i++) { // 3.1 获取每门课程成绩 var mark = parseInt(prompt('请输入第'+i+'门课程成绩')) // 3.2 判断 if (i == 1) { max = mark min = mark } if (min > mark) { min = mark } if (max < mark) { max = mark } sum += mark }alert("总分:"+ sum)alert("平均数:" + parseInt(sum / count))alert("最小分:" + min)alert("最大分:"+ max)
// 1. 获取三角形行数var n = parseInt(prompt('请输入行数'))// 2. 判断行数// 2.1 如果大于等于6if (n >= 6) { // 外层行数i循环递减 for (var i = n; i > 0; i--) { // 内层*号递减打印 for (var j = 0; j < i; j++) { document.write('* ') } document.write('') }} else { // 2.2 如果小于6 // 上半部循环 // 外层行数i循环递减 for (var i = n; i > 0; i--) { // 内层*号递减打印 for (var j = 0; j < i; j++) { document.write('* ') } document.write('') } // 下半部循环 // 外层行数i循环递增 for (var i = 0; i <= n; i++) { // 内层*号递增打印 for (var j = 0; j < i; j++) { document.write('* ') } document.write('') }}
// 获取乘数var str1 = parseInt(prompt('请输入一个乘数'))var str2 = parseInt(prompt('请输入另一个乘数'))// 双层循环遍历// 外层for (var i = str1; i <= str2; i++) { // 内层 for (var j = str1; j <= i; j++) { document.write(j + '*'+ i + '=' + i*j +' ') } document.write("")}
特点
不会立即执行
函数调用
的时候执行顺序执行
对象
重复执行的代码块
,是能完成特定功能
的一段代码重复调用,简化程序
系统函数
和自定义函数
function
是定义函数的关键字,必不可少函数体
function 函数名(参数){ 执行代码 }
function function_name(){ alert("Hello World!"); }
函数命名规则
大小写
字母、数字、下划线、美元符号($)
,但是第一个字符不能是数字
关键字和保留字
命名传递的值
,参数是可以为空
功能性
和函数的可拓展性
,便于交互
a,b是形参,占位用,函数定义时形参无值function f(a,b){ } x, y实参,有具体的值,会把x, y复制一份给函数内部的a和b,函数内部的值是复制的新值,无法修改外部的x,yf(x, y);
说明
变量
也可以是常量
一致顺序
出现,第一个变量值是第一个被传递参数给定的值,以此类推注意
不会检查实参的类型
, 所以开发中一般需要对参数进行类型的检查
实参
可以是任意的数据类型
不会检查实参的数量
, 多余实参不会被赋值
, 如果实参的数量少于
形参的数量,则没有对应实参的形参将是undefined
函数作为参数
1. 直接将函数名作为参数,`直接调用`function test1(Func) { Func(); } function test2() { alert("我是 test2"); } test1(test2);============================================2. 定义一个调用`带参数的函数`为参数的函数function test1(Func) { Func(mydata); } function test2(data) { alert(data); }test1(test2("带参数的函数,作为参数"));============================================3. 作为参数的函数`不再单独定义`function test1(Func) { Func("hello"); } test1(function(data) { alert(data); });
例:不同的参数实现同样的效果
开始执行到结束
提前结束
该函数的执行可以使用return
语句,return
语句后面的所有语句将永远不会执行
return
用于返回结果
注意
return
语句 ,那么函数有默认的返回值:undefined
return
语句,那么跟再return
后面的值,就成了函数的返回值
return
语句,但是return
后面没有任何值,那么函数的返回值也是:undefined
function myFunction(){ var name="小明"; return name; name="小花"; }
提高效率
函数体代码太多
,函数中某一代码多次使用
的情况下视具体情况而定
的,根据具体情况、要求不同,拆分的方式也会不同function add(num1,num2){ return num1+num2;}
var add = function(num1,num2){ return num1+num2;};
当前作用域的函数声明提前到整个作用域的最前面
// 代码没问题 console.log(f(5,6));function f(a, b) { return a + b;}// 报错myFun(6,7);var myFun = function (a,b){ return a + b;}
面向对象
时理解"函数就是对象, 函数名就是指针
"这一概念var add = new Function('num1','num2','return num1+num2');
浏览器内核自带
的,不用引入任何函数库就可直接使用
的函数函数 | 描述 |
---|---|
alert 函数 | 显示一个警告对话框,包括一个 OK 按钮 |
confirm 函数 | 显示一个确认对话框,包括 OK、Cancel 按钮 |
escape 函数 | 将字符转换成 Unicode 码 |
eval 函数 | 计算表达式的结果 |
isNaN 函数 | 测试是(true)否(false)不是一个数字 |
parseFloat 函数 | 将字符串转换成符点数字形式 |
parseInt 函数 | 将符串转换成整数数字形式(可指定几进制) |
prompt 函数 | 显示一个输入对话框,提示等待用户输入 |
函数 | 描述 |
---|---|
join 函数 | 转换并连接数组中的所有元素为一个字符串 |
length 函数 | 返回数组的长度 |
escape 函数 | 将字符转换成 Unicode 码 |
reverse 函数 | 将数组元素顺序颠倒 |
sort 函数 | 将数组元素重新排序 |
函数 | 描述 |
---|---|
getDate 函数 | 返回日期的“日”部分,值为 1~31 |
getDay 函数 | 返回星期几,值为 0~6,其中 0 表示星期日,1 表示星期一,…,6 表示星期六 |
getHours 函数 | 返回日期的“小时”部分,值为 0~23 |
getMinutes 函数 | 返回日期的“分钟”部分,值为 0~59 |
getMonth 函数 | 返回日期的“月”部分,值为 0~11。其中 0 表示 1 月,…,11 表示12 月 |
getSeconds 函数 | 返回日期的“秒”部分,值为 0~59 |
getTime 函数 | 返回系统时间 |
getTimezoneOffset 函数 | 返回此地区时差(当地时间与 GMT 格林威治标准时间地区时差),单位分钟 |
getYear 函数 | 返回日期的“年”部分。返回值以 1900 年为基数 |
parse 函数 | 返回从 1970 年 1 月 1 日零时整算起的毫秒数(当地时间) |
setDate 函数 | 设定日期的“日”部分,值为 0~31 |
setHours 函数 | 设定日期的“小时”部分,值为 0~23 |
setMinutes 函数 | 设定日期的“分钟”部分,值为 0~59 |
setMonth 函数 | 设定日期的“月”部分,值为 0~11。其中 0 表示 1 月, …, 11 表示 12 月 |
setSeconds 函数 | 设定日期的“秒”部分,值为 0~59 |
setTime 函数 | 设定时间。时间数值为 1970 年 1 月 1 日零时整算起的毫秒数 |
setYear 函数 | :设定日期的“年”部分 |
toGMTString 函数 | 转换日期成为字符串,为 GMT 格林威治标准时间 |
setLocaleString 函数 | 转换日期成为字符串,为当地时间 |
UTC 函数 | 返回从 1970 年 1 月 1 日零时整算起的毫秒数,以 GMT 格林威治标准时间计算 |
函数 | 描述 |
---|---|
abs 函数 | 返回一个数字的绝对值 |
acos 函数 | 返回一个数字的反余弦值,结果为 0~π弧度(radians) |
asin函数 | 返回一个数字的反正弦值,结果为-π/2~π/2 弧度 |
atan 函数 | 返回一个数字的反正切值,结果为-π/2~π/2 弧度 |
atan2 函数 | 返回一个坐标的极坐标角度值 |
ceil 函数 | 向上取整 |
cos 函数 | 返回一个数字的余弦值,结果为-1~1 |
exp 函数 | 返回 e(自然对数)的乘方值 |
floor 函数 | 向下取整 |
log 函数 | 自然对数函数,返回一个数字的自然对数(e)值 |
max函数 | 返回两个数的最大值 |
min 函数 | 返回两个数的最小值 |
pow函数 | 返回一个数字的乘方值 |
random 函数 | 返回一个 0~1 的随机数值 |
round 函数 | 返回一个数字的四舍五入值,类型是整数 |
sin 函数 | 返回一个数字的正弦值,结果为-1~1 |
sqrt 函数 | 返回一个数字的平方根值 |
tan 函数 | 返回一个数字的正切值 |
函数 | 描述 |
---|---|
anchor 函数 | 产生一个链接点(anchor)以作超级链接用 |
big 函数 | 将字体加到一号 |
blink函数 | 使字符串闪烁 |
bold 函数 | 使字体加粗 |
charAt 函数 | 返回字符串中指定的某个字符 |
fixed 函数 | 将字体设定为固定宽度字体 |
fontcolor 函数 | 设定字体颜色 |
fontsize 函数 | 设定字体大小 |
indexOf 函数 | 返回字符串中第一个查找到的下标 index,从左边开始查找 |
italics 函数 | 使字体成为斜体字 |
lastIndexOf 函数 | 返回字符串中第一个查找到的下标 index,从右边开始查找 |
length 函数 | 返回字符串的长度 |
link 函数 | 产生一个超级链接 |
small 函数 | 将字体减小一号 |
strike 函数 | 在文本的中间加一条横线。 |
sub 函数 | 显示字符串为下标字(subscript) |
substring 函数 | 返回字符串中指定的几个字符 |
sup 函数 | 显示字符串为上标字(superscript) |
toLowerCase 函数 | 将字符串转换为小写 |
toUpperCase 函数 | 将字符串转换为大写 |
定义函数
function 函数名(参数1,参数2,参数3,...){ // JavaScript 语句; [return 返回值]}
函数名();
没有函数名
的函数var showFun = function(count) { for(var i = 0; i < count; i++){ console.log('hello world'); }}整个语句类似赋值语句: var showFun = 变量值调用匿名函数showFun(10)
作用
1. 用在`绑定事件`的时候document.onclick = function () { alert(1);}============================================2. `定时器`setInterval(function () { console.log(444);},1000);============================================3. `立即执行函数`函数定义完,立即被调用,这种函数叫做立即执行函数立即执行函数往往只会执行一次(function(){ alert("hello")})();(function(num1, num2){ console.log("num1 = "+ num1); console.log("num2 = "+ num2);})(100, 101);
有效性的范围
,与变量定义的位置
密切相关空间角度
来描述变量的,也可以理解为可见性
局部
变量和全局
变量使用 var 关键字
进行显式申明的变量是作为局部
变量,而没有用 var 关键字
,使用直接赋值
方式声明的是全局
变量块级作用域
代码块外
都是不可见
的全局作用域
任何位置
都可以访问函数外定义的变量
隐式全局变量
局部作用域
范围
中可以访问函数内部定义的变量
局部作用域中可以访问全局变量,全局作用域中不能访问局部变量
例1:在 js 的 function 外定义一个变量// Sex就是全局变量var Sex ="男"; function count(){ alert(" sex is "+Sex);}============================================例2: 不使用 var,直接给变量赋值,隐式的声明了全局变量 Name// 这里 Name,Sex 都是全局变量Name = "小明"; var Sex ="男"; function count(){ alert("name is "+Name+" sex is "+Sex); }============================================例3: 使用 window.变量名定义变量,也是全局变量// 这里 Name,Sex,old 都是全局变量Name = "小明"; var Sex ="男"; window.old="19"; function count(){ alert("name is "+Name+" sex is "+Sex+"old is"+old); }
总结
静态存贮区
,程序开始运行时为其分配内存
,程序结束释放内存
优点
减少变量的个数
,减少由实际参数和形式参数的数据传递带来的时间消耗
相对独立
缺点
生存期比较长
占用较多的内存单元
封装性能
可读性降低
可绕过函数参数和返回值进行存取
,这种情况破坏了函数的独立性
,使函数对全局变量产生依赖
,同时,也降低了该函数的可移植性
变化
,对于程序的查错
和调试
都非常不利函数体
中的变量,并且只能在当前函数体内访问
例:声明两个局部变量function test() { a = 30; var b = 20; }
说明
同名
的时候,全局变量会被局部变量覆盖
用了该变量
的函数(该变量在此函数中无定义
)时,函数会使用全局变量
函数内部可以访问到该函数所属的外部作用域的变量(作用域链)
不使用var声明的变量是全局变量
变量退出作用域之后会销毁,全局变量关闭网页或浏览器才会销毁
其它语言中变量`i`只能在`for`循环内部访问 1. 局部变量for (var i = 0; i < 10; i++) { }console.log(i);2. 全局变量var name = "zx";function f() { name = "刘德华";}f();console.log(name);
局部变量, 先在函数内部的作用域找变量`name`,如果找到则使用,如果找不到去父级作用域找`name`变量function f() { var name = "张三";}f();console.log(name);
作用域链 var color = "yellow";function getColor() { var anotherColor = "red"; function swapColor() { var tmpColor = color; color = anotherColor; anotherColor = tmpColor; } swapColor();}getColor();console.log(color);结果 red
最顶端
不包含赋值
function fun(){ console.log(num); // undefined var num = 20;}function fun(){ var num; console.log(num); // undefined num = 20;}
JavaScript解析器
首先会把当前作用域的函数声明提前到整个作用域的`最前面单独
的变量名中存储一系列的值
,使用方便同时方便对变量的查找(遍历)
对象
,使用关键词 new
来创建数组对象 字符串
作为属性名的数字
来作为索引
操作元素存储性能
比普通对象要好var arr = new Array();
1. 使用 Array 构造函数创建一个空数组var arr1 = new Array();创建一个长度为30的数组var arr2 = new Array(30);创建一个包含2个字符串的数组var arr3 = new Array("张三","yann");===============================================2. 使用数组字面量创建一个空数组var arr4 = [];创建一个长度为30的数组var arr5 = [30];创建一个包含2个字符串的数组var arr6 = ["张三","yann"];
1. 可以添加`任意多`的值var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW";===========================================2. 可以使用一个`整数自变量`来控制数组的`容量`var mycars = new Array(3); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW";var mycars = new Array("Saab","Volvo","BMW");
注意
索引
,用来被遍历
时使用的或者用数组字面量(直接量)
方便创建数组逗号
隔开的表达式从 0 开始
var empty = []; var cars=["Saab","Volvo","BMW"];
数组元素的下标
来获取创建一个数组,然后获取数组中的某个字符var arr=new Array("厦门","福州","漳州","龙岩","泉州"); document.write(arr[4]); //泉州
length
属性可设置或返回
数组中元素的数目length
属性总是比数组中定义的最后一个元素的下标大 1
length
属性可改变数组的大小
小
,数组将被截断
,其尾部的元素将丢失
大
,数组将增大
,新元素被添加到数组的尾部,值为undefined
arrayObject.length数组的长度 = 数组名.length;
实现如何使用 length 属性返回并设置数组的长度var arr = new Array(3) arr[0] = "John" arr[1] = "Andy"arr[2] = "Wendy" document.write("Original length: " + arr.length) document.write("") arr.length=5 document.write("New length: " + arr.length) 结果:Original length: 3New length: 5
获取数组中的元素
数组中的指定元素 = 数组名[索引值];
从0开始
undefined
push()
末尾
追加一个或多个
元素,并且返回新的长度
数组对象.push(element 1,element 2,…,element n)
举例:实现在数组的尾部添加 f-z.cn 元素var arr = new Array() arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "") document.write(arr.push("f-z.cn") + "") document.write(arr) 结果:George,John,Thomas4George,John,Thomas,f-z.cn
unshift()
直接修改
原有的数组,在数组开头
添加元素,并返回新数组的长度
数组对象.unshift(element1,element2,…,elementn);
举例:实现在数组的头部添加 f-z.cn 元素var arr = new Array() arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "") document.write(arr.unshift("f-z.cn") + "") document.write(arr) 结果:George,John,Thomas4f-z.cn,George,John,Thomas
pop()
删除
并返回
数组中的最后一个元素的值
数组长度减 1
数组为空
,则 pop()
不改变数组,并返回undefined
值arrayObject.pop()
举例:实现删除数组的最后一个元素var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "") document.write(arr.pop() + "") document.write(arr) 结果:George,John,ThomasThomasGeorge,John
shift()
第一个元素删除
,并返回第一个元素的值
数组为空
,那么 shift()
方法将不进行任何操作,返回 undefined
不创建新数组
,而是直接修改
原有的 arrayObject
arrayObject.shift()
举例:实现删除数组的头元素var arr = new Array(3)arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "") document.write(arr.shift() + "") document.write(arr) 结果:George,John,ThomasGeorgeJohn,Thomas
concat()
concat()
方法用于连接两个或多个数组
copy
一个当前数组参数
添加到这个copy数组的末尾
,最后返回新构建的数组
没有
给 concat()
方法传递参数
的情况下,它只是复制当前数组并返回
arr.concat(arrayX,arrayX,arrayX...)
举例:实现数组的链接var arr = [1,3,5,7];var arrCopy = arr.concat(9,[11,13]);console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]console.log(arr); // [1, 3, 5, 7](原数组未被修改)
join()
放入一个字符串
,元素是通过指定的分隔符
进行分隔
可选项
,没有指定的话默认是逗号
arr.join("指定的分隔符")
举例:实现数组元素的连接成字符串var arr = new Array(3)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"arr[3] ="fenzhen"document.write(arr.join()+"") //没有指定分隔符 document.write(arr.join("$")) //有指定分隔符 **结果:**George,John,Thomas,James,fenzhenGeorg$John$Thomas$James$fenzhen
sort()
排序
,不生成副本
没有使用参数
,将按字母顺序
(字符编码
)对数组中的元素进行排序 字符串
(如有必要),以便进行比较其他标准
进行排序,就需要提供比较函数
两个值
,然后返回一个用于说明这两个值的相对顺序
的数字a 和 b
,其返回值如下: a 小于 b
,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0
的值a 等于 b
,则返回 0
a 大于 b
,则返回一个大于 0
的值arrayObject.sort(sortby)
举例: 创建一个数组,并按字母顺序进行排序var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas"arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" document.write(arr + "") document.write(arr.sort()) 结果:George,John,Thomas,James,Adrew,MartinAdrew,George,James,John,Martin,Thomas===========================================举例: 创建一个数组,并按数字大小顺序进行排序function sortNumber(a,b) { return a - b}var arr = new Array(6)arr[0] = "10"arr[1] = "5"arr[2] = "40"arr[3] = "25"arr[4] = "1000"arr[5] = "1"document.write(arr + "")document.write(arr.sort(sortNumber))结果10,5,40,25,1000,11,5,10,25,40,1000
reverse()
颠倒
数组中元素的顺序
改变原来的数组
arrayObject.reverse()
举例: 创建一个数组,然后颠倒其元素的顺序var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "") document.write(arr.reverse()) 结果:George,John,ThomasThomas,John,George
slice(begin,end)
返回选定的元素
不会修改数组
,而是返回一个子数组
必需
的参数,规定从何处开始选取
负数
,那规定从数组尾部
开始算起的位置-1 指最后一个元素
,-2 指倒数第二个元素
,以此类推从何处结束选取
数组下标
从开始到数组结束
的所有元素负数
,那它规定的是从数组尾部
开始算起的元素arrayObject.slice(begin,end)
举例:实现选择数组中前四个元素//创建数组的同时对元素赋值 var arr = new Array("Html","Css","JavaScript","jQuery","bootstrap"); document.write("所选的元素为:"+""+arr.slice(0,4)); 结果:所选的元素为:Html,Css,JavaScript,jQuery
toString()
字符串
,并返回结果
arr.toString()
var arr = new Array("html","css","javascript","jQuery","Ajax","fenzhen"); document.write(arr.toString()); 结果:html,css,javascript,jQuery,Ajax,fenzhen
join()
与 tostring()
的区别 join()
方法将数组中所有的元素转化为字符串
,并将这些字符串用逗号隔开
,合并
成一个字符串
作为方法的结果返回string
,就将 string
作为在结果字符串中分开有各个数组元素形成的字符串的分隔符
toString()
方法返回一个包含数组中所有元素,且元素之间以逗号隔开
的字符串
,该方法在将数值作为字符串
使用时强制调用,且无须显示声明此方法的调用toLocaleString()
本地字符串
arrayObject.toLocaleString()
toString() 和 toLocaleString() 的区别
toString()
标准
的格式toLocaleString()
语言环境
(locale)当前语言环境下的格式设置
(options)的格式化字符串默认语言环境和格式设置
(options)的格式化字符串toUTCString()
根据世界时 (UTC) 把 Date 对象转换为字符串
,并返回结果dateObject.toUTCString()
使用 toUTCString() 来把今天的日期转换为(根据 UTC)字符串var d = new Date() document.write (d.toUTCString()) 结果Wed, 14 Aug 2019 11:15:43 GMT
三者的区别
toString()
函数用于将当前对象以字符串的形式返回
,它的返回值为 String类型
toUTCString()
根据世界时 (UTC)
把 Date 对象转换为字符串toLocalString()
方法把数组转换为本地字符串
,先调用每个数组元素toLocaleString() 方法,然后使用地区特定的分隔符
把生成的字符串连接起来,形成一个字符串注意
显示结果给用户
返回的结果是随机器不同而不同
的toSource()
源代码
Firefox
浏览器支持
该方法,IE、Safari、Chrome、Opera
等浏览器均不支持
该方法object.toSource()
valueOf()
原始值
arr.valueOf()
indexOf(value, index)
功能
首次出现的位置
value
,需要检索的字符串值
index
,规定在字符串中开始检索的位置
,(范围:0 ~ stringObject.length - 1
),如省略该参数,则将从字符串的首字符
开始检索大小写敏感
字符串值没有出现
,则该方法返回 -1
全等操作符
格式
stringObject.indexOf(value,index)
var arr = [2,4,6,8,8,6,4,2];console.log(arr.indexOf(4)); // 1console.log(arr.indexOf(4,2)); // 6console.log(arr.indexOf("4")); // -1
lastIndexOf(value, index)
功能
最后出现的位置
,在一个字符串中的指定位置从后向前
搜索value
,需要检索的字符串值
index
,规定在字符串中开始检索的位置
,(范围:0 ~ stringObject.length - 1
),如省略该参数,则将从字符串的最后一个字符处
开始检索大小写敏感
字符串值没有出现
,则该方法返回 -1
返回的位置是从前开始数
的全等操作符
格式
stringObject.lastIndexOf(value,index)
var arr = [2,4,6,8,8,6,1,4];console.log(arr.lastIndexOf(4)); // 7console.log(arr.lastIndexOf(4,4)); // 1
forEach()
调用数组的每个元素
,并将元素传递给回调函数
IE8
以上的浏览器forEach()
方法需要一个函数作为参数第一个参数
,就是当前正在遍历的元素
第二个参数
,就是当前正在遍历的元素的索引
第三个参数
,就是正在遍历的数组
arr.forEach(function(value , index , obj){ console.log(value);});
举例 数组元素累加var sum = 0;var numbers = [65, 44, 12, 4];numbers.forEach(function(value, index, obj) { myFunction(value) // 65 109 121 125})function myFunction(item) { sum += item; console.log(sum)}
添加/删除
项目,然后返回被删除的项目
改变原始数组
删除从 index 处开始的零个或多个元素
,并且用参数列表中声明的一个或多个值来替换
那些被删除的元素返回的是含有被删除的元素的数组
arrayObject.splice(index,howmany,item1,.....,itemX)
参数 | 描述 |
---|---|
index | 规定添加/删除项目的位置 ,使用负数 可从数组结尾处 规定位置 |
howmany | 要删除的项目数量 。如果设置为 0,则不会删除项目 |
item1, …, itemX | 向数组添加的新项目 |
1. 创建一个新数组,并向其添加一个元素var arr = new Array(6)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"arr[3] = "James"arr[4] = "Adrew"arr[5] = "Martin"document.write(arr + "")arr.splice(2,0,"William")document.write(arr + "")结果George,John,Thomas,James,Adrew,MartinGeorge,John,William,Thomas,James,Adrew,Martin=============================================================================2. 删除位于 index 2 的元素,并添加一个新元素来替代被删除的元素var arr = new Array(6)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"arr[3] = "James"arr[4] = "Adrew"arr[5] = "Martin"document.write(arr + "")arr.splice(2,1,"William")document.write(arr)结果George,John,Thomas,James,Adrew,MartinGeorge,John,William,James,Adrew,Martin=====================================================================================3. 删除从 index 2 ("Thomas") 开始的三个元素,并添加一个新元素 ("William") 来替代被删除的元素r arr = new Array(6)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"arr[3] = "James"arr[4] = "Adrew"arr[5] = "Martin"document.write(arr + "")arr.splice(2,3,"William")document.write(arr)结果George,John,Thomas,James,Adrew,MartinGeorge,John,William,Martin
执行数学任务
直接调用
封装好的数学运算相关的属性和方法var pi_value = Math.PI; var sqrt_value = Math.sqrt(15);
属性 | 描述 |
---|---|
Math.E | 返回算术常量 e,即自然对数的底数(约等于 2.718) |
Math.LN2 | 返回 2 的自然对数 |
Math.LN10 | 返回 10 的自然对数 |
Math.LOG2E | 返回以 2 为底的 e 的对数(约等于 1.414) |
Math.LOG10E | 返回以 10 为底的 e 的对数(约等于0.434) |
Math.PI | 返回圆周率(PI) |
Math.SQRT2 | 返回 2 的平方根 |
Math.SQRT1_2 | 返回 1/2 的平方根 |
功能
min()
方法可返回指定的数字中带有最小值
的数字max()
方法可返回指定的数字中带有最大值
的数字语法
Math.min(n1,n2,n3,...,nX)Math.max(n1,n2,n3,...,nX)
Math.ceil()
向上舍入
,即它总是将数值向上舍入为最接近的整数
Math.floor()
向下舍入
,即它总是将数值向下舍入为最接近的整数
Math.round()
标准舍入
,即它总是将数值四舍五入为最接近的整数
// 对所有介于 25 和 26(不包括 26)之间的数值,Math.ceil()始终返回 26,因为它是向上舍入alert(Math.ceil(25.9)); //取整后为 26 alert(Math.ceil(25.5)); //取整后为 26 alert(Math.ceil(25.1)); //取整后为 26 // Math.round()方法只在数值大于等于 25.5 时返回 26;否则返回 25alert(Math.round(25.9)); //取整后为 26 alert(Math.round(25.5)); //取整后为 26 alert(Math.round(25.1)); //取整后为 25 // Math.floor()对所有介于 25 和 26(不包括 26)之间的数值都返回 25alert(Math.floor(25.9)); //取整后为 25 alert(Math.floor(25.5)); //取整后为 25 alert(Math.floor(25.1)); //取整后为 25
Math.abs(x)
返回 x 的绝对(正)值
document.write("0 的绝对值为:",Math.abs(0),""); document.write("1 的绝对值为:",Math.abs(1),""); document.write("-1 的绝对值为:",Math.abs(-1),""); 结果:0 的绝对值为:01 的绝对值为:1-1 的绝对值为:1
Math.random()
返回介于 0(包括) 与 1(不包括)
之间的随机数
,且每次返回的结果都不一样document.write(Math.random()) **结果:**0.9466723923
Math.sqrt(x)
返回 x 的平方根
必须
的,若参数小于 0
,则返回 NaN
例:返回几个数的平方根var a=Math.sqrt(0); // 0var b=Math.sqrt(1); // 1var c=Math.sqrt(9); // 3var d=Math.sqrt(0.64); // 0.8var e=Math.sqrt(-9); // NaN
Math.pow(x, y)
的返回值是 x 的 y 次幂
虚数或负数
,则该方法将返回 NaN
指数过大而引起浮点溢出
,则该方法将返回 Infinity
例:把 pow() 运用到不同的数字组合上document.write(Math.pow(0,0) + "") // 1document.write(Math.pow(0,1) + "") // 0document.write(Math.pow(1,1) + "") // 1document.write(Math.pow(1,10) + "") // 1document.write(Math.pow(2,3) + "") // 8document.write(Math.pow(-2,3) + "") // -8document.write(Math.pow(2,4) + "") // 16document.write(Math.pow(-2,4) + "") // 16
返回每次函数调用的结果组成的数组
var arr = [1, 2, 3, 4, 5];var arr2 = arr.map(function(item){ return item*item;});console.log(arr2); //[1, 4, 9, 16, 25]
返回满足过滤条件组成的数组
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];var arr2 = arr.filter(function(x, index) { return index % 3 === 0 || x >= 8;}); console.log(arr2); //[1, 4, 7, 8, 9, 10]
true
var arr = [1, 2, 3, 4, 5];var arr2 = arr.every(function(x) { return x < 10;}); console.log(arr2); //truevar arr3 = arr.every(function(x) { return x < 3;}); console.log(arr3); // false
true
var arr = [1, 2, 3, 4, 5];var arr2 = arr.some(function(x) { return x < 3;}); console.log(arr2); //truevar arr3 = arr.some(function(x) { return x < 1;}); console.log(arr3); // false
去除数组中重复的部分
暴力法var arr = [12,3,3,3,4,6,3,5,6,43,8,9]// 外层循环for(var i = 0 ; i < arr.length-1 ; i++){ // 内层循环 for(var j = i + 1 ; j < arr.length ; j++){ if(arr[i] == arr[j]){ arr.splice(j,1) j-- } }}alert(arr)
给出随机数范围,猜数字
var randomNum, guessNum, min=1, max=100, count=0;// 1. 产生一个随机数 Math.random()randomNum = Math.floor(100*Math.random()) + 1; // [1-100]// 2. 不确定的次数,接受用户输入的数字 promot(),使用死循环while (true) { guessNum = prompt('请输入你猜的数字:('+min + '-' + max + ')'); if (isNaN(guessNum)) { // 判断是否为数字 alert('请输入数字!'); continue; // 中止循环,进入下一次循环 } if (guessNum > max || guessNum < min) { // 判断数字范围是否合理 alert('请输入合法的数字!') continue; } if(guessNum > randomNum){ max = guessNum; } if (guessNum < randomNum){ min = guessNum; } count++; // 次数加一 if (guessNum == randomNum) { // 比较判断 alert('恭喜你猜对了,一共猜了'+count+'次'); // 显示结果 alert() break; // 结束游戏,退出死循环 }}
模拟排队取号流程
var users = [] // 创建一个空数组,存放用户// 用户增加function take() { // 针对第一个用户 if ( users.length == 0 ) { users.push(1) } else { // 取出当前数组中最后一个元素的值,加1作为新用户的好码 users.push(users[users.length-1] + 1) } alert(users)}// 用户减少function invoice() { if ( users.lenth == 0 ) { alert('目前没有客户排队等待') } else { users.shift(); // 队伍中第一个出队 alert(users) }}
随机抽奖,直到最后一位全部抽完
var names = ['tom', 'jack', 'mary', 'alex', 'mike']while (names.length > 0) { // 知道最后一个人抽完 var index = Math.floor(Math.random()*names.length) // 确定抽奖人数 alert(names[index]) // 中奖人的位置 names.splice(index, 1) // 删除中奖人的位置 }
存储
和处理
文本插入到引号中的任何字符
(可以使用单引号或双引号
) 字符串中的引号不要与字符串的引号相同
添加转义字符
要使用引号索引位置
来访问字符串中的每个字符 (字符串的索引从 0 开始
)字符串可被当做数组来处理
,所以用数组下标的方式来访问单个字符
var str="hello world"; console.log(str[0]); //输出 h
charAt()
指定下标(位置)
的字符串index
必须是整数
(0、1、2……)string.charAt(index)
var str = "HELLO WORLD";str.charAt(0); // 返回 H
charCodeAt()
unicode 编码
string.charAt(index)
var str = "HELLO WORLD";str.charCodeAt(0); // 返回 72
超出范围的返回值不同
string[index]
的方式,对于超出字 index
范围的,会返回 undefined
charAt(index)
的方式,对于超出范围的会返回一个空的字符串
兼容性
问题
string[index]
的方式在 IE6~8
下会返回 undefined
, 也就是 IE6~8
不兼容此方法charAt(index)
经测试,在 IE6~8
下也能够正常返回值indexOf()
首次出现的索引(位置)
string.indexOf(str)
var str = "The full name of China is the People's Republic of China.";var pos = str.indexOf("China"); // 17
lastIndexOf()
最后一次
出现的索引
string.lastIndexOf(str)
var str = "The full name of China is the People's Republic of China.";var pos = str.lastIndexOf("China"); // 51
concat()
连接两个或多个字符串
格式没有改变原有字符串
,但是会返回
连接两个或多个字符串新字符串
所有参数转换成字符串
,然后按顺序连接到字符串 stringObject 的尾部
,并返回连接后的字符串stringObject.concat(stringX,stringX,...,stringX)
举例:实现 Hello 和 world! 两段字符串的连接function myFunction(){ var txt1 = "Hello "; var txt2 = "world!"; var n=txt1.concat(txt2); document.getElementById("demo").innerHTML=n; }结果:Hello World!
+
举例:实现两个字符串的连接var arr01 = "hello";var arr02 = "world";console.log(arr01 + arr02); // helloworld
split()
分割
成字符串数组
str参数
,从该参数指定的地方
分割 stringObjectlen参数
,该参数可指定返回的数组的最大长度
多于
这个参数指定的数组不考虑它的长度
指定的边界处
将字符串 stringObject 分割成子串创建的返回的数组中的字串不包括 str 自身
空字符串 ("")
用作 str,那么 stringObject 中的每个字符
之间都会被分割stringObject.split(str,len)
var str="How are you doing today?"document.write(str.split(" ") + "")document.write(str.split("") + "")document.write(str.split(" ",3))结果How,are,you,doing,today?H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?How,are,you
substr()
抽取从 start 下标开始的指定数目的字符
起始下标
,必须是数值
负数
,那么该参数声明从字符串的尾部
开始算起的位置-1 指字符串中最后一个字符,-2 指倒数第二个字符
,以此类推数值
省略
了该参数,那么返回从 stringObject 的开始位置到结尾的字串
stringObject.substr(start,length)
var str="Hello world!"document.write(str.substr(3,7))结果lo worl
substring()
提取字符串中介于两个指定下标之间的字符
新的字符串
,其内容是从 start 处到stop-1 处的所有字符
,其长度为 stop 减 start
非负的整数
,规定要提取的子串的第一个字符在 stringObject 中的位置
非负的整数
,比要提取的子串的最后一个字符在 stringObject 中的位置多 1
省略
该参数,那么返回的子串会一直到字符串的结尾
start 与 stop 相等
,那么该方法返回的就是一个空串
(即长度为 0的字符串
)start 比 stop 大
,那么该方法在提取子串之前会先交换这两个参数
stringObject.substring(start,stop)
举例:使用 substring() 从字符串中提取一些字符var str="Hello world!" document.write(str.substring(3)) 结果:lo world!=========================================举例:带两个参数的字符截取var str="Hello world!" document.write(str.substring(3,7)) 结果:lo w
slice()
提取字符串的某个部分
,并以新的字符串返回被提取的部分
起始下标
负数
,则该参数规定的是从字符串的尾部
开始算起的位置-1 指字符串的最后一个字符,-2 指倒数第二个字符
,以此类推结尾的下标
未指定此参数
,则要提取的子串包括 start 到原字符串结尾的字符串负数
,那么它规定的是从字符串的尾部
开始算起的位置stringObject.slice(start,end)
var str="Hello happy world!"document.write(str.slice(6))结果happy world!=====================================var str="Hellohappyworld!"document.write(str.slice(6,11))结果appyw
小写
string.toLowerCase()
var str="Hello World!"console.log(str.toLowerCase())结果hello world!
大写
string.toUpperCase()
将字符串中的所有字符都换成小写或将字符串中所有字符都换成大写var txt="Hello World!"; document.write(txt.toLowerCase() + ""); document.write(txt.toUpperCase()); 结果:hello world!HELLO WORLD!
match()
检索指定的值
,或找到一个或多个
正则表达式的匹配string.match(regexp)
match() 方法将检索字符串 String Object,找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志
如果regexp 没有标志
,那 match() 方法就只能在 stringObject 中执行一次匹配
如果没有找到任何匹配的文本, match() 将返回 null
。否则,它将返回一个数组
,其中存放了与它找到的匹配文本有关的信息
match 也是在目标字串对象中寻找与关键词匹配与否
的一个方法,它的强大功能在于通过关键词的规则创建可以实现复杂搜寻功能
,非常灵活
不建立规则前提下, match 可当作 search来使用,语法也一样,不同的是,它返回的是关键词自身(若匹配)和 null(若不匹配)
这没有关系,如果只为了检测匹配。显然,这不是它存在于javascript 世界中的理由,它定有不同于 search 的特色,即通过规则创建完成实现通盘匹配
在 "Hello world!" 中进行不同的检索var str="Hello world!"document.write(str.match("world") + "")document.write(str.match("World") + "")document.write(str.match("worlld") + "")document.write(str.match("world!"))结果worldnullnullworld!===========================================================使用全局匹配的正则表达式来检索字符串中的所有数字var str="1 plus 2 equal 3"document.write(str.match(/\d+/g))结果1,2,3
search()
指定的字符串
,或检索与正则表达式相匹配
的子字符串第一次出现的位置
序列,如不匹配,返回-1
大小写敏感
立刻中断查找的执行
验证有无匹配的操作
时,用 search 既简单又高效stringObject.search(regexp)
检索 "W3School"var str="Visit W3School!"document.write(str.search(/W3School/))结果6
indexOf()
返回某个指定的字符串值在字符串中首次出现的位置
,如果没有找到匹配的字符串则返回 -1
开始检索的位置
0 到 stringObject.length - 1
省略
该参数,则将从字符串的首字符开始检索
区分大小写
string.indexOf(searchvalue,star)
在 "Hello world!" 字符串内进行不同的检索var str="Hello world!"document.write(str.indexOf("Hello") + "")document.write(str.indexOf("World") + "")document.write(str.indexOf("world"))结果0-16
lastIndexOf()
最后出现的位置
,在一个字符串中的指定位置从后向前搜索
需检索的字符串值
开始检索的位置
0 到 stringObject.length - 1
省略
该参数,则将从字符串的最后一个字符处开始检索
大小写敏感
没有出现
,则该方法返回 -1
stringObject.lastIndexOf(searchvalue,fromindex)
var str="Hello world!"document.write(str.lastIndexOf("Hello") + "")document.write(str.lastIndexOf("World") + "")document.write(str.lastIndexOf("world"))结果0-16
replace()
替换
另一些字符,或替换
一个与正则表达式匹配的子串不会改变原始字符串
要替换的
模式的 RegExp 对象 直接量文本
模式,而不是首先被转换
为 RegExp 对象替换文本或生成替换文本的函数
格式:string.replace(searchvalue,newvalue)
var str="Visit Microsoft!"document.write(str.replace(/Microsoft/, "W3School"))结果Visit W3School!
function validJpg(inputFile){ var fileName = inputFile.value //获取上传选中的文件名 alert(fileName) //验证"C:\fakepath\jsServer.zip",后缀名必须是jpg,否则不允许上传 var index = fileName.lastIndexOf('.') // 获取.最后一次出现的位置 var extName = fileName.substr(index+1) //获取.以后所有的字符串 if(extName.toUpperCase() == 'JPG'){ // 将字符串转换大写后比较判断 alert('图片格式正确') }else{ alert('图片格式错误') inputFile.value = null }}
发布时间
时钟
,日历
倒计时
定时器
同一个时间定义
存在的、 完整的、 可验证
的数据唯一
地标识某一刻的时间1. 创建一个日期对象 objDate 是自定义的日期实例名称,后面是创建一个 Date 对象,Date 后面的括号里放参数 var objDate=new Date([arguments list]);=====================================================================================2. 参数的形式主要有以下 3 种 2.1 new Date("month dd yyyy hh:mm:ss"); hh:mm:ss 可选(不选的话就是默认的开始时间),而且前三项的顺序可随意,甚至各字段后面可以加逗号 2.2 new Date(yyyy,mth,dd,hh,mm,ss); 除了前两个字段(年、月字段)外,其余的都是可选的(不选的话就默认为开始的),不过,此处顺序最好别随意变换 2.3 new Date(ms); 参数表示的是需要创建的时间和 GMT 时间 1970 年 1 月 1 日之间相差的毫秒数
函数 | 含义 |
---|---|
month | 用英文表示月份名称,从 January 到 December |
mth | 用整数表示月份,从 0(1月)到 11(12月) |
dd | 表示一个月中的第几天,从 1 到 31 |
yyyy | 四位数表示的年份 |
hh | 小时数,从 0(午夜)到 23(晚 11 点) |
mm | 分钟数,从 0 到 59 的整数 |
ss | 秒数,从 0 到 59 的整数 |
ms | 毫秒数,为大于等于 0 的整数 |
调用用户系统的时间
,记得先将系统时间调为正确的标准时间
,需要用服务器的时间
getFullYear()
返回一个表示年份的 4 位数字
,包括世纪值在内的完整年份
,而不是两位数的缩写形式绝对数字的形式返回年份值
不会出现浏览器兼容性问题
,而后者会因浏览器不同出现不同的结果
var d = new Date(); document.write(d.getFullYear());
getMonth()
返回表示月份的数字
本地时间
,而且返回值是 0(一月) 到 11(十二月) 之间
的一个整数var d = new Date(); document.write(d.getMonth());
getDate()
使用本地时间
1 ~ 31 之间的一个整数
日期
有关,只要是当前的号数就是正确的var d = new Date() document.write(d.getDate())
getHours()
小时 (0 ~ 23)
var d = new Date(); var n = d.getHours(); document.write(n);
getMinutes()
分钟数
var d = new Date();var n = d.getMinutes();
getMilliseconds()
毫秒
var d = new Date();var n = d.getMilliseconds();
getDay()
星期的某一天
的数字0(周日) 到 6(周六)
之间的一个整数var d=new Date(); document.write(d.getDay());
setFullYear
设置年份
year 是必须有
的,表示年份的四位整数,用本地时间表示
var d = new Date(); d.setFullYear(1992); document.write(d); 结果为:Sun Aug 16 1992 10:02:59 GMT+0800 (中国标准时间)
setMonth()
设置月份
month 是必须的
,表示月份数值,该值介于 0(一月) ~ 11(十二月)
之间var d = new Date(); d.setMonth(0); document.write(d);
setDate()
设置一个月的某一天
1 ~ 31
)var d = new Date(); d.setDate(15); document.write(d);
setHours()
指定的时间
的小时字段
hour 是必须的
,表示小时的数值
,介于 0(午夜)~ 23(晚上 11点)
之间,以本地时间为准
var d = new Date(); d.setHours(15); document.write(d);
setMinutes()
指定时间的分钟
字段,同样用于设置秒数与毫秒数
min 是必须有的
,它表示分钟的数值
,介于 0 ~ 59
之间,以本地时间为准
var d = new Date(); d.setMinutes(17); document.write(d);
setSeconds()
指定时间的秒
的字段sec 是必须的
,它表示秒的数值
,该值是介于 0 ~ 59
之间的整数var d = new Date();d.setSeconds(17);document.write(d);
计算当前时间距离武汉赏樱花的时间
var day = new Date(); // 当前标准时间var Wuhan = new Date('2020-01-23 10:00:00'); // 武汉赏樱花时间var daylength = (day - Wuhan) / 1000; // 时间差(毫秒转秒)var date = Math.floor(daylength / 3600 / 24); // 天数var hour = Math.floor(daylength / 3600) % 24; // 小时数var min = Math.floor(daylength / 60) % 60; // 分钟数var second = Math.floor(daylength % 60) // 秒数alert(date + '天' + hour + '小时' + min + '分' + second + '秒')
上下文对象 this
实参的对象 arguments
内置类数组对象
实参集合
执行函数时实际传入的参数的集合
对象
,但它和数组很相似,所以通常称为类数组对象
,以后看到类数组其实就表示 arguments不能显式的创建
,只有在函数开始时才可用
callee
,length
和迭代器 Symbol
arguments.length 为函数实参个数
,可以用 arguments[length]
显示调用参数检测参数个数
,模拟函数重载
arguments对象:可以在函数内访问所有的参数,实参
function f1(){ console.log(arguments[0]); console.log(arguments[1]); console.log(arguments[2]);}f1(12,23,45); //12 34 45
在正常的模式下,arguments对象可以在运行的时候进行修改
function f2(a,b){ arguments[0] = 10; arguments[1] = 20; return a + b;}console.log(f2(4,6)); //30
在严格的模式下,arguments对象在运行的时候不可以修改,修改arguments对象不会影响到实际的函数参数
function f3(a,b){ 'use strict'; // 'use strict' 是开启严格模式 arguments[0] = 10; arguments[1] = 20; return a + b;}console.log(f3(3,6)); //9
通过arguments对象的length属性,可以判断实参的个数
function f4(){ console.log(arguments.length);}f4(2,3,4,5); //4f4(1); //1f4(); //0
arguments是一个对象,不是数组,转换为数组可以采用 slice 和 逐一填入新数组
var arr = Array.prototype.slice.call(arguments);console.log(typeof arr);var arr2 = [];for(var i = 0; i
arguments的callee属性可以返回对应的原函数,达到调用自身函数的效果,但是在严格模式中是不适用的
var f5 = function(){ console.log(arguments.callee===f5); //true console.log(arguments.callee===f6); //false}var f6;f5(); //返回原函数,调用自身
arguments.callee为引用函数自身。我们可以借用arguments.length可以来查看实参和形参的个数是否一致
function add(a, b) { var realLen = arguments.length; console.log("realLen:", arguments.length); var len = add.length; console.log("len:", add.length); if (realLen == len) { console.log('实参和形参个数一致'); } else { console.log('实参和形参个数不一致'); } }; add(11,22,33,44,66);
借用arguments.callee来让匿名函数实现递归
var sum = function(n) { if(n == 1) { return 1; } else { return n + arguments.callee(n-1); } } console.log("sum =", sum(5));
编写一个函数求传入的若干个数字(不能用数组显示传入)的和
function add() { var len = arguments.length; var sum = 0; for (var i = 0; i < len; ++i) { sum += arguments[i]; } return sum; }; add(11,22,33,44,66);
特定交互方式
侦测
到的行为每个元素
都可以产生某些可以触发 JavaScript 函数的事件
提高网页的交互性
浏览器行为
,也可以是用户行为
函数
一起使用,当事件发生时执行函数
事件源对象
页面文档
以及元素对象
事件名
on前缀
事件处理程序
事件发生时执行的函数
具名
或匿名
函数行内绑定
动态绑定
事件监听
鼠标事件
属性 | 描述 |
---|---|
onclick | 当用户点击某个对象时调用的事件句柄 |
oncontextmenu | 在用户点击鼠标右键打开上下文菜单是触发 |
ondblick | 当用户双击某个对象时调用事件句柄 |
onmousedown | 鼠标按钮被按下 |
onmouseenter | 当鼠标指针移动到元素上时触发 |
onmouseleave | 鼠标指针移出元素是触发 |
onmousemove | 鼠标被移动 |
onmouseover | 鼠标移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
onmouseup | 鼠标按键被松开 |
onclick、onmousedown 和 onmouseup
执行顺序
是 onmousedown->onmouseup->onclick
onclick 和 onmouseup
都不会被触发
为一个 div 添加鼠标点击事件、鼠标按键按下事件、鼠标按键松开事件
mouseover 和 mouseout
放大镜效果
通过鼠标移入、移出事件向元素中添加内容
onkeydown、onkeypress、onkeyup
onkeydown → onkeypress → onkeyup
属性 | 描述 |
---|---|
onkeydown | 某个键盘按键被按下 |
onkeypress | 某个键盘按键被按下并松开 |
onkeyup | 某个键盘事件松开 |
任意键
,都会调用函数,函数内执行弹出警告框的代码举例: 为一个输入框设定 onkeydown 事件
任一“字符键”(如 A~Z、数字键)
时触发,单独按下“功能键”(如 F1~F12、Ctrl 键、Shift 键、Alt 键等)
不会触发举例: 通过 onkeypress 事件弹出警告框
onkeyup
事件是在键盘的某个键被按下之后松开的一瞬间
触发的事件 提取value
的话,可以提取到已经输入的内容
onkeydown 和 onkeypress
都只会提取到按下按键之前的内容
举例: 通过 onkeyup 事件改变元素的内容
属性 | 描述 |
---|---|
onblur | 元素失去焦点是触发 |
onchange | 该事件在表单元素的内容是触发(<input>,<keygen>,<select>和 <textarea> ) |
onfocus | 元素获取焦点是触发 |
onfocusin | 元素即将获取焦点是触发 |
onfocusout | 元素即将失去焦点是触发 |
oninput | 元素获取用户输入时触发 |
onresert | 表单重置是触发 |
onsearch | 用户向搜索域输入文本是触发(<input="search"> ) |
onselect | 用户选取文本时触发(<input>和<textarea> ) |
onsubmit | 表单提交时触发 |
功能
域的内容改变
时发生单选框与复选框改变
后触发的事件onchange 事件的触发步骤
获得焦点
的时候,系统储存当前值
失去焦点
的时候,判断
当前值是否和之前的储存值相同,如果不同则触发 onchange 事件(非 IE 浏览器可以通过回车
来判断)举例: 当输入框中的内容改变时,将输入的小写字母转换成大写字母
当输入框失去焦点的时候,函数被触发,小写字母转换成大写字母
功能
<form>
表单中使用确认按钮被点击时发生
注意点
返回 false
时,表单就不会被提交将返回值改为 true
就可以了,当返回值是 false 时,表单不会被提交语法
onsubmit="return 函数名()"
举例: 事件触发的函数返回 false,看页面会不会跳转
功能
获得焦点
时发生对象失去焦点
时发生表单输入框
<input>
, <select>
, 和<a>
举例: 当输入框获得焦点的时候改变输入框的颜色,当输入框失去焦点的时候验 证内容是否为空,并把输入框的颜色改成白色
功能
页面或图像加载完成后立即发生
<body>
元素,在页面完全载入后(包括图片、css 文件等)执行脚本代码举例: 页面加载完成后弹出警告框说明: 当 body 标签中的内容加载完成后调用函数名为 func 的函数
功能
窗口或框架被调整大小
时发生语法
window.onresize=function(){ SomeJavaScriptCode};
参数 | 描述 |
---|---|
SomeJavaScriptCode | 必需。规定该事件发生时执行的 JavaScript |
举例: 实现当浏览器被重置大小时执行 Javascript 代码分针网 尝试调整浏览器的窗口
注意:该例子在 IE8 或更早版本下可能不工作,IE8 或更早的版本不支持 window 对象的 outerWidth/outerHeight 属性
解释: 当按住鼠标该表浏览器窗口大小的时候 js 代码宽度(w)跟高度(h)会自动改变
转载地址:http://sjqwi.baihongyu.com/