JavaScript基础

四、JavaScript

注：javascript和java毫无关系

js（简称）–javascript直译型脚本语言

javascript的标准是ECMAscript，截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。

1、JavaScript的三大组成部分

ECMAScript，文档对象模型（DOM），浏览器对象模型（BOM）

ECMAScript：描述了语言的语法和基本对象，是JavaScript的核心

DOM：描述处理网页内容的方法和接口

BOM：描述与浏览器进行交互的方法和接口

ECMAscript5 和ECMAscript56

2、js的引入方式

两个大方面：直接写入html文件中；或者以script文件方式导入

直接写入html文件中三种方式：

1.直接在html的head标签中创建script标签：<script></script> 2.在html文件的body中创建script标签：<script></script> 3.在html文件的尾部的body和html之间创建script标签：<script></script> 也能在最下面的html外面创建，虽然不报错，但是不规范

以script文件方式导入的三种方式：

1.直接在html的head标签中引入script文件：<script src="js文件路径"></script> 2.在html文件的body中引入script文件：<script src="js文件路径"></script> 3.在html文件的尾部的body和html之间引入script文件：<script src="js文件路径"></script> JavaScript文件的后缀名是.js

3、js的变量与数据类型

（1）变量

1.var：var定义的变量作用于全局；ES6之前没有块级作用域，只有全局作用域和函数作用域。 var a = 10; 变量定义 var 变量名; var b; 只声明，没有赋值的情况下，b的值为undefined 2.let：let定义的变量制作用于函数块内部；只在let命令所在的代码块内有效，即let用于声明一个块级作用域的变量；ES6语法里面新增的 let a = 10; 3.count：常量的声明

（2）数据类型

number类型（整数，浮点数）

查看数据类型：typeof (参数);或者typeof 参数;

var n = 11; var n2 = 11.11; js代码注释 // js代码 查看数据类型 typeof 变量名; typeof n; -- number类型 变量声明,但没有赋值的时候,变量的值为undefined

string类型（字符串）

定义方式有两种：直接定义和实例化

直接定义的typeof类型是string；实例化的typeof类型是object

// 1、定义: var a = 'alexsb'; var a = new String('ss'); typeof a; -- "object" // 2、字符串的操作方式 var s = '诱色可餐徐茂洁'; // 索引取值: s[1] -- '色' // 移除两端空格: s.trim(); s.trimLeft(); s.trimRight(); var s2 = ' hello '; s2 " hello " s2.trimLeft(); "hello " s2.trimRight(); " hello" s2.trim(); "hello" // 索引取值 var value = name.charAt(index) // 根据索引获取字符 示例: var s = 'hello'; -- s.charAt(4); -- 'o' // 切片 var value = name.substring(start,end) // 根据索引获取子序列,切片 示例: s.substring(1,3); -- "el" 左包右不包 // 字符串拼接： + s1 "hello world" s2 " hello " s1 + s2 "hello world hello " 布尔类型（boolean类型） var a = true; var b = false; typeof a; -- "boolean" undefined和null类型 undefined 变量声明了,但是没有赋值,此时这个变量是undefined类型 null : 变量不用了,就可以给变量赋值为null, --- object类型 -- 和python的None一样 数组（array） var name = [11,22,33]; typeof name; -- "object" name.length -- 得到数组长度 数组常用方法: names[0] // 索引,索引也是从0开始的 names.push(ele) // 尾部追加元素 示例:a.push('xx'); -- [11, 22, 33, "xx"] var ele = names.obj.pop() // 尾部移除一个元素 示例:a.pop(); -- [11, 22, 33] names.unshift(ele) // 头部插入元素 示例:a.unshift('ssss'); -- ["ssss", 11, 22, 33] var ele = obj.shift() // 头部移除一个元素 示例:a.shift(); -- [11, 22, 33] names.splice(index,0,ele) // 在指定索引位置插入元素 names.splice(从哪删(索引),删几个(个数),删除位置替换的新元素(可不写,可写多个)) names.splice(index,1,ele) // 指定索引位置替换元素 names.splice(index,1) // 指定位置删除元素 示例: a.splice(1,2) -- [11, 22, 33] a.splice(1,1,'xx','oo','asdf'); -- [11, "xx", "oo", "asdf", 33] names.slice(start,end) // 切片 示例:a.slice(1,3);-- [22, 33] names.reverse() // 原数组反转 示例:a.reverse(); -- [44, 33, 22, 11] names.join(sep) // 将数组元素连接起来以构建一个字符串 示例: var a = ['ni','hao','ma',18] a.join('+'); -- "ni+hao+ma+18" names.concat(val,..) // 连接数组 示例: var a = [11,22]; var b = ['aa','bb'] var c = a.concat(b); c -- [11, 22, "aa", "bb"] names.sort() // 对原数组进行排序 很尬! 需要自己定义规则: var l4 = [11.11,2,4.5,33]; function compare(a,b){ return a - b; 当大于0时,两个数据换位置 }; 使用: l4.sort(compare); 升序排列 自定义对象（dict） // 声明 info = { name:'武沛齐', "age":18 } var a = {username:'xx',password:'123'}; //可以不加引号 typeof info; "object" // 常用方法 var val = info['name'] // 获取,通过键取值必须加引号, info.name 也是可以的 info['age'] = 20 // 修改 info['gender'] = 'male' // 新增 delete info['age'] // 删除

