js全了解

32 篇文章 0 订阅

1 JavaScript由3部分组成

  • ECMAScript:JavaScript的语法标准
  • DOM:JavaScript操作网页上的元素的API
  • BOM:JavaScript操作浏览器的部分功能的API

ECMA是一个组织,即欧洲计算机制造商协会
ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容
JavaScript是脚本语言的一种,所以JavaScript也必须遵守ECMAScript标准,包含ECMAScript标准中规定的基本内容

定义变量的目的

  • 在内存中分配一块存储空间给变量,方便以后存储数据。
//还可这么定义,如果定义后没有初始化,则undefined
var name, age, sex;
console.log(num); // undefined
//还可这么
var name;
name = "旋之华";

2 什么是标识符?
在JS中所有的可以由我们自主命名的都可以称为是标识符
比如变量名、函数名、属性名都属于标识符

js为解释型语言,区分大小写

这里写图片描述

数字类型(Number)

NaN 非法数字(Not A Number)
JS中当对数值进行计算时没有结果返回,则返回NaN

 var str = NaN;
 console.log(typeof str ); // number

Number类型注意点

 //  JS中整数的运算可以保证精确的结果
  var counter = 120 + 20;
  console.log(counter ); // 140
 //  在JS中浮点数的运算可能得到一个不精确的结果
  var counter = 100.1 + 20.1;
  console.log(counter ); // 120.200000000000003

非Number类型进行+运算时,会先转化成Number类型再运算,(String类型除外,运算会变成String类型)(当做-,*,/和%运算时,字符串也会转Number类型再进行运算,和+运算相反)

var res = 100;
console.log(true+res); //101

NaN做运算总得NaN

字符串类型(string)
字符串截取常用方法

布尔类型(Boolean)
布尔型只能够取真(true)和假(false)两种数值, 也代表1和0,实际运算中true=1,false=0

var bool = Boolean(0);
 console.log(bool ); // false
var bool = Boolean(1);
console.log(bool ); // true
var bool = Boolean(-1);
console.log(bool ); // true
var bool = Boolean("hello");
console.log(bool); // true
var bool = Boolean("");
console.log(bool ); // false
var bool = Boolean(undefined);
console.log(bool ); // false
var bool = Boolean(null);
console.log(bool8); // bool

Null和Undefined
Undefined这是一种比较特殊的类型,表示变量未赋值,这种类型只有一种值就是undefined
从语义上看null表示的是一个空的对象。所以使用typeof检查null会返回一个Object

toString()将其它类型的数据转换为字符串类型
任何数据和 + 连接到一起都会转换为字符串
Number()函数字符串 转 数字

parseInt()提取字符串中的整数
parseFloat()提取字符串中的小数
对非String使用parseInt()或parseFloat(), 会先将其转换为String然后在操作

js中==是值的比较,===即是值比较也有类型比较。

复合赋值运算符
+=,-=,/=,*=,%=

isNaN()判断是不是一个数字,是数字的话返回true

基本类型:Number,String,Boolean,Null,undefined。
引用类型:Object,Array,Date,RegExp,Function。
Object本质上是由一组无序的名值对组成的。

3 typeof 操作符
undefined ---------- 如果值未定义 Undefined
boolean ---------- 如果这个值是布尔值 Boolean
string ---------- 如果这个值是字符串 String
number ---------- 如果这个值是数值类型 Number
object ---------- 如果这个值是对象或null Object

ECMAScript5将Array.isArray()正式引入JavaScript,目的就是准确地检测一个值是否为数组。
检测是否为array的最佳写法

var arr = [1,2,3,1];  
var arr2 = [{ abac : 1, abc : 2 }];  
 
function isArrayFn(value){
	if (typeof Array.isArray === "function") {
		return Array.isArray(value);    
	}else{
		return Object.prototype.toString.call(value) === "[object Array]";    
	}
}
alert(isArrayFn(arr));// true 
alert(isArrayFn(arr2));// true 

