JavaScript基础语法

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>

运算符

算数运算符

注意事项：

• 如果对字符串进行加法操作，会进行拼串
• 任何值和字符串做加法运算，都会转换成字符串进行拼接，利用这一特点可以将任意类型转换为字符串，只需要加上一个空串，这是一种隐式的类型转换，运算顺序从左到右 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=x+y，注意事项和算术运算符没有区别

比较运算符

逻辑运算符

注意事项：

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

三目运算符

var number=(1+1==2)?true:false;   //返回truevar 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));//objectconsole.log(typeof (b));//numberconsole.log(typeof (c));//stringconsole.log(typeof (d));//functionconsole.log(typeof (e));//booleanconsole.log(typeof (f));//objectconsole.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))				//objectalert(typeof(Date));            // function(Date使用前需要实例化的原因)alert(typeof(null));            // objectalert(typeof(undefined))        // undefinedalert(typeof(NaN))              // numberalert(typeof(NaN == undefined)) // booleanalert(typeof(NaN == NaN))       // booleanvar str = \'123abc\'alert(typeof(str++))            // numberalert(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(表达式)；

注意事项：

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

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、进出栈操作作用：提供快速操作数组头部或尾部的方法，改变原数组

var arrayName = [\"赵\", \"钱\"];console.log(arrayName.push(\"孙\"));      // 3console.log(arrayName);                 // [\"赵\", \"钱\", \"孙\"]console.log(arrayName.pop())            // 孙console.log(arrayName);                 // [\"赵\", \"钱\"];console.log(arrayName.unshift(\"孙\"));   // 3console.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