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。

  • 区分大小写

  1. 规范 - 建议遵守的,不遵守不会报错
  • 变量名必须有意义
  • 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。例如: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;
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页