拉勾技术人年薪【50W+】成长计划!

JavaScript Base

一 概述

1 什么是JavaScript

简称JS,是一种运行于JS解释器或执行引擎中的脚本代码,是一种浏览器解释型的语言,主要用来实现页面的交互与动态效果。

2 JS的组成

  • 核心语法 -ECMAScript 规范了JS的基本语法

  • 浏览器对象模型 -BOM
    Browser Object Model,提供了一系列操作浏览器的方法

  • 文档对象模型 -DOM
    Document Object Model ,提供了一系列操作的文档的方法

二 JS使用方式

1 绑定在元素标签中,主要指JS事件

事件 :用户在元素上所激发的行为操作(单击)
语法 :

<div onclick="alter('hello javascript!')">click me</div>

​ JS 操作如果涉及代码非常多,一般会抽离出来单独写在JS文件中,如果是简单的代码,可以以属性值字符串的形式书写

2 文档中,使用标签

语法 :

<script>
		JS代码
</script>

注意 :标签可以书写在文档的任意位置,书写多次,但是不同的位置会影响代码最终的执行效果。

3 外部链接

语法 :

<script src="'https://cdn.bootcss.com/jquery/3.2.1/core.js'"></script>

src 引入的外部资源是网页加载所必须的一部分,网页在加载src文件时,会等待文件加载完毕再执行后面的代码
href 网页在加载href文件时,不会等待加载完毕,边加载边向后执行
常用操作 :

三 基础语法

1 JS 是由语句组成的

  • JS语句可以由运算符,关键字,表达式组成

  • JS语句必须以英文分号结束;

  • JS中严格区分大小写
    console.log(); 正确写法
    Console.log(); 错误写法

  • 所有涉及的标点符号,必须使用英文的

2 JS中的注释

  • 单行注释 //

  • 多行注释 /* 注释文本 */

四 JS的变量与常量

1 变量

  1. 创建变量

    1. 先声明,后赋值,使用关键字 var 进行声明
      声明 :var 变量名;
      赋值 :变量名 = 值;

    2. 声明的同时赋值
      var 变量名 = 值;

      var name = "monkey";
      console.log(name);
      document.write(name);
      alter(name);
      
  2. 使用注意

    1. 声明变量时,关键字var可以省略,不建议省略,容易出问题
    2. 变量如果只声明,未赋值,var a; 变量默认值为 undefined
  3. 变量名的命名规范

    1. 不能与JS中的关键字和保留字冲突(var default break class function for while do...name)

    2. 自定义的变量名可以由数字,字母,下划线,$组成,不能使用数字开头

      var $ = 20;
      
    3. 变量名称严格区分大小写

      var name = 'monkey';
      var Name = 'Monkey';
      
    4. 命名尽量有意义一些,做到见名知意

    5. 多个单词组成变量名,采用小驼峰标识

      var userName = 'monkey';
      
  4. 变量的使用方式

    1. 赋值
      赋值符号 =
      作用 :将赋值符号右边的值赋给左边的变量

      var name = 'monkey'
      
    2. 访问

      1. 直接输出

        console.log(name);
        
      2. 变量出现在赋值符号右边,表示访问变量的值

        var name = 'monkey';
        var myStr = 'My name is '+name;   //myStr: My name is monkey
        

2 常量

  1. 一经声明就不允许再被修改的数据就是常量

  2. 语法 :

    const 常量名 = 值;
    

    注意 :

    1. 常量在声明的同时必须赋值

    2. 为了与变量名区分,常量名一般采用全大写的方式

      const PI = 3.14159;
      
  3. 操作小数位
    保留小数点后 n 位

    toFixed(n);
    var num = 3.1415926;
    var res = num.toFixed(2);    // 3.14
    

五 数据类型

1 基本数据类型(简单数据类型)

(1) number 类型

数字类型,表示32位的整数或者是64位的浮点数
1 字节 = 8 位
整数占4字节 浮点数占8字节

  1. 整数
    常用的:十进制表示方法
    八进制:以数字0开头
    以8为基数,采用0-7八个数字来表示,逢8进1

    //0*8(0) + 1*8(1)
    var num = 010;
    var num2 = 011;
    
  2. 十进制转八进制,需要先将十进制转换为二进制,再将二进制转换为八进制
    十六进制:以 0x 为前缀

var num3 = 0x35;

