JS基础语法

javaEE01day JavaScript 基础语法篇 JavaScript : 定义 : 是一种具有面向对象能力的、解释型的程序设计语言。 是基于 对象和事件驱动并具有相对安全性的客户端脚本语言。 作用: 验证发往服务器端的 数据、增加 Web 互动、加强用户体验度等。 JavaScript 组成 : 组成: ECMAScript(基础语法) JavaScript的核心语法ECMAScript描述了该语言的语法和基本对象 DOM(文档对象模型) 文档对象模型（DOM）—— 描述了处理网页内容的方法和接口 BOM(浏览器对象模型) 浏览器对象模型（BOM）—— 描述了与浏览器进行交互的方法和接口

开发工具 1、浏览器: chrome 火狐 ie 2、开发工具：hbuilder 3、进入“控制台”console：F12 控制台的作用: console对象代表浏览器的 JavaScript控制台，用来运行 JavaScript命令，常常用来显示网 页运行时候的错误信 息。Elements用来调试网页的 html和 css代码。

JS需要和 HTML一起使用才有效果，我们可以通过直接或间接的方式将 JS代码嵌入在 HTML页面中。 JavaScript 3种基本用法 : 行内 JS : 写在标签内部的 js代码 内部 JS : 定义在 script标签内部的 js代码 写在 注：如果

一丶语句和注释: JavaScript 程序的执行单位为行（line） 语句： 语句（statement）是为了完成某种任务而进行的操作，语句以分号结尾，一个分号即表示一个语句结束。 多个语句可以写在一行内（不建议这么写代码），但是一行写多条语句时，语句必须以分号结尾。 表达式不需要分号结尾。一旦在表达式后面添加分号，则 JavaScript 引擎就将表达式视为语句，这样会产生一些没有任何意义的语句

注释： // 单行注释 /* 多行注释 */ 兼容 html 注释方式：<!-- -->

二丶变量 变量的声明 JavaScript是一种弱类型语言，声明时不需要指定数据类型，直接通过var修饰符声明 1、先声明再赋值 2、声明并赋值

注：如果声明变量时不使用var修饰符，则该变量是全局变量 变量的注意点： 1）若只声明而没有赋值，则该变量的值为 undefined 2）变量要有定义才能使用，若变量未声明就使用，JavaScript 会报错，告诉你变量未定义 3）可以在同一条 var 命令中声明多个变量。 4）若使用 var 重新声明一个已经存在的变量，是无效的。 5）若使用 var 重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值 6）JavaScript 是一种动态类型、弱类型语言，也就是说，变量的类型没有限制，可以赋予各种类型的值 变量提升 JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升 注意：变量提升只对 var 命令声明的变量有效，如果一个变量不是用 var 命令声明的，就 不会发生变量提升。

三丶标识符和关键字: 标识符就是一个名字，用来给变量和函数进行命名，有特定规则和规范 规则： 由 Unicode 字母、_、$、数字组成、中文组成 （1）不能以数字开头 （2）不能是关键字和保留字 （3）严格区分大小写

规范： 见名知意 驼峰命名或下划线规则 关键字也称保留字，是被 JavaScript 征用来有特殊含义的单词 arguments

四丶数据类型: JavaScript 中有 6 种数据类型，其中有五种简单的数据类型： Undefined、Null、布尔、 数值和字符串。一种复杂数据类型 Object。 数 值（Number）： 整数和小数（比如 1 和 3.14） 字符串（String）： 字符组成的文本（比如"Hello World"） 布尔值（Boolean）：true（真）和 false（假）两个特定值 Undefined： 表示“未定义”或不存在，即此处目前没有任何值 Null： 表示空缺，即此处应该有一个值，但目前为空 对象（object）(引用) ： 各种值组成的集合 1)、对象（object）{name:”zhangsan”,age:”18”} 2)、数组（array）[1,2,3] 3)、函数（function）function test() {}

