JS入门到进阶知识总结(一)

简介: JS入门到进阶知识总结

一. 初始JavaScript

1.概念

JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言


运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎

脚本语言:不需要编译,直接就可以被浏览器解析执行了

功能:


可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。


2.JS的组成


20210305214934139.jpg

3. 与html结合方式

1.行内式


<input type="button" value="点我试试" οnclick="alert('Hello World')" />


注:


可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick

注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号

可读性差, 在html中编写JS大量代码时,不方便阅读;

引号易错,引号多层嵌套匹配时,非常容易弄混;

特殊情况下使用


2.内嵌 JS


<script>
alert('Hello World~!');
</script>

注:

可以将多行JS代码写到 <’‘script’’> 标签中

内嵌 JS 是学习时常用的方式

3.外部 JS文件

<script src="my.js"></script>


  • 利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
  • 引用外部 JS文件的 script 标签中间不可以写代码
  • 适合于JS 代码量比较大的情况

3.JS注释

  1. 单行注释
// 用来注释单行文字( 快捷键 ctrl + / )


  1. 多行注释
/*
获取用户年龄和姓名
并通过提示框显示出来
*/  默认快捷键 alt + shift + a )
快捷键修改为: ctrl + shift + /


4.JS的输入输出语句

20210305220015457.png


注:

  1. console.dir()可以输出对象的属性.

二. JS基础语法

1. 变量

变量:一小块存储数据的内存空间


Java语言是强类型语言,而JavaScript是弱类型语言。


强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据

弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。


语法:


 var 变量名 = 初始化值;


注:

  • typeof运算符:获取变量的类型。
  • null运算后得到的是object


2.数据类型

JS 把数据类型分为两类:


简单数据类型 (Number,String,Boolean,Undefined,Null)

复杂数据类型 (object)

1.数字型 Number


数字型三个特殊值


Infinity ,代表无穷大,大于任何数值

-Infinity ,代表无穷小,小于任何数值

NaN ,Not a number,代表一个非数值


注:

isNaN()方法用来判断一个变量是否为非数字的类型,返回 true 或者 false


20210305222628313.png

20210305221215244.jpg

2.字符串型 String

字符串型可以是引号中的任意文本,其语法为 双引号 “” 和 单引号’’


var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子; // 报错,没使用引号,会被认为是js代码,但js没有这些语法


注:


因为 HTML 标签里面的属性使用的是双引号,JS 这里我们更推荐使用单引号。

JS 可以用单引号嵌套双引号 ,或者用双引号嵌套单引号 (外双内单,外单内双)

通过字符串的 length 属性可以获取整个字符串的长度。

多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串

3.布尔型 Boolean


布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。

布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0。


console.log(true + 1); // 2
console.log(false + 1); // 1


4.Undefined 和 Null

  1. 一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时,注意结果)
var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN
  1. 一个声明变量给 null 值,里面存的值为空(学习对象时,我们继续研究null)
var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1

5.数据类型转换

20210305230417384.png

  • toString() 和 String() 使用方式不一样。
  • 三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式, 这一种方式也称之为隐式转换。
  1. 转换为数字型

2021030523051131.png

3. 运算符

  1. 一元运算符:只有一个运算数的运算符


  1. ++,-- , +(正号)
  2. ++ --: 自增(自减)
  3. ++(–) 在前,先自增(自减),再运算
  4. ++(–) 在后,先运算,再自增(自减)
  5. +(-):正负号

注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的

  1. 算数运算符
 + - * / % ...

赋值运算符

= += -+…


比较运算符

< >= <= == ===(全等于)


比较方式


类型相同:直接比较

字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止。

类型不同:先进行类型转换,再比较

===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false


逻辑运算符

&& || !

* 其他类型转boolean:

           1. number:0或NaN为假,其他为真
           2. string:除了空字符串(""),其他都是true
           3. null&undefined:都是false
           4. 对象:所有对象都为true


  1. 三元运算符


? : 表达式

var a = 3;

var b = 4;


var c = a > b ? 1:0;


语法:

表达式? 值1:值2;

判断表达式的值,如果是true则取值1,如果是false则取值2;


4. 流程控制语句:


f…else…

switch:

在java中,switch语句可以接受的数据类型: byte int shor char,枚举(1.5) ,String(1.7)

         switch(变量):

                         case 值:

在JS中,switch语句可以接受任意的原始数据类型

while

do…while

for


5. JS特殊语法:


    1. 语句以;结尾,如果一行只有一条语句则 ;可以省略 (不建议)
    2. 变量的定义使用var关键字,也可以不使用
        用: 定义的变量是局部变量
           不用:定义的变量是全局变量(不建议)