4 引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?

存储在栈内存中的,主要是根据程序逻辑明确需要申请的内存,也就是在编译或者解析代码时就能知道这块内存是必须申请的。
而存储在堆内存中的,大多是动态申请的内存,也就是程序执行后才能知道这块内存是否需要申请的。

在Javascript中,复合数据类型都以对象的形式存在,而对象基本都是以new的方式申请内存的,所以基本上所有的复合数据都存储在堆内存中。注意,这里是指对象内的数据,而大部分的对象指针,也就是对象的引用,都是以栈内存的形式申请的。
这里写图片描述
注意:简单数据类型赋值是在栈,所以不会相互影响
复杂数据类型赋值是指针,栈变了,堆的地址还是没变,所以会互相影响
这里写图片描述
5 switch语句标准模板

var str = "123";
switch(str){   //switch匹配的是===全等,不是==。
	case 123:
		console.log("111");
		break;
	case "123":  //输出这个
		console.log("222");
		break;
	default:
		console.log("333");
		break;
}

6
break;作用1:跳出循环,2:跳出switch语句(也就只能放在这2个场景内,并且只是跳出1层,不是全部跳出)。
continue;只跳出当前循环中的一次循环,继续下一次!

7定义数组的2种方式

//1使用Array构造函数创建
var arr1 = new Array(); //此数组可放无限参数
var arr2 = new Array(10); //只能放10个
var arr3 = new Array("lxf",10,"1010");	//创建时接着初始化
//2使用字面量创建
var arr4 = []; //此数组可放无限参数
arr4.length = 100; //设定此数组长度为100
var arr5 = ["lxf",100,"dage"]; //创建时接着初始化
console.log(arr5[arr5.length-1]); //取数组最后一个值

遍历数组是一种叫法而已,for循环可以遍历数组

8将旧数组选些元素放进新数组2种方法可用(第二种很灵性)
arr5.push(arr[i]); //.push()方法
newArray[newArray.length] = arr[i]

9数组常用的方法
注意:数组和对象是相通的。

var arr5 = ["lxf",100,"dage"]; //创建时接着初始化
console.log(arr5.join()); //.join()方法把数组转字符串输出,不传参默认用,分割
//数组尾部处理
console.log(arr5.push("ff")); //.push()方法将参数存进数组的最后一位,并返回数组长度
console.log(arr5.pop()); //.pop()方法是把数组最后一位移除,并返回被移除的元素
//数组头部处理
console.log(arr5.unshift("小程序")); //.unshift()方法将参数存进数组的第一位,并返回数组长度
console.log(arr5.shift()); //.shift()方法是把数组第一位移除,并返回被移除的元素

console.log(arr.reverse()); //反轉數組

var bb =  arr5.concat("xx"); //可合并2个数组,也可以copy数组后添加元素到数组末尾,不影响之前的数组,只是copy一个新的数组
console.log(bb); //返回添加后的新数组

var cc = arr.indexOf(11); //.indexOf();从前面开始查找,可放2个参数,第一个是要查找的元素,第二个是从第几个元素开始,返回在数组的位置。
var dd = arr.lastIndexOf(11); //.lastIndexOf();从后面开始查找,可放2个参数,第一个是要查找的元素,第二个是从第几个元素开始,返回在数组的位置。

//数组的常用方法二
			arr = [10,-10,2,99,63];
			console.log(arr.sort()); //默认升序
			console.log(arr.sort(function(a,b){  //降序写法
				return b - a;
			}));
			
			console.log(arr.slice(2)); //截取数组,返回一个新数组,可传2个,一个头,一个尾部,不含尾数的下标,
			console.log(arr.slice(-1));//可传负数,此例子表示从总数-1开始截取到尾部,即从下标3开始!
			
			console.log(arr.splice(0,3));//返回删除的元素,第一个参数表删除开始位置,第二个参数表删除的个数。
			//arr.splice(0); //清空数组= arr = [];
			arr.forEach(function(value,index){  //遍历数组,标准写法
				console.log(index + ":" + value);
			});
			var arr2 = arr.map(function(value,index){ //映射,对数组中每一项都给定函数,返回每次函数调用的结果组成的数组。
				return value;
			});
			console.log(arr2);
			var arr3 = arr.filter(function(value,index){ //过滤器,返回过滤成功后的数组
				return value % 2 === 0;
			});
			console.log(arr3);