注意 :
使用console.log()输出整数时,不管用哪一种进制表示,都会转成十进制输出

  1. 小数

  2. 小数点计数法 3.14

  3. 指数计数法 1.5e3

    e表示以10为底
    e后面的数字表示10的次方数
    1.5e3 = 1.5 * 10(3)

(2) string 类型

可以由 Unicode 的字符,数字或标点来组成

注意 :字符串在使用时必须使用''或""引起来

  1. 每个字符都有对应的Unicode码

  2. 查看字符的Unicode码
    var s1 = '张';
    方法 :charCodeAt(index)
    作用 : 用来查看指定位置的字符对应的Unicode编码
    注意 :

  3. 字符串中的字符都对应有一个下标,参考数组的存储方式,下标从0开始

    var s = "hello";
    s.charCodeAt(2);
    
  4. Unicode 编码中前128位与ASCII码值一致

  5. 可以查看中文字符对应的Unicode码,如果想把中文的Unicode码值转换成字符,需要先将码值转换为16进制,再进行汉字字符的转换
    转换16进制:
    toString(16);

    var s = "张";
    var r = s.charCodeAt(0);
    r = r.toString(16);
    

    16进制字符串转换汉字字符

    "5f20"
    添加u转义
    var s = "u5f20";
    注意 :
    不能写 var s = "u"+"5f20";
    语法错误
    
    1. 中文范围
      "u4e00" ~ "u9fa5"
    2. 转义字符
      n :换行
      t : 制表符
      " : "
      ' : '
      :

(3) boolean 布尔类型

用来表示真或假
注意 :
布尔类型表示真或假,是可以参与数学运算的,true = 1 / false = 0

(4) undefined 类型

  1. 变量声明未赋值时,为undefined
  2. 如果访问对象不存在的属性时,也为undefined

(5) null 类型

空类型

2 判断数据类型

typeof
使用 :

var n = "asda";
console.log(typeof n);
console.log(typeof(n));

3 引用数据类型(复杂数据类型)

数组 函数 对象

六 数据类型转换

相同数据类型的变量进行运算时,保持数据类型一致

1 隐式类型转换(自动转换)

  1. number + string
    当字符串与其他数据类型相加时, + 表示字符串的拼接,不再是数学运算
    转换规则 :将非字符串类型的数据转换成字符串之后进行拼接,最终结果为字符串

    var num = 15;
    var str = "18";
    var r1 = num + str; // "1518"
    var r2 = 15 + 18 + "18"; // "3318"
    var r3 = "18" + 15 + 18; //"181518"
    var r4 = 15 + "18" + 15; //"151815"
    
  2. boolean + string
    将布尔类型转换为字符串进行拼接

    var n = true;
    var r = n + "你好"; // "true你好"
    
  3. number + Boolean
    将布尔类型转换为数字进行数学运算
    true = 1;
    false = 0;

    	var n = true + 15; // 16
    	var n1 = false + 20; //20
    

2 强制类型转换

  1. toString()
    将任意非字符串类型的数据转换为字符串类型,并返回转换后的结果

    var n = 100;
    var r = n.toString();
    console.log(typeof n,typeof r);
    
  2. Number()
    将数字字符串或者是布尔值转换成number类型,如果字符串中包含非数字字符,转换失败,会返回NaN (Not a Number)

    var r = Number("35.5"); //35.5
    var r2 = Number(true); // 1
    var r3 = Number("18a"); //NaN
    
  3. parseInt()
    解析字符串中的数字,只解析字符串开头中的数字,如果字符串不是以数字开头的,都返回NaN,并且只解析整数

var r = parseInt("18.2a"); //18
var r2 = parseInt("a18");  //NaN
var r3 = parseInt(35.5);   //35

​ 如果parseInt方法的参数不是字符串,会自动先使用toString()转换成字符串,之后再进行解析

  1. parseFloat()
    作用等同于parseInt(),解析结果包含小数部分
var r = parseFloat("35.5"); //35.5

注意 :如果字符串中出现指数计数法表示的小数
"1.5e3",都视为是小数

七运算符

1 赋值运算符

​ =
​ 将右边的值赋给左边变量

2 算数运算符

  1. 
    
      • / % //加 减 乘 除 取余
2. ++ --  自增或自减运算符
变量的自增和自减指的是在自身基础上进行 +1或-1 的操作

