前端-Javascript

Posted 2020-12-11 programmatic-yuan

目录

• JavaScript总结
  • JavaScript语言的基础了解
  • JavaScript的引入方式
  • JavaScript的注释和结束符
  • JavaScript的变量声明
  • JavaScript的基础数据类型
    • 数组(Number)
    • 字符串(String)
    • 布尔值(Boolean)
    • null与undefined
  • 对象(Object)
  • 复杂数据类型/引用数据类型
    • 数组(Array)
    • 自定义对象
  • 运算符
    • 算术运算符
    • 比较运算符
    • 赋值运算符
    • 逻辑运算符
  • 流程控制
    • if-else
    • switch-case
    • while与do-while
    • for
    • 三元运算
  • 函数
  • 面向对象
    • Date对象
    • Json对象
    • RegExp对象
    • Math对象
  • BOM+DOM

javascript总结

JavaScript语言的基础了解

• JavaScript 是一种轻量级的编程语言，也是一门脚本语言，动态语言（不需要声明数据类型），与python一样。后来出现的node.js可以作为后端语言来开发项目，所以js是一个既能做前端又能做后端的语言

• 1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，1997年，ECMA发布262号标准文件（ECMA-262）第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript

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

  年份	名称	描述
  1997	ECMAScript 1	第一个版本
  1998	ECMAScript 2	版本变更
  1999	ECMAScript 3	添加正则表达式 添加try/catch
  	ECMAScript 4	没有发布
  2009	ECMAScript 5	添加"strict mode"严格模式 添加JSON支持
  2011	ECMAScript 5.1	版本变更
  2015	ECMAScript 6	添加类和模块
  2016	ECMAScript 7	增加指数运算符（**） 增加Array.prototype.includes

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

  • 核心（ECMAScript）

  • 文档对象模型（DOM） Document object model (整合js，css，html)

  • 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

JavaScript的引入方式

• 第一种方式：放在< html >标签中（< head>标签、 body>标签、 body>标签外都行，但一定要在html标签中）

  • 放在在< head>标签中可能会存在错误：如找不到对应标签，可以通过onload事件解决，但麻烦
  • 所以，最后的办法就是将< script >放在body标签的最下面或者body标签外

  <script>
    alert(‘第一个js代码‘)  
  </script>
  

• 第二种方式：先创建一个.js文档，然后通过外部引入的方式使用

  <script src=‘目标js文档‘></script>
  

• 还有一种可以直接在浏览器下直接调试javascript代码：f12打开浏览器的调试窗口，然后在console运行这个调试台

  console.log(‘第一个js代码‘)  /console.log表示打印内容，相当于python的print/
  

JavaScript的注释和结束符

JavaScript单行注释符:/ 内容 /      -----python的单行注释符：#
JavaScript多行注释符：/*多行内容*/  -----python的多行注释符：‘‘‘多行内容‘‘‘或者"""多行内容"""
JavaScript结束符：;				  -----python没有结束符，一行就是结束

JavaScript的变量声明

• JavaScript的变量可以由数字，字母，下划线，$组成，但不能以数字开头

  • 变量名区分大小写
  • 变量名推荐使用驼峰命名法
  • 变量名不能使用保留字

  /保留字/
  abstract
  boolean
  byte
  char
  class
  const
  debugger
  double
  enum
  export
  extends
  final
  float
  goto
  implements
  import
  int
  interface
  long
  native
  package
  private
  protected
  public
  short
  static
  super
  synchronized
  throws
  transient
  volatile
  

• JavaScript变量声明使用 var 变量名 进行声明

  var id = 1;  /可以分两步，声明变量var id;然后赋值id = 1，一般一步写完/
  

JavaScript的基础数据类型

数组(Number)

• JavaScript不区分整数和浮点数，统称为数组

  var a=1;		/一定要先var声明再赋值/
  	undefined
  var b=3.1		/可以不在末尾加;结束符，console会自动加上，但要养成加;的习惯/
  	undefined
  typeof(a);		/typeof用于查看类型/
  	"number"    
  typeof(b);
  	"number"
  

• 数组还包括还一个特殊的值NaN(Not a Number)：它表示不是一个数字，但是一个值

  parseInt(‘A‘);
  	NaN
  typeof(NaN)
  	"number"
  

字符串(String)