10js的延迟函数self.setInterval()
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

					  console.log(res);
			          this.disable001 = true;
			          //self.setInterval会先延迟1个时间单位,此例子1s,所以要先控制
			          var aaa = 60;
			          this.verification = "重新发送(" + aaa + ")";
			          aaa--;
			          var int = self.setInterval(()=>{
			          	if(aaa == 0){
			          		this.disable001 = false;
			          		this.verification = "重新发送";
			          		clearInterval(int);
			          	}else{
			          		this.verification = "重新发送(" + aaa + ")";
			          		aaa--;
			          	}
			          },1000)

11函数
注意:函数的祖宗就是一个Object对象

			//函数的3种声明方式(常用前面2种)
			//函数声明方式
			function log(a,b){ //方法体的参数叫形参
				console.log(a+b);
			}
			//函数表达式声明方式
			var add = function(){
				console.log(1+3);
			}
			//使用Function构造函数
			var  add2 = new Function("console.log(1+3);");
			//函数调用
			log(100,200);  //调用方法里的参数叫实参
			add();
			add2();

//arguments对象,也是一种伪数组
			function sum(){ //可不加任何形参也可以调用
				var value = 0;
				for (let i = 0;i<arguments.length;i++) { 
					value += arguments[i]; //arguments指所有形参的类似数组的集合对象。
				}
				console.log(value);
				console.log(sum.length); //能够输出形参的数量,此例子输出0;
			}
			
			sum(100,200,300,400);
//函数内return,规则是要返回时采用,尽量不用return;返回空的方法,函数不包return默认返回underfined
			return num1+num2; //返回后面跟着的,并且下面的语句都不起作用

匿名函数的3大作用
这里写图片描述

//回调函数demo
				function fn(num1,num2,doType){ //doType作为回调用函数
					return doType(num1,num2);
				}
				function add(num1,num2){
					return num1 + num2;
				}
				console.log(fn(1,2,add)); //add为函数名,add()为运行add函数

//递归就是一种回调函数  fibonacci数列
				function fn(n){
					if(n === 1||n === 2){
						return 1;
					}
					return fn(n - 1) + fn(n - 2);
				}
				console.log(fn(100));
//递归 求1+2+3+4...的n和
				function sum(n){
					if(1 === n) return 1;
					return n + sum(n-1);
				}
				console.log(sum(4));

凡是能产生对象的函数就是构造函数

//构造函数,旧版方法,不推荐
				function Person(){  //构造函数名通常用大写开头表示
					var obj = new Object(); //创建一个新对象
					obj.name = null;
					obj.age = null;
					obj.sex = null;
					obj.study = function(){
						console.log(this.name + "正在学习");
					};
					obj.sleep = function(){
						console.log(this.name + "正在睡觉");
					};
					return obj; //别忘了返回对象
				}
				var p = Person();
				p.name = "lxf";
				p.age = 19;
				p.sex = "男";
				console.log(p);

//构造函数,新版方法,不推荐,应该把参数变成字面量对象传入,就可以传进无数个参数
				function Dog(name,age,dogFriend){
					this.name = name;
					this.age = age;
					this.dogFriend = dogFriend;
					this.eat = function(someThing){
						console.log(this.name + "在吃" + someThing);
					}
				}
				var smallDog = new Dog("笑话",18,["big","small"]);
				console.log(smallDog);
				smallDog.eat("巧克力");
				
