js学习笔记(摘抄)

学习资源

javascript的使用

在HTML文档中，JavaScript代码必须位于 < script > 标签之间。

#理解：js的代码其实相当于css的样式表，既可以放在头部也可以放在HTML的body中（只不过都需要放在script标签之中），也可以使

用外部js脚本，效用同css一样。（使用外部js脚本的时候要在script标签的src属性中指定好js脚本的具体位置）

Js的script标签的效果，script标签其实就相当于python中的shell一样，放在其中的js代码若没有用函数封装，那么在HTML文档中就会直

接执行这些未封装的代码。那么这些封装起来的函数代码如何使用呢，有一个实例可以知道它是怎么运作的：

![image-2020080

效果：

可以看到在button标签的属性中规定了这个函数，那么在点击这个按钮的时候就会同时执行这个函数，大概的方法就是这个了，在标签的属性中指定函数然后执行。

javascript输出：

#js不提供任何内建的打印或者显示函数

js语言结构：

入门理解：js的语言结构在我看来似乎是python和C语言两种语言的结合体，js中定义变量使用var 变量名，而变量却又没有数据类型，变量的使用上与python高度类似，

javascript的语法关键词：

js的语法在一些细节上又是和C语言一样的，比如每条语句后面加分号;和使用花括号{}包裹代码块。

关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do … while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if … else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try … catch	对语句块实现错误处理。
var	声明变量。

javascript支持位运算

javascript数据类型：

字符串值，数值，布尔值，数组，对象。#与python不同的是js在数字和字符串相加的时候会把数值视作字符串进行相加。

在js的运算表达式中js是从左到右来计算表达式的。

Js中的数组其实就相当于python中的列表一样理解，

Js对象，对象使用花括号来书写，由键对值组成，像哈希表一样，注意这里的对象不同于其他编程语言中的类对象一样。

例：

注意：JavaScript中对一个变量名进行了定义却没有进行赋值，那么这个变量的数据类型那就是undefined，它的值也是undefined，如果要对某个变量进行清空的话那么直接对这个变量赋值为undefined即可。

javascript函数：

javascript事件：

用户点击按钮啊啥的

HTML 事件是发生在 HTML 元素上的“事情”。

当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。

常见的事件：

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

javascript常用方法：

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

语法：

document.getElementById(id)
说明

HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。
不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。
在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。

很好理解：

效果：

javascript的数据类型及其相互之间的转化：

**三种数据类型转换函数：**Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。

在 JavaScript 中有 5 种不同的数据类型：

• string
• number
• boolean
• object
• function

3 种对象类型：

• Object
• Date
• Array

2 个不包含任何值的数据类型：

• null
• undefined

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [ 1,2,3,4]              // 返回 object
typeof {name: 'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (if myCar is not declared)
typeof null                   // 返回 object

• NaN 的数据类型是 number
• 数组(Array)的数据类型是 object
• 日期(Date)的数据类型为 object
• null 的数据类型是 object
• 未定义变量的数据类型为 undefined

所有的js变量都有constructor属性，可以返回他们的构造函数：

例：

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2, 3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function() {}.constructor         // 返回函数 Function(){ [native code] }

进行数据转换的其他方法：

• number数据类型的toString()属性
• 一元运算符+ - （多用于字符串与数字之间的相互转换）

JavaScript正则表达式：

没啥好说的，个人感觉操作字符串的时候查阅一下模式表即可，不需要记住太多，知道怎么用而且，了解几个常用函数即可：

var patt = /w3cschool/i

/w3cschool/i 是一个正则表达式。

w3cschool 是一个模式 (用于检索)。

i 是一个修饰符 (搜索不区分大小写)。

方法函数：

• exec:在字符串中执行匹配检索并返回结果数组，使用如下：（如果检索不到那么就返回null）

  /e/.exec("The best things in life are free!")；
  
  [ 'e',
    index: 2,#以下为派生属性
    input: 'The best things in life are free!',
    groups: undefined ]
  

• test:在字符串中测试模式匹配，返回true或者false

字符串函数：

• match：找到一个或者多个正则表达式的匹配
• replace:替换与正则表达式匹配的字串
• search: 检索与正则表达式相匹配的值
• split:将字符串分割为字符串数组

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x|y)	查找任何以 | 分隔的选项。

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

JavaScript调试：

调试工具可以使用各个浏览器的开发者工具里面的console，或者特殊一下使用node.js的交互式解释器。

JavaScript表单验证

使用JavaScript对用户的输入进行检查验证。

使用一个实例来说明：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>W3Cschool教程(w3cschool.cn)</title>
</head>

<body>
  <form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post"> 
    <strong>请输入1到10之间的数字：</strong>
    <input id="number">
    <button type="button" onclick="myFunction()">提交</button>
  </form>

  <script type="text/javascript">
    function myFunction() {


      var x = document.getElementById("number").value;//获取id="number"的值
      //如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误
      if (isNaN(x) || x < 1 || x > 10) {
        alert("您输入有误，请输入1到10之间的数字！！！");
        return false;
      } else {
        alert("您输入正确");
        return true;
      }
    }

  </script>
</body>

</html>

这个页面对输入的数字进行检查并返回正确与否。

JavaScript json

使用json存储和传输数据，通常用于服务端向网页端传递数据。

json语法规则：

• 数据为 键/值 对。
• 数据由逗号分隔。
• 大括号保存对象
• 方括号保存数组

例:

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

javascript:void(0)

void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

行业黑话为死链接。要注意的事情就是在void()内的表达式还是要执行完的。

如：

<a href="javascript:void(0)">单击此处什么也不会发生</a>

<head>
<script type="text/javascript">
<!--
function getValue(){
  var a,b,c;
  a = void ( b = 5, c = 7 );
  document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}
//-->
</script>
</head>

//输出a = undefined b = 5 c = 7

javascript 函数

js的变量及函数的提升规则（Hoisting）：

在我们定义一个变量或者函数的时候，js并不是直接在这一行内直接进行变量的声明和赋值，而是将变量的声明且只是声明提升到此作用

域的最前端去，而变量的赋值则是留在原位置不动，而函数的提升则是直接将整个函数的声明提升到此作用域的最前端去。

实例：

function foo() {
  console.log(a);
  var a = 1;
  console.log(a);
  function a() {}
  console.log(a);
}
foo();

js解析之后：

function foo() {
  var a;
  function a() {}
  console.log(a); // a()
  a = 1;
  console.log(a); // 1
  console.log(a); // 1
}
foo();

其中要注意到的是函数的声明提升是在变量的提升之后的，而且对于变量的提升只有对变量进行正确的声明之后才能进行提升，var，如果定义一个无var声明的变量，那么就不会提升。

---

匿名自调用函数：

实例：

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

JavaScript 函数与对象

js通过在函数中设置this属性提供对象属性，将函数与对象绑定，让对象拥有函数的方法。以下的方法对已绑定函数的对象属性设置亦为同效用。如：

function Base() { 
  this.name = 'base'; 
    this.base = 1991; 
    this.sayHello = function() { 
      console.log('Hello ' + this.name); 
    }; 
} 

创建对象

1、对象直接量。

var point = { x:0,y:0 };　　//point就是一个对象，跟C#不同，它不需要一定有类才能创建对象。

2、通过new创建对象

var d = new Date();　　　　//创建一个Date对象

3、原型

Object.prototype　　//用于获取对象原型的引用。所有对象都直接或间接继承自Object.prototype，相当于C#中的System.Object();

通过new Date()创建的对象同时继承自Date.prototype和Object.prototype。

4、Object.create()

Object.create()是一个静态函数，可以用它创建一个新对象。

属性的读取与设置

1、属性的读取有两种方法。可以通过".“和”[]"来读取。

如：var author = book.author;

var author = book[“authoe”];

设置也一样：

book.author = “刘德华”;

book[“author”] = “刘德华”;

注意，如果对象的属性名与保留字一样，则必须通过方括号读取。

如:book[“class”];

另外用方括号访问就个好处，就是在运行时确定属性名如book[“author” + 1];

2、继承

如果要查询对象o的属性x，如果o没有属性x，则会到o的原型去查，一级一级往上，直到Object.prototype。

var o = {};
        o.x = 1;
        var p = Object.create(o);
        p.x = 2;　　　　　　　　　//改变了继承的属性x
        document.write(p.x);　　//输出2，p.x继承自o.x
        var q = Object.create(o);
        document.write(q.x);　　//输出1，p改变的是自己x,改变不了原型的x

删除属性

delete()　　　delete()方法只能够删除自有属性，不能够删除继承属性。delete()只是断开属性和宿主对象的联系，而不回去操作属性中的属性。

 var book = {
            author:"刘德华",
            number:123
        }
        delete book.author;　　　　　　　 //此行代码也可写成delete book["author"]
        document.write(book.author);　　//book.author的值为undefined，因为已经被删除了

检测属性

in:检测某对象是否含有某个属性

        var o = {
            x:1
        }　　
        document.write("x" in o);　　//返回true　　x是o的一个属性
        document.write("y" in o);　　//返回false　 y不是o的属性
　　　　hasOwnProperty() 检测对象中是否含有某属性

        var o = {
            x : 1
        }
        document.write(o.hasOwnProperty("x"));　　//返回true　　o中含有名为"x"的属性
        document.write(o.hasOwnProperty("y"));　　//返回false　 o中不含有名为"y"的属性
　　　　get() set()属性访问器　　没有相应的get(),set()则为只读，或只写属性。


        var o = { 
            x: 1,
            get getx(){ return this.x; },
            set setx(n){this.x = n;}
         };
         document.write(o.getx);　　//读取属性值，返回1
         o.setx = 2;　　　　　　　　　//如果将set setx(n)这行注释，则这行代码可以相当于不存在，设置无效。x依然为1，但不会报错。
         document.write(o.getx);　　//再次读取返回2

属性的特性：

writeable：是否可写。

enumerable:是否可枚举。

configurable:是否可配置。

对象的序列化

这个东西非常有用，能够将对象序列化成字符串之后传输，也能够将对象以字符串的格式存在cookie里，拿出来后再反序列化成对象。

JSON.stringify()　　　序列化对象(对象转成字符串便于传输)

JSON.parse()　　　　反序列化对象(字符串转换成原对象，是源对象深拷贝)

            var man = { name: "张三", Age: 24 };
            var str = JSON.stringify(man);　　　　//将对象man序列化成JSON字符串
            document.write(str);
            var newman = JSON.parse(str);　　　　 //将字符串反序列成对象
            document.write("<br/>" + newman.name + "," + newman.Age);　　//输出反序列化后的对象的属性

JavaScript函数参数

js对函数参数的值是不进行任何检查的，它不会关注有多少个参数被传递进来，参数个数多于声明函数参数的部分被隐藏参数（arguments）对象（为一个函数调用的参数数组）所接受，而少于的时候，少于的部分对应的函数参数则会默认设置为undefined

少于：

function myFunction(x, y) {
    if (y === undefined) {
          y = 0;
    }
    return y;
}
myFunction(4);

//返回0

大于：

function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

x = sumAll(1, 123, 500, 115, 44, 88);

另有值的传递以及对象的传递之分（c中值传递与地址传递）：

var x = 1;
// 通过值传递参数
function myFunction(x) {
    x++; //修改参数x的值，将不会修改在函数外定义的变量 x
    console.log(x);
}
myFunction(x); // 2
console.log(x); // 1

var obj = {x:1};
// 通过对象传递参数
function myFunction(obj) {
    obj.x++; //修改参数对象obj.x的值，函数外定义的obj也将会被修改
    console.log(obj.x);
}
myFunction(obj); // 2
console.log(obj.x); // 2

JavaScript函数调用

在JavaScript中函数的调用方式有四种，不同在this 的初始化。

第一种方法：

最常见的也就是在浏览器HTML页面种调用函数，此时this为window（浏览器窗口）

使用myFunction() 和 window.myFunction() 是一样的：

实例：

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);    // window.myFunction(10, 2) 返回 20


function myFunction() {
    return this;
}
myFunction();                // 返回 window 对象

第二种方法：

函数作为对象的方法进行调用，此时的this为调用的对象（object）：

实例：

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // 返回 [object Object] (所有者对象)

第三种方法：

使用构造函数的方法调用函数，new关键字创建一个对象：

此时this是没有任何值的

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}

// This creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

---

第四种方法：

函数自身的属性方法：

两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象。

在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

//call
function myFunction(a, b) {
    return a * b;
}
myFunction.call(myObject, 10, 2);      // 返回 20

//apply
function myFunction(a, b) {
    return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray);   // 返回 20

JavaScript闭包

全局变量与局部变量不再赘述。

概念：在学习中我们都可以了解到，定义一个全局变量那么所有的函数都能够访问这个变量并修改他的值（在python中是需要进行global的），那么问题来了，我们有时候并不像这样，那么闭包的技巧，就是在在函数中内嵌函数形成伪全局变量进行我们所需要的操作。

实例：

//进行自我调用，即闭包
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器为 3