0
0

JavaScript 知识梳理基础篇（一）

本文已收录于专栏
⭐️ 《JavaScript》⭐️

此专栏适用于已经入门JavaScript的同学做复习回顾使用，因为讲解具有跳跃性不推荐零基础的新手学习~

语法

因为我们的文档页面是从上往下加载的，所以先得有标签 所以我们 

<script>

标签应该写到 

<body>

标签的下面。

JavaScript 是区分大小写，分号虽然可有可无，但还是推荐加上，这样会更加规范一些。

输入输出语句

prompt：

：输入框，返回值即为输入内容。

窗口输出

windoe.alert()

：浏览器弹出警告框来输出信息。

<script>alert("这是弹出窗口输出");</script>

在这里插入图片描述

页面输出

document.write()

：写入HTML输出。

<script>
    document.write("这是页面输出");</script>

在这里插入图片描述

控制台输出

console.log()

：浏览器在控制台输出信息。

在Google 浏览器上按 F12 键可打开浏览器的控制台。

<script>alert("这是弹出窗口输出");</script>

在这里插入图片描述

变量

在

JavaScript

里用 

var

、

let

、

const

来声明变量。

JavaScript

是弱类型语言，变量可以存放不同类型的值。

var

：作用域很大，相当于全局变量，且允许重复声明。

let

:作用域较小，仅在所在代码块内有效，且不允许重复声明。

const

：用来声明一个只读的常量，一旦声明，就不能改变 。

数据类型

在计算机中，不同的数据所需占用的存储空间是不同的。

为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

变量是用来存储值的所在处，他们有名字和数据类型。

变量的数据类型决定了如何将代表这些知道位存储到计算机的内存中。

JavaScript 是一种弱类型或者说是动态语言，这意味着不用提前声明变量类型，在程序运行过程中，类型会被自动确定。

JS数据类型分为：简单数据类型和复杂数据类型

五种简单数据类型：number、 string、boolean、undefined

number

number：数字（整数、小数、NaN）。

八进制 0~7 在程序里面数字前面加0，表示八进制。

var num =010； 
八进制： 010 十进制 ：8

十六进制 0~9 a ~f 在程序里面数字前面加0x，表示十六进制。

var num = a； 
八进制： a 十进制 ：10

数字的最值

Number.MAX_VALUE
Number.MIN_VALUE

无穷大：Infinity

console.log(Number.MAX_VALUE*2);Infinity 正无穷大
console.log(-Number.MIN_VALUE*2);-Infinity 负无穷大

非数字：NaN

console.log('pink老师'-100)； NaN

is NaN()

用来判断是否是数组，若是数字返回true，不是则返回false。

console.log(is NaN(12))； true
console.log(is NaN('12'))； false

string

string：字符、字符串，单双引号都行，推荐使用单引号。

外单内双

var str ='我是你"爸爸"'

str.length 获取字符串长度

var str ='我是你"爸爸"'
console.loh(str.length)

var str1 =newString("abc");var str2 ="abc";alert(str3.lenth);

var str4 = ‘abc’;

aler(str3.length);

var str4 = ’ abc ’ ;

trim():去除字符串前后两端的空白字符串。

字符串的拼接

数值相加，字符相连

console.log('沙漠'+'骆驼') 沙漠骆驼
console.log('pink老师'+18) pink老师18
console.log('pink老师'+18) pink老师18
console.log('pink'+true) pinktrue
console.log('12'+12)1212
console.log(12+12)24

boolean

boolean：布尔。true 是 1 false 是 0

undefined

undefined：当声明的变量未初始化是，该变量的默认值是 undefined.

null：对象为空，类型为object

typeof（变量） 可以变量查看数据类型.

typeof

  • typeof 可用来获取检测变量的数据类型
    类型例结果stringtypeof “小白”“string”numbertypeof 18“number”booleantypeof true“boolean”undefinedtypeof undefined“undefined”nulltypeof null“object”

    字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

  • 数字字面量：8，9，10
  • 字符串字面量：‘大前端’，‘后端’
  • 布尔字面量：true、false

通过控制台的颜色判断属于哪种数据类型
黑色字符串蓝色数值灰色undefined 和 null

运算符

概念：算术运算使用的符号，用于执行两个变量或值的算术运算。
运算符描述实例+加10 + 20 =30-减10 - 20 =-10*乘10 * 20 =200/除10 / 20 =0.5%取余数（取模）返回出发的余数 9 % 2 =1

浮点数的精度问题

浮点数值的最高精度是17位小数，但在进行算数计算时其精确度远远不如整数

var result =0.1+0.2;//结果不是0.3，0.30000000000000004
console.log(0.07*100);//结果不是7，而是7.000000000000001

关系运算符

