JavaScript基础

797 0 0

作者:BlackMonkey

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. 先声明，后赋值，使用关键字 var 进行声明
  声明：var 变量名;
  赋值：变量名 = 值;
2. 声明的同时赋值
  var 变量名 = 值;
```
var name = "monkey";
console.log(name);
document.write(name);
alter(name);
```
使用注意
1. 声明变量时，关键字var可以省略，不建议省略，容易出问题
2. 变量如果只声明，未赋值，var a; 变量默认值为 undefined
变量名的命名规范
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';
```
变量的使用方式
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 常量

一经声明就不允许再被修改的数据就是常量
语法：
```
const 常量名 = 值;
```
注意：
1. 常量在声明的同时必须赋值
2. 为了与变量名区分，常量名一般采用全大写的方式
```
const PI = 3.14159;
```

操作小数位
保留小数点后 n 位

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

五数据类型

1 基本数据类型（简单数据类型）

(1) number 类型

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

整数
常用的：十进制表示方法
八进制：以数字0开头
以8为基数，采用0-7八个数字来表示，逢8进1
```
//0*8(0) + 1*8(1)
var num = 010;
var num2 = 011;
```
十进制转八进制，需要先将十进制转换为二进制，再将二进制转换为八进制
十六进制：以 0x 为前缀

var num3 = 0x35;

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

小数
小数点计数法 3.14
指数计数法 1.5e3

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

(2) string 类型

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

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

每个字符都有对应的Unicode码
查看字符的Unicode码
var s1 = '张';
方法：charCodeAt(index)
作用：用来查看指定位置的字符对应的Unicode编码
注意：
字符串中的字符都对应有一个下标，参考数组的存储方式,下标从0开始
```
var s = "hello";
s.charCodeAt(2);
```
Unicode 编码中前128位与ASCII码值一致
可以查看中文字符对应的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 类型

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

(5) null 类型

空类型

2 判断数据类型

typeof
使用：

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

3 引用数据类型（复杂数据类型）

数组函数对象

六数据类型转换

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

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"
```
boolean + string
将布尔类型转换为字符串进行拼接
```
var n = true;
var r = n + "你好"; // "true你好"
```
number + Boolean
将布尔类型转换为数字进行数学运算
true = 1;
false = 0;
```
	var n = true + 15; // 16
	var n1 = false + 20; //20
```

2 强制类型转换

toString()
将任意非字符串类型的数据转换为字符串类型，并返回转换后的结果
```
var n = 100；
var r = n.toString();
console.log(typeof n,typeof r);
```
Number()
将数字字符串或者是布尔值转换成number类型，如果字符串中包含非数字字符，转换失败，会返回NaN （Not a Number）
```
var r = Number("35.5"); //35.5
var r2 = Number(true); // 1
var r3 = Number("18a"); //NaN
```
parseInt()
解析字符串中的数字，只解析字符串开头中的数字，如果字符串不是以数字开头的，都返回NaN，并且只解析整数

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

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

parseFloat()
作用等同于parseInt()，解析结果包含小数部分

var r = parseFloat("35.5"); //35.5

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

七运算符

1 赋值运算符

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

2 算数运算符

- - / % //加减乘除取余

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 关系运算符（比较运算符）

		>    大于
		>=	 大于等于
		<	 小于
		<=	 小于等于
		==	 相等
		!=	 不等
		===	 恒等
		!==  不恒等
		注意 ：关系运算的结果为布尔类型

数字与字符串进行比较

首先会自动将字符串转换为数字再进行比较，如果转换成功，按照数字之间的比较进行运算；如果转换失败，会变成数字与 NaN之间的比较，结果永远都为False
```
"10" > 5; // true
"10a" > 5; //false
"你好" > 5; //fasle
```
字符串之间的比较，进行每位字符Unicode码的比较，
当前位如果相同，就后移至下一位再次进行比较，
当前位如果不同，直接出结果
```
"10" > "5"; // false
"ab" > "ac"; //false
"张三丰" > "张无忌"; //false
```
== === / != !==
相等：== 用于判断两个值是否相等，在比较时，会自动转换数据类型，只要值相等，结果就为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 && 条件2
条件1 条件2 结果

取值 true true true

true false false

false true false

结果 false false false

条件1 || 条件2

条件1 条件2 结果

取值 true true true

true false true

false true true

结果 false false false

!条件
直接取反
非真即假，非假即真

5 位运算符

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

按位与：&
将整数转换为二进制形式，每一位都进行与操作
```
 	011 &  101
 		et :
 			0 1 1
 		& 1 0 1
 		-------------
 			0 0 1
```
注意：任何数字与 1 进行位与操作，结果为1时，表明操作数为奇数，结果为0，操作数为偶数，所以可以用来判断数字奇偶

3 & 1 -> 011 & 001 -> 001
2 & 1 -> 010 & 001 -> 000

按位或：|
```
 	3 | 5
 		011

 	|	101
```

按位异或：^
两个数字的二进制位进行比较，相同则为0，不同则为1
```
 	3 | 5
 		011

 	|	101
```

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

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 循环

语法：
```
while (循环条件){
	循环体
}
```
执行流程
1. 定义循环变量
2. 执行循环体
3. 更新循环变量
4. 判断循环条件，条件成立，重复2-3-4，条件不成立，结束循环

(2)do-while循环

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