typeof 操作符 typeof 操作符是用来检测数据类型。 字符串 描述 undefined 未定义 boolean 布尔值 string 字符串 number 数值 object 对象或 null function 函数 说明： 1、typeof null 返回的是 object 字符串 2、函数不是数据类型，但是也可以使用 typeof 操作符返回字符串。 typeof 操作符可以操作变量也可以操作字面量。 注意：函数在 JavaScript 中是对象，不是数据类型，所以使用 typeof 区分 function 和object 是有必要的 1. undefined undefined 类型的值是 undefined。 undefined 是一个表示"无"的原始值，表示值不存在。 出现 undefined 的常见情况： 1）当声明了一个变量而没有初始化时，这个变量的值就是 undefined 2）当函数需要形参，但未传递实参时 3）函数没有返回值，但定义了变量接收 2. null null 类型是只有一个值的数据类型，即特殊的值 null。它表示空值，即该处的值现在为空， 它表示一个空对象引用。 使用 Null 类型值时注意以下几点： 1）使用 typeof 操作符测试 null 返回 object 字符串。 2）undefined 派生自 null，所以等值比较返回值是 true。所以，未初始化的变量和赋值为 null 的变量相等 3. 数值型 数值型包含两种数值：整型和浮点型。 1）所有数字（整型和浮点型）都是以 64 位浮点数形式储存。所以，JS 中 1 与 1.0 相等， 而且 1 加上 1.0 得到的还是一个整数。浮点数最高精度是 17 位小数，由于浮点数运算时可能不精确，尽量不要使用浮点数做判断。 2）在存储数值型数据时自动将可以转换为整型的浮点数值转为整型。 3）对于过大或过小的数值，可以使用科学计数法来表示 4）Infinity、-Infinity 超过了表数范围，出现 Infinity（正无穷）或者-Infinity（负无穷） isFinite()函数可以确定是否超出范围： true：没有超出；false：超出了 5) NaN 表示非数值（Not a Number），是一个特殊的值。 如：将字符串解析成数字出错的场合。 console.log(parseInt("abc"));//parseInt 方法将字符串解析为数值，但若无法解析，返回 NaN 注意： NaN 不等于任何值，包括它本身,因为它不是一个值 NaN 与任何数（包括它自己）的运算，得到的都是 NaN isNaN()可以用来判断一个值是否为 NaN true：不是数字；false：是数字 4. 字符串 使用 ' ' 或 " "引起来，如：'sxt'，"good"。 使用加号’+’进行字符串的拼接，如：console.log('hello' + ' everybody'); 1）转义符： \0 代表没有内容的字符（\u0000） \n 换行符（\u000A） \t 制表符（\u0009） \' 单引号（\u0027） \" 双引号（\u0022） 5. 布尔类型 布尔类型有两个值：true、false。常用来做判断和循环的条件 6. 对象 对象是一组数据和功能的集合。 typeof window // "object" typeof {} // "object" typeof [] // "object" typeof null // "object" 函数 function f() {} typeof f //function 说明： {}：表示使用对象字面量方式定义的对象。空的大括号表示定义包含默认属性和方法的对 象。 instanceof 运算符 typeof 操作符对数组（array）和对象（object）的显示结果都是 object，那么可以利用 instanceof 运算符，它可用于判断一个变量是否某个对象的实例

五丶运算符 : 运算符用于执行程序代码运算，会针对一个及其以上操作数来进行运算。 1. 算数运算符 :+加 -减 乘 /除 %取余 ++自增 --自减 2. 赋值和扩展运算符 : = x=y += x+=y x=x+y -= x-=y x=x-y = x=y x=xy /= x/=y x=x/y %= x%=y x=x%y 3. 比较运算符 :

== 等于 x==8 为 false === 全等（值和类型） x===5 为 true；x==="5" 为 false != 不等于 x!=8 为 true > 大于 x>8 为 false < 小于 x<8 为 true >= 大于或等于 x>=8 为 false <= 小于或等于 x<=8 为 true 4. 逻辑运算符 : 运算符 描述 例子 && and (x < 10 && y > 1) 为 true || or (x==5 || y==5) 为 false ! not !(x==y) 为 true 5. 三目运算符 : 运算符 描述 例子 ?: 如果…否则… 3>5?3:5

