JS入门笔记

幼稚园园长

消息发布于：2022年8月17日

本页文档最后更新于：2024年5月20日

废档

此文为废档

点击查看

变量

var

var 声明全局或函数级别作用域的变量

var a;
var b = "123";
var c = 0, d = 1;

// 解构
var li = [1,2,3,4];
var [n1,n2,n3,n4,n5] = li;
console.log(n1,n2,n3,n4,n5)

>>> 1 2 3 4 undefined

let

let 声明块级别作用域的变量

// 申明同var

在块级作用域中申明的变量，在外不能访问到

{
    let a = 123;
}
console.log(a)  //报错

>>> Uncaught ReferenceError: f is not defined

相同作用域下不能用let重置

let a = 1;
let a = 2; //不合法

>>> Uncaught SyntaxError: Identifier 'a' has already been declared

const

const 在块级作用域声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改，与let一样不能重置变量

1 2	const a = 666; const a = 777; //报错

但其实const申明的对象可以被修改

const a = [1,2,3]
a[0] = 0;
console.log(a)
>>> [0,2,3]

变量提升

函数和变量的声明都将被提升到函数的最前面

1
2
3

a = 0;
console.log(a);
var a;

函数申明形式创建的函数，在执行前会被创建

函数表达式不会被提前

fun();
function fun(){
    console.log(666);
}
>>> 666

fun2();
var fun2 = function(){
    console.log(777);
}
>>>Uncaught TypeError: fun2 is not a function

数据类型

typeof 用于检查类型

String

Number

console.log(Number.MAX_VALUE)  // js可以表示的最大值,大于其则返回 Infinity
>>> 1.7976931348623157e+308
console.log(Number.MIN_VALUE)  // js可以表示的最小正值
5e-324

Infinity 正无穷

-Infinity负无穷

NaN not a number

浮点型运算结果可能不精确

Boolean

Null

null空对象

Undefined

undefine 未定义

Object

类型转换

var a = 123;
a = a.toString();  // null 和 undefined 没有这个方法

a = String(a);

a = a + "";

var a = "123";
a = Number(a); // 123

var b = "12abc";
b = Number(b); // NaN

var c = null;
c = Number(c); // 0


var a = "100px"
var b = parseInt(a) // 100 

var a = "0.5em"
var b = parseFloat(b) // 0.5

0、NaN、""、null、undefined 被转为false

1
2
3

var a = 0;
a = Boolean(a); // false
a = !!a  // 使用两次非运算将其转为布尔值

其他

16进制： 0x10

8进制： 010 ，有些浏览器当做10进制

2进制：0b10 ，兼容性差

Unicode: \u100 (网页中使用⚀)

运算符

算术运算符

+ - * / %

一元运算符

-a +a

自增自减

a++ 原值，++a新值

逻辑运算符

！ 非

1 2	var a = true; a = !a; // false

&& 与

||或

赋值运算符

a += 1;……

关系运算符

比较字符串数字一定要转型

相等运算符

== ===

条件运算符

条件表达式？语句1:语句2;

true执行1，false执行2

运算符优先级

…

循环判断

if

if(){
   ...;
}else if(){
   ...;
}

switch

if(a == 1){
    ...;
}else if(a == 2){
    ...;
}


switch(a == 1){
    case 1:
        ...;
    case 2:
        ...;
    default:
        ...;
        break;
        
}

while

while(){
    
}

// 死循环
while(true){
    
}

for

for(var a=1; a<10; a++){
    ...;
}

// 死循环
for(;;){
    
}

// label
name_test:
for(;;){
    break name_test;
}

对象 Object

内建对象

ES标准定义的对象

function Math String …….

宿主对象

浏览器提供的对象

BOM、DOM里的对象

window

常用属性

document

文档对象
console
location

地址对象，读取网页链接或控制跳转
localStorage

本地储存
screen

获取屏幕分辨率
scrollX、scrollY

X、Y滚动条位置

常用方法

alert
confirm
blur

将焦点移出当前窗口
close

关闭窗口
eval

执行字符串形式的js语句
focus

激活当前窗口
open

打开新窗口（标签页）
openDialog

打开新对话框窗口
print

显示打印功能的对话框
prompt

弹出输入框（会阻塞js）
scroll

