JavaScript23年随笔之零碎知识

最新推荐文章于 2024-10-04 00:46:18 发布

xzal12

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量136

点赞数 1

分类专栏： Javascript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/xzal12/article/details/129317803

版权

Javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、document.write()

①html输出流：eg：<h1>这是一个标题</h1>

文本流：document.write();

把html输出流写到文本流里：document.write("<h1>这是一个标题</h1>");

document.write() 方法可向文档写入文本内容，可以是 HTML 代码。

自我技巧：document.write() 相当于输出语句

②如果页面已载入，将覆盖整个 HTML 文档。

2、document.open()覆盖整个 HTML 文档

document.open();打开文档并删除已经存在的内容

配合使用：document.open(); document.write("<h1>Hello World</h1>"); document.close();

//输出Hello World

3、获取元素值

var x=document.getElementById("demo").value

4、字面量（literal）

是用于表达源代码中一个固定值的表示法

自我技巧：字面量=固定值

5、函数，有返回值，配套使用

6、JavaScript 对大小写是敏感的。

7、JavaScript 会忽略多余的空格

8、for..in return

for ... in 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。

return 退出函数

9、文本字符串中使用反斜杠对代码行进行换行。

10、const 关键字，表示一个常量

11、★★★一条语句，多个变量

用逗号分隔变量 eg：var lastname="Doe", age=30, job="carpenter";

注意：一条语句中声明的多个变量不可以同时赋同一个值:

错误：var x,y,z=1; //x,y 为 undefined， z 为 1。

注意：正确：var aa=bb=1;可以这样

12、Undefined 这个值表示变量不含有值，即未赋值

13、new声明新变量

当您声明新变量时，可以使用关键词 "new" 来声明其类型：

eg:var carname=new String;

eg:var firstName = new String("John")

但最好不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

14、★★★创建对象的方法：

你可以使用以下语法创建对象方法：

methodName : function() {
    // 代码 
}

区别：定义函数的方法：

function getValue(){
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}

15、函数的参数

function myFunction(name,job){
alert("Welcome " + name + ", the " + job);
}

注意：参数就写变量名，不用var变量名了

16、未声明的赋值变量

①如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。
carname=1; // 没有使用 var 声明，可配置全局属性，全局为window
将声明 window 的一个属性 carname，即window.carname=1
console.log(window.carname); // 1
②非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。
console.log(delete carname); // true
console.log(carname); // 已经删除报错变量未定义

17、字符串对象属性和方法：

字符串prototype属性可以给对象添加属性和属性值

eg：给对象employee添加属性salary和属性值null —— employee.prototype.salary=null;