//构造函数,新版方法升级版,推荐使用对象字面量构建构造函数
				function Dog(option){
					this.name = option.name;
					this.age = option.age;
					this.dogFriend = option.dogFriend;
					this.eat = function(someThing){
						console.log(this.name + "在吃" + someThing);
					}
				}
				var smallDog = new Dog({name:"笑话",age:18,dogFriend:["big","small"]});
				console.log(smallDog);
				smallDog.eat("巧克力");
				
//终极方法,推荐
			function Dog(option){ 
                    this._init(option);
                }
			
			Dog.prototype = {  //用这种方法是为了只保存一份,减少的内存使用,上面的方法都是每创建一个对象就会产生多一份对象属性和方法
				_init:function(option){  //init加_是为了区分构造函数原有的init
					this.name = option.name;
                    this.age = option.age;
                    this.dogFriend = option.dogFriend;
				},
				eat:function(someThing){
                     console.log(this.name + "在吃" + someThing);
                }
			}
			
            var smallDog = new Dog({name:"笑话",age:18,dogFriend:["big","small"]});
            console.log(smallDog);
            smallDog.eat("巧克力");

//构造器(constructor)和原型属性(prototype)
			Array.prototype.test = "测试";  //向构造函数添加属性
			Array.prototype.eat = function(){  向构造函数添加方法
				console.log("吃");
			}
			console.log(arr1.constructor); //返回对象的构造函数

12 Math函数

Math.min(10,100);//返回最小值
Math.max();//返回最大值

13
js区分局部变量和全局变量:函数内定义的变量为局部变量,其它为全局变量。
注意:name=“lxf”;没有加var就是设置全局变量,不推荐使用,即使在函数内这样定义也是全局变量

				{
					var age = 15;
				}
				console.log(age); //仍然会输出,因为是在{}而不是函数内定义的

这里写图片描述
第一:会输出num为underfined(如果函数内有相同的变量会定义提前(var name;),赋值则保留原位置(name = 20));
第二: a为underfined,b为9
第三:a = 9,b = 9,c = 9,c = 9,b = 9,a报错未定义(因为var a = b = c = 9;实际为var a = 9;b = 9;c = 9;b和c都为全局变量,a为局部变量)

14对象
这里写图片描述
对象内的属性叫对象属性,对象内的方法叫对象方法
这里写图片描述
修改对象内属性和方法用 = ;
如dog.name = “张三”;
dog.eat = function(){console.log(1111)};
json是对象的子集,但又有不同
这里写图片描述
用for…in遍历对象的属性或者方法

				var dog = {
					name:"张三",
					age:12,
					eat:function(){
						console.log("eat");
					}
				}
				dog.eat();//调用对象方法
				for(var key in dog){  //用for循环遍历不了对象,要用for in方法遍历
					console.log(key); //key
					console.log(dog[key]); //value
				}

什么是对象字面量?

对象字面量就是创建对象的一种简单容易阅读的方法。如下创建了一个对象。

var obj = {
a:'aaa',//a是属性,'aaa'是属性值
b:'bbb',
c:'ccc'
}
obj.a//"aaa"

obj['a']//"aaa"
js标准创建对象的方式要用new

var obj=new Object()
obj.a='aaa';
obj.b='bbb'
obj.c='ccc'

obj.c//"ccc"
obj['c']//"ccc"

现在1%数据传输用xml格式传输,99%用json //2个xml相当于{}
这里写图片描述

15this
这里写图片描述

16BOM的window对象
这里写图片描述

				var a = 1;
				console.log(window.a); //所有全局变量都是window的属性
				function b(){
					console.log(111);
				}
				window.b();  //所有全局函数都是window的方法
				
				console.log(window.document); //输出页面

17DOM
这里写图片描述

