JS基本语法（一）

JavaScript介绍

JavaScript是什么

• JavaScript 运行在客户端(浏览器)的编程语言,一种运行在客户端 的脚本语言
• JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用 于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

JavaScript和HTML、CSS的区别

1. HTML：提供网页的结构，提供网页中的内容
2. CSS: 用来美化网页
3. JavaScript: 可以用来控制网页内容，给网页增加动态的效果

JavaScript的组成

• ECMAScript - JavaScript的核心
• BOM - 浏览器对象模型
• DOM - 文档对象模型

计算机组成

软件

• 应用软件：浏览器(Chrome/IE/Firefox)、QQ、Sublime、Word
• 系统软件：Windows、Linux、mac OSX

硬件

• 三大件：CPU、内存、硬盘 – 主板
• 输入设备：鼠标、键盘、手写板、摄像头等
• 输出设备：显示器、打印机、投影仪等

变量

使用变量

• var声明变量

var name;

• 变量的赋值

var name='dfjs';

• 同时声明多个变量

var name,age;

• 同时声明多个变量并赋值

var name='ndnsj',age=12;

变量在内存中的存储

变量的命名规则和规范

1. 规则 - 必须遵守的，不遵守会报错

• 由字母、数字、下划线、$符号组成，不能以数字开头

• 不能是关键字和保留字，例如：for、while。

• 区分大小写

2. 规范 - 建议遵守的，不遵守不会报错

• 变量名必须有意义
• 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword

数据类型

简单数据类型

Number类型

• 进制

十进制
	var num = 9;
	进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。
十六进制
	var num = 0xA;
	数字序列范围：0~9以及A~F
八进制
    var num1 = 07;   // 对应十进制的7
    var num2 = 019;  // 对应十进制的19
    var num3 = 08;   // 对应十进制的8
    数字序列范围：0~7
    如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析

• 浮点数

var n = 5e-324;   // 科学计数法  5乘以10的-324次方  
浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
   var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
   console.log(0.07 * 100);
   不要判断两个浮点数是否相等

• 数值范围

最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity

• 数值判断

1. 类型——NaN：not a number
   NaN 与任何值都不相等，包括他本身
2. 方法——isNaN: is not a number

String类型

• 转义符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pVdD1XWy-1596360058878)(media/1498289626813.png)]

• 字符串长度

  length属性用来获取字符串的长度

  var str = '黑马程序猿 Hello World';
  console.log(str.length);
  

• 字符串拼接

  字符串拼接使用 + 连接

  console.log(11 + 11);//22
  console.log('hello' + ' world');//helloword
  console.log('100' + '100');//100100
  console.log('11' + 11);//1111
  console.log('male:' + true);//male:true
  

1. 两边只要有一个是字符串，那么+就是字符串拼接功能
2. 两边如果都是数字，那么就是算术功能。

Boolean类型

• Boolean字面量： true和false，区分大小写
• 计算机内部存储：true为1，false为0

Undefined和Null

1. undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
2. null表示一个空，变量的值如果想为null，必须手动设置

复杂数据类型

Object

获取变量的类型

typeof
返回值是String类型

注释

单行注释

//单行

多行注释

/*duoha
fdsjd
*/

数据类型转化

转换成字符串类型

• toString()
• String()
  undefined和null要用这种方法进行转化
• 拼接
  num + “”，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

转换成数值类型

• Number()
  Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN，注意布尔值会返回数值（true——1，false——0）
• parseInt()

1. 如果第一个字符是数字会解析知道遇到非数字结束
2. 如果第一个字符不是数字或者符号就返回NaN
3. 无法把布尔类型转换成数值类型 返回的结果是NaN

• parseFloat()

1. 无法把布尔类型转换成数值类型 返回的结果是NaN
2. 会解析第一个.
3. 遇到第二个.或者非数字结束
4. 如果解析的内容里只有整数，解析成整数

• +，-0等运算

      var num = -5;
      console.log(num);//-5
     // 
      var str = '123';
     console.log(-str);//-123
     // 
      var str = '123abc';
      console.log(+str);//NAN
     // 
      var isOK = true;
      console.log(+isOK);//1
     
     var str = '123abc';
     // - 如果一边是数值类型 一边是字符串，会先把字符串转换成数值类型再进行数值的减法运算
     // 如果字符串转换成数值类型失败  此时返回NaN
      console.log(str - 0);//NAN
     // + 如果有一边是数值类型 一边是字符串，会先把数值类型转换成字符串 再进行字符串的拼接
     console.log(str + 0);//123abc0

