Javascript - 基础语法
javascript 是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言。有很广的应用范围。
pc 浏览器、pc 软件、手机浏览器、手机 app、微信小程序、微信公众号开发、硬件开发、服务器开发、ar、vr、深度学习、机器学习
1 在 html 中使用 javascript
在 html 中 script 标签内容的执行,是按顺序执行,但是加载是按照异步进行加载。script 标签里面如果有代码出错,仅仅只会影响到这个script标签代码的执行。
同步:一个事情完成之后,才能做下一件事情,有等待就是同步。
异步:一个事情发起之后,下一个事情也可以立即发起,不需要等待前面一个事情完成之后才发起。
script 标签
<script type="text/javascript"> console.log("未成年人禁止进入1") console.log(a) </script>
引用 javascript 文件
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
运行原理
浏览器首先会解析 html,解析到 script 标签时候,会调用 javascript 引擎执行 script 标签里的代码。执行前会对代码预编译(一些语法纠正和变量提升处理),然后解释执行。
javascript 是按照代码块来进行编译和执行的,代码块间相互独立,但变量和方法共享。例如:
<script type="text/javascript"> alert(str);//因为没有定义str,所以浏览器会出错,下面的不能运行 alert("我是代码块一");//没有运行到这里 var test = "我是代码块一变量"; </script> <script type="text/javascript"> alert("我是代码块二"); //这里有运行到 alert(test); //弹出"我是代码块一变量" </script>
但是这种共享只能发生在后面的 script 调用前面的 script 的成员,因为 script 是按 html 中的顺序预处理、执行的,所以下列代码会报 undefined 错误:
<script type="text/javascript"> fn(); //浏览器报错:"undefined" </script> <script type="text/javascript"> function fn(){ //函数1 alert("执行了函数1"); } </script>
执行顺序总结
- 读入第一个代码
- 做语法分析,有错则报语法错误(比如括号不匹配等),并跳转到step5。
- 对var变量和function定义做“预编译处理”(永远不会报错的,因为只解析正确的声明)。
- 执行代码段,有错则报错(比如变量未定义)。
- 如果还有下一个代码段,则读入下一个代码段,重复step2。
- 结束。
2 变量
javascript 是弱类型语言,所以声明变量的时候,统一用 var 进行声明变量。如果赋值前没有申明,就会自动声明一个全局变量。声明后未赋值的变量会被设置为 undefined。
注意:js 在预编译的时候,变量的声明会被提升到最上面。
- 全局变量:在最外层声明的变量,以及在函数内部未用 var 声明变量,是全局变量,所有的全局变量都可以在控制中调用 window 查看
- 局部变量:在函数内部声明的变量就是局部变量
javascript 变量类型:
- 数值类型:整数、浮点数、infinite、-infinite、nan
- 字符串类型:"abc" ,'123'
- 对象:{},new object()
- 布尔值:true和false
- undefined:有声明但是未赋值。
- null:这是赋值了就是空的内容。
3 运算
javascript 支持算术运算、逻辑运算、关系运算、条件运算(三目运算符),用法上和 java 类似,这里只提几个特殊的点。
3.1 除法
由于 javascript 是弱类型,并没有对变量类型有定义,所以在做除法()并不像 java 一样是求余,而是准确结果(可以为小数)。
3.2 浮点数的运算
和 java 类似,浮点数的运算有精度问题,例如 0.1 + 0.2 答案是不正确的。
3.3 === 及 !==
=== 和 !== 表示全等于和全不等于,它和 ==、!= 的区别在于:在 javascript 中,== 和 != 会对变量自动进行类型转换,产生一些奇怪的结果,而 === 和 !== 会对比较拥有更严格的限制,要求两边类型和值都相等在返回 true(不做类型转换)。
<script type="text/javascript"> var a = 3; var c = "3" console.log(a==c) var d = 0; var e = false; var f = null; var g = undefined; console.log(d==e) console.log(e==f) console.log(f==g) console.log(d==f) console.log(true==1) console.log(0=="") console.log(false=="") console.log(null=="") console.log(undefined=="") console.log(a!==c) </script>
输出结果:
易混淆的比较,以下结果为 true:
3 == "3"
0 == false; 1 == true
null == undefined
0 == ""; false == ""
4 流程控制
javascript 的流程控制和 java 类似,常用的有分支语句 if-else,switch-case,循环语句 while,for。
/*用 for 循环输出乘法口诀表*/ <script type="text/javascript"> for(let i = 1; i < 10; i++){ let str = "" for(let j = 1; j <= i; j++){ str += j + "*" + i + "=" + i*j + "\t"; } console.log(str); } </script>
5 函数
5.1 函数的定义
javascript 中定义一个函数有两种方式。
方法1:
function count(a){ return x }
方法2:
var count = function(a){ return x }
区别:
javascript 中函数同参数一样,会在预编译时被提到最前面,所以:
1.采用第一种方法定义的函数,不管定义的位置在哪里,script 里任何地方都可以调用这个方法,因为实际上在执行前就已经初始化好了;
2.采用第二种方法定义的函数,会被当作变量处理,所以预编译阶段只会声明这个变量,并没有将方法赋给它。
5.2 函数的参数
与 java 不同,javascript 对函数的参数没有严格的限制,在调用函数时,不对参数做任何的检测,不给、多给、少给都可以正常调用函数,在函数执行过程中没有值的参数的值为 undefined。
方法中传入的所有参数,会存放在关键字 arguments 中以类似数组的形式保存,但又不是数组,也可以对其进行遍历。
5.3 函数的返回值
如果没有写返回值,那么函数默认会返回 undefined。
6 数组
在 javascript 中,数组是可变长的,里面的内容也可以随意的替换且没有类型的限制。
6.1 创建数组
创建数组有两种方式
<script type="text/javascript"> //1、字面量的方式创建数组,用[]括起元素 var arr1 = ["apple","banana","cat"] //2、new array()创建数组,用()括起元素 var arr2 = new array("苹果",1,"香蕉",function(){console.log(123)}) console.log(arr1) console.log(arr2) </script>
6.2 数组的遍历
方法一:数组带有 length 属性,用 for 循环遍历数组。
for(var i=0;i<arr1.length;i++){ console.log(arr1[i]) }
方法二:用数组的 foreach 方法遍历数组,同 java 中的 foreach 方法需要传入一个函数式接口作为参数一样,这里的 foreach 也要提供一个函数作为参数,foreach 会按顺序将数组的元素赋给参数函数作为参数,实现遍历。
arr2.foreach(function(item){ console.log(item) })
6.3 数组实现队列和栈
当把数组当作队列(fifo)时,可以使用数组的 push(), shift() 方法操作数组。
- push():在数组最后添加元素
- shift():在数组的最前面取出元素
当把数组当作栈(filo)时,可以使用数组的 push(), pop() 方法操作数组。
- push():在数组最后添加元素
- pop():在数组的最后面取出元素
6.4数组的其他方法
- unshift():在数组的第一元素前插入数据
- slice(beginindex, endindex):返回数组从索引 beginindex 到 endindex 作为元素的子数组(原数组不被修改)
- splice(index, length, element...):可以增加或者删除指定元素,从 index 开始取出长度为 length 的元素以数组形式返回(原数组会被修改),并将 element(可以是多个参数)从 index 处插入
- concat(array):将此数组和参数数组合并,将参数加至末尾
上一篇: 原生js实现继承
下一篇: Struts 2三种方式实现Ajax