JS快速学习

目录

一、JavaScript的介绍

1.什么是JavaScript语言？？？

二、JavaScript的基本语法

1.基础知识

2.相关属性

三、重点学习

1.object对象的相关方法

2.实例对象与new 命令

3.对象的继承

4.this关键词

5.JSON

6.array对象

---

一、JavaScript的介绍

1.什么是JavaScript语言？？？

JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”（script language），指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序（比如浏览器）的“脚本”。

JavaScript具有强大的性能：（1）灵活的语法表达了强：JavaScript 既支持类似 C 语言清晰的过程式编程，也支持灵活的函数式编程，可以用来写并发处理（concurrent）。（2）支持编译运行：JavaScript 语言本身，虽然是一种解释型语言，但是在现代浏览器中，JavaScript 都是编译后运行。（3）事件驱动和非阻塞式设计：JavaScript 程序可以采用事件驱动（event-driven）和非阻塞式（non-blocking）设计，在服务器端适合高并发环境，普通的硬件就可以承受很大的访问量。

二、JavaScript的基本语法

1.基础知识

JavaScript 程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。

变量：声明使用var。

标识符：JavaScript的标识符对大小写敏感，故该大写时就要大写。

注释：单行注释使用  //               多行注释使用    /*-------*/

区块：JavaScript 使用大括号，将多个相关的语句组合在一起。

#########条件语句##########
if结构：
if (布尔值)
  语句;
// 或者
if (布尔值) 语句;

if---else结构：
if (m === 3) {
  // 满足条件时，执行的语句
} else {
  // 不满足条件时，执行的语句
}

switch结构：
switch (fruit) {
  case "banana":
    // ...
    break;
  case "apple":
    // ...
    break;
  default:
    // ...
}

三元运算符：
(条件) ? 表达式1 : 表达式2

########循环语句##########
while (条件)
  语句;
// 或者
while (条件) 语句;

for (初始化表达式; 条件; 递增表达式)
  语句
// 或者
for (初始化表达式; 条件; 递增表达式) {
  语句
}

do
  语句
while (条件);
// 或者
do {
  语句
} while (条件);

2.相关属性

document节点对象代表整个文档，每张网页都有自己的document对象。

Element节点对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象

元素对象有一个attributes属性，返回一个类似数组的动态对象，成员是该元素标签的所有属性节点对象，属性的实时变化都会反映在这个节点对象上。

文本节点（Text）代表元素节点（Element）和属性节点（Attribute）的文本内容。

三、重点学习

1.object对象的相关方法

Object.getPrototypeOf方法返回参数对象的原型。这是获取原型对象的标准方法。

Object.setPrototypeOf方法为参数对象设置原型，返回该参数对象。它接受两个参数，第一个是现有对象，第二个是原型对象。

Object.create()方法，该方法接受一个对象作为参数，然后以它为原型，返回一个实例对象。

实例对象的isPrototypeOf方法，用来判断该对象是否为参数对象的原型。

实例对象的__proto__属性（前后各两个下划线），返回该对象的原型。

获取实例对象obj的原型对象，有三种方法：

• obj.__proto__

• obj.constructor.prototype

• Object.getPrototypeOf(obj)

对象实例的hasOwnProperty方法返回一个布尔值，用于判断某个属性定义在对象自身，还是定义在原型链上。

2.实例对象与new 命令

面向对象编程（Object Oriented Programming， OOP）是目前主流的编程范式。它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。

构造函数就是一个普通函数。

构造函数的特点有两个。

• 函数体内部使用了this关键字，代表了所要生成的对象实例。

• 生成对象的时候，必须使用new命令。

new命令的作用，就是执行构造函数，返回一个实例对象。

使用new命令时，它后面的函数依次执行下面的步骤：（1）创建一个空对象，作为将要返回的对象实例。（2）将这个空对象的原型，指向构造函数的prototype属性。（3）将这个空对象赋值给函数内部的this关键字。（4）开始执行构造函数内部的代码。

3.对象的继承