转换成布尔类型

转换成false的情况：null undefined ''空字符串 0 NaN

操作符

算术运算符

+ - * / % 

一元运算符

• 前置++
• 后置++

逻辑运算符(布尔运算符)

&& 与 两个操作数同时为true，结果为true，否则都是false
|| 或 两个操作数有一个为true，结果为true，否则为false
!  非  取反

关系运算符(比较运算符)

<  >  >=  <=  == != === !==
==与===的区别：==只进行值得比较，===类型和值同时相等，则相等

赋值运算符

=   +=   -=   *=   /=   %=

运算符的优先级

优先级从高到底
	1. ()  优先级最高
	2. 一元运算符  ++   --   !
	3. 算数运算符  先*  /  %   后 +   -
	4. 关系运算符  >   >=   <   <=
	5. 相等运算符   ==   !=    ===    !==
	6. 逻辑运算符 先&&   后||
	7. 赋值运算符

表达式和语句

分支结构

if语句

三元运算符

表达式1 ? 表达式2 : 表达式3

switch语句

break可以省略，如果省略，代码会继续执行下一个case
switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换
（例如，字符串'10' 不等于数值 10）

布尔类型的隐式转换

转换为true   非空字符串  非0数字  true 任何对象
转换成false  空字符串  0  false  null  undefined

循环结构

while语句

// 当循环条件为true时，执行循环体，
// 当循环条件为false时，结束循环。
while (循环条件) {
  //循环体
}

do…while语句

do…while循环和while循环非常像，二者经常可以相互替代，但是do…while的特点是不管条件成不成立，都会执行一次。

do {
  // 循环体;
} while (循环条件);

for语句

// for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
  // 循环体4
}

continue和break

• break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）
• continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）

数组

数组的定义

 // 创建一个空数组
var arr1 = []; 
// 创建一个包含3个数值的数组，多个数组项以逗号隔开
var arr2 = [1, 3, 4]; 
// 创建一个包含2个字符串的数组
var arr3 = ['a', 'c']; 

// 可以通过数组的length属性获取数组的长度
console.log(arr3.length);
// 可以设置length属性改变数组中元素的个数
arr3.length = 0;

获取数组

• 格式：数组名[下标] 下标又称索引
• 功能：获取数组对应下标的那个值，如果下标不存在，则返回undefined。

遍历数组

 for(var i = 0; i < arr.length; i++) {
	// 数组遍历的固定结构
}

数组中新增元素

• 格式：数组名[下标/索引] = 值;
• 如果下标有对应的值，会把原来的值覆盖，如果下标不存在，会给数组新增一个元素。

案例

将字符串数组用|或其他符号分割
方法：往第二个元素之前加分隔符

	var names = ['郭德纲', '郭麒麟', '于谦', '岳云鹏', '烧饼'];
    // 让我们把数组中的每一项 用|或其他符号分割
    //形成一个字符串  '郭德纲|郭麒麟|于谦|岳云鹏|烧饼'
    	var seperator = '|';
     	var str = names[0];
    	for (var i = 1; i < names.length; i++) {
        str += seperator + names[i];
   }
     console.log(str);
    

要求将数组中的0项去掉，将不为0的值存入一个新的数组，生成新的数组
方法：把找到的非0元素存储到一个新的数组中，索引是数组的长度

		var numbers = [5, 6, 89, 0, 11, 0, 12, 3, 0];
	 	var newArray = []; // 空数组
  		for (var i = 0; i < numbers.length; i++) {
    	  if (numbers[i] !== 0) {
   				numbers[i];
    		//找到的非0元素，存储到新的数组中
       		 newArray[newArray.length] = numbers[i];
       }
     }
     console.log(newArray);

翻转数组
方法：将旧数组从length-1开始放入新数组中，并以数组的长度作为索引

	var numbers = [4, 5, 7, 9];   // 生成一个新的数组  数组中存储 9 7 5 4
    var newArray = [];
    for (var i = numbers.length - 1; i >= 0; i--) {
      newArray[newArray.length] = numbers[i];
    }
    console.log(newArray);
    