4、流程控制

（1）if判断

if (a == 1){ //判断条件写在小括号里面,大括号里面写条件判断成功后的代码内容 console.log('1111'); } else{ console.log('222'); }

（2）多条件判断

var a = 0; if(a > 1){ // console.log('1111'); // var hhhh = document.getElementById('d1'); // hhhh.innerText = '彭于晏'; }else if(a<1){ console.log('2222'); }else { console.log('3333'); }

（3）运算符

> < == != >= <= === !== var a = 2; var b = '2'; a == b; true 弱等于 a === b; false 强等于 a != b; false a !== b; true

算数运算符

+ - * / % ++ -- ++ 自增 1 -- 自减 1 var a = 2; a++ 先执行逻辑 在+1 ++a 先+1 在执行逻辑 简单示例: if (++a === 4){ console.log('xxx'); } else{ console.log('ooo'); };

（4）switch判断

var num = 200; switch(num++){ 参数必须是数字或者得到数字的算式 case 10: console.log('未成年'); break; case 18: console.log('成年'); break; case 35: console.log('油腻老男人'); break; case 100: console.log('....'); break; #上面的case条件都不成立就执行default default: console.log('太大了'); };

（5）异常捕获

try{ console.log(xx); }catch(e){ console.log(e); } // 不管有没有异常都会执行finally finally{ console.log('sssss'); }

（6）for循环

for (var i=0;i<100;++i){ console.log(i); }; 循环数组 var d = [11,22,33]; for (var i in d){ if (d[i] === 22){ continue; //跳出本次循环 // break; // 结束循环 } console.log(i,d[i]); } for (var i=0;i<d.length;i++){ console.log(i,d[i]); }; 循环自定义对象--python字典 for (var i in d){ console.log(i,d[i]); #不要用d.i来取值 }

（7）while循环

var a = 0; while(a<5){ a++; if (a===2){ continue; } console.log(a); }

js的基础数据类型都有布尔值属性, []–false 0,{},’’,undefined,null,NaN

字符串转数字: var a = '11'; parseInt(a); var a = '23abc'; parseInt(a); 23 var a = '11.11'; parseFloat(a) -- 转换为浮点型 var a = 'asdfabc'; parseInt(a); -- NaN -- not a number typeof NaN; -- "number" NaN === NaN; -- false NaN == NaN; -- false 数字转字符串 var b = 20; String(b);

（8）函数

普通函数 function f1(a,b){ return a+b; } 执行: f1(1,2) -- 3 function f1(a,b){ return a,b; }; f1(1,2); 不能返回多个值: 2 匿名函数 var a = function (a,b){ console.log('xxx'); } var d = {'xx':'oo','f':function (a,b){ console.log('xxx'); }}; 执行:d.f(1,2); 自执行函数 (function () { alert('自执行函数!') })();