控制滚动条到指定位置
stop

停止加载

自定义对象

// new关键字调用的是constructor构造函数
var obj = new Object();
obj.name = "小庄";
console.log(obj.name);

delete obj.name;  //删除

obj["123"] = 456; //此形式定义要用同样的方法取
console.log(obj["123"]);

console.log("age" in obj);  //检查，返回布尔值

// 对象字面量

var a = {};
var b = {
    name:"小庄",
    age:19,
    skills:{shoot:100;}
}；

函数

var fun = new Function("console.log('6666')")  // 不常用

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

// 匿名函数
var fun1 = function(){
    ...;
}

// 立即执行
(function(){
    return;
})()

方法

var fun = function(){
    return;
}
fun() // 调函数

var b = {
    say:function(){
        alert("hi");
    }
}
b.() // 调方法

作用域

全局作用域

在js中直接写的代码，页面打开时创建，关闭时销毁；

在全局作用域中有一个对象window,创建的变量都会作为window的属性保存；创建的函数作为window的方法保存；

全局作用域中的变量都是全局变量

var a = 123;
function fun(){
    console.log("6");
}
console.log(window.a)
window.fun()
>>> 123
>>> 6

函数作用域

函数调用时创建，执行完毕销毁，每调一次创建一个，互相独立；

全局作用域中无法访问其中的变量；

在函数作用域中操作一个变量时，先在自身作用域找，没有就找上一级，直到全局作用域，如果没找到就ReferenceError

隐含参数

this

解析器在调用函数时向内部传递的一个隐含参数，this根据函数调用方法的不同指向不同对象;

以函数形式调用其指向window
以方法调用则指向对象
以构造函数调用，指向新创造的对象
使用call()和apply()时，指向被指定的对象

function fun(){
    console.log(this);
}

var obj={
    name:"小庄",
    say:fun
};
fun();
obj.say()

>>>Window {window: Window, self: Window, document: document, name: '', location: Location, …}

>>>{name: '小庄', say: ƒ}

call() 和 apply()

call()和apply()都是函数对象的方法，调用时都会执行函数

调用时，可以将一个对象指定为第一个参数，此时对象会成为函数执行时的this

var a = {name:"杏花"};
function fun(){
    console.log(this.name);
}
fun.call(a);
>>> 杏花

call()和apply()传参方式不同

function fun(a,b){
    console.log(this.name+a+","+b);
}
obj = {name:"杏花"};

fun.call(obj,1,2);  //依次传递
fun.apply(obj,[1,2]) // 封装为数组传递

>>> 杏花1，2
>>> 杏花1，2

arguments

同样是被传入的隐含参数，是一个类数组对象

调用函数传递的实参都会储存在arguments中，arguments.length可以用来获取实参的长度
即使不定义形参，也能用它取到

function fun(){
    console.log(arguments[0]);
}
fun("haha",123);
>>> haha

arguments有一个callee属性，就是当前正在执行的函数

function fun(){
    console.log(arguments.callee);
}
fun("haha",123);

>>>ƒ fun(){
    console.log(arguments.callee);
}

工厂函数

function createSth(name){
    var obj = new Object();
    obj.name = name;
    return obj; 
}

var o = createSth("小庄")；

构造函数

构造函数通过new关键字创建

会立刻创建一个新的对象
将新建对象设为函数中的this
执行代码
返回对象

function Preson(name){
    this.name = "丁"
    console.log(this.name)
}
var p = new Person();


function Plants(name){
    this.name = "plant";
    console.log(this.name)
}
var p2 = new Plants();


// instanceof 检查一个对象是否是一个类的实例， 注意所有对象都是`Object`的后代
console.log(p2 instanceof Person);
>>> false

看下面这段代码

function Person(name){
    this.name = name;
    this.run = function(){
        console.log(this.name+"润了")；
    }
}
var p1 = Perso("a");
var p2 = Person（"b"）；
console.log(p1.run == p2.run)  
>>> false

如果使用该构造函数构造n个对象，就会创建n个新run方法，这是没必要的：

function Person(name){
    this.name = name;
    this.run = run;
}
    
function() run(){
    console.log(this.name+"润了")；
}

var p1 = Perso("a");
var p2 = Person（"b"）；
console.log(p1.run == p2.run)  
>>> true

