前端温习(一):JavaScript入门

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

JaveScript

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

JavaScript 对象

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

访问对象的属性

属性是与对象相关的值。

访问对象属性的语法是:

// objectName.propertyName
var message="Hello World!";
var x=message.length;
// output 12


访问对象的方法

方法是能够在对象上执行的动作。

通过以下语法来调用方法:

// objectName.methodName()
// toUpperCase转大写
var message="Hello world!";
var x=message.toUpperCase();
// output HELLO WORLD!


创建 JavaScript 对象

这里能够定义并创建自己的对象。

创建新对象有两种不同的方法:

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

使用 Object 定义

JavaScript 中,几乎所有的对象都是 Object 类型的实例,它们都会从 Object.prototype 继承性和方法

Object 构造函数创建一个对象包装器

Object 构造函数,会根据给定的参数创建对象,具体有以下情况:

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

语法格式:

// 以构造函数形式来调用
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'}


使用函数来定义对象(对象构造器)

方法也可以附加在对象上的函数

语法格式:

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 语句循环遍历对象的属性。

语法格式:

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 的对象是可变的,它们是通过引用来传递的。如果修改 了引用对象属性,源对象的属性也会改变:

如:

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 属性就可以给对象的构造函数添加新的属性:

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();


内置对象

  1. Array 对象
    Array 对象用于在变量中存储多个值:
var myArray = ["Saab", "Volvo", "BMW"];

  1. Boolean 对象
    Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false).
var myBoolean=new Boolean();

  1. Date 对象
    Date 对象用于处理日期与时间。
    以下四种方法同样可以创建 Date 对象:
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);

  1. Math 对象
    Math 对象用于执行数学任务。Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math()。
var x = Math.PI; // 返回 PI
var y = Math.sqrt(16); // 返回 16 的平方根

  1. Number 对象
    Number 对象是原始数值的包装对象。Number 创建方式 new Number()。
var num = new Number(value);

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

  1. String 对象
    String 对象用于处理文本(字符串)。String 对象创建方法: new String()。
var txt = new String("string");
或者更简单方式:
var txt = "string";

  1. RegExp 对象
    正则表达式是描述字符模式的对象。正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。
var patt=new RegExp(pattern,modifiers);
或者更简单的方式:
var patt=/pattern/modifiers;

  1. 全局属性 & 函数
    JavaScript 全局属性和方法可用于创建Javascript对象。
    全局属性:
属性 描述
Infinity 代表正的无穷大的数值
NaN 指示某个值是不是数字值
undefined 指示未定义的值
  1. 全局函数:
函数 描述
decodeURI() 解码某个编码的 URI
decodeURIComponent() 解码一个编码的 URI 组件
encodeURI() 把字符串编码为 URI
encodeURIComponent() 把字符串编码为 URI 组件
escape() 对字符串进行编码
eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行
isFinite() 检查某个值是否为有穷大的数
isNaN() 检查某个值是否是数字
Number() 把对象的值转换为数字
parseFloat() 解析一个字符串并返回一个浮点数
parseInt() 解析一个字符串并返回一个整数
String() 把对象的值转换为字符串
unescape()) 对由 escape() 编码的字符串进行解码

  1. 运算符
    JavaScript 运算符用于赋值,比较值,执行算术运算等。
  2. Error 对象
    Error 对象在错误发生时提供了错误的提示信息。
    以下实例中 try 语句块包含了未定义的函数 “adddlert” ,执行它会产生错误,catch 语句块会输出该错误的信息:
try {
    adddlert("Welcome");
}
catch(err) {
    document.getElementById("demo").innerHTML = 
    err.name + "<br>" + err.message;
}

参考 & 引用

JavaScript 教程 | 菜鸟教程

目录
相关文章
|
8天前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
6天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
9天前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
23 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
9天前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
28 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
9天前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
13 2
|
8天前
|
JSON 前端开发 JavaScript
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
该文章提供了Webpack的基础入门指南,涵盖安装配置、基本使用、加载器(Loaders)、插件(Plugins)的应用,以及如何通过Webpack优化前端项目的打包构建流程。
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
|
8天前
|
JavaScript 前端开发 开发者
深入浅出 Vue.js:构建响应式前端应用
Vue.js 是一个流行的前端框架,以其简洁、高效和易学著称。它采用响应式和组件化设计,简化了交互式用户界面的构建。本文详细介绍 Vue.js 的核心概念、基本用法及如何构建响应式前端应用,包括实例、模板、响应式数据和组件等关键要素,并介绍了项目结构、Vue CLI、路由管理和状态管理等内容,帮助开发者高效地开发现代化前端应用。
|
8天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
9天前
|
前端开发 JavaScript
前端JS控制网页复制粘贴
前端JS控制网页复制粘贴
|
9天前
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
21 0
下一篇
无影云桌面