• 字符串的表示跟python有点类似，JS要var声明

  var s=‘随便什么‘;
  	undefined
  s;
  	"随便什么"
  typeof(s);
  	"string"
  var s1=‘Hello‘;
  	undefined
  var s2=‘ World‘;
  	undefined
  s1+s2;				/可以使用+对字符串进行拼接/
  	"Hello World"
  

• 类型转换

  /字符串转数值/
  parseInt(‘111‘);
  	111
  parseFloat(‘111.11‘);
  	111.11
  parseInt(‘AAA‘);
  	NaN
  

• 字符串常用方法

  .length     	  #获取字符串的长度(不加括号的就是属性，加括号的才是方法)
  .trim()			  #删除空白
  .trimLeft()       #删除左边空白
  .trimRight()      #删除右边空白
  .charAt(n)		  #通过索引找对应的值，n为索引
  .indexOf(‘字符‘,n) #通过字符找对应的索引，n为开始寻找的索引值，找不到就返回-1
  .concat(‘字符串‘)	#拼接字符串
  .slice(m,n)		  #对字符串进行切片，范围为[m,n)
  .toUpperCase()	  #将字符串字母全部变为大写
  .toLowerCase()	  #将字符串中字母全部变为小写
  .split(‘字符‘,m)   #将字符串从指定字符进行切分，m为切分后显示的字符串个数
  
  var s=‘hello world ‘;
  	undefined
  s.length;
  	12
  s.trim();
  	"hello world"
  s.trimRight();
  	"hello world"
  s.trimLeft();
  	"hello world "
  s.charAt(1);
  	"e"
  s.indexOf(‘o‘,5);
  	7
  s.concat(‘！！！‘);
  	"hello world ！！！"
  s.slice(0,5);
  	"hello"
  s.toUpperCase();
  	"HELLO WORLD "
  s.toLowerCase();
  	"hello world "
  s.split(‘o‘,1);
  	["hell"]
  s.split(‘o‘,2);
  	(2)?["hell", " w"]
  

布尔值(Boolean)

• JS的布尔值区别于python的布尔值，JS的布尔值为true和false，python为True和False

  var a=true;
  	undefined
  typeof(a);
  	"boolean"
  #注意：‘‘、0、null、undefined、NaN都是false
  

null与undefined

#null表示值为空，undefined表示只声明了变量但未对变量赋值
//null一般用于指定或者清除某个变量时使用。
//undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有当函数无明确的返回值时，	return的也是undefined。一般var 变量名后都会显示undefined，哪怕对变量赋了值

对象(Object)

• JavaScript一切皆对象，与python很相似，如数值、字符串、数组、函数等等，此外，JavaScript还允许自定义对象--{}

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

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

  var a=new Number(1);   /通过new实现对象的声明/
  	undefined
  typeof(a);
  	"object"
  #注意：null其实是一种空的对象引用
  typeof(null);
  	"object"
  typeof(undefined);
  	"undefined"
  

复杂数据类型/引用数据类型

数组(Array)

• 创建数组有两种方式

  #第一种方式
  var a=[1,2,3]
  	undefined
  typeof(a);
  	"object"	
  #第二种方式
  var b=new Array([1,2,3])
  	undefined
  typeof(a);
  	"object"
  

• 数组的方法和属性

  .length       #获取数组长度
  .push(x)	  #从数组尾部插入数据
  .pop()		  #从尾部删数据
  .unshift(x)	  #从头部插入数据
  .shift()	  #从头部删除数据
  .slice(m,n)	  #切片，[m,n)
  .reverse()	  #数组翻转，会改变原数组
  .split(‘字符‘) #将数组按照字符进行拼接成一个字符串
  .concat(s1)	  #数组拼接，不改变原数组
  .sort()		  #数组按照大小排序，有坑，会改变原数组
  .splice(i,n,x)#对数组进行删除和插值操作，i为要删除的位置，n为往后删除的个数，x为插入的值
  #示例演示
  var a=[1,4,3,2];
  	undefined
  a.length;
  	4
  a.push(10);
  	5
  a.pop();
  	10
  a.unshift(0);
  	5
  a.shift();
  	0
  a.slice(1,3);
  	(2)?[4, 3]
  a.reverse();
  	(4)?[2, 3, 4, 1]
  a.join(‘,‘);
  	"1,4,3,2"
  a.concat([5,8,6]);
  	(7)?[1, 4, 3, 2, 5, 8, 6]
  a.sort();
  	(4)?[1, 2, 3, 4]
  a.splice(1,2,[5,6,7,8]);
  	(2)?[2, 3]
  a;
  	(3)?[1, Array(4), 4]
  

  #关于sort()的坑
  var a=[4,11,84,73]
  a.sort()
  	(4)?[11, 4, 73, 84]
  function sortNumber(a,b){	#从小到大排列
      	return a - b;
  	}
  a.sort(sortNumber)
  	(4)?[4, 11, 73, 84]
  function sortNumber(a,b){     #从大到小排列
      	return b - a
  	}
  a.sort(sortNumber)
  	(4)?[84, 73, 11, 4]
  #解释:
     如果想按照其他标准进行排序，就需要提供比较函数，也就是自己提供一个函数提供排序规则，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
  　　若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
  　　若 a 等于 b，则返回 0。
  　　若 a 大于 b，则返回一个大于 0 的值。
  
  

  //注意
   var a=[1,2,3]
          for (var i in a)    //这里的i只是取得索引
          {
              console.log(i)
          }
  