比较运算符是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值(true / false)作为比较运算的结果。
运算符名称说明案例结果<小于号1 < 2true>大于号1 > 2false>=大于等于号(大于或者等于)2 >= 2true<=小于等于号(小于或者等于)3 <= 2false==判等号(会转型)37 == 37true!=不等号37 != 37false=== !==全等 要求值和数据类型都一致37 === ‘37’false
等号
符号作用用法=赋值把右边给左边==判断判断两边值是否相等(注意此时有隐士转换)===全等判断两边的值和数据类型是否完全相同
== 等于：

1.判断类型是否一样，如果不一样，则进行类型转换,转换成一样的之后进行下一轮比较

2.再去比较其值

=== 全等于

1.判断类型是否一样，如果不一样，直接返回false

2.再去比较其值

console.log(18=='18');//true
console.log(18==='18');//false

逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。
逻辑运算符说明案例&&“逻辑与”，简称"与" andtrue && false||“逻辑或”，简称"或" ortrue || false！“逻辑非”，简称"非" not！true

短路运算（逻辑中断）

短路运算的原理：当有多个表达式时，左边的表达式可以确定结果是，就不再继续运算右边的表达式的值。

①逻辑与

语法：表达式1&&表达式2

  • 如果第一个表达式的值为真，则返回表达式2
  • 如果第一个表达式的值位假，则返回表示时1

’‘ null undefined NaN 均为假，其余都是真的

console.log(123&&456);//456
console.log(0&&456);//0
console.log(123&&456&&789);//789
②逻辑或
  • 语法：表达式1 || 表达式2
  • 如果第一个表达式的值为真，则返回表达式1
  • 如果第一个表达式的值为假，则返回表达式2

前面的结果影响着后面的结果是否要执行。

运算符优先级

优先级运算符顺序1小括号()2一元运算符++ – ！3算数运算符先 * / 后 + -4关系运算符>, >= , < , <=,5相等运算符，！=，=，！==6逻辑运算符先 && 后 ||（先与后或）7赋值运算符=8逗号运算符，
1.一元运算符里面的逻辑非优先级很高

2.逻辑与 比 逻辑或 优先级高

3.练习题

类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

我们通常会实现3种方式的转换：

  • 转换为字符串类型
  • 转换为数字型
  • 转换为布尔型

转换成字符串类型

方式说明案例toString()转成字符串var num = 1; alert(num.toString());String()强制转换转成字符串var num = 1; alert(String(num));加号拼接字符串和字符串拼接的结果都是字符串var num =1; alert(num+“我是字符串”);

//1.把数字型转换为字符串型 toString()  变量.toString()var num =10;var str = num.toString();
console.log(str);//2.强制转换
console.log(String(num));+“aba”  编译器识别到+号，后面的字符串就自动转为数字等价于  +NaN，一般使用parseInt。
console.log(+“aba” );NaN

转换为数字型

方式说明案例parselnt(string)函数将string类型转成整数数值型parselnt(‘78’)parseFloat(string)函数将string类型转成浮点数数值型parseFloat(‘78.21’)Number()强制转换函数将string类型转换为数值型Number(‘12’)js 隐式转换(- * /)利用算术运算隐式转换为数值型‘12’-0

// 1.parseInt()var age =prompt('请输入您的年龄')
console.log(parseInt(age));     数字型18
console.log(parseInt('3.14'));  取整
console.log(parsenInt('3.97')); 不会四舍五入
console.log(parsenInt('3.97')); 会去掉单位

// 2.parseFloat()
console.log(parsentFloat('3.14'));     保留小数
console.log(parsentFloat('120px'));120，去掉单位

// 3.利用Number(变量)var str ='123';
console.log(Number(str));
console.log(Number('12'));// 4.利用了算术运算 - * /   隐式转换
console.log('12'-0);
console.log('123'-120);
console.log('123'*1);

1.注意 parseInt 和 parseFloat ，这两个是重点

2.隐式转换是我们在进行算数运算的时候，JS自动转换了数据类型.

转化成布尔型

方法说明案例Boolean()函数其他类型转成布尔值Boolean(‘true’);

  • number:0和NaN转为false，其他的数字转为 true
  • string：空字符串转为false，其他的字符串转为true
  • null：false
  • undefined：false
console.log(Boolean(''));//false
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
console.log(Boolean('小白'));//true
console.log(Boolean(12));//true

函数

JS 中 用 function 关键字来进行定义。

形参不需要写类型声明，返回值也不需要写类型声明，可以在函数内部直接使用return 返回即可。

声明

方式一：命名函数（关键字自定义函数

function  add（a,b）{return a + b ;}

方式二：匿名函数（函数表达式

匿名函数声明方式和声明变量差不多，只不过变量里面存的是值，而函数里面存放的是函数。

