JavaScript基础语法

文章目录

JavaScript基础语法JavaScript的使用运算符算数运算符注意事项： 赋值运算符注意事项： 比较运算符逻辑运算符注意事项： 三目运算符typeof 和 instanceof运算符 分支语句if语句if-else语句if-else if-else语句switch分支语句 循环语句for循环while循环do-while循环增强for循环 数组1、创建数组2、数组的使用3、获取数组的长度4、关联数组数组的常用API JavaScript是弱类型脚本语言，声明变量时无需指定变量的数据类型。JavaScript变量的数据类型是解释时动态决定的。但是JavaScript的值保存在内存中，也是数据类型的。

JavaScript的使用

JavaScript代码可以直接写在HTML文件中，也可以单独的写在后缀名为js的文件中。

1内部JavaScript: 使⽤ <script> ... </script>标签

<script type="text/javascript"> ...js代码 </script>

** 2内联JavaScript处理器**

就是将js代码写⼊html代码中，如在html标签的事件中或超级链接⾥。 <button onclick="javaScript语⾔"></button> <a href="javascript:alert('aa');alert('bb')">点击</a>

3外部JavaScript

使⽤外部导⼊js会使代码更加有序，更易于复⽤，且没有了脚本的混合，HTML也会更加易 读。 <script type="text/javascript" src="my.js"></script>

运算符

算数运算符

运算符描述例子x 运算结果y 运算结果+加法x=y+275-减法x=y-235*乘法x=y*2105/除法x=y/22.55%取模（余数）x=y%215++自增x=++y66–自减x=–y44

注意事项：

如果对字符串进行加法操作，会进行拼串任何值和字符串做加法运算，都会转换成字符串进行拼接，利用这一特点可以将任意类型转换为字符串，只需要加上一个空串，这是一种隐式的类型转换，运算顺序从左到右 1+2+“3”; // “33” 1+“2”+3; // “123”var a=3/2; // 1.5任何值和NaN做运算，都得NaN

+作为符号

+正号，对非Number值，会先转换为Number，然后再运算，可以做隐式转换1++“2”+3; // 6-负号，对非Number值，会先转换为Number，然后再运算

赋值运算符

运算符例子等同于运算结果=x=y—x=5+=x+=yx=x+yx=15-=x-=yx=x-yx=5*=x*=yx=x*yx=50/=x/=yx=x/yx=2%=x%=yx=x%yx=0

注意事项：

将符号右侧的值赋值给左侧的变量x+=y等价于x=x+y，注意事项和算术运算符没有区别

比较运算符

运算符描述比较返回值==等于x==8falsex==5true===绝对等于（值和类型均相等）x===“5”falsex===5true!=不等于x!=8true!==不绝对等于（值和类型有一个不相等，或两个都不相等）x!==“5”truex!==5false>大于x>8false<小于x<8true>=大于或等于x>=8false<=小于或等于x<=8true

逻辑运算符

运算符描述例子&&and(x < 10 && y > 1) 为 true||or(x5 || y5) 为 false!not!(x==y) 为 true

注意事项：

!非，可以用来对一个值进行非运算，对一个布尔值进行取反操作；对一个值两次取反，则不会变化，可以用来进行隐式转换成布尔类型；对非布尔值取反，会将其转换为布尔值，再取反&&与，对符号两侧的值进行与运算并返回结果，一假即假；该运算属于短路运算，若第一个为false，则不会看第二个；若第一个为true则必然返回第二个值，若第一个值为false则必然返回第一个值||或，对符号两侧的值进行或运算并返回结果，一真即真该运算属于短路运算，若第一个为true，则不会看第二个；若第一个为true则必然返回第一个值，若第一个值为false则必然返回第二个值&& ||非布尔值的情况：先将其转换为布尔值再运算，并返回原值

三目运算符

var number=(1+1==2)?true:false; //返回true var result=(1+1!=2)?"yes":"no" //返回no

注意事项:

和Java的格式一样，其中A?B：C中的B和C可以是不同类型。

typeof 和 instanceof运算符

typeof

typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。它返回值是一个字符串，该字符串说明运算数的类型。typeof 可以用来检测给定变量的数据类型。

基本数据类型

var a = [34, 4, 3, 54], b = 34, c = 'adsfas', d = function () { console.log('我是函数') }, e = true, f = null, g; console.log(typeof (a));//object console.log(typeof (b));//number console.log(typeof (c));//string console.log(typeof (d));//function console.log(typeof (e));//boolean console.log(typeof (f));//object console.log(typeof (g));//undefined

对象，函数