自定义对象

• 自定义对象类似于python中的字典

  创建一个自定义对象
  var a={"name":"tom","age":4};
  var a={name:"tom",age:4};  		 #JavaScript支持键不加引号，系统会默认补上
  
  遍历自定义对象
  for (var i in d) {console.log(i,d[i]);}
  	name tom
  	age 4
  d.name;					#可以通过.键的方式取值
  	"tom"
  

运算符

算术运算符

#算术运算符有+、-、*、/、%、++、- -
++：自增加，a=i++表示先a=i,然后再i=i+1，a=++i则是先i=i+1,然后再a=i
--：自增减，a=i--表示先a=i,然后再i=i-1，a=--i则是先i=i-1,然后再a=i

比较运算符

#比较运算符有<、<=、>、>=、==、!=、===、!===
==:弱等于，这种不好，不用，使用===
#1 == “1”  // true 它会将将1转换为字符串‘1‘,在=号两个数据类型不同的时候，会自动给你变成相同的
！=：弱不等于，尽量不用，使用！==
===：强等于
！==：强不等于

赋值运算符

#赋值运算符有=、+=、-=、*=、/=

逻辑运算符

#逻辑运算符有&&(与)、||(或)、！(非)

流程控制

if-else

var a=6;
if (a>6){
    console.log(‘大于六‘)
}else if(a<6){
    console.log("小于六")
}else{console.log(‘等于六‘)};
	等于六

switch-case

var a=90;
switch (a/10) 	#switch里面可以加变量或者表达式
{      
    case 6:console.log(‘成绩为60-69分‘); break;
    case 7:console.log(‘成绩为70-79分‘); break;  
    case 8:console.log(‘成绩为80-89分‘); break;
    case 9:console.log(‘成绩为90-99分‘); break;
    case 10:console.log(‘成绩为100分‘); break;
    default:console.log(‘成绩不及格‘); break; 	#所有条件都不满足就执行default
};
	成绩为90-99分
#注意：break很重要，如果不加程序会继续往下走，直到碰到一个break才会停止

while与do-while

#while
var a=3;
while (a>0)    #符合条件则进入循环
{
    console.log(a);
    a--
};
#do-while
var a=3;
do
{
    console.log(a);
    a--
}
while (a>0);   #不满足条件就退出
#while与do-while的区别：当一开始就条件不满足的=时，while循环一次都不会执行，而do-while会先执行一次循环再结束

for

#for用于遍历循环
#第一种方式
var a=[22,33,44];
for (var i in a)    
{
    console.log(i);
    console.log(a[i]);
};
#第二种方式
var a=[22,33,44];
for (var i=0;i<a.length;i++)
{
    console.log(i);
    console.log(a[i]);
};

三元运算

#三元运算 var c=a>b?a:b;  当a>b时将:前的值赋值给c，当a<b时将:前的值赋值给c
var a=1;
var b=2;
var c=a>b?a:b;
console.log(c);

函数

• JavaScript的函数与python中的函数很相似，在声明时有区别

  #创建一个函数
  function func(a,b)    #使用function来进行函数声明
  {
      return [a+b,a-b]  #当返回值为多个值时一定要使用数组，否则只会返回第一个值
  };
  func(1,2);
  	(2)?[3, -1]
  #没有返回值时默认为undefined
  function func1(a,b) {
      a=a+b;
  };
  var ret=func1(1,2)
  typeof(ret)
  	"undefined"
  #匿名函数，相当于python中的lambda函数
  var func1=function (a,b)
  {
      return a+b;
  }
  func1(1,2);
  #在ES6中匿名函数可以写成如下形式
  var func1=(a,b)=>a+b;   =>后面就是return的值
  