18 获取事件源和绑定事件

		<button  name="btns" id="but" class="but">点我</button>
		<script>
			//可形成异步,等页面加载完再调用
			window.onload =function(){
				//获取事件源的方式。//这种方法ducument可换任意标签名,如ul什么的,或其它之前定义过的变量。
				//var btn1 = document.getElementById("but"); //id选择器拿到
				//var btn1 = document.getElementsByClassName("but")[0]; //类拿到会返回一个数组对象
				//var btn1 = document.getElementsByTagName("button")[0]; //标签拿到也会返回一个数组对象
				//var btn1 = document.getElementsByName("btns")[0]; //name拿到也会返回一个数组对象
				//var btn1 = document.querySelector("#but");  //类,name,id都可以传进去获取,注意:只返回以一个事件源
				var btn1 = document.querySelectorAll("#but")[0]; //可查所有,返回一个数组对象
				console.log(btn1);
				//js事件绑定都有on开头。
//				btn1.onclick = function(){
//					console.log(111);
//				};
				//效果同上
				btn1.onclick = btns;
				function btns(){
					console.log(111);
				}
			}
		</script>

事件绑定demo2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style>
			.div1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="div1">111</div>
		<script>
			var div1 = document.querySelector(".div1");
			console.log(div1);
			div1.onmouseover = function(){	   //鼠标进入
				console.log(111);
			}
			div1.onmouseout = function(){		//鼠标出去
				console.log(222);
			}
			div1.onmousemove = function(){		//鼠标在内移动
				console.log(333);
			}
		</script>
	</body>
</html>

19节点的操作和节点属性的增删改查

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		</style>
	</head>
	<body>
		<div id="box">
			<button id="btn" class="btn">按钮</button>
			<span id="span">
				<div>上一个</div>
				<a href="#">百度一下</a>
				<div>下一个</div>
			</span>
		</div>
		<script>
			//dom访问的关系
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					var a = document.getElementsByTagName("a")[0];
					var b = a.parentNode.parentNode; //获取父节点,可连着使用
					var c = a.nextElementSibling || a.nextSibling;  //获取下一个兄弟节点,用2个是为了适配ie678...
					var d = a.previousElementSibling || a.previousSibling; //获取上一个兄弟节点,用2个是为了适配ie678...
					console.log(d);
					b.style.backgroundColor = "red";  //修改节点的样式属性
				}
				var baseNode = btn.nextElementSibling || btn.nextSibling;
				var firstNode = baseNode.firstElementChild || baseNode.firstChild;  //获取第一个子节点
				var lastNode = baseNode.lastElementChild || baseNode.lastChild;  //获取最后一个子节点
				var childList = baseNode.children;  //获取所有子节点
				var child1 = baseNode.children[1];  //获取第几个子节点
				console.log(child1);
				
				//增删改查节点
				var box2 = document.createElement("div");
				box2.innerHTML = "最尾部";
				
				var box3 = document.createElement("div");
				box3.innerHTML = "确定了某位置";
				//增的2种方法
				baseNode.appendChild(box2);  //在此节点的子节点最尾部添加
				baseNode.insertBefore(box3,child1); //在baseNode节点下的child1节点前面插入box3节点
				//删的2种方法
				baseNode.removeChild(box2); //删除baseNode节点下的box2节点
				box3.remove(); //box3节点自杀
				//节点的复制
				var box = document.querySelector("#box");
				console.log(box);
				var box1 = box.cloneNode(true);  //false表浅复制,只复制本节点,true表深复制,会复制本节点的所有子节点
				document.body.appendChild(box1); 
				
				//节点的属性操作
				//1获取节点属性值.getAttribute();
				var a = document.getElementsByTagName("a")[0];
				console.log(a.href);		//.语法会获取完整的路径
				console.log(a.getAttribute("href"));  //.getAttribute()获取写什么就得什么
				//2修改节点属性值.setAttribute("href","#imgs");第一个参数属性名,第二个是修改后的值
				a.setAttribute("href","#imgs");
				console.log(a.getAttribute("href"));
				//3删除节点属性 .removeAttribute("href");
				a.removeAttribute("href");
				console.log(a);
			}
		</script>
	</body>
