JavaScript基础

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

特别注意：

1. 在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。

2. 在 JavaScript 中，null 的数据类型是object对象。

3. 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属性

1. 使用 prototype 属性就可以给对象的构造函数添加新的属性：

   function Person(first, last, age, eyecolor) {
     this.firstName = first;
     this.lastName = last;
     this.age = age;
     this.eyeColor = eyecolor;
   }
    
   Person.prototype.nationality = "English";
   

2. 使用 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 能够准确表示的整数范围在-2^53到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 能够准确表示的整数范围在-2^53到253之间（不含两个端点），超过这个范围，无法精确表示这个值。isSafeInteger()就是判断是不是安全的整数的

新的全局方法

ES6 还增加了 2 个新的全局数字方法：

• isFinite()
• isNaN()

isFinite() 函数用于检查其参数是否是无穷大

箭头函数

箭头函数允许使用简短的语法来编写函数表达式

// ES5
var x = function(x, y) {
   return x * y;
}

// ES6
const x = (x, y) => {return x * y};