但是上方这种将函数定义在全局作用域中，会污染全局作用的的命名空间，也不安全，这就要说到原型对象

原型对象 prototype

创建的每个函数，解析器都会向其中添加prototype属性，通过__proto__访问

function MyClass(){
    
}
MyClass.prototype.a = 123;

var mc = new  MyClass();
var mc2 = new  MyClass();
var mc3 = new  MyClass();

console.log(mc.a) // mc.__proto__.a
>>> 123


// 检查mc中是否有a属性，自己没有，原型有，也会返回true
console.log(a in mc)  // true

// 此时可以使用 hasOwnProperty()来检查对象自身中有没有
console.log(mc.hasOwnProperty("a")) // false

Object对象的原型没有原型

toString()

console.log()打印对象时，实际上就是输出了对象的toString()的返回值

function P(){
    this.name = "A"
}
var a =new P();

console.log(a);  // [object Object]
console.log(a.toString()); // [object Object]
// 但是我在edge上这俩显示的不一样


p.prototype.toString = function(){
    console.log("666");
}

console.log(a);  // [object Object]
console.log(a.toString()); // [object Object]

垃圾回收

当一个对象没有任何变量或属性对它引用，此时永远无法操作它，它就是个垃圾；

JS有自动的垃圾回收机制，会自动将其销毁，我们只需将其引用设为null

数组 Array

var arr = new Array();
var arr1 = new Array(3);
var arr2 = [];
arr[0]=1;
console.log(arr1.length) //3
arr2.length = 4
console.log(arr2.length) //4

方法 JavaScript 数组参考手册 (w3school.com.cn)

时间 Date

var d = new Date(); // 直接用构造函数创建，会封装当前代码执行的时间
console.log(d);

>>> Wed Aug 17 2022 06:26:05 GMT+0800 (中国标准时间)


// 构建指定对象
var d2 = new Date("08/08/2021 12:00:30");

// 日
var d3 = d2.getDate();

// 周几(0是周日)
var day = d2.getDay();

// 月(0是一月)
var month = d2.getMonth();

// 年(4位)
var year = d2.getFullYear();
...

// 时间戳 (1970/1/1 00:00:00)
var time = d2.getTime();

JavaScript Date 参考手册 (w3school.com.cn)

Math

它不是一个构造函数，属于一个工具类，无需创建

1 2	console.log(Math.PI); >>> 3.141592653589793

JavaScript Math 参考手册 (w3school.com.cn)

console.log(Math.ceil(1.4)); // 上舍入
>>> 2

console.log(Math.floor(1.4)); // 下舍入
>>> 1

console.log(Math.round(1.4)) // 四舍五入
>>> 1

console.log(Math.random()); // 0-1的随机数

// 0-x之间的随机数
var x = 10;
console.log(Math.round(Math.random()*x));
>>> 8

// 生成 x-y 的随机数
console.log(Math.round(Math.random()*(y-x))+x);

包装类

JS中提供了三个包装类，通过其可将基本数据类型转为对象:

String()
Number()
Boolean()

var num = new Number(1);
console.log(typeof num);
>>> object

var num2 = new Number(1);
console.log(num == num2); // false

开发中基本不用包装类

当对基本数据类型的值调用属性和方法时，浏览器会临时使用包装类将其转换为对象，再调用属性和方法

调用完后再转换为基本数据类型

var a =132;
a = a.toString();
console.log(a);
>>> 123

字符串 String

一些方法

在底层字符串以数组形式保存 [“H”, “e”, …….]

JavaScript String 参考手册 (w3school.com.cn)

var str = "Hello YZYYZ";
console.log(str.length); // 空格也算
>>> 11

var a = str.charAt(0);  // H

var a = str.charCodeAt(0);  // 72  (Unicode字符编码)

var a = String.formCharCOde(72); // H

var str.concat("哈哈"); // str + "哈哈" 

var a = str.indexOf("H");  // 0 查找指定字符第一次出现处的索引，没有返回 -1

lastIndexOf() // 从后往前

var a = str.slice(0,5);  // Hello 截取祖字符串 第二个参数可省略

var a = str.subString(1);  // 和slice一样，但参数不能接受负数，如果第二个参数小于第二个，会自动交换参数位置

var a = str.split(" ") //拆为数组