方法	描述
charAt()	返回在指定位置的字符。
concat()	连接两个或更多字符串，并返回新的字符串。
endsWith()	判断当前字符串是否是以指定的子字符串结尾的（区分大小写）——返回布尔值
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
includes()	查找字符串中是否包含指定的子字符串。
lastIndexOf()	从后向前搜索字符串，并从起始位置（0)(即前面）开始计算返回字符串最后出现的位置。
match()	查找找到一个或多个正则表达式的匹配。
repeat(次数)	复制字符串指定次数，并将它们连接在一起返回。——返回次数个字符串
replace(str1查找,str2替换)	在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。(一次)
replaceAll()	在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。
search()	查找与正则表达式相匹配的值。——返回位置
slice(开始索引，结束索引)	提取字符串的片断，并在新的字符串中返回被提取的部分。
split(“分隔符”)	把字符串分割为字符串数组。
startsWith()	查看字符串是否以指定的子字符串开头。——返回布尔值
substr(开始位置，数目)	从起始索引号提取字符串中指定数目的字符。
substring(开始索引，结束索引)	提取字符串中两个指定的索引号之间的字符。——提取的字符串不包括结束索引的字符
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
trim()	去除字符串两边的空白。
valueOf()	返回某个字符串对象的原始值。——后台调试用
toString()	返回一个字符串。

18、转换成数字类型之隐式算法 - * /

console.log('101'-'100')与console.log('101'-100)效果一样 //输出1

console.log('101' * 1) //101

19、不能拿两个浮点型进行比较是否相等

20、数组转换成字符串toString：

eg：myVar = [1,2,3,4] // toString 转换为 "1,2,3,4"

21、let定义变量

ES6 可以使用 let 关键字来实现块级作用域。

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

使用 let 关键字声明的全局作用域变量不属于 window 对象。

在相同的作用域或块级作用域中，不能使用 let 关键字来重置 var 关键字声明的变量。

在相同的作用域或块级作用域中，不能使用 let 关键字来重置 let 关键字声明的变量。

let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的。

————————————————————————————————

JavaScript 中，var 关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明（JavaScript 变量提升）。

let 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用。

22、const定义常量

const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改。

let大致功能与const类似。

注意：const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。这里的可变指的是对象.属性改，而不是对象改，同理数组[下标]改，而不是数组名改。

// 创建常量对象

const car = {type:"Fiat", model:"500", color:"white"};

// 修改属性

car.color = "red";

// 添加属性

car.owner = "Johnson";

23、let与const的区别

const 声明的常量必须初始化，而let 声明的变量不用

const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。

24、★★★JSON

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据。

函数	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

<p id="demo"></p>
<script>
var text = '{ "sites" : [' +
   '{ "name":"Runoob" , "url":"www.runoob.com" },' +
   '{ "name":"Google" , "url":"www.google.com" },' +
   '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

obj = JSON.parse(text);//把JSON字符串转换成JS对象
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
</script>

25、void和href=“#”

void 指定要计算一个表达式但是不返回值。

javascript:void(0)=void(0)=0=没有任何效果。

href="#" 即默认#top网页的上端。

href="#spm" id=“spm” 即#+id表示到达的具体位置。

如果你要定义一个死链接请使用 javascript:void(0) 。

26、异步编程回调函数

①公式：setTimeout(回调函数，等待的毫秒数)

//子线程执行

setTimeout(function () {

document.getElementById("demo1").innerHTML="RUNOOB-1!";

}, 3000);

//主线程执行

document.getElementById("demo2").innerHTML="RUNOOB-2!";

②异步 AJAX

27、get set方法：使用直接名，不加小括号（特殊）

类中我们可以使用 getter 和 setter 来获取和设置属性值，类中添加 getter 和 setter 使用的是 get 和 set 关键字。

get/set访问器不是对象的属性，而是属性的特性，特性只有内部才用访问，需要直接get/set的名字不加小括号，因此在javaScript中不能直接访问他们，需要直接get/set的名字不加小括号。

注意：getter/setter 只是一个说法，其实写代码没有体现getter/setter的书写，只用get、set关键字来书写代码。

函数声明会提升，类声明不会。

class Runoob {

constructor(name) {

this._sitename = name;

}

get sitename() {

return this._sitename;

} set sitename(x) {

this._sitename = x;

}

}

let noob = new Runoob("练习");

document.getElementById("demo").innerHTML = noob.sitename;

注意：属性名称前使用下划线字符 _ 将 getter/setter 与实际属性分开。

注意：使用get、set方法时get/set的名字不加小括号

28、类中的静态方法

静态方法不能在对象上调用，只能在类中调用。

案例：

设hello为类中的静态方法，Runoob为类名，noob为类的实例化对象

// 可以在类中调用 'hello()' 方法

document.getElementById("demo").innerHTML = Runoob.hello();

// 不能通过实例化后的对象调用静态方法

// document.getElementById("demo").innerHTML = noob.hello();

// 以上代码会报错

29、HTML DOM

document.getElementById("p1")返回的是对象，位置类似于element

①修改HTML内容：document.getElementById("p1").innerHTML="新文本!";

②修改属性值：

公式：document.getElementById("image").属性=新的属性值；

eg：document.getElementById("image").src="landscape.jpg";

③改变 HTML 元素的样式(改变CSS)：

document.getElementById(id).style.属性=属性值；

eg：给按钮添加以下语句事件，达到点击按钮，显示<p1>内容和隐藏<p1>内容

document.getElementById('p1').style.visibility='hidden'；//隐藏元素<p1>

document.getElementById('p1').style.visibility='visible'；//显示元素<p1>

④事件：

onload 和 onunload 事件会在用户进入或离开页面时被触发。

⑤监听事件：

（向DOM 对象和HTML对象添加监听事件）

公式：element.addEventListener(event, function, useCapture);

参数：

第一个参数是事件的类型 (如 "click" 或 "mousedown").

注意:不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

事件传递有两种方式：冒泡与捕获

事件传递定义了元素事件触发的顺序。如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。

注意：向同一个元素添加多个事件，不会覆盖已存在的事件。

使用匿名函数来调用带参数的函数：

element.addEventListener("click", function(){ myFunction(p1, p2); });

移除监听事件：

document.getElementById("myDIV").removeEventListener("mousemove", myFunction);//第一个参数为添加监听事件的事件名，第二个参数为移除监听事件的函数。

30、HTML DOM 元素 (节点)

前提：创建节点：创建元素，创建文本节点，最后把文本节点用appendChild添加到元素中

①添加节点：appendChild();

首先创建节点，再找到父节点，往父节点中添加节点；

②添加节点：insertBefore()；

首先创建节点，再找到父节点，找到子节点，在父节点中把新建的节点插入到子节点前；

③移除节点：removeChild()

首先找到父节点，在找到要删除的节点，在父节点中删除节点；

④替换节点：replaceChild()

首先创建节点，找到父节点，找到子节点，在父节点中用新建的节点替换子节点；

31、HTML DOM Collection（HTML元素集合）和NodeList（节点列表）

返回HTML Collection对象：getElementsByTagName() 。

返回NodeList对象：getElementsByClassName()，childNodes属性，querySelectorAll()。

querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素。

相同点：

都不是数组，只是类似于数组；

都可以用索引来获取元素；

都可以用length属性遍历；

都不能用数组的方法： valueOf(), pop(), push(), 或 join() 等；

区别：

①Collection 是 HTML 元素的集合；NodeList 是一个文档节点的集合。

②Collection 元素可以通过 name，id 或索引来获取；NodeList 只能通过索引来获取。

③只有 NodeList 对象有包含属性节点和文本节点。

32、对象和prototype（原型对象）

对象就是一个有属性和方法的特殊数据类型；任何事物都可以是对象。

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。

prototype（原型对象）是一个属性。

通常对象构造函数已经创建了，就不可以在添加新的属性和方法了，但是可以使用 prototype 属性来给对象的构造函数添加新的属性和方法：

Person.prototype.nationality = "English";//构造函数名.prototype.属性=属性值；

33、DOM（浏览器window的操作）

①window.innerHeight - 浏览器窗口的内部高度(包括滚动条)

window.moveTo() - 移动当前窗口

window.resizeTo() - 调整当前窗口的尺寸

②screen——（省window ）

screen.availWidth - 可用的屏幕宽度（不包括任务栏）

③location——（省window ）

location.hostname 返回 web 主机的域名

location.pathname 返回当前页面的路径和文件名：eg：/js/js-window-location.html

location.port 返回 web 主机的端口（80 或 443）

location.protocol 返回所使用的 web 协议（http: 或 https:）

location.href 属性返回当前页面的地址（URL=网址）

location.assign("https://www.runoob.com") 加载网址

④history——（省window ）

history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击向前按钮相同

⑤navigator 有关访问者浏览器的信息——（省window ）

注意：不应该被用于检测浏览器版本

⑥弹窗（三种消息框：警告框、确认框、提示框）——（省window ）

警告框alert("sometext")：

确认框confirm("sometext")：点击“确定”，返回true；点击“取消”，返回false

提示框：prompt("请输入你的名字","Harry Potter");

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

⑦计时事件

setInterval(函数，毫秒数) - 间隔指定的毫秒数不停地执行指定的代码。

★★★★实现时钟走动：

<p>在页面显示一个时钟，并且每一秒变一下</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
   var d=new Date();
   var t=d.toLocaleTimeString();
   document.getElementById("demo").innerHTML=t;
}
</script>

