JavaScript总结

Posted 2021-06-04 小杨-先生

目录

• 一、JavaScript概述
• 二、JavaScript引入方式
• 三、声明变量var
• 四、基础数据类型
  • 数值类型Number
  • 字符类型 String
  • 字符串常用方法
  • 布尔值
  • null和undefined
  • 对象类型 object
  • 数组Array
  • 数组常用方法和属性
  • 自定义对象 {}
  • 类型查询
• 五、运算符
• 六、流程控制
• 七、循环
• 八、函数
• 九、全局变量和局部变量
  • 作用域
• 十、面向对象
• 十一、Date对象
• 十二、JSON对象
• 十三、RegExp正则对象
• 十四、Math计算模块

一、javascript概述

ECMAScript和JavaScript的关系

JavaScript 由 Brendan Eich 于 1995 年发明，并于 1997 年成为 ECMA 标准。

ECMAScript 是该语言的官方名称。

ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

ECMAScript的历史

版本	官方名称	描述
1	ECMAScript 1 (1997)	第一版。
2	ECMAScript 2 (1998)	只改变编辑方式。
3	ECMAScript 3 (1999)	添加了正则表达式。添加了 try/catch。
4	ECMAScript 4	从未发布过。
5	ECMAScript 5	添加了“严格模式”。添加了 JSON 支持。添加了 String.trim()。添加了 Array.isArray()。添加了数组迭代方法。
5.1	ECMAScript 5.1 (2011)	编辑改变。
6	ECMAScript 2015	添加了 let 和 const添加了默认参数值添加了 Array.find()添加了 Array.findIndex()
7	ECMAScript 2016	添加了指数运算符（**）。添加了 Array.prototype.includes。
8	ECMAScript 2017	添加了字符串填充。添加了新的 Object 属性。添加了异步功能。添加了共享内存。
9	ECMAScript 2018	添加了 rest / spread 属性。添加了异步迭代。添加了 Promise.finally()。增加 RegExp。

注：ES6就是指 ECMAScript 6

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

• 核心（ECMAScript）
• 文档对象模型（DOM） Document object model (整合js，css，html)
• 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

简单地说，ECMAScript 描述了JavaScript语言本身的相关内容。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

二、JavaScript引入方式

方式一：Script标签内写代码