var a = str.toUperCase() // 转换大小写
var a = str.toLowerCase()

正则表达式

var re = new RegExp("a");
var str = 'abc';
console.log(re.test(tel));  // true

var re = /^1[3-9]\d{9}$/;
var tel = "13009985544";
console.log(re.test(tel))  // true

支持正则的String对象的方法

var str = "123qqq345www456eee567ABCDEFG";
var re = /[a-z]+/ig;

var result = str.search(re);
console.log(result); // 返回第一次出现的位置的索引
>>> 3

result = str.match(re);
console.log(result);
>>> ['qqq', 'www', 'eee', 'ABCDEFG']

result = str.replace(re,"*");
console.log(result);
>>> 123*345*456*567*
    
result = str.split(re);
console.log(result);
>>> ['123', '345', '456', '567', '']

DOM

Document Object Model 文档对象模型

JS通过DOM对HTML文档进行操作

文档：HTML 网页
对象：网页的每个部分转为一个对象
模型：表示对象间的关系

节点 Node

节点是构成网页的最基本组成部分，网页中每部分都可称为一个节点

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

浏览器提供文档节点对象，其是window属性，可以在页面直接使用

...
<button id="btn">点我</button>
<script type="text/javascript">
    console.log(document.getElementById("btn").innerHTML)
</script>
...

事件

HTML DOM 事件 (w3school.com.cn)

addEventListener 添加事件监听器
dispatchEvent 手动触发指定事件
getAttribute 获取标签的指定属性

function fun(){
    alert("haha");
}
var btn = document.getElementById("btn");
btn.onclick = fun

文档的加载

...

<script type="text/javascript">
    window.onload(){
        btn = document.getElementById("btn");
        btn.onclick = function(){ 
    		alert(btn.innerHTML)
       	}
    }
</script>

<button id="btn">点我</button>
...

DOM查询

获取元素节点

getElementById()
getElementsByTagName()
getElementsByName()

获取子节点

childNodes

文本属性也会当做节点
children

推荐
firstChild
firstElementChild

第一个子元素虽然IE已死，但是它只兼容IE9+
lastChild

获取父节点和兄弟节点

parentNode

父节点
previousSibling

前一个兄弟节点
nextSibling

根据class

getElementsByClassName

包括自身的所有元素

选择器

document.querySelector()

只找第一个
document.querySelectorAll()

返回数组

DOM增删改

HTML DOM Element 对象 (w3school.com.cn)

document.createElement()

需要一个标签名作为参数，并返回这个对象
document.createTextNode()

创建文本节点，参数为文本，并返回节点
appendChild()

父元素 . appendChild(子元素)
insertBefore()

父节点 . insertBefore(新节点，旧节点)
repleaceChild()
repleaceChild(新节点，旧节点)
removeChild()
父节点 . removeChild(子节点)
父节点：子节点 . parentNode

样式操作

操作内联样式

obj.style.xxx = “xxx”

obj.style[“xxx”] = “xxx”

查询样式

getComputedStyle(obj,null)

<script type="text/javascript">
  window.onload = function(){

  const body = document.getElementsByTagName("body")[0];
  body.onpagehide = function(){
  localStorage.removeItem("created");
};
  const btn = document.getElementById("change-dom");
  const code0 = document.getElementById("code0");
  const block = document.getElementsByTagName("blockquote")[0];
  const block2 = document.createElement("blockquote");
  const after_btn = btn.parentNode;

    btn.onclick = function(){
    console.log(localStorage["created"]);
    if (localStorage["created"]==="0" || localStorage["created"] ===undefined){
      btn.innerHTML = "点击收起";
      code0.style.visibility = "";
      block2.innerHTML = "你正在查看的是废弃的文章";
      block2.style.background = "#f4433678";
      block2.style.color = "#fff";
      block2.style["border-left"] = "4px solid #f44336";
      after_btn.appendChild(block2);
      localStorage.setItem("created","1");
        }
    else if(localStorage["created"]==="1"){
      after_btn.removeChild(document.querySelector("#post > section.article.typo > div.article-entry > div.button.readmore > blockquote"));
      code0.style.visibility = "collapse";
      btn.innerHTML = "点击查看";
      localStorage["created"]="0";
      }
      }
  }

</script>