JavaScript 基础知识总结
数据
值类型
- 字符串:string
- 数字:number
- 布尔:boolean
- 空:null
- 未定义:undefined
- 独一无二的值(ES6):symbol
引用数据类型
- 对象:Object
- 数组:Array
- 函数:Function
typeof
使用 typeof 数据 可以返回以及判断该数据的类型
typeof "John" // 返回 string
//特别注意
typeof NaN // 返回 number
typeof null // 返回 object(空对象)
typeof undefined //返回 undefined
特别注意:
-
在 JavaScript 中,没有值的变量,其值是 undefined。typeof 也返回 undefined。任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。
-
在 JavaScript 中,null 的数据类型是object对象。
-
Undefined 与 null 的值相等,但类型不相等
typeof undefined // undefined typeof null // object null === undefined // false (=== 为 等等型) null == undefined // true
=== 比较规则 :先检查两个操作数的数据类型是否相同 若不同,直接返回false 若相同,则比较二者是否相等
== 比较规则 :先检查两个操作数的数据类型是否相同 如果相同,则比较两个数是否相等 如果不同,则先将两个数转换为相同数据类型,再进行比较
函数
函数定义
JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 ()。(规则与变量名相同)。
function name(参数 1, 参数 2, 参数 3,...) { 要执行的代码 }
函数返回
当执行到return语句时候,函数将返回值并且停止执行
function add(x,y){
return x+y;
}
var z = x + y;
// z的结果将是56
arguments 对象
arguments是伪数组,用于存放函数的参数
function addNums() {
let len = arguments.length;
var index = 0;
var sum = 0;
for(index;index < len;index++){
sum+=arguments[index];
}
alert(sum);
}
addNums(1,2,3,4);
// 输出结果为:10
Funtion 对象声明
用 Function 类直接创建函数的语法如下:
var function_name = new function(arg1,arg2,..., argN,function_body)
Function 对象的 length 属性
ECMAScript 定义的属性 length 声明了函数期望的参数个数。例如:
function doAdd(iNum) {
alert(iNum + 10);
}
function sayHi() {
alert("Hi");
}
alert(doAdd.length); //输出 "1"
alert(sayHi.length); //输出 "0"
Function valueOf() and toString()
Function 对象也有与所有对象共享的 valueOf() 方法和 toString() 方法。这两个方法返回的都是函数的源代码,在调试时尤其有用。例如:
function doAdd(iNum) {
alert(iNum + 10);
}
document.write(doAdd.toString());
//输出了doAdd源代码
闭包
-
函数能够访问函数内部定义的所有变量
function myFunction() { var a = 4; return a * a; }
-
函数也能访问函数外部定义的变量
var a = 4; function myFunction() { return a * a; }
-
闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
function f1(){ var n=999; nAdd=function(){n+=1} function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999 nAdd(); result(); // 1000
在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。
为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。
Call Apply Bind
常用内置对象
Object
在 JavaScript 中,几乎所有的对象都是 Object 类型的实例,它们都会从 Object.prototype 继承属性和方法。其中,Object.prototype是一个对象,用于表示Object的原型对象。对象是可变的,它们是通过引用来传递的。
对象构造器 constructor
//使用函数来完成构造器
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
JavaScript 对象实例
//使用new关键词,如果不使用new关键词则this指向的是Window对象
//当我们有了构造函数就可以进行对象实例化,因为函数也是一种对象
var myFather=new person("John","Doe",50,"blue");
JavaScript prototype(原型对象)
所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。
prototypes属性
-
使用 prototype 属性就可以给对象的构造函数添加新的属性:
function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; } Person.prototype.nationality = "English";
-
使用 prototype 属性就可以给对象的构造函数添加新的方法:
function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; } Person.prototype.getName = function() { return this.firstName + " " + this.lastName; };
Number
Infinity
当数字运算结果超过了JavaScript所能表示的数字上限(溢出),结果为一个特殊的无穷大(infinity)值,在JavaScript中以Infinity表示。同样地,当负数的值超过了JavaScript所能表示的负数范围,结果为负无穷大,在JavaScript中以-Infinity表示。
myNumber=2;
while (myNumber!=Infinity)
{
myNumber=myNumber*myNumber; // 重复计算直到 myNumber 等于 Infinity
}
NaN
Not a number,NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
Number Method
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-masp4htU-1646731110638)(E:\陈松年笔记\JavaScript imgs\Number Method.png)]
String
indexOf()
字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置:
var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
//n = 13
match()
match()函数用来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。
var str="Hello world!";
document.write(str.match("world") + "<br>");
document.write(str.match("fuck") + "<br>");
document.write(str.match("world!"));
//结果分别为world null world
replace()
replace() 方法在字符串中用某些字符替换另一些字符,但是并没有改变原来的字符串,只是返回了一个被替换掉的,新的字符串。
str="Please visit Microsoft!"
var n=str.replace("Microsoft","Runoob");
//结果为 n = 'Please visit Runoob!'
split()
字符串使用**split()**函数转为数组
txt="a,b,c,d,e" // String
txt.split(","); // 使用逗号分隔
Date
var d = new Date();
console.log(d);//输出日期
Math
Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math()。
DOM
DOM HTML
getElementBy 获取HTML元素
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
...
document.write()
在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容
document.write()//注意会覆盖页面
改变HTML元素中的属性值
document.getElementById(id).attribute=新属性值
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
//将图片的路径改成了"landscape.jpg"
</body>
</html>
DOM CSS
改变HTML样式
document.getElementById(id).style.property=新样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
</body>
</html>
DOM 事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
onmousedown //鼠标按下
onmouseup //释放鼠标
onclick //完成一次点击的时候
onload //进入页面
onunload //离开页面时
onchange //事件会在域的内容改变时发生
onmouseover //鼠标移至 HTML 元素上方
onmouseout //鼠标移出元素的时候
//...
addEventListener()
注意:不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。
<body>
<p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数。</p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
</script>
</body>
ES6
let
let 语句允许您使用块作用域声明变量
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
const
const 语句允许您声明常量(具有常量值的 JavaScript 变量)
const PI = 3.14;
**
取幂运算符(**)将第一个操作数提升到第二个操作数的幂,与Math.pow(x,y)相同。
var x = 5;
var z = x ** 2; // 结果是 25
默认参数值
ES6 允许函数参数具有默认值
function myFunction(x, y = 10) {
// y is 10, if not passed or undefined
return x + y;
}
myFunction(5); // 将返回 15
Array.find()
find() 方法返回通过测试函数的第一个数组元素的值。
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
//此例查找(返回)第一个大于 18 的元素(的值)
特别注意,接受三个参数:
- 值
- 索引
- 数组本身
Array.findIndex()
findIndex() 方法返回通过测试函数的第一个数组元素的索引
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
//此例确定大于 18 的第一个元素的索引
特别注意,接受三个参数:
- 值
- 索引
- 数组本身
新的数字属性
ES6 将以下属性添加到 Number 对象:
- EPSILON
- MIN_SAFE_INTEGER
- MAX_SAFE_INTEGER
新的数字方法
ES6 为 Number 对象添加了 2 个新方法:
- Number.isInteger()
- Number.isSafeInteger()
JavaScript 能够准确表示的整数范围在-253到253之间(不含两个端点),超过这个范围,无法精确表示这个值。isSafeInteger()就是判断是不是安全的整数的
新的全局方法
ES6 还增加了 2 个新的全局数字方法:
- isFinite()
- isNaN()
isFinite() 函数用于检查其参数是否是无穷大
箭头函数
箭头函数允许使用简短的语法来编写函数表达式
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => {return x * y};
新的数字属性
ES6 将以下属性添加到 Number 对象:
- EPSILON
- MIN_SAFE_INTEGER
- MAX_SAFE_INTEGER
新的数字方法
ES6 为 Number 对象添加了 2 个新方法:
- Number.isInteger()
- Number.isSafeInteger()
JavaScript 能够准确表示的整数范围在-253到253之间(不含两个端点),超过这个范围,无法精确表示这个值。isSafeInteger()就是判断是不是安全的整数的
新的全局方法
ES6 还增加了 2 个新的全局数字方法:
- isFinite()
- isNaN()
isFinite() 函数用于检查其参数是否是无穷大
箭头函数
箭头函数允许使用简短的语法来编写函数表达式
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => {return x * y};