<script>
  // 在这里写你的JS代码
  alert(\'小杨\')  //这个是浏览器窗口一打开咱们这个文件，就弹出一个窗口
</script>

方式二：引入额外的JS文件

<script src="myjs.js"></script>

三、声明变量var

1、JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。

2、声明变量使用 var 变量名; 的格式来进行声明

let：命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。

const：用来声明常量。一旦声明，其值就不能改变。

var a = 10;

//声明变量时可以先不赋值
var a;  //此时a的值为undefined  

四、基础数据类型

JavaScript拥有动态类型（python也是动态的）

数值类型Number

JavaScript不区分整型和浮点型，就只有一种数字类型。

var a = 10;
typeof a;	-->//"number"

var b = 1.11;
typeof b;	-->//"number"

查看数据类型用 typeof a;

var c = 123e5;   -->// 12300000
var d = 123e-5;  -->// 0.00123

类型转换string——>number

parseInt("123");  		// 返回123
parseInt("ABC");  		// 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456");  // 返回123.456

字符类型 String

var a = "Hello"
var b = "world;

字符串常用方法

1 .length属性,查看字符串长度

var a = \'hello\';
a.length; 	// 5

2 .trim() ：两边移除空白

3 .trimLeft() ：左边移除空白

4 .trimRight()：右边移除空白

var a = \'  hello  \';
a.trim(); //"hello"

5 .charAt(n)：返回索引为n的那个字符

var a = \'hello\';
a.charAt(1);		//"e"

6 .concat()：字符串拼接

var a = \'hello\';
var b = \'world\';
a.concat(b);  	//"helloworld"

7 .indexOf()：通过元素找索引

var a = \'hello\'
a.indexOf(\'l\');		//2

// 第二个参数,索引起始位置
a.indexOf(\'l\',3)	//3
		
// 找不到返回-1
a.indexOf(\'e\',3)  	//-1

8 .slice() ：切片

var a = \'hello\';
a.slice(2,4)  		// 顾头不顾尾

9 .toLowerCase()：全部变小写
10 .toUpperCase()：全部变大写

var b = \'HH\';
b.toLowerCase();	// hh

11 .split：字符串分隔,第二个参数是返回多少个数据

var a = "hello";
a.split(\'e\'); 		//["h", "llo"]
a.split(\'e\',1); 	//["h"]  

布尔值

var a = true;
var b = false;

""(空字符串)、0、null、undefined、NaN都是false。

null和undefined

null：表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;

undefined：表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。

对象类型 object

对象只是带有属性和方法的特殊数据类型。

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

JavaScript 提供多个内建对象，比如 Number、String、Date、Array 等等，通过new实例化的对象都是object类型，数组不需要new对象，类型就是object类型。

例如：声明一个字符串对象

var a = new String(\'hello\');
typeof a;	//"object"

数组Array

数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

创建数组:

var a = [11,22,33];
var b = new Array([22,33])
typeof a;  	//object类型

数组常用方法和属性

1 索引取值

var a = [123, "ABC"]; 
console.log(a[1]);  	// 输出"ABC"

2 .length：获取长度

var a = [123, "ABC"]; 
a.length;	//2

3 .push()：尾部追加

4 .pop()：尾部删除，并返回被删除的值

var a = [11,22,33]
a.push(\'123\'); 	 // [11, 22, 33, "123"]
a.pop();  		 //  "123"
a  			  -->//  [11, 22, 33]

5 .unshift(ele)头部追加

6 .shift()头部删除

var a = [11,22,33]
a.unshift(\'abc\')	//["abc", 11, 22, 33]
a.shift()			//"abc"
a				 -->//[11, 22, 33]

7 .sort：排序

var a = [14, 5, 13, 42, 88];
a.sort();		//[13, 14, 42, 5, 88] ——>这是因为根据每个值的第一个字符ASCII码排序

//-----------------------------------------------
升序：
function sortNumber(a,b){
	return a - b;
}
a.sort(sortNumber);		//[5, 13, 14, 42, 88]

降序：
function sortNumber(a,b){
	return b - a;
}
a.sort(sortNumber);		//[88, 42, 14, 13, 5]

// 解释：
如果想按照其他标准进行排序，就需要提供比较函数，也就是自己提供一个函数提供排序规则，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

8 .splice()：删除元素，1.从哪删(索引)，2.删几个，3.删除位置替换的新元素(可多个元素)

var a = [14, 5, 13, 42, 88];
a.splice(1,1,\'aa\');		//返回被删除的值

自定义对象 {}

JavaScript的对象（Object）本质上是键值对的集合，但是只能用字符串作为键。

var a = {"name": "小杨", "age": 18};
var d = {\'name\':\'鲍勃\',age:18}; 	//键可以不加引号
console.log(a.name);		//小杨
console.log(a["age"]);		//18

// for循环遍历自定义对象
for (var i in a){
  console.log(i, a[i]);
}
// 输出
name 小杨
age 18

类型查询

typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。

对变量或值调用 typeof 运算符将返回下列值之一：

值	类型
typeof 100	number
typeof true	boolean
typeof function	function
typeof (undefined)	undefined
typeof new Object ( )	object
typeof [1, 2]	object
typeof NaN	number
typeof null	object

五、运算符

算数运算符

+ - * / % ++ --  

i++,是i自加1，
i--是i自减1   
i++的这个加1操作优先级低，先执行逻辑，然后再自加1，
++i，这个加1操作优先级高，先自加1，然后再执行代码后面的逻辑

比较运算符

> >= < <= != == === !==   

==是弱等于(不比较数据类型)    
===强等于 强等于会比较数据类型

逻辑运算符

&& || !   对应————>and，or，非（取反）!null返回true

赋值运算符

= += -= *= /=   ————>n += 1其实就是n = n + 1

六、流程控制

逻辑判断：if-else if-else

var a = 10;

if (a > 5){   
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

切换：switch

switch 中的 case 子句通常都会加 break 语句，否则程序会继续执行后续 case 中的语句。

var a = 20;

switch (a){
    case 9:		// 如果 a = 9 为true
        console.log(\'999\');		// 执行它
    break;		// 并且要结束不然会一直往下执行
    case 10:
        console.log(\'101010\');
    break;
    case 11:
        console.log(\'111111\');
    break;
    default :  		// 上面的条件都不成立的时候,走default
        console.log(\'啥也不对!!\')

}

三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b 
// 如果a>b这个条件成立，就把冒号前面的值给c，否则把冒号后面的值给c   
// python中的：a = x if x>y else y

七、循环

for循环

// 就这么个写法，声明一个变量，变量小于10，变量每次循环自增1
// 循环打印 0-9
for (var i=0; i<10; i++){
    console.log(i);
}


// 循环数组：
var l2 = [\'aa\',\'bb\',\'dd\',\'cc\'];
// 方式1
for (var i in l2){
   console.log(i,l2[i]);
}
// 方式2
for (var i=0; i<l2.length; i++){
　　console.log(i,l2[i]);
}

while循环

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

八、函数

JavaScript 中的函数和 Python 中的非常类似，只是定义方式有点区别。

定义函数

// 普通函数定义
function func() {
  console.log("Hello world!");
}

// 带参数的函数
function func(a, b) {
  console.log(a, b);
}

函数返回值

在 JavaScript 中，如果你想返回多个值是不行的，比如return a ，b；只能给你返回最后一个值，如果就想返回多个值，你可以用数组包裹起来 return [a,b]；

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

调用函数

调用函数 sum (1,2,3,4,5) 参数给多了，也不会报错，还是执行前两个参数的和，sum(1)，少参数或者没参数也不报错，不过返回值就会是NAN

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

sum(1,2);	//3

匿名函数

在es6中，使用var，可能会飘黄，是因为在es6中，建议你使用let来定义变量，不过不影响使用

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

sum(1, 2);	//3

立即执行函数

页面加载到这里，这个函数就直接执行了，不需要被调用执行

// 小括号括起来后面紧跟参数
(function(a, b){
  return a + b;
})(1, 2);

九、全局变量和局部变量

局部变量：

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量：

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期：

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。

var city = "BeiJing";

function func() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

func();  	//输出结果是？ ---> ShenZhen

十、面向对象

es5封装方式

命名的首字母要大写，实例化的时候使用new关键字进行实例化

// 创建一个Person类
function Person(name, age){
	this.name = name;	// Person对象的name属性
    this.age = age;
}

// 实例化一个Person对象
var p = new Person(\'xiaoyang\');
p.name;		// 查看对象name属性——>"xiaoyang"

// 创建一个对象方法 sum
Person.prototype.sum = function(a,b){return a+b;};

p.sum(2,3);		// 5

十一、Date对象

//方法1：不指定参数
var d1 = new Date(); 					// 获取当前时间
console.log(d1.toLocaleString());  		// 当前时间日期的字符串表示


//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");  	// 月/日/年(可以写成04/03/2020)
console.log(d3.toLocaleString());


//方法3：参数为毫秒数，了解
var d3 = new Date(5000);  
console.log(d3.toLocaleString());
console.log(d3.toUTCString());  
 

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  		// 毫秒并不直接显示

Date对象的方法

var d = new Date(); 

//getDate()                 获取日
//getDay ()                 获取星期 ，数字表示（0-6），周日数字是0
//getMonth ()               获取月（0-11,0表示1月,依次类推）
//getFullYear ()            获取完整年份
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜),时间戳

十二、JSON对象

var str1 = \'{"name": "小杨", "age": 18}\';		// JSON对象字符串
var obj1 = {"name": "宝宝", "age": 18};		// 自定义对象

// JSON字符串转换成对象
var obj = JSON.parse(str1); 		//——>{name: "小杨", age: 18}

// 对象转换成JSON字符串
var str = JSON.stringify(obj1);		//——>"{\\"name\\":\\"宝宝\\",\\"age\\":18}"

十三、RegExp正则对象

创建正则对象的方法

参数1 正则表达式 (不能有空格)
参数2 匹配模式：常用 g (全局匹配;找到所有匹配，而不是在第一个匹配后停止) 和 i (不区分大小写)

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
// 简写方式:
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

// test方法：测试某个字符串是否符合正则规则
var s = \'hello\'
reg1.test(s)  符合返回True,不符合返回false

正则的其他方法

var s2 = "hello world";

// 查找字符串中 符合正则 的内容 ，/o/g后面这个g的意思是匹配所有的o,
s2.match(/o/g);         // ["o", "o"]

// 查找字符串中符合正则表达式的内容位置，返回第一个配到的元素的索引位置，加不加g效果相同
s2.search(/h/g);        // 0     

// 按照正则表达式对字符串进行切割，得到一个新值，原数据不变
s2.split(/o/g);         // ["hell", " w", "rld"]  

// 对字符串按照正则进行替换
s2.replace(/o/g, "s");  // "hells wsrld"          

坑一：

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");

reg1.test() // 里面什么也不写,会默认放一个"undefined"字符串
reg1.test("undefined") 

坑二：

如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。

该属性值默认为0，所以第一次仍然是从字符串的开头查找。

当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。

当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。

因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。

如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。

var reg = /a/g;
var s = \'xiaoyang\';

reg.test(s); 		//true
reg.lastIndex; 		// 3

reg.test(s); 		//true
reg.lastIndex; 		// 6

reg.test(s); 		//false

reg.lastIndex = 0;  // 重新赋值,让其归零

十四、Math计算模块

Math.abs(x)      返回数的绝对值。
exp(x)      	返回 e 的指数。
floor(x)    	小数部分进行直接舍去。
log(x)      	返回数的自然对数（底为e）。
max(x,y)    	返回 x 和 y 中的最高值。
min(x,y)    	返回 x 和 y 中的最低值。
pow(x,y)    	返回 x 的 y 次幂。
random()    	返回 0 ~ 1 之间的随机数。
round(x)    	把数四舍五入为最接近的整数。
sin(x)      	返回数的正弦。
sqrt(x)     	返回数的平方根。
tan(x)      	返回角的正切。