1.对于对象、数组、null 返回的值是 object 。比如typeof(window)，typeof(document)，typeof(null)返回的值都是object。 2.对于函数类型，返回的值是 function。比如：typeof(eval)，typeof(Date)返回的值都是function。

var a = null; alert(typeof(a)) //object alert(typeof(Date)); // function(Date使用前需要实例化的原因) alert(typeof(null)); // object alert(typeof(undefined)) // undefined alert(typeof(NaN)) // number alert(typeof(NaN == undefined)) // boolean alert(typeof(NaN == NaN)) // boolean var str = '123abc' alert(typeof(str++)) // number alert(str) // NaN

instanceof

instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上。通常来讲，使用 instanceof 就是判断一个实例是否属于某种类型。

a instanceof b：判断a是否为b的实例，可以用于继承关系中

b是c的父对象，a是c的实例，a instanceof b 与 a instanceof c 结果均为true

简单案例

function Person(){}; var p =new Person(); console.log(p instanceof Person);//true

复杂案例

function Person(){}; function Student(){}; var p =new Person(); Student.prototype=p;//继承原型 var s=new Student(); console.log(s instanceof Student);//trueconsole.log(s instanceof Person);//true

---

分支语句

if语句

if-else语句

if-else if-else语句

switch分支语句

循环语句

for循环

最经典的循环之一，大部分编程语言都有for循环

格式

for (语句 1; 语句 2; 语句 3) { 被执行的代码块 }

语句 1 （代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

实例

盒子中有6个小球，将小球一一取出;

for(var i=1;i<7;i++){ console.log('第'+i+"个小球"); }

从上面的例子中，您可以看到：

Statement 1 在循环开始之前设置变量 (var i=1)。

Statement 2 定义循环运行的条件（i 必须小于 7)。

Statement 3 在每次代码块已被执行后增加一个值 (i++)。

while循环

最经典的循环之一，大部分编程语言都有while循环

语法如下所示：