六、类型转换 1、自动类型转换 值------>字符串(一组双引号"")------>数字----------->布尔值(空为false 非空为true ; 0位false 非0位true) 2、函数转换 JS 提供了 parseInt()和 parseFloat()两个全局转换函数。前者把值转换成整数，后者把 值转换成浮点数。只有对 String 类型调用这些方法，这两个函数才能正确运行；对其他类型返 回的都是 NaN(Not a Number)。 parseInt() 把值转换成整数 1、parseInt()在转换之前，首先会分析该字符串，判断位置为 0 处的字符，判断它是否是个有效数字，如果不是，则 直接返回 NaN，不再继续，如果是则继续，直到找到非字符 2、parseInt()方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由 parseInt()方法的第二个参数指定的 3、如果十进制数包含前导 0，那么最好采用基数 10，这样才不会意外地得到八进制的值

parseFloat()把 值转换成浮点数 parseFloat()方法与 parseInt()方法的处理方式相似，但是parseFloat()可以识别第一个小数点 3、显示转换 toString()函数将内容转换为字符串形式，其中 Number 提供的 toString()函数可以将数字以指定的进制转换为字符串，默认为十进制。 Number 还提供了 toFixed()函数将根据小数点后指定位数将数字转为字符串，四舍五入 4、强制转换 JS 为 Number、Boolean、String 对象提供了构造方法，用于强制转换其他类型的数据。 此时操作的是整个数据，而不是部分

七、块 JavaScript 使用大括号，将多个相关的语句组合在一起，称为“区块”。 1. 与大多数编程语言不一样，JavaScript 的区块不构成单独的作用域。 2. 区块中的 变量与区块外的变量，属于同一个作用域。 3. 区块不构成单独的作用域 4. 区块往往用来构成其他更复杂的语法结构，比如 for、if、while 等。

八、控制语句 流程控制语句一共有三种： 1.流程执行:从上到下，从左到右 2.选择执行:分支选择 3.循环执行:重复执行 判断结构: if…else 单分支 双分支 多分支 switch 结构 多个 if …else 且值为定值时(即=== 在比较运行结果时，采用的是严格相等运算符 （=），而不是相等运算符（），这意味着比较时不会发生类型转换。) ，可以使用 switch 替换： break 防止穿透，如果没有 break,则继续执行后面的代码，直到遇到 break 或全部执行完 毕，但是有些时候会利用穿透。 default是switch以为的选择分支,同样需要break结束