冒泡排序，从小到大
方法：优化根据判断最后一次数据是否发生变化判断是否需要再次排序

  	var numbers = [1, 2, 3, 4, 5];
    var count = 0; // 记录循环的次数
    // 外层循环：控制趟数，每一趟找到一个最大值
    for (var i = 0; i < **numbers.length - 1**; i++) {
      // 假设数据排好顺序了
      	var isSort = true;
      	count++;
      // 内层循环：控制比较的次数，并且判断两个数的大小，把大的数往后移动，小的数往前移动
     	for (var j = 0; j < **numbers.length - 1 - i**; j++) {
        			count++;
        // 两两比较     从小到大排序 
       				if (numbers[j] > numbers[j + 1]) {
          // 没有排好 
         			isSort = false;
          // 交换位置
				    var tmp = numbers[j];
				    numbers[j] = numbers[j + 1];
				    numbers[j + 1] = tmp;
        			}
      }
      // 某一趟结束，判断一下排序是否结束
      // 如何判断排序是否排好，根据是否发生了数据交换，如果发生了数据交换说明没有排好
	     if (isSort) {
				 // 如果排好顺序
	          break;
		 }
	   }
		    console.log(numbers);
		    console.log(count);

函数

函数的定义

• 函数声明

function 函数名() {
  // 函数体
}

• 函数表达式

var fn = function () {
  // 函数体
}

函数的调用

函数名();

函数的参数

1. 形式参数：在声明一个函数的时候，为了函数的功能更加灵活，有些值是固定不了的，对于这些固定不了的值。我们可以给函数设置参数。这个参数没有具体的值，仅仅起到一个占位置的作用，我们通常称之为形式参数，也叫形参。
2. 实际参数：如果函数在声明时，设置了形参，那么在函数调用的时候就需要传入对应的参数，我们把传入的参数叫做实际参数，也叫实参。

函数的返回值

//声明一个带返回值的函数
function 函数名(形参1, 形参2, 形参3...) {
  //函数体
  return 返回值;
}

//可以通过变量来接收这个返回值
var 变量 = 函数名(实参1, 实参2, 实参3...);

arguments的使用

JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。arguments是一个伪数组，因此及可以进行遍历

• 求任意个数的最大值

 function test(a, b, c) {
        //我们可以通过arguments 获取函数调用的时候的实参
        //arguments非常想数组，但不是数组
        console.log(arguments);
        console.log(1);
    }

     test(4, 5, 6);

• 求任意个数的和

 
     function getMax() {
        var max = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            if (max < arguments[i]) {
                 max = arguments[i];
            }
        }
        return max;
     }

     var max = getMax(5, 10, 1, 5, 100);
     console.log(max);

函数其他

匿名函数

		var fn = function () {
    			 }

自调函数

(function () {
       console.log('我是自调用函数');
    		 })()

函数是一种数据类型

(function () {
 				 alert(123);
			})();

作用域

全局变量和局部变量

不使用var声明的变量是全局变量，不推荐使用。
变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁

• 全局变量
  在任何地方都可以访问到的变量就是全局变量，对应全局作用域
• 局部变量
  只在固定的代码片段内可访问到的变量，最常见的例如函数内部。对应局部作用域(函数作用域)

块级作用域

作用域链

• 任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代 码块外都是不可见的，我们称之为块级作用域。

• 在es5之前没有块级作用域的的概念,只有函数作用域，现阶段可以认为 JavaScript没有块级作用域

• 只有函数可以制造作用域结构， 那么只要是代码，就至少有一个作用域, 即全局作用域。凡是代码中有函数，那么这个函数就构成另一个作用域。如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。

将这样的所有的作用域列出来，可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。

		function f1() {
			    var num = 123;
			    function f2() {
			        console.log(num); 
			    }
    			f2();
		}
			var num = 456;
			f1();

预解析

   JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。
   JavaScript解析器执行JavaScript代码的时候，
   分为两个过程：预解析过程和代码执行过程

预解析过程：

1. 把变量的声明提升到当前作用域的最前面，**只会提升声明，**不会提升赋值。
2. 把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
3. 先提升var，在提升function。

变量提升

• 变量提升

  定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升。

• 函数提升

  JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

案例

f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
  var a = b = c = 9;
  console.log(a);
  console.log(b);
  console.log(c);
}

注意a前面有var声明所以是布局变量，bc是全局变量

//预解析
 function f1() {
      var a;
      a = b = c = 9;
      console.log(a);
      console.log(b);
      console.log(c);
    }
    f1();
    console.log(c);
    console.log(b);
    console.log(a);
    

     var a = b = c = 9;
     var a = 9;
    //全局变量
     b = 9
     c = 9;