while(condition){ // 要执行的代码块 }

condition 是循环的条件，只有当循环条件成立时，才会执行花括号 {} 中的代码，如果条件不成立则不会执行代码。

当我们使用 while 循环时，只要指定条件为 true，循环就可以一直执行。

并且只要条件一直满足，就可以实现一个无限循环，例如：

while(true){ console.log("1"); }

当我们不知道循环次数，但是知道结束条件时可以选择如下格式。

condition 是跳出循环的条件，如果不满足，执行代码块，代码块必须能不满足逐渐走向满足，不然就是死循环了！

while(true){ if(condition){ break; } else{ //执行的代码块 } }

do-while循环

格式

do{ 循环语句； }while(表达式)；

注意事项：

while后面的分号不能忘记写。循环条件中使用的变量需要经过初始化。循环体中，应有结束循环的条件，否则会造成死循环。

do-while和while的区别

do...while循环和while循环的区别： while循环是先判断表达式的真假，然后再执行循环语句，所有如果表达式为假的话，就不会执行循环语句。 do...while循环是先执行一次循环语句，然后再去判断一次表达式的真假。所以即使表达式为假，也会执行一次循环语句。 while循环用的情况多，如果while处理逻辑比较别扭时，就用do...while循环。

增强for循环

JavaScript为了方便我们遍历操作集合所新增的循环，有一下两种：

for..in循环

for (property in obj) { console.log(property, obj[property]); } 123

for..of循环

for (element of iterable) { console.log(element); } 123

区别

for..in循环属历史遗留，用于遍历对象的属性(数组的索引值也算属性)。 但有一个缺点：如果手动向数组添加成员属性，则： 虽然数组的length不变，但用for..in遍历数组会遍历到那些新定义的属性。

for..of循环修复了for..in存在的问题，他只遍历属于对象本身的属性值。 且这个对象必须是iterable可被迭代的。如Array, Map, Set。

数组

数组（Array）是一个用于保存多个数据的结构，按照线性结构来保存的。

1、创建数组

两种格式：

基本格式创建Array()对象创建 var arrayName = []; // 创建空数组 var arrayName = ['赵', '钱', '孙', '李']; var arrayName = new Array(); // 创建空数组 var arrayName = new Array('赵', '钱', '孙', '李');

2、数组的使用

获取 或 设置数组中的元素，一律使用下标（0—length-1） // 取值 var arrayName = ['赵', '钱', '孙', '李']; var zhao = arrayName[0] ; // '赵' var li = arrayName[3] ; // '李'; var kong = arrayName[4] ; // undefined; // 赋值 arrayName[0] = "周"; // ['周', '钱', '孙', '李'] arrayName[4] = "吴" // ['周', '钱', '孙', '李', '吴'] 添加元素 arrayName[6] = "郑" // ['周', '钱', '孙', '李', '吴', , '郑'] arrayName[5]自动为undefined

3、获取数组的长度

属性：length用法：array.length // 遍历数组 var arrayName = ['赵', '钱', '孙', '李']; for(var i = 0; i < arrayName.length; i++){ console.log(arrayName[i]) } // 找到插入最新元素时的位置 var arrayName = ['赵', '钱', '孙', '李']; arrayName[arrayName.length] = '周' // ['赵', '钱', '孙', '李', '周']

4、关联数组

索引数组：以数字为下标关联数组：以字符串为下标 var arrayName = []; arrayName["zhao"] = "赵"; arrayName["qian"] = "钱"; arrayName["sun"] = "孙"; arrayName["li"] = "李"; arrayName[0] = "周"; arrayName[1] = "吴"; arrayName[2] = "郑"; arrayName[3] = "王"; arrayName.length // 4 只能计算索引数组的长度 // 遍历关联数组或者索引数组的方式 for (var i in arrayName){ console.log(arrayName[i]) }

数组的常用API

1、toString() 作用：将数组转换为字符串，并返回，不改变原数组 var arrayName = ['赵', '钱', '孙', '李']; var str = arrayName.toString(); console.log(str); // 赵,钱,孙,李 console.log(arrayName) // ['赵', '钱', '孙', '李'] 1234 2、join(seperator) 作用：返回一个由指定连接符连接的字符串参数：seperator（连接符） var arrayName = ['赵', '钱', '孙', '李']; var str = arrayName.join("|"); console.log(str); // 赵|钱|孙|李 console.log(arrayName) // ['赵', '钱', '孙', '李'] 1234 3、concat(arr1，arr2…) 作用：拼接多个数组，并返回拼接后的数组，且不改变原数组 var arrayName1 = ['赵', '钱', '孙', '李']; var arrayName2 = ['周', '吴', '郑', '王']; var arrayName3 = []; console.log(arrayName3.concat(arrayName1,arrayName2)); // ['赵', '钱', '孙', '李', '周', '吴', '郑', '王'] console.log(arrayName3); // [],不会改变原数组 123456 4、reverse() 作用：数组反转，返回反转后的数组，会改变原数组 var arrayName1 = ['赵', '钱', '孙', '李']; var arrayName2 = arrayName1.reverse(); console.log(arrayName1); // ["李", "孙", "钱", "赵"] console.log(arrayName2); // ["李", "孙", "钱", "赵"] 1234 5、sort() 作用：对数组进行排序，默认情况下，按照元素的Unicode码进行排序，并会改变原数组注意：允许通过自定义的排序函数来指定数字的排序规则语法：arrayName.sort(排序函数) var arrayName1 = [103, 36, 57, 88, -1, -204, 93]; console.log(arrayName1.sort()) //[-1, -204, 103, 36, 57, 88, 93] console.log(arrayName1) //[-1, -204, 103, 36, 57, 88, 93] // 自定义排序函数 function sortAsc(a, b) { return a - b; // 升序排序,冒泡排序算法，a-b>0时，交互位置 } console.log(arrayName1.sort(sortAsc)) // [-204, -1, 36, 57, 88, 93, 103] arrayName1.sort(function (a, b) {return b - a}) // [103, 93, 88, 57, 36, -1, -204] 匿名函数，降序排列 console.log(arrayName1) 1234567891011 6、进出栈操作 作用：提供快速操作数组头部或尾部的方法，改变原数组 函数说明语法push()入栈，向数组的尾部添加新元素，并返回新数组的长度arrayName.push(“周”)，返回数字pop()出栈，删除并返回数组尾部的元素arrayName.pop()，返回尾部元素unshift()向数组头部添加新元素，并返回新数组长度arrayName.unshift(“周”)，返回数字shift()删除并返回数组头部的元素arrayName.shift()，返回头部元素 var arrayName = ["赵", "钱"]; console.log(arrayName.push("孙")); // 3 console.log(arrayName); // ["赵", "钱", "孙"] console.log(arrayName.pop()) // 孙 console.log(arrayName); // ["赵", "钱"]; console.log(arrayName.unshift("孙")); // 3 console.log(arrayName); // ["孙", "赵", "钱"] console.log(arrayName.shift()); // 孙 console.log(arrayName); //["赵", "钱"]; 123456789101112 7、二维数组 说明：数组中的数组 var arrayName = []; arrayName.push([1,2,3]); arrayName.push([4,5,6]); arrayName.push([7,8,9]); console.log(arrayName); console.log(arrayName[1][1]); // 5