varadd=function(a,b){return a+b;}add()//add是变量名，不是函数名

参数

实参个数尽量与形参匹配

let ans =add(1,2);//3

如果在函数调用时实参多余形参，多余的实参不会被形参接收。

let ans =add(1,2,3);//3

如果在函数调用时实参少于形参，未接收到值的形参会被定义为 undefined。

getsum(1);//NaN

arguments

arguments是函数内置的对象，里面存放了所有传递过来的实参。

  • arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点①：具有 length 属性②：按索引方式储存数据③：不具有数组的 push , pop 等方法
// 函数声明functionfn(){
    console.log(arguments);//里面存储了所有传递过来的实参
    console.log(arrguments.length);// 3
    console.log(arrguments[2]);// 3}// 函数调用fn(1,2,3);

例如：利用arguments求任意个数的最大值

functionmaxValue(){var max = arguments[0];for(var i =0; i < arguments.length; i++){if(max < arguments[i]){
            max = arguments[i];}}return max;}
console.log(maxValue(2,4,5,9));// 9
console.log(maxValue(12,4,9));// 12

返回值

return 只能返回一个变量。

  1. 返回的结果是最后一个值
function （a，b）{return a,b;}

console.log(fn(1,2));
  1. 可以返回一个数组
function （a，b）{return[a+b,a-b,a,b];}`在这里插入代码片`

console.log(fn(1,1));// 2,0,1,1
  1. 如果函数没有return，或者return后面没有值则返回 undefined

作用域

作用域：就是限定变量名称的可用性的代码范围。

作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

JavaScript (ES6前) 中的作用域有两种：

  • 全局作用域
  • 局部作用域(函数作用域)

作用域

全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 JS 文件。

局部（函数）作用域

作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。

JS 没有块级作用域

块作用域由 {} 包括在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用，如下面的Java代码：

