前端--JS

天才小楼楼

已于 2022-01-20 14:35:26 修改

阅读量359

点赞数 1

分类专栏：前端文章标签：前端 javascript vue.js

于 2019-04-15 01:51:32 首次发布

本文链接：https://blog.csdn.net/sinat_29214327/article/details/89297729

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、JS书写的规范

1.1、放在head头中：
文件引入：<script src="test.js"></script>

<head>
    <script src="test.js"></script>
</head>

1.2、写在body体后面

<body>
     <script>
         alert('asdasdasda');
     </script>
</body>

二、JS常见的调试格式

2.1、alert('asdasdasda')                #打开页面上时，弹出一个对话框，内容为'asdasdasda'。
2.2、console.log('asdasdasda');    #在console里面显示内容 (console是一个对象,log是console的一个函数)
2.3、单行注释： //
2.4、多行注释：/* balabalabala */
2.5、JS代码是以";" 结尾的。
2.6、JS的变量声明
	局部变量：var name "sudada";
	全局变量：name "sudada";

2.7、JS变量类型

 1)num
	var age = 12;
	var age = 1.1;
 2)字符串
	var name = "sudada";
 3)数组
	var array = [1,2,3,"sudada"];
 4)字典
	mydict = {"name":"sudada","age":12}
 5)布尔值
	true
 	false
 6)null
	变量的值是null
 7)undefined	
	变量声明但是没有给具体的值

2.8、常用方法

obj.length           					# 查看字符的长度
obj.trim               					# 移除空白
obj.trimLeft       						# 移除空白(左)
obj.trimRight    						# 移除空白(右)
obj.charAt(n)    						# 按照索引取值
obj.concat(valur1,valur2)    			# 字符拼接  valur1 + valur2
obj.indexOf(substring,start)     		# 根据值取索引
obj.substring(0,3)                		# 根据索引做切分
obj.slice(start,end)                    # 切片
obj.splice("2,1")                       # 用于添加或删除数组中的元素(方法用于添加或删除数组中的元素,例子：splice(2,1)表示对第二个索引进行删除，删除一个值，splice(2,0)表示删除0个值)
obj.toLowerCase()                       # 小写
obj.toUpperCase()                       # 大写
obj.split(",")                          # 指定逗号","为分隔符

2.9、运算符介绍

1、加减法
	i = i+1
	i = i-1
		
2、比较运算符
	>  # 大于
	>= # 大于等于
	<  # 小于
	<= # 小于等于
	!= # 不等于
	==   #  值相等，类型不相等
	===  #  值相等，且类型相等
    !==         # 值不相等且类型不相等
	 例子：
	 a = "11"
	 b = 11
	 那么：
	 a == b;     # 返回true
	 a === b;    # 返回false
		
3、逻辑运算符
	&&   # 与
	||      #  或
	!       #  非

2.10、流程控制

if (条件){
		
	}else if(条件){
		
	}else{
		
	}
		
	for 循环：
	obj = {"name":"sudada","age":12}
	for (var i in obj) {
		console.log(obj[i])
}

2.11、函数表达式

第一种：普通写法(常用)
	function test(a,b){  # a,b指的是传的参数
		console.log();
		return;
	}
	test();              # 执行函数

第二种：匿名函数(常用)
    var test = function () {
    }

第三种：自执行函数(立即就执行的函数)
    (function () {console.log('hello')}) ()

2.12、switch 语句

var day=new Data().getDay();
  switch (day){
      case 0:
            x="Today is 0";
            break;
      case 1:
            x="Today is 1";
            break;
      case 2:
            x="Today is 2";
            break;
      case 3:
            x="Today is 3";
            break;
      default:
            x = "xxx"
}

2.13、三元运算符

var a = 3;
var b = 5;
		
c = a > b ? a:b     # 如果a>b则c的值为b，反之c的值为a。
console.log(c);

三、词法分析

function t(age) {
    console.log(age);
    var age = 99;
    console.log(age);
    function age() {
    }
    console.log(age);
    }
t(12);

输出结果：
ƒ age() {}   # 函数的声明(注意：函数的优先声明是最高的，谁都覆盖不了这个值)
99           # age的值为99
99           # 由于已经赋值var age = 99;那么console.log(age);拿到的值还是99

分析过程：
1.函数的参数  age      AO.age = undefined
2.函数的局部变量       AO.age = undefined 
3.函数声明(优先级最高)  AO.age = function () {}

函数的调用过程：
t()                # 执行函数
console.log(age)   # 都是从AO上去找相关的变量

四、常用模块和常用方法

4.1、日期类Date

var d = new Date('1999');     # new一个Date()对象，实例化一个d。

  d.getYear()      # 从Date()对象返回一个月中的某一天
  d.getFullYear()  # 从Date()对象返回年份
  d.getMonth()     # 从Date()对象返回月份
  d.getDate()      # 从Date()对象返回一个月中的某一天
  d.getDay()       # 从Date()对象返回一周中的某一天
  d.getHours()     # 返回Date()对象的小时(0-23)
  d.getMinutes()   # 返回Date()对象的分钟(0-59)
  d.getSeconds()   # 返回Date()对象的秒数(0-59)

4.2、Math数学对象

Math.ceil(3.5);   # 向上取值，得到4
Math.floor(3.5);  # 向下取值，得到3
Math.round(3.5);  # 四舍五入
Math.min(1,2)     # 返回最小值 
Math.max(3,4)     # 返回最大值
Math.random()     # 获取0-1之间的随机数

