前端温习(一):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 教程 | 菜鸟教程

目录
相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
15天前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
62 5
|
2月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
89 1
|
2月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
59 4
|
2月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
159 2
|
2月前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
26 3
|
2月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
216 1
|
2月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
405 0