面向对象编程很重要的一个方面，就是对象的继承。A 对象通过继承 B 对象，就能直接拥有 B 对象的所有属性和方法。

注意：JavaScript 语言的继承不通过 class，而是通过“原型对象”（prototype）实现。

prototype属性的作用？？？原型对象的所有属性和方法，都能被实例对象共享。也就是说，如果属性和方法定义在原型上，那么所有实例对象就能共享。

构造函数的一个方法，或者一个属性
function Animal(name) {
  this.name = name;
}
Animal.prototype.color = 'white';
var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');
cat1.color // 'white'
cat2.color // 'white'

原型链：JavaScript 规定，所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原型的原型……  

注意：Object.prototype的原型是null 。

prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数。

instanceof运算符返回一个布尔值，表示对象是否为某个构造函数的实例。 instanceof运算符的左边是实例对象，右边是构造函数。它会检查右边构造函数的原型对象（prototype），是否在左边对象的原型链上。

4.this关键词

this就是属性或方法“当前”所在的对象。

var person = {
  name: '张三',
  describe: function () {
    return '姓名：'+ this.name;
  }
};
person.describe()
// "姓名：张三"
解析：`this.name`表示`name`属性所在的那个对象。由于`this.name`是在`describe`方法中调用，而`describe`方法所在的当前对象是`person`，因此`this`指向`person`，`this.name`就是`person.name`。

this使用场合：

（1）全局环境使用this，它指的就是顶层对象window。

（2）构造函数中的this，指的是实例对象。

（3）如果对象的方法里面包含this，this的指向就是方法运行时所在的对象。

5.JSON

JSON 对值的类型和格式有严格的规定。

1. 复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。

2. 原始类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）。

3. 字符串必须使用双引号表示，不能使用单引号。

4. 对象的键名必须放在双引号里面。

5. 数组或对象最后一个成员的后面，不能加逗号。

JSON.stringify()方法用于将一个值转为 JSON 字符串。该字符串符合 JSON 格式，并且可以被JSON.parse()方法还原。  

JSON.stringify()方法还可以接受一个数组，作为第二个参数，指定参数对象的哪些属性需要转成字符串。

JSON.stringify()还可以接受第三个参数，用于增加返回的 JSON 字符串的可读性。

JSON.parse()方法用于将 JSON 字符串转换成对应的值。

6.array对象

Array是 JavaScript 的原生对象，同时也是一个构造函数，可以用它生成新的数组。

Array.isArray方法返回一个布尔值，表示参数是否为数组。它可以弥补typeof运算符的不足。

valueOf方法是一个所有对象都拥有的方法，表示对该对象求值。

push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

pop方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组。

join()方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔。

slice()方法用于提取目标数组的一部分，返回一个新数组，原数组不变。

splice()方法用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组。

sort方法对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变。

filter()方法用于过滤数组成员，满足条件的成员组成一个新数组返回。

如何使用？？？

var arr = [1, 2, 3];
typeof arr // "object"
Array.isArray(arr) // true

var arr = [1, 2, 3];
arr.valueOf() // [1, 2, 3]

var arr = [];
arr.push(1) // 1
arr.push('a') // 2
arr.push(true, {}) // 4
arr // [1, 'a', true, {}]

var arr = ['a', 'b', 'c'];
arr.pop() // 'c'
arr // ['a', 'b']

var a = [1, 2, 3, 4];
a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"

var a = ['a', 'b', 'c'];
a.slice(0) // ["a", "b", "c"]
a.slice(1) // ["b", "c"]
a.slice(1, 2) // ["b"]
a.slice(2, 6) // ["c"]
a.slice() // ["a", "b", "c"]

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2) // ["e", "f"]
a // ["a", "b", "c", "d"]

['d', 'c', 'b', 'a'].sort()
// ['a', 'b', 'c', 'd']

[1, 2, 3, 4, 5].filter(function (elem) {
  return (elem > 3);
})
// [4, 5]

JavaScript方面主要知识点总结如上，还需进一步完善。