(3)while 与 do-while区别：

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

(4)for循环

语法

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

循环流程
1. 定义循环变量
2. 判断循环条件
3. 条件成立，执行循环体
4. 更新循环变量
for 循环与 while循环的区别
1. 相同点：执行流程相同
2. 不同点：
  while 循环常用于不确定循环次数的场合
  for 循环常用于确定循环次数的场合
循环控制
1. break
  break用在循环体中，表示跳出循环，结束整个循环，并且循环体中break后面的代码都不执行
2. continue
  continue用在循环体中，表示跳出本次循环，开始下一次循环
循环的嵌套
允许在一个循环中嵌套另一个循环
语法：
for(var i = 1; i <= 9; i ++){ //行
```
 for(var j = 1; j <= 9; j ++){ //列

 }
```

九函数和作用域

函数定义

就是一段待执行的代码块

函数作用

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

函数使用

函数的声明
函数的调用
注意：函数先声明后调用（JS中非强制）

函数语法

(1) 函数声明

语法

function 函数名 (参数列表) {
	函数体;
	返回值
}

JS中函数声明使用function关键字
函数名自定义，遵照变量命名规范，见名知意
参数列表，参数表示函数体执行所需要的数据，可以为空，为空时()不能省略；多个参数之间使用,隔开

	function sum (a,b){
		return a + b;
	}

返回值使用return关键字，将函数体内部执行的结果传递给外界使用，只能返回一个值，返回值不需要的话，可以省略return

function showFn(){
		console.log("hello");
	}

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

匿名函数

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

(2) 函数调用

语法

函数名(10,20);
var res = 函数名(10,20);

函数参数分为形参和实参，函数声明时，使用形参，函数调用时，传递实参
形参：代号
实参：具体的数据
传参的过程，就是给函数中形参变量赋值的过程
函数如果有返回值，在调用时，需要定义变量接收返回值

变量的作用域

(1)含义

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

(2)分类：

全局作用域
处在全局作用域中的变量就是全局变量
2. 在function之外通过var声明的变量都是全局变量，在任何地方都可以访问
3. 声明变量时，省略var关键字，一律是全局变量，推荐使用var关键字，不要省略
局部作用域（JS中局部作用域指的是函数作用域）
局部作用域中的变量就叫局部变量
5. 在函数内部使用var关键字声明的变量都是局部变量，只在当前函数作用域中可以访问，外界无法访问
6. 局部变量出了函数就不能访问了

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

十数组及API

定义

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

数组创建

创建空数组

var arry_name = [];  // 
var 数组名 = new Array();  //

创建数组的同时初始化元素

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

var arr = new Array(5);   // 创建长度为 5 的数组

数组使用

获取数组的长度
属性： length
使用：数组名.length; //获取数组长度
访问数组元素
数组中每一个元素都有对应的下标
元素的下标范围 0 -> length-1
语法：数组名[下标];
设置数组元素
语法：数组名[下标] = value;
清空数组中元素
arr.length = 0;

循环遍历数组

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

数组的API

toString()
作用：将数组中的元素转换为字符串返回
返回值：字符串
```
	var arr = [1,2,3];
	var s = arr.toString();
	console.log(s); //"1,2,3"
```
join()
作用：将数组中的元素连接成一个字符串并返回
返回值：字符串
参数：可选，如果省略参数，默认元素之间使用,连接。
可以给参数，指定元素之间的连接符
reverse()
作用：反转数组元素
返回值：数组，会改变数组的原有结构
```
var arr = [10,20,30];  //[30,20,10]
console.log(arr.reverse());
```
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); //多个数据之间只用,隔开
```

pop()
出栈操作，删除数组尾部元素
返回值：返回被删除的元素
unshift()
向数组头部添加一个或多个元素
返回最终数组的长度
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

内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/monkey-code/p/13129973.html

标签： javascript 技术文章开发

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

JavaScript基础

JavaScript基础

JavaScript Base

一 概述

1 什么是JavaScript

2 JS的组成

二 JS使用方式

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

2 文档中，使用标签

3 外部链接

三 基础语法

1 JS 是由语句组成的

2 JS中的注释

四 JS的变量与常量

1 变量

2 常量

五 数据类型

1 基本数据类型（简单数据类型）

(1) number 类型

(2) string 类型

(3) boolean 布尔类型

(4) undefined 类型

(5) null 类型

2 判断数据类型

3 引用数据类型（复杂数据类型）

六 数据类型转换

1 隐式类型转换（自动转换）

2 强制类型转换

七运算符

1 赋值运算符

2 算数运算符

3 关系运算符（比较运算符）

4 逻辑运算符

5 位运算符

6 三目运算符

八 流程控制语句

1 顺序结构

2 分支（选择）结构

(1)if 结构

(2)多重分支结构

(3)switch 语句

3 循环结构

(1)while 循环

(2)do-while循环

(3)while 与 do-while区别：

(4)for循环

九 函数和作用域

函数定义

函数作用

函数使用

函数语法

(1) 函数声明

(2) 函数调用

变量的作用域

(1)含义

(2)分类 ：

十 数组及API

定义

数组创建

数组使用

数组的API

数组的进出栈操作

二维数组

相关课程

热门标签

推荐文章

一概述

三基础语法

五数据类型

六数据类型转换

八流程控制语句

九函数和作用域

(2)分类：

十数组及API