</html>

20 修改节点值

		<div id="box">
			<input value="111" />
			<span>222</span>
		</div>

		window.onload = function(){
				var child1 = document.getElementById("box").children[0];
				var child2 = document.getElementById("box").children[1];
				//修改dom值的3个方法
				child1.value = "修改后的111";  //修改输入类标签自带的value属性
				child2.innerHTML = "修改后的222";	//修改标签和内容
				child2.innerText = "222innertext";	//修改内容
				
				console.log(document.head); //输出文档头部
				console.log(document.body); //输出文档body
				console.log(document.title); //输出文档标题
			}

注意:

1JS克隆数组和对象(不指向同一内存)

//vue内调用方法
let resData2 = this.copy(resData);

//vue项目的methods内创建方法
copy(obj){
  		//[]返回一个数组,要返回一个对象则var newobj = {};
	    var newobj = [];
	    for ( var attr in obj) {
	        newobj[attr] = obj[attr];
	    }
	    return newobj;
},

以后写代码,将只包含1句表达式的if(){}else{}用三目运算符来代替,代码简洁!
if()小括号内变量与常量比较时尽量把变量写后面:if(10>a){…}能规避不必要的错误,因为计算机是从右到左运算的

2等页面加载后再调用js的内容写法

			window.onload =function(){
				...代码
			}

3return false; //可阻值a标签的跳转

return false; //可阻值a标签的跳转

4 移入时的鼠标指针变化

<body>
<p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p>
<span style="cursor:auto">    
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">		<!--一只手-->
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">		<!--向右标签-->
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">		<!--向左标签-->
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">		<!--问号标签-->
help</span>
</body>

5css
list-style:none;去掉list前面的.或者序号(1,2,3)

6判断是否空数组用length来判断

7js获取当前域名
有2种方法
1var domain = document.domain;
2var domain = window.location.host;
获取当前Url
var url = window.location.href;
更多请看
https://www.cnblogs.com/wangdahai/p/6221399.html

8a标签打电话

<a href="tel:13828172679">13622178579</a>

9回調函数获取异步方法数据

function getData(callback) {
    //相对于在函数内部赋值给方法,callback(name);调用callback方法
    // var callback = (data)=>{
    //     console.log(data+"打弹珠");
    // }
    //模拟异步
    setTimeout(()=>{
        let name="张三";
        callback(name);
    },1000);
}
getData((data)=>{
    console.log(data+"打弹珠");
});

html事件
http://www.w3school.com.cn/tags/html_ref_eventattributes.asp

typeof拿到的是原型链的顶级(如Array类型typeof是object)
instanceof对比原型链任何一个环节都可以(如Array或object类型)

		 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。
		const arr = [1, 2, 3, 4, 5];
		const squares = arr.map((x)=>{
			return x * x;
		});
		console.log(squares); //[1, 4, 9, 16, 25]
			const string = 'food';
			const substring = 'foo';
			console.log(string.includes(substring)); // true 判断是否存在某字符串
			console.log('meow'.repeat(3)); //meowmeowmeow 重复3次
			
			//Template Literals 使用 字符串模板字面量,我可以在字符串中直接使用特殊字符,而不用转义。
			const name = 'Tiger';
			const age = 13;

			console.log(`My cat is named ${name} and is ${age} years old.`);
			//字符串模板字面量 内部可以使用表达式


		//解构赋值
		let luke = { occupation: 'jedi', father: 'anakin' };
			let {occupation, father} = luke;
			console.log(occupation); // 'jedi'
			console.log(father); // 'anakin'


function addTwoNumbers(x=0, y=0) {
    return x + y;
}
console.log(addTwoNumbers(2, 4)); //6
console.log(addTwoNumbers(2)); //2
console.log(addTwoNumbers()); //0