```js
var n = 5;
n ++; // n = n + 1;
console.log(n); // 6
++ n;
console.log(n); // 7

注意:

1. 自增或自减运算符在单独与变量结合时,放前和放后没有区别

2. 如果自增或自减运算符与其他运算符结合使用,要区分前缀和后缀,做前缀,那就先++/--,再进行赋值或其他运算,如果做后缀,就先结合其他运算符,再进行++ / --

```js
var num = 5;
var res = num ++;
console.log(num,res); // 6 5
```

​	如果是 var res = num ++;

```js
var num = 5;
var res = ++ num;
console.log(num,res); // 6 
```

*先找变量 ,从变量位置从右向左结合运算符*

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

		>    大于
		>=	 大于等于
		<	 小于
		<=	 小于等于
		==	 相等
		!=	 不等
		===	 恒等
		!==  不恒等
		注意 :关系运算的结果为布尔类型
  1. 数字与字符串进行比较

    首先会自动将字符串转换为数字再进行比较,如果转换成功,按照数字之间的比较进行运算;如果转换失败,会变成数字与 NaN之间的比较,结果永远都为False

    "10" > 5; // true
    "10a" > 5; //false
    "你好" > 5; //fasle
    
  2. 字符串之间的比较,进行每位字符Unicode码的比较,
    当前位如果相同,就后移至下一位再次进行比较,
    当前位如果不同,直接出结果

    "10" > "5"; // false
    "ab" > "ac"; //false
    "张三丰" > "张无忌"; //false
    
  3. == === / != !==

  4. 相等 :== 用于判断两个值是否相等,在比较时,会自动转换数据类型,只要值相等,结果就为True

    1. 恒等 :=== 用于判断两个变量的数据类型和值是否完全相等,不会进行数据类型转换,只有当操作数的数据类型保持一致,值相等,才为True

      "10" == 10; //true
      "10" === 10; // false
      
    2. 不等 :!= 在两端值不相等的情况下,返回True
      不恒等 :!== 两个操作数中,数据类型与值只要有一个不相等,就返回True,否则是False

    "10" != 10; //false
    "10" != "10"; //false
    "10" !== 10; //true
    "10" !== "10"; //false
    

4 逻辑运算符

进行多项比较,并将结果组合为单一的布尔值
&& :逻辑与 等同于 python and,左右为表达式,只有两个表达式的结果都为真,逻辑与的结果才为真
|| :逻辑或 等同于 python or ,只要有一个条件为真,结果就为真
! :逻辑非 等同于 python not ,对现有条件的结果进行取反操作

  1. 条件1 && 条件2
    条件1 条件2 结果

取值 true true true

​ true false false

​ false true false

结果 false false false

  1. 条件1 || 条件2

    条件1 条件2 结果


取值 true true true

​ true false true

​ false true true

结果 false false false

  1. !条件
    直接取反
    非真即假,非假即真

5 位运算符

程序中所有的数据在计算机中都是以二进制存储的,位运算,就是对二进制位进行操作

  1. 按位与 :&
    将整数转换为二进制形式,每一位都进行与操作

     	011 &  101
     		et :
     			0 1 1
     		& 1 0 1
     		-------------
     			0 0 1
    
  2. 注意 : 任何数字与 1 进行位与操作,结果为1时,表明操作数为奇数,结果为0,操作数为偶数,所以可以用来判断数字奇偶

3 & 1 -> 011 & 001 -> 001
2 & 1 -> 010 & 001 -> 000
  1. 按位或 :|

     	3 | 5
     		011
    
     	|	101
    

			111
  1. 按位异或 :^
    两个数字的二进制位进行比较,相同则为0,不同则为1

     	3 | 5
     		011
    
     	|	101
    

			111

注意 :^ 操作可以在不借助第三方变量的情况下,交换两个变量的值

var a = 3,b = 5;				

				1. 普通做法
					var c = a;
					a = b;
					b = c;
				2. ^
					a = a ^ b; -> a = 6;
					b = a ^ b; -> 6 ^ 5 ->110 ^ 101 ->011
					a = a ^ b; -> 6 ^ 3 ->110 ^ 011 ->101

6 三目运算符

三目运算符,有三个操作数
类似:
单目运算符(一元运算符)++ -- !typeof,只有一个操作数的运算符;
双目运算符(二元运算符)+ - * / % && || >...有两个操作数的运算符
语法 :
条件表达式 ?表达式1 :表达式2;
先判断条件表达式的结果,为真,执行表达式1;为假,执行表达式2

	var a = 150;
	var res = a > 120? "偏胖,该减肥了" :"正好,不胖不瘦";
	consoole.log(res);

八 流程控制语句

​ 控制当前代码的执行顺序
​ 流程语句结构 :

1 顺序结构

​ 按照代码书写顺序,从上到下执行

2 分支(选择)结构

​ 根据条件选择某一段代码执行

(1)if 结构

语法 :

	if (条件){
		//待执行的语句
		//只有条件为真,才执行{}里的语句
	}
  • if()后面的{}可以省略,省略之后,只控制该结构下的第一条语句

  • 条件尽可能是布尔类型的

  • 任何非0值都为真,0为假,以下情况,条件的结果都为假
    if(0) {}
    if(0.0) {}
    if("") {}
    if(NaN) {}
    if(undefined) {}
    if(null) {}

(2)多重分支结构

if(条件1){
    //条件为真时执行
    	} else if(条件2){
    		//条件1为假,并且条件2为真时执行
    	} else if(条件3){
    		//条件2为假,条件3为真时执行
    	}
    	...
else{}

(3)switch 语句

switch (变量) {
			case 值1 :
				//如果变量的值与case给出的值相等,就会执行 :后面的代码段
				代码块;
				break; //跳出switch语句,不再向后进行匹配,可以省略
			case 值2 :
				代码块;
				break;
			case 值3 :
				代码块;
				break;
			...
			default :
				代码块; // 所有case都匹配失败之后执行的默认语句
}
  • 变量与case 值的匹配,是用===恒等判断的,只有数据类型与值都相等才能匹配成功

    var a = 10;
    		switch (a) {
    			case '10':
    				代码块
    		}
    
  • break 表示跳出switch判断,后面的判断语句不执行

  • default关键字用于在表达式不匹配前面给出的任何一种情形时,最终执行的操作

3 循环结构

  • 作用
    重复执行某段代码

  • 循环三要素
    循环变量
    循环条件
    循环体

(1)while 循环

  1. 语法:

    while (循环条件){
    	循环体
    }
    
  2. 执行流程

    1. 定义循环变量
    2. 执行循环体
    3. 更新循环变量
    4. 判断循环条件,条件成立,重复2-3-4,条件不成立,结束循环

(2)do-while循环

  1. 语法

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

(3)while 与 do-while区别:

​ while循环先判断循环条件,为真才执行循环体;
do-while循环不管条件是否成立,先执行循环体,后判断循环条件。即使循环条件不成立,也会执行一遍循环体

(4)for循环

  1. 语法
	for(1.定义循环变量; 2.判断循环条件; 3.更新循环变量)
	{
	  循环体
	}
  1. 循环流程

    1. 定义循环变量
    2. 判断循环条件
    3. 条件成立,执行循环体
    4. 更新循环变量
  2. for 循环与 while循环的区别

    1. 相同点 :执行流程相同
    2. 不同点 :
      while 循环常用于不确定循环次数的场合
      for 循环常用于确定循环次数的场合
  3. 循环控制

    1. break
      break用在循环体中,表示跳出循环,结束整个循环,并且循环体中break后面的代码都不执行
    2. continue
      continue用在循环体中,表示跳出本次循环,开始下一次循环
  4. 循环的嵌套
    允许在一个循环中嵌套另一个循环
    语法 :
    for(var i = 1; i <= 9; i ++){ //行

     for(var j = 1; j <= 9; j ++){ //列
    
     }
    

九 函数和作用域

函数定义

​ 就是一段待执行的代码块

函数作用

​ 实现多条语句的封装
​ 实现代码复用

函数使用

  1. 函数的声明
  2. 函数的调用
    注意 :函数先声明后调用(JS中非强制)

函数语法

(1) 函数声明

  1. 语法
function 函数名 (参数列表) {
	函数体;
	返回值
}
  1. JS中函数声明使用function关键字

  2. 函数名自定义,遵照变量命名规范,见名知意

  3. 参数列表,参数表示函数体执行所需要的数据,可以为空,为空时()不能省略;多个参数之间使用,隔开

	function sum (a,b){
		return a + b;
	}
  1. 返回值 使用return关键字,将函数体内部执行的结果传递给外界使用,只能返回一个值,返回值不需要的话,可以省略return
function showFn(){
		console.log("hello");
	}

注意 :return一定要写在函数体的末尾,return关键字后面的代码都不执行

  1. 匿名函数
var fn = function (){
	函数体
};

(2) 函数调用

  1. 语法

    函数名(10,20);
    var res = 函数名(10,20);
    
  2. 函数参数分为形参和实参,函数声明时,使用形参,函数调用时,传递实参
    形参 :代号
    实参 :具体的数据
    传参的过程,就是给函数中形参变量赋值的过程

  3. 函数如果有返回值,在调用时,需要定义变量接收返回值

变量的作用域

(1)含义

变量的作用域指的是变量起作用的范围

(2)分类 :

  1. 全局作用域
    处在全局作用域中的变量就是全局变量
    2. 在function之外通过var声明的变量都是全局变量,在任何地方都可以访问
    3. 声明变量时,省略var关键字,一律是全局变量,推荐使用var关键字,不要省略

  2. 局部作用域 (JS中局部作用域指的是函数作用域)
    局部作用域中的变量就叫局部变量
    5. 在函数内部使用var关键字声明的变量都是局部变量,只在当前函数作用域中可以访问,外界无法访问
    6. 局部变量出了函数就不能访问了

    注意 :
    在函数中访问变量,

     1. 如果当前函数中没有该变量,就访问全局作用域中的变量
     2. 如果当前函数中定义了该变量,全局中也有相同的变量名,函数就近访问变量
    

十 数组及API

定义

​ Array 数组是一个有序的元素序列,数组中的元素会自动分配下标,从0开始,方便读写

数组创建

  1. 创建空数组

    var arry_name = [];  // 
    var 数组名 = new Array();  //
    
  2. 创建数组的同时初始化元素

    var arry_name = [elem1,elem2,...];
    var arry_name = new Array(elem1,elem2,...);   // 只包含一个参数时表述创建的数组长度
    
    var arr = new Array(5);   // 创建长度为 5 的数组
    

数组使用

  1. 获取数组的长度
    属性 : length
    使用 :数组名.length; //获取数组长度

  2. 访问数组元素
    数组中每一个元素都有对应的下标
    元素的下标范围 0 -> length-1
    语法 :数组名[下标];

  3. 设置数组元素
    语法 :数组名[下标] = value;

  4. 清空数组中元素
    arr.length = 0;

  5. 循环遍历数组

    for(var i = 0; i < arr.length; i ++){
    	arr[i];
    }
    

数组的API

  1. toString()
    作用 :将数组中的元素转换为字符串返回
    返回值 :字符串

    	var arr = [1,2,3];
    	var s = arr.toString();
    	console.log(s); //"1,2,3"
    
  2. join()
    作用 :将数组中的元素连接成一个字符串并返回
    返回值 :字符串
    参数 :可选,如果省略参数,默认元素之间使用,连接。
    可以给参数,指定元素之间的连接符

  3. reverse()
    作用 :反转数组元素
    返回值 :数组,会改变数组的原有结构

    var arr = [10,20,30];  //[30,20,10]
    console.log(arr.reverse());
    
  4. sort()
    作用 :对数组中元素进行排序
    返回值 :数组,会改变数组原有结构
    参数 :可选,自定义排序函数,
    默认按照元素的Unicode码升序排列

    1. 升序的排序函数

      function sortAsc(a,b){
      	return a-b;
      }
      arr.sort(sortAsc);
      

      解释 :

      1. sortAsc函数接收两个参数,
        会自动将数组中相邻的两个元素传递给参数
      2. 如果返回值>0,交换两个元素的位置,否则不变
    2. 匿名函数作为排序函数,直接写在()中

      	arr.sort(function (a,b){ return b-a;});
      

数组的进出栈操作

栈结构 :遵循先进后出原则
栈操作可以快速操作数组中的头尾元素

1. push(data)
		入栈操作,向数组的尾部添加元素,可以是一个或多个
		返回值 :返回新数组的长度

```js
arr[arr.length] = 'hello';
arr.push("Hi");
arr.push(10,20); //多个数据之间只用,隔开
```
  1. pop()
    出栈操作,删除数组尾部元素
    返回值 :返回被删除的元素
  2. unshift()
    向数组头部添加一个或多个元素
    返回最终数组的长度
  3. shift()
    删除数组中头部元素
    返回被删除的元素

二维数组

数组中每个元素又是一个数组

var arr = [[10,9,8],[2,3,4],[3,0,3]];
console.log(arr.length); //3
		//向二维数组中添加元素
arr[1][2] = 50;
		//访问二维数组中元素
console.log(arr[2][0]); //30
内容来源于网络如有侵权请私信删除