• 函数的全局变量与局部变量

  #局部变量：在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
  
  #全局变量：在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
  
  #变量生存周期：
  	JavaScript变量的生命期从它们被声明的时间开始。
  	局部变量会在函数运行以后被删除。
  	全局变量只有在页面关闭后被删除。
  
  
  

• 作用域

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

• 闭包

  #与python中的闭包一致，内层函数对外层非全局变量的使用
  var a=1;
  function f(){
      var a=2;
      function inner(){
          console.log(a);
      }
      return inner;
  }
  var ret = f();
  ret();
  

面向对象

• 与python的类类似，ES5没有类的概念，只有在ES6才引入了类的概念

• ES5的封装方法

  function Person(name) {
      this.name=name;					  #定义对象的属性，this相当于python的self
  }
  Person.prototype.max=function (a,b)   #定义对象的方法，pro
  {
      return c=a>b?a:b;
  };
      ? (a,b) 
      {
          return c=a>b?a:b;
      }
  var p=new Person(‘大黄‘);
  	undefined
  p.name;
  	"大黄"
  p.max(1,2);
  	2
  

Date对象

• date对象的基本操作

  var d1 = new Date(); //获取当前时间
  console.log(d1.toLocaleString());  //当前时间日期的字符串表示
  	2020/6/12 下午5:03:29
  #方法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());   #输出为时间戳，从格林威治时间经历了5000ms的时间
  console.log(d3.toUTCString());      #UTC与Locale相差8h 
  #方法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对象

• Json对象有两个方法，JSON.parse( ) 与JSON.stringify( )

  var obj = {"name": "大黄", "age": 10};
  #对象转换成JSON字符串  序列化
  var str = JSON.stringify(obj);
  str;
  	"{"name":"chao","age":18}"
  #JSON字符串转换成对象  反序列化
  var obj1 = JSON.parse(str); 
  obj1;
  	{name: "chao", age: 18}   #返回的自定义对象{}的键不带""
  

RegExp对象

• 使用正则表达式取寻找符合要求的字段，常用于用户输入时匹配，与python的re模块类似

  #创建正则对象的方法
  	var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
  #简写方式:
  	var reg1 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
  
  
  #test方法.测试某个字符串是否符合正则规则
  	var s = ‘hello‘
  	reg1.test(s)            #符合返回True,不符合返回false
  	
  #一个坑:
  	reg1.test()             #里面什么也不写,会默认放一个"undefined"字符串
  	reg1.test("undefined")  #返回true，因为undefined符合正则规则
  

• 正则方法

  var s = "Ao hello ";
  
  s.match(/o/g);
  	//(2)?["o", "o"]    查找字符串中符合正则的内容，/o/g后面这个g的意思是匹配所有的o
  s.search(/h/g);  
  	//1    查找字符串中符合正则表达式的内容位置，返回第一个配到的元素的索引位置，加不加g效果相同
  s.split(/o/g);
  	//["A", " hell", ""]    按照正则表达式对字符串进行切割，得到一个新值，原数据不变
  
  #s.replace()的四种形式
  var s=‘A man is here a‘;
  s.replace(/a/i, "啦啦");    //"啦啦 man is here"          不区分大小写替换一次
  s.replace(/a/, "啦啦");     //"A m啦啦n is here"          只替换一次
  s.replace(/a/g, "啦啦");    //"A m啦啦n is here 哈哈"      全局替换
  s.replace(/a/gi, "啦啦");   //"啦啦 m啦啦n is here 哈哈"    不区分大小写全局替换
  
  #坑:
  	var reg = /a/g;
  	var s = ‘a man is here‘;
  	reg.test(s);   	    //true
  	reg.lastIndex; 		// 1
  	reg.test(s);   		//true
  	reg.lastIndex; 		// 4
  	reg.test(s); 		//false
  	reg.lastIndex = 0;  #重新赋值,让其归零
  

Math对象

• math对象类似于python中的内置模块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)      返回角的正切
  

BOM+DOM

BOM和DOM总结 https://www.cnblogs.com/Programmatic-yuan/articles/13166861.html