function addTwoNumbers(x=0, y=0) {
    return x + y;
}
console.log(addTwoNumbers(2, 4)); //6
console.log(addTwoNumbers(2)); //2
console.log(addTwoNumbers()); //0

//我们可以利用展开操作符(Spread Operator)来把一组数组的值,当作参数传入
console.log(Math.max(...[-1, 100, 9001, -32]));

class Person {
    constructor(name, age, gender) {
        this.name   = name;
        this.age    = age;
        this.gender = gender;
    }

    incrementAge() {
      this.age += 1;
    }
}

// //继承父类的子类只要简单的使用 extends 关键字就可以了
class Personal extends Person {
    constructor(name, age, gender, occupation, hobby) {
        super(name, age, gender);
        this.occupation = occupation;
        this.hobby = hobby;
    }

    incrementAge() {
        super.incrementAge();
        this.age += 20;
        console.log(this.age);
    }
}

//Maps 是一个Javascript中很重要(迫切需要)的数据结构。
//Maps 让我们使用 set,get 和 search 操作数据。
let map = new Map();
map.set('name', 'david');
console.log(map.get('name')); // david
console.log(map.has('name')); // true

//Maps最强大的地方在于我们不必只能使用字符串来做key了,现在可以使用任何类型来当作key,而且key不会被强制类型转换为字符串。
let map = new Map([
    ['name', 'david'],
    [true, 'false'],
    [1, 'one'],
    [{}, 'object'],
    [function () {}, 'function']
]);

for (let key of map.keys()) {
    console.log(typeof key);
    // > string, boolean, number, object, function
}

//利用Generator函数的暂停执行的效果,可以把异步操作写在yield语句里面,等到调用next方法时再往后执行。这实际上等同于不需要写回调函数了,因为异步操作的后续操作可以放在yield语句下面,反正要等到调用next方法时再执行。所以,Generator函数的一个重要实际意义就是用来处理异步操作,改写回调函数。
//下面代码是一个使用generators函数的简单例子
function* sillyGenerator() {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
}

var generator = sillyGenerator();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: 4, done: false }

//此案例适用于nodejs
var request = require('request');

function getJSON(url) {
  return new Promise(function(resolve, reject) {
    request(url, function(error, response, body) {
      resolve(body);
    });
  });
}

async function main() {
  var data = await getJSON();
  console.log(data); // NOT undefined!
}

main();


//它们看上去和Generators很像。我(作者)强烈推荐使用 async await 来替代Generators + Promises的写法。

//就像上面的例子,当next运行时,它会把我们的generator向前“推动”,同时执行新的表达式。
			
// 			let hash = hex_md5("input string");
// 			console.log(hash);
该Object.freeze()方法冻结了一个对象。无法再更改冻结对象; 冻结对象可防止将新属性添加到其中,从而删除现有属性,防止更改现有属性的可枚举性,可配置性或可写性,并防止更改现有属性的值。此外,冻结对象还可以防止其原型被更改。freeze()返回传入的同一对象。

const object1 = {
  property1: 42
};

const object2 = Object.freeze(object1);

object2.property1 = 33;
// Throws an error in strict mode

console.log(object2.property1);
// expected output: 42

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
encodeURIComponent(URIstring)
decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
decodeURIComponent(URIstring)

var PI = 3.1456789
console.log(PI.toFixed(2));//获取四舍五入后保留2位小数的值
返回id为item1 元素父节点:

document.getElementById("item1").parentNode;

在这里插入图片描述

在这里插入图片描述
在某元素中插入文案
$(‘top’).innerText = …

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
防止定时器累加
在这里插入图片描述
一次定时器setTimeout(function(){},20)
在这里插入图片描述

Math.random()产生一个[0,1)之间的随机数。

		//1获取屏幕的尺寸
			var screenW = document.documentElement.clientWidth;
			var screenH = document.documentElement.clientHeight;
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值