clearInterval(...) 方法用于停止 setInterval() 方法执行的函数代码

var myVar=setInterval(function(){myTimer()},1000);

clearInterval(myVar);

setTimeout(JavaScript 语句的字符串或函数，从当前起多少毫秒后执行第一个参数) - 在指定的毫秒数后执行指定代码。

clearTimeout(...) 方法用于停止执行setTimeout()方法的函数代码

34、Cookie

(1)Cookie的介绍：

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

当浏览器从服务器上请求 web 页面时，属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

(2)Cookie 以名/值对形式存储，如下所示:

username=John Doe

(3)★★★★document.cookie 属性来创建、读取、及删除 cookie

①创建cookie：

②读取cookie：

var x = document.cookie；

③修改cookie，即再创建一个cookie来把旧的cookie覆盖

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

④删除 cookie ，只需要设置 expires 参数为以前的时间即可

⑤注意：新旧cookie

如果您设置了新的 cookie，旧的 cookie 不会被覆盖。新 cookie 将添加到 document.cookie 中，所以如果您重新读取document.cookie，您将获得如下所示的数据：

cookie1=value; cookie2=value;

⑥★★★★cookie实操：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cookie的练习</title>
</head>
<head>
<script>
//如果没有cookie，则设置cookie
//eg :设置cookie为username=里，30天后cookie删除，
//则cname为username，cvalue为里，exdays为30
function setCookie(cname,cvalue,exdays){
	var d = new Date();
	d.setTime(d.getTime()+(exdays*24*60*60*1000));
	var expires = "expires="+d.toGMTString();
	document.cookie = cname+"="+cvalue+"; "+expires;
}
//如果有cookie，则获取cookie
function getCookie(cname){
	var name = cname + "=";
	var ca = document.cookie.split(';');
	for(var i=0; i<ca.length; i++) {
		var c = ca[i].trim();
        //如果name=c，则返回cname？
		if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
	}
	return "";
}
//询问这个人是否来过
function checkCookie(){
	var user=getCookie("username");
    //是否有username字段的这个人来过
    //如果来过，则欢迎这个人再次访问
	if (user!=""){
		alert("欢迎 " + user + " 再次访问");
	}
    //如果没有，则输入这个人的名字为里，并把这个人的username=里，30天后cookie删除的信息存到 
    //cookie中
	else {
		user = prompt("请输入你的名字:","");
  		if (user!="" && user!=null){
    		setCookie("username",user,30);
    	}
	}
}
</script>
</head>
//一进页面，询问这个人是否来过
<body onload="checkCookie()"></body>
	
</html>