三.基本对象

1.数组

数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式

1.创建数组
  1. 利用 new 创建数组
var 数组名 = new Array() ;
var arr = new Array(); // 创建一个新的空数组
  1. 利用数组字面量创建数组
//1. 使用数组字面量方式创建空的数组
var 数组名 = [];
//2. 使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑','大黄','瑞奇']

注:

  • 声明数组并赋值称为数组的初始化
  • 这种字面量方式也是我们以后最多使用的方式
2.遍历数组
var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
  console.log(arrStus[i]);
} 

注意:


使用“数组名.length”可以访问数组元素的数量(数组长度)。

当我们数组里面的元素个数发生了变化,这个 length 属性跟着一起变化。


2.函数对象


函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。


1.函数的使用


函数在使用时分为两步:声明函数和调用函数。


声明函数


// 声明函数
function 函数名() {
//函数体代码
}


  1. 调用函数


函数名();


注意:声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码。

2.函数的返回值

return 语句的语法格式如下:

// 声明函数
function 函数名(){
...
return 需要返回的值;
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值


注意:


在使用 return 语句时,函数会停止执行,并返回指定的值

如果函数没有 return ,返回的值是 undefined

break ,continue ,return 的区别


break :结束当前的循环体(如 for、while)

continue :跳出本次循环,继续执行下次循环(如for、while)

return :不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码


3.arguments的使用


JS中所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递的所有实参。

arguments展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特点:


具有 length 属性

按索引方式储存数据

不具有数组的 push , pop 等方法


4. 函数的两种声明方式


自定义函数方式

利用函数关键字 function 自定义函数方式。


// 声明定义方式
function fn() {...}
// 调用
fn();

注:

  • 因为有名字,所以也被称为命名函数
  • 调用函数的代码既可以放到声明函数的前面,也可以放在声明函数的后面
  1. 函数表达式方式(匿名函数)
// 这是函数表达式写法,匿名函数后面跟分号结束
var fn = function(){...};
// 调用的方式,函数调用必须写到函数体下面
fn();

注:

  • 因为函数没有名字,所以也被称为匿名函数
  • 这个fn 里面存储的是一个函数


3.自定义对象


在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。

对象是由属性和方法组成的。


属性:事物的特征,在对象中用属性来表示(常用名词)

方法:事物的行为,在对象中用方法来表示(常用动词)

1.创建对象的三种方式

在 JavaScript 中,现阶段我们可以采用三种方式创建对象(object):


  1. 利用字面量创建对象
  2. 利用 new Object 创建对象
  3. 利用构造函数创建对象
  1. 利用字面量创建对象
    对象字面量:就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法。
    { } 里面采取键值对的形式表示
var star = {
name : 'pink',
age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~');
}
};
  1. 利用new Object创建对象
var andy = new Obect();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
alert('大家好啊~');
}
  1. 利用构造函数创建对象

在 js 中,使用构造函数要时要注意以下两点:

  1. 构造函数用于创建某一类对象,其首字母要大写
  2. 构造函数要和 new 一起使用才有意义
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.sayHi = function() {
alert('我的名字叫:' + this.name + ',年龄:' + this.age + ',性别:' + this.sex);
}
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);


注意:

  1. 构造函数约定首字母大写。
  2. 函数内的属性和方法前面需要添加 this ,表示当前对象的属性和方法。
  3. 构造函数中不需要 return 返回结果。
  4. 当我们创建对象的时候,必须用 new 来调用构造函数。
2.遍历对象属性

for…in 语句用于对数组或者对象的属性进行循环操作。

其语法如下:

for (变量 in 对象名字) {
// 在此执行代码
}

举例:

for (var k in obj) {
console.log(k); // 这里的 k 是属性名
console.log(obj[k]); // 这里的 obj[k] 是属性值
}
相关文章
|
3月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
740 2
|
17天前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
|
2月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
236 1
|
2月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
113 10
|
2月前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
4月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
125 5
一小时入门Vue.js前端开发
|
3月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
3月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
39 1
|
3月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
691 1
|
3月前
|
Web App开发 JSON JavaScript
深入浅出:Node.js后端开发入门与实践
【10月更文挑战第4天】在这个数字信息爆炸的时代,了解如何构建一个高效、稳定的后端系统对于开发者来说至关重要。本文将引导你步入Node.js的世界,通过浅显易懂的语言和逐步深入的内容组织,让你不仅理解Node.js的基本概念,还能掌握如何使用它来构建一个简单的后端服务。从安装Node.js到实现一个“Hello World”程序,再到处理HTTP请求,文章将带你一步步走进Node.js的大门。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开一扇通往后端开发新世界的大门。