前端温习(一)：JavaScript入门

2023-02-17 17:15:58 浏览数 (1)

JaveScript

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数… ，JavaScript 也允许自定义对象。

JavaScript 对象

JavaScript 中的对象并不需要类去实例化成对象，对象只是一种特殊的数据。对象拥有属性和方法。

访问对象的属性

属性是与对象相关的值。 访问对象属性的语法是:

代码语言：javascript复制
// objectName.propertyName
var message="Hello World!";
var x=message.length;
// output 12

访问对象的方法

方法是能够在对象上执行的动作。 通过以下语法来调用方法：

代码语言：javascript复制
// objectName.methodName()
// toUpperCase转大写
var message="Hello world!";
var x=message.toUpperCase();
// output HELLO WORLD!

创建 JavaScript 对象

这里能够定义并创建自己的对象。 创建新对象有两种不同的方法：

  • 使用 Object 定义并创建对象的实例。
  • 使用函数来定义对象，然后创建新的对象实例。
使用 Object 定义

在 JavaScript 中，几乎所有的对象都是 Object 类型的实例，它们都会从 Object.prototype 继承属性和方法。 Object 构造函数创建一个对象包装器。 Object 构造函数，会根据给定的参数创建对象，具体有以下情况：

  • 如果给定值是 null 或 undefined，将会创建并返回一个空对象。
  • 如果传进去的是一个基本类型的值，则会构造其包装类型的对象。
  • 如果传进去的是引用类型的值，仍然会返回这个值，经他们复制的变量保有和源对象相同的引用地址。
  • 当以非构造函数形式被调用时，Object 的行为等同于 new Object()。

语法格式：

代码语言：javascript复制
// 以构造函数形式来调用
new Object([value])

// value 可以是任何值。
// 以下实例使用 Object 生成布尔对象：
// 等价于 o = new Boolean(true);
var o = new Object(true);

// 创建一个新实例并添加四个属性
person=new Object();
person.firstname="chen";
person.lastname="dasheng";
person.age=18;
person.eyecolor="blue";
console.log(person)
// output {firstname: 'chen', lastname: 'dasheng', age: 18, eyecolor: 'black'}
// 也可以直接使用对象创建
person = {firstname: 'chen', lastname: 'dasheng', age: 18, eyecolor: 'black'}
使用函数来定义对象（对象构造器）

方法也可以附加在对象上的函数 语法格式：

代码语言：javascript复制
function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    
    // 添加方法，需要定义属性才能添加方法
    this.changeName=changeName;
    function changeName(name)
    {
        this.lastname=name;
    }
}
var myFather=new person("chen","dasheng",18,"black");
myFather.changeName("ds");
console.log(myFather)

对象遍历

JavaScript for...in 语句循环遍历对象的属性。 语法格式：

代码语言：javascript复制
for (variable in object)
{
    执行的代码……
}


var person={firstname: 'chen', lastname: 'dasheng', age: 18, eyecolor: 'black'}; 
 
for (x in person)
{
    txt=txt   person[x];
}

注意： for…in 循环中的代码块将针对每个属性执行一次。

注意

JavaScript 的对象是可变的，它们是通过引用来传递的。如果修改 了引用对象属性，源对象的属性也会改变： 如：

代码语言：javascript复制
var x = person;  // 不会创建 person 的副本，是引用
// 如果修改 x ，person 的属性也会改变：
var person = {firstname: 'chen', lastname: 'dasheng', age: 18, eyecolor: 'black'}
 
var x = person;
x.age = 10;           //  x.age 和 person.age 都会改变

prototype (原型对象)

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。

prototype 继承

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法：

  • Date 对象从 Date.prototype 继承。
  • Array 对象从 Array.prototype 继承。
  • Person 对象从 Person.prototype 继承。 所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的==原型的原型==，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

Date 对象, Array 对象, 以及 Person 对象从 Object.prototype 继承。

添加属性和方法

有的时候我们想要在所有已经存在的对象添加新的属性或方法，另外，有时候我们想要在对象的构造函数中添加属性或方法。 使用 prototype 属性就可以给对象的构造函数添加新的属性：

代码语言：javascript复制
function Students(name, height, age) {
    this.name = name;
    this.height = height;
    this.age = age;
    this.outputInfo  = function() {
        document.write('name = '   this.name    '<br>'   'height = '   this.height   '<br>');
    }
}
// 增加一个新属性
Students.prototype.eyecolor= 'black';
// 增加一个新方法
Students.prototype.newFunction = function() {
    document.write('此方法是通过prototype继承后实现的');
}

var stu1 = new Students('chendasheng', 123, 12);
stu1.outputInfo();
stu1.newFunction();

内置对象

Array 对象 Array 对象用于在变量中存储多个值:

代码语言：javascript复制
var myArray = ["Saab", "Volvo", "BMW"];

Boolean 对象 Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false).

代码语言：javascript复制
var myBoolean=new Boolean();

Date 对象 Date 对象用于处理日期与时间。 以下四种方法同样可以创建 Date 对象：

代码语言：javascript复制
var d = new Date();
var d = new Date(milliseconds); // 参数为毫秒
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Math 对象 Math 对象用于执行数学任务。Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。

代码语言：javascript复制
var x = Math.PI; // 返回 PI
var y = Math.sqrt(16); // 返回 16 的平方根

Number 对象 Number 对象是原始数值的包装对象。Number 创建方式 new Number()。

代码语言：javascript复制
var num = new Number(value);

注意： 如果一个参数值不能转换为一个数字将返回 NaN (非数字值)。

String 对象 String 对象用于处理文本（字符串）。String 对象创建方法： new String()。

代码语言：javascript复制
var txt = new String("string");

或者更简单方式：
var txt = "string";

RegExp 对象 正则表达式是描述字符模式的对象。正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

代码语言：javascript复制
var patt=new RegExp(pattern,modifiers);
    
或者更简单的方式:

var patt=/pattern/modifiers;

全局属性 & 函数 JavaScript 全局属性和方法可用于创建Javascript对象。 全局属性：

属性

描述

Infinity

代表正的无穷大的数值

NaN

指示某个值是不是数字值

undefined

指示未定义的值

全局函数：

函数

描述

decodeURI()

解码某个编码的 URI

decodeURIComponent()

解码一个编码的 URI 组件

encodeURI()

把字符串编码为 URI

encodeURIComponent()

把字符串编码为 URI 组件

escape()

对字符串进行编码

eval()

计算 JavaScript 字符串，并把它作为脚本代码来执行

isFinite()

检查某个值是否为有穷大的数

isNaN()

检查某个值是否是数字

Number()

把对象的值转换为数字

parseFloat()

解析一个字符串并返回一个浮点数

parseInt()

解析一个字符串并返回一个整数

String()

把对象的值转换为字符串

unescape())

对由 escape() 编码的字符串进行解码

运算符 JavaScript 运算符用于赋值，比较值，执行算术运算等。

Error 对象 Error 对象在错误发生时提供了错误的提示信息。 以下实例中 try 语句块包含了未定义的函数 “adddlert” ，执行它会产生错误，catch 语句块会输出该错误的信息：

代码语言：javascript复制
try {
    adddlert("Welcome");
}
catch(err) {
    document.getElementById("demo").innerHTML = 
    err.name   "<br>"   err.message;
}

参考 & 引用

JavaScript 教程 | 菜鸟教程

javascript 编程算法 面向对象编程 数据结构

0 人点赞