if(true){
    int num =123;
    System.out.println(num);// 123}
System.out.println(num);// 报错12345

JS 中没有块级作用域(在ES6之前)

if(true){
    int num =123;alert(num);// 123}alert(num);// 123

变量的作用域

在JavaScript中，根据作用域的不同，变量可以分为两种：

  • 全局变量
  • 局部变量

全局变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量），特殊情况下，在函数内未使用 var 声明的变量也是全局变量。

  • 全局变量在代码的任何位置都可以使用
  • 在全局作用域下 var 声明的变量 是全局变量

局部变量

  • 局部变量只能在该函数内部使用
  • 在函数内部 var 声明的变量是局部变量
  • 函数的形参实际上就是局部变量

区别

  • 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
  • 局部变量：只能在函数内部使用，当其所在代码块被执行时，会被初始化，当代码块运行结束后，就会被销毁，因此更节省空间。

作用域链

内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构我们称为作用域链。

  1. 只要是代码，就至少有一个作用域
  2. 写在函数内部的叫局部作用域
  3. 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
  4. 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部访问，就称作作用域链。
var num =10;
funtion fn(){//外部函数var num =20；
    functionfun(){//内部函数
        console.log(num);// 20 ,一级一级访问}}
  • 作用域链：采取就近原则的方式来查找变量最终的值。

预处理

引入

先来看几个问题。

变量未声明。

console.log(num);// 结果是多少？//会报错 num is undefined*

先变量调用放到变量声明之前。

console.log(num);// 结果是多少？var num =10;// undefined

将函数调用放到自定义函数声明之前。

// 命名函数(自定义函数方式):若我们把函数调用放在函数声明上面fn();functionfn(){
    console.log('11');}//11 正常执行

将函数调用放到匿名函数声明之前。

// 匿名函数(函数表达式方式):若我们把函数调用放在函数声明上面fn();varfn=function(){
    console.log('22');}// 报错

JS 代码是由浏览器中的JavaScript 解释器来执行的，JavaScript 解释器在运行 JavaScrpt 代码的时候分为两步：预处理和代码执行。

  • 预解析：JS 引擎会把 JS 里面所有的 var 还有function 提升到当前作用域的最前面。
  • 代码执行：从上到下执行JS语句。

预解析只会发送在通过 var 定义的变量和 function 上。

这样我们就能很好的解决 为什么变量声明之间访问值为 undefined ，为什么函数声明之前可以调用函数。

变量预解析(变量提升)

变量预解析也叫做变量提升、函数提升。

变量提升：变量的声明会被提升到当前作用域的最上面，注意：变量的赋值不会被提升。

先变量调用放到变量声明之前。

console.log(num);// 结果是多少？var num =10;   
输出结果： undefined

相当于执行了以下代码

var num;// 变量声明提升到当前作用域最上面
console.log(num);// undefine
num =10;// 变量的赋值不会提升

函数预解析(函数提升)

函数提升：函数的声明会被提升带当前作用域的最上面，但不会调用函数。

将函数调用放到自定义函数声明之前。

fn();functionfn(){
    console.log('11');}

相当于执行了以下代码

函数的声明会被提升带当前作用域的最上面，但不会调用函数。

functionfn(){
    console.log('11');}fn();

将函数调用放到匿名函数声明之前。

fn();varfn=function(){
    console.log('22');// 报错}

相当于执行了以下代码

函数的声明会被提升带当前作用域的最上面，但不会调用函数。

varfn();fn();fn=function(){}

对象

在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：

  • 利用字面量创建对象
  • 利用 new Object创建对象
  • 利用构造函数创建对象

创建对象

利用字面量创建对象

对象字面量：就是花括号 

{ }

里面包含了表达这个具体事物（对象）的属性和方法

{ }

里面采取键值对的形式表示

  • 键：相当于属性名
  • 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）
var person ={

     name ="zhangsan"age:23,eat:function(){alert("干饭")；}}；

调用

  • 对象的属性调用 - 对象名.属性- 对象名[‘属性’]
  • 方法的调用 - 对象名.方法（）
alert(person.name);aler(person.age);alert(person['name']);aler(person['age']);

person.eat();

变量、属性、函数、方法总结

  • 变量：单独声明赋值，单独存在
  • 属性：对象里面的变量称为属性，不需要声明，用来描述对象的特征。
  • 函数：单独存在的

利用 new Object 创建对象

跟之前的 

new Array()

原理一致：

var 对象名 = new Object();

使用的格式：对象.属性 = 值

var obj =newObject();
obj.name ='张三丰';

obj.name ='18';

obj.sex ='男';

obj.sex ='男';

obj.sayHi=function(){
    console.log('hi~');}

console.log(obj.name);

console.log(obj['name']);

obj.sayHi();

利用构造函数创建对象

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初值，它总与new 运算符一起使用。

我们可以把对象中的一些公共的属性与方法抽离出来单独封装到这个函数里面。

使用构造函数时需要注意：

  • 构造函数用于创建某一类对象，其首字母要大写。
  • 构造函数要和new 一起使用才有意义。

语法如下：

function 构造函数名（）{

​        this.属性 = 值；

​        this.方法=function(){

​        }}new 构造函数名（）；

实例：

构造函数名字首字母要大写。

构造函数里面属性和方法前面必须加 this。

构造函数不需要return 就可以返回结果。

调用构造函数必须使用new。

我们只要new Star() 调用函数就创建了一个对象,即对象的实例化 。

functionStar(uname,age,sex){this.name = uname;this.age = age;this.sex = sex;this.sing=function(sang){
        console.log(sang);}}var ldh =newStar('刘德华',18,'男');// 对象实例化
console.log(typeof ldh);// object对象，调用函数返回的是对象

console.log(ldh.name);
console.log(ldh.['sex']);
ldh.sing('冰雨');

new

new 构造函数可以在内存中创建了一个空的对象。

在 this 指向这个新的对象。

执行构造函数里面的代码，给这个新对象添加属性和方法。

遍历对象

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

语法如下：

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

语法中的变量是自定义的，他需要符合命名规范，通常我们会将这个变量写为 k 或者 key

for(var k in obj){

     console.log(k);//这里的 k 是 属性名

     console.log(obj[k]);// 这里的 obj[k] 是属性值}

var obj ={name:'秦sir',age:18,sex:'男',fn:function(){};};
console.log(obj.name);
console.log(obj.age);
console.log(obj.sex);//for in 遍历我们的对象//for (变量 in 对象){}//我们使用for in 里面的变量 我们喜欢写k 或者keyfor(var k in obj){
    console.log(k);// k 变量 输出得到的是属性名
    console.log(obj[k]);// obj[k] 得到的是属性值}

完结散花

ok以上就是对 CSS快速入门 的全部讲解啦，很感谢你能看到这儿。如果有遗漏、错误或者有更加通俗易懂的讲解,欢迎小伙伴私信我，我后期再补充完善。

参考文献

pink老师入门视频教程

标签： javascript 前端 开发语言
本文转载自: https://blog.csdn.net/m0_66139206/article/details/126654187
版权归原作者 沈七QWQ 所有， 如有侵权，请联系我们删除。
登录后发布评论

“JavaScript 知识梳理基础篇（一）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

docker 安装 mysql

使用idea和vecode创建vue项目并启动（超详细）

科普文：微服务之SpringBoot性能优化器动态线程池【Dynamic-Tp】特性和源码解读

[实时计算flink]双流JOIN语句

【若依】若依Vue3前端拆解分析--布局分析--index篇

Spring Boot 3.4.0 发行：革新与突破的里程碑

索引（MySQL）

文章导航