循环 结构: 循环结构用于重复执行某个操作 简单理解就是重复执行同类型的代码，它有多种形式。 while 先判断后执行 基本格式 while(判断条件语句) { 循环体语句; } 扩展格式： 初始化语句; while(判断条件语句) { 循环体语句; 控制条件语句; // 少了它很容易形成死循环 }

do…while 先执行后判断 ，至少执行一次 基本格式 do { 循环体语句; }while(判断条件语句); 扩展格式： 初始化语句; do { 循环体语句; 控制条件语句; }while(判断条件语句);

for for(初始化语句;判断条件语句;控制条件语句) { 循环体语句; } 死循环 条件永远成立，永远为 true,则会产生死循环 最简单的死循环: 1. while(true){} 2. for(;?{}

break 与 continue : break: 停止本层循环 continue:暂停本次循环，继续下一次

九.数组： 数组的特点： 1、数组的长度是可变的 2、数组的类型可以不一样 3、不存在下标越界

1、数组的定义 1、隐式创建 var 变量名 = [值1,值2,...]; 2、直接实例化 var 变量名 = new Array(值1,值2,...); 3、实例化并指定长度 var 变量名 = new Array(size); 获取数组的长度 数组.length 2、数组的遍历 数组的遍历即依次访问数组的每一个元素 ，JS 提供三种遍历数组的方式： 1、普通 for 循环遍历 for(var i = 0; i < 数组名.length; i++) { } 注：可以拿到undefinded的值，无法获取数组中属性对应的值 2、for ... in for(var i in 数组) { // i是下标或属性名 } 注：无法拿到undefinded的值，可以获取数组中属性对应的值 3、foreach 数组.foreach(function(element,index){ // element：元素；index：下标 }); 注：无法获取属性对应的值与undefinded的值 数组在使用的时候建议大家规矩来用。在存放数据时，从下标 0 开始顺序的存放数组元素。 如果下标： 1.为非负整数(包括整数字符串)：自动从 0 开始,不存在添加 undefined 2.为负数、小数、非数字符串：这些内容不计算在长度内，当成"属性"处理，相当于自定义属性。 数组非常灵活，使用数组元素 1.下标: 非负整数(包括整数字符串)： 数组.下标 数组[下标] 2.下标：负数、小数、非数字字符串： 数组[属性] * for -- 不遍历属性 * foreach -- 不遍历属性和索引中的 undefined * for in -- 不遍历索引中的 undefined 3、数组提供的方法 push 添加元素到最后 unshift 添加元素到最前 pop 删除最后一项 shift 删除第一项 reverse 数组翻转 join 数组转成字符串 indexOf 数组元素索引 slice 截取（切片）数组，原数组不发生变化 splice 剪接数组，原数组变化，可以实现前后删除效果 concat 数组合并

十丶函数： 函数，即方法。函数也是对象。

1、函数的定义 定义方式有3种： 1、函数声明语句 function 函数名([形参]) { } 调用：函数名([实参]); 2、函数定义表达式 var 变量名/函数名 = function([形参]){ } 调用：变量名([实参])/函数名([实参]); 3、Function构造函数 var 函数名 = new Function('参数1','参数2','函数的主体内容'); 调用：函数名([实参]); 注：构造韩束的最后一个参数是函数体。 注意： 1、js 中的函数没有重载，同名的函数，会被后面的函数覆盖。 2、js 中允许有不定数目的参数，后面介绍 arguments 对象 2.函数名的提升（了解） JavaScript 引擎将函数名视同变量名，所以采用 function 命令声明函数时，整个函数会像变量声明一样，被提升到代码头部。所以，下面的代码不会报错 但是，如果采用赋值语句定义函数，JavaScript 就会报错。 3.函数的参数、调用和return 参数 函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部 数据就叫参数，定义时的参数称为形参，调用时的参数称为实参  1、实参可以省略，那么对应形参为 undefined  2、若函数形参同名（一般不会这么干）：在使用时以最后一个值为准。  3、可以给参数默认值：当参数为特殊值时，可以赋予默认值。  4、参数为值传递，传递副本 ；引用传递时传递地址，操作的是同一个对象 函数的调用 1、常用调用方式：函数名([实参]); 存在返回值可以变量接收，若接收无返回值函数则为 undefined 2、函数调用模式 3、方法调用模式 4、call()和apply() 注：谁调用函数，this就指向谁 匿名函数立即调用 （1）匿名函数：function ([参数]){} （2）调用：(function ([形参]) {})([实参]); 在函数只被使用一次的情况下可以使用这种方式，简便省事 return 语句 函数的执行可能会有返回值，需要使用 return 语句将结果返回。return 语句不是必需的， 如果没有的话，该函数就不返回任何值，或者说返回 undefined。 作用：在没有返回值的方法中，用来结束方法。 有返回值的方法中，一个是用来结束方法，一个是将值带给调用者。 4.arguments 对象和函数的方法及属性 arguments对象可以得到函数的实参数量 函数名.name 得到函数名称 函数名.length 得到函数的形参数量 函数名.toString() 得到函数的源码 5.函数的作用域 函数作用域：全局(global variable)和局部(local variable) 1）全局变量与局部变量同名问题 2）在函数中定义变量时，若没有加 var 关键字，使用之后自动变为全局变量 3）变量作用域提升 6.闭包的形成： 1、外部函数内部嵌套内部函数 2、内部函数中使用外部函数的环境 3、外部函数返回内部函数 闭包的作用： 1、获取函数内部的变量 2、保存变量的值在内存中 3、避免变量名重复 7.递归 数自己调用自身。函数头:尽头 函数体:重复执行 function print(num){ if(num==10){ //递归头 return ; } //递归体 console.log(num); print(num+1); }; print(1);

十一、 JS 中的常用全局属性和方法 在 JavaScript 中，为了操作方便，提供了一些全局属性和方法，即可以直接使用的方法。 Infinity 表示正无穷大的数值 NaN 非数值 undefined 未定义的值 eval() 计算 JavaScript 代码串，返回结果 isFinite() 检验一个值是否是无穷大的数字 isNaN() 检验一个值是否是非数字的值 parseFloat() 从字符串解析一个带小数点的数字 parseInt() 从字符串解析一个整数 encodeURIComponent() 返回参数的副本，其中某些字符被十六进制的转义序列替换了 decodeURIComponent() 对 encodeURIComponent()转移的字符串解码

十二、 JS 内置对象

Arguments 只在函数内部定义，保存了函数的实参 Array 数组对象 Data 日期对象，用来创建和获取日期 Math 数学对象 String 字符串对象，提供对字符串的一系列操作

String: ◦ charAt(idx)：返回指定位置处的字符 ◦ indexOf(Chr)：返回指定子字符串的位置，从左到右。找不到返回-1 ◦ substr(m,n)：返回给定字符串中从 m 位置开始，取 n 个字符，如果参数 n 省略， 则意味着取到字符串末尾。 ◦ substring(m,n)：返回给定字符串中从 m 位置开始，到 n 位置结束，如果参数 n 省 略，则意味着取到字符串末尾。 ◦ toLowerCase()：将字符串中的字符全部转化成小写。 ◦ toUpperCase()：将字符串中的字符全部转化成大写。 ◦ length: 属性，不是方法，返回字符串的长度。

Math: ◦ Math.random() 随机数 ◦ Math.ceil() ：天花板 大于最大整数 ◦ Math.floor() :地板 小于最小整数 String

Date: //获取 ◦ getFullYear()年, getMonth()月, getDate()日, ◦ getHours()时,getMinutes()分,getSeconds()秒 //设置 ◦ setYear(), setMonth(), … ◦ toLoacaleString()

说明： 1.getMonth()：得到的值：0~11（1 月~12 月） 2.setMonth()：设置值时 0~11 3.toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果。

十三、 JS 对象 对象（object）是 JavaScript 的核心概念，也是最重要的数据类型。JavaScript 的所有数 据都可以被视为对象。 对象，就是一种无序的数据集合，由若干个“键值对”（key-value）构成。通 过 JavaScript 我们可以创建自己的对象。 JavaScript 对象满足的这种”键值对”的格式我们成为 JSON 格式，以后会见得非常多，即伟大的 JSON 对象 JS中一切数据皆对象。 1、定义对象 JS 创建自定义对象，主要通过三种方式： 1、字面量形式创建对象 var 变量名 = {}; // 空对象 var 变量名 = {键:值,…}; 2、通过 new Object 对象创建 var 变量名 = new Object(); 3、通过 Object 对象的 create 方法创建对象 var 变量名 = Object.create(null或对象); 2、对象的序列化和反序列化 序列化即将 JS 对象序列化为字符串，反序列化即将字符串反序列化为 JS 对象。JS 中通过 调用 JSON 方法，可以将对象序列化成字符串，也可以将字符串反序列化成对象 。 序列化对象，将对象转为字符串 JSON.stringify(object) 反序列化，将一个 Json 字符串转换为对象。 JSON.parse(jsonStr)

3、eval() 1、可借助 eval()动态函数，将参数字符串解析成 js 代码来执行，只接受原始字符串作为参数 eval(“console.log(‘你好’)”);//控制台输出你好 2、可将 json 串转为 json 对象 1）第一种解析方式：得到的 json 对象名就是 jsonObj eval("var jsonObj = " + jsonStr); 2）第二种解析方式：对象中有多个属性 var jsonObj = eval("(" + jsonStr + ")"); 由于 json 是以{ }的方式来开始以及结束的，在 eval 中会被当成一个语句块来处理，故必 须强制将它转换成一种表达式。 加上圆括号是使 eval 函数在处理时强制将括号内的表达式转化为对象而不作为语句来执行。 3）第二种解析方式：对象中只有一个属性 eval(jsonStr); 4. this this 是 JavaScript 语言的一个关键字。 它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。 随着函数使用场合的不同，this 的值会发生变化。但是有一个总的原则，那就是 this 指的 是，调用函数的那个对象。 在函数中使用 this 在函数中使用 this 属于全局性调用，代表全局对象，通过 window 对象来访问。 在对象的方法中使用 this 在对象中的函数使用 this，代表当前的上级对象。