4.3、常见的其他函数

在数据传输流程中，json是以文件，即字符串的形式传递的，而js操作的是json对象，所以：json对象和json字符串之间的相互转换是关键，例如：

1.序列化：JSON字符串转换成JSON对象 -- JSON.parse(str1); str1是string

var str1 = ' {"name" : "sudada" , "sex" : "male" } ' ;  # 定义函数的值为JSON字符串
通过 typeof(str1); 拿到的是一个string类型

JSON.parse(str1);      # 使用JSON.parse序列化字符串

拿到的值如下：{name: "sudada", sex: "male"}

2.反序列化：JSON对象转换成JSON字符串 -- JSON.stringify(str2); str2是object

var str2 = {"name" : "sudada" , "sex" : "male" } ;  # 定义JSON对象
通过 typeof(str2); 拿到的是一个object

JSON.stringify(str2);           # 使用JSON.stringify(str2)反序列化

拿到的值如下： "{"name":"sudada","sex":"male"}"

3.eval ：JS中的eval既能执行表达式，也能执行代码

执行代码：

eval(2+3);
5


eval(console.log('hello'))
VM20210:1 hello

4.4、URL转译

1.1、decodeURI()           # 解码URI
    decodeURI("https://www.baidu.com/%E5%93%88%E5%93%88%E5%93%88/");  # 给这个URL解码
    "https://www.baidu.com/哈哈哈/"                                   # 得到的值如下

1.2、decodeURIComponent()  # 解码URI中的组件部分
    decodeURIComponent("https%3A%2F%2Fwww.baidu.com%2F%E5%93%88%E5%93%88%E5%93%88%2F")  # 解码URI中的组件部分(对斜杠做解码)
    "https://www.baidu.com/哈哈哈/"                        # 得到的值如下


2.1、encodeURI()           # 编码URI
    encodeURI('https://www.baidu.com/哈哈哈/');            # 给这个URL编码
    "https://www.baidu.com/%E5%93%88%E5%93%88%E5%93%88/"  # 得到的值如下

2.2、encodeURIComponent()  # 编码URI中的组件部分
    encodeURIComponent('https://www.baidu.com/哈哈哈/')              # 编码URI中的组件部分(对斜杠也做编码)
    "https%3A%2F%2Fwww.baidu.com%2F%E5%93%88%E5%93%88%E5%93%88%2F"  # 拿到的值如下


3.1、escaoe()              # 对字符串进行转译
3.2、unescaoe()            # 对字符串进行解码

五、JS中的面向对象创建 -- 三种方式

5.1、通过字面量的方式创建一个对象

定义类：
	var cat = {};
	var cat = {"color":"yellow",age:5,climb:function(){console.log("climbing...")}};

通过调用类的方法，获取类里面的值：
console.log(cat.color);
	yellow

console.log(cat.age);
	5

console.log(cat.climb);
	ƒ (){console.log("climbing...")}

5.2、通过 new 创建一个空对象

定义一个空对象：
	var obj = new Object();

给这个空对象赋值：
	obj.age = 4;

那么通过调用传入的值，获取内容：
	console.log(obj.age)
	4

5.3、通过函数创建一个类

定义函数(类)：
	function Person() {
	    var salary = 2000;					# var salary = 2000; 是私有的属性(这里会涉及到一个私有属性如何调用的问题，如下：在函数内定义一个共有属性，用这个共有属性去调用这个私有属性)
		this.age=23; 
		this.leg=4;							# 函数中的this和Python中的self是一样的。  this是公开的属性
		this.getSalary = function () {  	# 函数内调用私有属性"var salary = 2000;"的共有属性。这里用的是一个匿名函数实现，那么调用的时候就按照调用函数的方式去调用。
				console.log(salary)
		}
	}

定义类，类的值为Person(上面的函数)。
	var p = new Person();

掉用类的某个值：
	console.log(p.age)
	23

掉用类的某个值：
	console.log(p.leg)
	4

调用类的私有属性：
    console.log(sudada.getSalary());
    2000

5.4、JS面向对象的封装 (也就是5.3里面的)

先定义一个函数：
	function Person() {
	    var salary = 2000;    函数的私有属性
		this.getSalary = function () {    然后写一个函数去访问该私有变量：
			console.log(salary)
		}
	}

5.5、JS面向对象的继承

继承1：实例的属性不相互共享
	定义函数：
	function Dog() {
		this.leg=4;
		this.species='犬科';
	}

	
	var d1 = new Dog();           # d1 继承的是完整的类
	d1.species = "动物";
	console.log(d1.species)
	拿到的值：动物
	
	var d2 = new Dog();         # d2 继承的是完整的类，不受d1的影响
	console.log(d2.species)
	拿到的值：犬科

	
继承2：实例属性的共享
	通过prototype来实现，2个实例属性的共享。
		function Dog() {
		this.leg=4;
	}

	Dog.prototype = {"species":"犬科"}
	
	var d1 = new Dog();           # d1 继承的是完整的类，species的值是根据Dog.prototype = {"species":"犬科"}拿到的
	console.log(d1.species)
	拿到的值：犬科
	
	var d2 = new Dog();         # d2 继承的是完整的类，species的值是根据Dog.prototype = {"species":"犬科"}拿到的
	console.log(d2.species)
	拿到的值：犬科