JavaScript基础部分（一）

2023-12-18 12:15:01

JavaScript(基础部分)

JS简介

  • JS是一种轻量级的脚本语言，一种嵌入式(embedded)语言，本身提供的算法不多++脚本语言不具备开发操作系统的能力，只能用来编写控制其他大型应用程序++
  • JS能够操控浏览器网页的运行环境就是浏览器
  • JS应用领域广泛，既可以写前端，也可以写后端(Nodejs)，还能写小程序、app
  • JavaScript与ECMAScript的关系：ES是JS的规格，JS是ES的一种实现，在日常情况下二者可以互换

JS语句、标识符、变量

语句

  • JS语句建议由分号结尾，在html中用

标识符

  • 标识符(identifier)是用来识别各种值的合法名称，最常见的标识符就是变量名。
  • 在JS中除了字母数字下划线数字不开头之外，还增加了美元符号$和中文作为合法的标识符::不建议使用中文作为变量名::
  • 这个和Python一样

变量

  • var num=10;声明一个变量，var是关键字
  • 打印：console.log(变量名)在html网页中是看不到的，需要检查→控制台中才能看到打印出来的变量
  • 变量提升(hoisting)：JS引擎的工作方式是先解析代码，获取所有被声明的变量，然后再逐行运行，这导致了所有声明变量的语句都会被提升到代码的头部，称为变量提升！
  • 注意！这里的变量提升就等效于在语句之前先var name;，就是提前将变量声明但是并不会将变量初始化，变量初始化是在后续进行语句的执行之后才会实现如果在变量未初始化就打印变量，那么会显示undefined类型

JS引入文件、注释、常见输出方式

引入文件

  • JS就像CSS一样需要引入到HTML文件中才能运行
  • 三种方法
    • 嵌入到HTML文件中：<body><script>...</script></body>
    • 引入本地独立的JS文件：
      • 把所有的JS代码写到一个单独的文件，这个文件叫JS文件，以.js结尾
      • 再在<body>中添加<script>，添加src引入资源属性，通过输入文件的路径引入该文件（不是link了，是通过属性连接的）++当然，也可以在中写，但是强烈建议在中++
    • 引入网络来源的文件
      • JS有很多别人已经写好的功能，我们直接顺手牵羊引入到自己的项目中。++后续会接触到jQuery类库，它可以更好地帮助我们操作JS++
      • 找到目标js文件，里面全是别人写好的代码，我们的引入方式和本地JS文件一样，就是地址变成网络地址而已。

注释：有单行、多行，和C一致

%% 尼玛啊！注释的快捷键是ctrl+/

输出方式

  • 弹出窗口输出：
    • 在浏览器中弹出一个对话框，把要输出的内容展示出来。alert把要输出的内容首先转化为字符串然后再输出alert("内容")(都在JS文件中执行哈)
    • ++这个弹出框就是我访问武理教务系统时提醒我密码等级过低的那种框，也是浏览器还原之前的页面的那种框，一模一样，原来都是用JS写的++
  • 写到页面上：document.write("内容")，内容就在页面上
  • 打印/控制台输出：console.log(变量名)在html网页中是看不到的，需要检查→控制台中才能看到打印出来的变量++该方式用的最多++

数据类型

  • ES5共有6种数据类型，为数值number、字符串string、布尔值、对象、null、undefined(面试中经常考察的问题！！！)ES6新增了Symbol和BigInt类型
  • 分类：
    • 原始/基本数据类型：数值、字符串、布尔值。::字符串类型可以由单引号也可以由双引号包裹::
    • 引用/合成数据类型：对象。一个对象往往是由多个原始类型的值组合而成，对象可以看成是一个存放各种值的容器，有点像JSON++和JSON不一样的地方在于，对象的键值对中的键不是字符串，JSON中左边的键都必须是字符串++
    • 特殊值：null、undefined都代表空，语法效果和含义几乎差不多，但是分成两个是有历史原因的null一般代表对象为空，undifined一般表示数值变量为空
  • 数值(Number类型)
    • 分为整数和浮点数，Number表示的数字是有范围的，如果超过了这个范围，则会返回±Infinity
    • 特殊的数字：
      • 正无穷：Infinity
      • 负无穷：-Infinity
      • NaN:非法数字::Not a Number::
  • Undefined
    • Undefined 类型只有一个值，即特殊的 undefined在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined
  • Null
    • undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true。

注意：从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object。

  • 强制类型转换
    • 字符串toString()/String()/拼串

运算符

typeof运算符

%% typeof运算符可以检测数据类型（判断基本数据类型）

  • console.log(typeof var);
    • 能根据不同数据类型返回number/string/boolean/object
    • 我们判断对象的情况不准确，因为有很多别的类型也是返回了object，所以我们用typeof判断的是三个基本数据类型。

比较运算符

  • 出现了新的运算符===和·!==!!!
  • ==判断的是两个值是否相等，不会看这两个值是否属于同一数据类型。===是严格的相等符号，判断是否完全相等++比如，我们有两个数据10和"10"，这两个数据的值是完全一样的，都为10，双等返回的就是true。但===会判断出来这两个数数据类型不一样，返回的是false++
  • 同理!==也是严格不相等运算符

布尔运算符：取反!、且&&、或||

  • 对于非布尔值取反，取反运算符会先将其转为布尔值，再将其取反！打印的都是true、false，不是1、0
  • 一共只有六个值取反后为true：undefined/null/false/0/NaN/空字符串

字符串

符号

  • 字符串就是零个或多个排在一起的字符放在单引号或双引号之中，单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号
  • 如果要在单引号字符串的内部，使用单引号，就必须在内部的单引号前面加上反斜杠，用来转义。双引号字符串内部使用双引号，也是如此。++因为如果同时用两个单引号或双引号，前两个组成一对，后两个组成一对，中间的内容就被搁置报错了++
  • 比如'Did she say \'Hell0\'?',"Did she say \"Hello\"?"。但这可读性不高，建议单双引号共同使用。
  • 和C一样，如果我们字符串过长，可以加\用来暂隔字符串，下一行接着写::字符串不要随意换行::
  • 字符串属性length（只读，不可修改的属性），返回字符串的长度，应用方式就是str.length

常用方法，用法都是 str.method

charAt( )
  • charAt( )返回字符串中指定位置的字符，参数从0开始编写
  • 如果参数为负、超过范围，charAt()会返回空字符串，在控制台上就是啥也没有""
concat( )
  • 用于连接两个字符串，合并然后返回一个新字符串，不改变原来字符串
  • 括号中内容可以是多个！合并的参数是没有限制的
  • 如果参数不是字符串，concat会先把它变成字符串，再连接
  • 咱只需要用+号就行了，不用concat连接
    %% concat和+是有区别的，concat是字符串的方法，所以不管什么参数都要先将其变成字符串再连接，但+号如果遇到两个数据类型那么会做运算，遇到数字和字符串再相连接
substring( )
  • 截取字符串，取出子字符串并返回，不改变原字符串
  • 参1表示开始位置，参2表示结束位置左闭右开！！！++比如（0，2）会返回前两个字符++如果结束位置没写则默认全读完
  • 如果参1>参2，则substring方法会自动更正
  • 如果参数是负数，则负数自动转变为0
substr( )
  • 与substring( )唯一不一样的是参数，参2是子字符串的长度如果省略就默认读完

如果参1为负，则表示倒序；如果参2为负，则转变为0，因此会返回空字符串

indexOf( ) 非常常用！！！
  • 用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是开始位置，如果返回-1则表示不匹配
  • 也可以有第二个参数（数据），表示从该位置开始向后搜索
trim( )
  • 去除字符串两端的空格、制表符、换行符、回车符，返回一个新的字符串，不改变原字符串。去除时不需要加参数
  • ES6扩展的方法：
    • trimEnd():截取右边
    • trimStart():截取左边
  • 类比于Python的strip函数
split( ):字符串转化为数组
  • 按照某种指定的规则把字符串分离开，返回一个由分割出来的子字符串组成的数组::如’it|sxt|baizhan’.split(‘|’)在控制台返回的就是[“it”,“sxt”,“baizhan”]，在网页上显示的是it,sxt,baizhan::
  • 如果split(‘’)参数是空字符串，则该方法分割每一个字符
  • 如果参数啥也不写，则数组中的内容就是完整的原字符串
    • 这个和Python不一样，注意不写参数就返回原字符串
  • split方法可以有参数2，限定返回数组的最大成员数

数组

概述

  • 数组可以先定义再赋值，let arr1=[];arr1[0]=1;没有任何数量限制，就是可变数组！
  • 任意类型的数据都可以任意放入数组，数组内的元素种类可以不同
  • 多维数组：数组的嵌套
  • length属性：返回数组的成员数量array.length
  • 数组越界时会返回undefined

数组的遍历！！！！

  • for...in用于遍历所有的元素
    `` for(var i in arrayname){…}

方法

Array.isArray()
  • 判断一个内容是否为数组，返回一个布尔值::弥补typeof运算符的不足::
  • 它就长这样，括号内为名称，如果是数组就返回true
push()/pop()
  • push()用于在数组的末端添加一个或多个元素，并返回添加后的元素的个数::push()会改变原数组::++这个返回个数人为使用，比如你想直到个数的话就var一个length=arr.push(...)，不想知道就把它当语句使用就好++
  • pop()用于删除数组的最后一个元素，并返回该元素
shift()/unshift()

%% 和push/pop恰好相反，shift()删除第一个元素并返回该元素

  • 利用shift清空数组元素：
    `` while(var i = arr.shift()){console.log(i);}

全部清空之后，i为undefined，转换为布尔值就是false，循环退出

  • unshift():向头部添加元素，并返回添加元素之后数组长度
join():数组转化为字符串，与split()方法相反
  • 以指定参数作为分隔符，将所有数组成员连接为一个字符串并返回。
  • 基本上用arr.join("")直接变成不带间隙的字符串，如果不提供参数则默认用逗号分隔，如果数组成员为null/undefined，则连接时将他们变成空字符串::就是啥也没有::
concat():多个数组合并成一个数组
  • 参数不一定为数组，可以为任意类型，如果只是单纯的加元素感觉和push()是一样的
  • 应用场景：上拉加载，合并数据++比如逛朋友圈，我们观察到的信息假设是由数组存储的，那么我们想看更久的朋友圈就下拉，后台就会发送数据，这时数据之间就会合并，数组的合并就是由concat实现的++
reverse():用于颠倒数组元素，该方法会改变原数组
  • 用于颠倒字符串的顺序！先将字符串变成数组split()，再将数组颠倒顺序，再join把数组转变为字符串
indexOf():查找、返回元素在数组中第一次出现的位置，无返-1
  • 判断是否存在就用arr.indexOf(元素)>-1判断
  • 也有第二个参数，表示开始位置

函数

  • function函数声明命令：function+函数名+（形参）{ }
  • 函数调用直接写名字就成
  • 函数名的提升
    • JS引擎将函数名视同变量名，采用function命令声明函数时，整个函数就像变量一样被提升到代码头部
    • 说白了就是：你先调用再声明函数是可行的::变量提升只是将声明提升了，不会将初始化提升。但函数会将整体都提升，所以可以提前调用函数并实现函数的功能::
    • 变量的提升是在函数提升之前的，无论遇到什么，总是先进行变量的提升，提升之后再进行函数提升::函数提升的效果就和剪切差不多，但是JS解析后函数提升不会早于变量提升::
  • 函数的参数：直接写形参名就好，不用写明形参的数据类型，如`fuction add(x,y){console.log(x+y);}
  • 返回值是可选择的！，既可以写return也可以不写！但是注意，只要我们写了return，return后面就不可以加任何代码return语句必须是函数的最后写，其他代码必须提前，不然不起作用

对象

概述

%% 对象是JS的核心概念，也是最重要的数据类型。对象是一组“键值对”的集合，是一种无序的复合数据集合，具有很好的包容性，比如：
var user = { name:‘zhangyiteng’,
GetName:function(name){return name;}, //此时GetName就是函数名，属性就是函数名
container:{frontEnd:'web'}, age:19
`` };

  • 对象的每一个键名又称属性property，值可以是任意的数据类型。如果一个属性的值为函数，那么通常把整个属性称为方法::函数和方法是一个意思，不用细究::
  • 调用函数就user.GetName(名字);
  • 如果又对象的嵌套，我们调用对象的成员的成员被称为链式调用，比如user.container.frontEnd

Math对象

  • Math.abs()绝对值，后面传入值就好
  • Math.max()/min()
    • 参数一大堆：返回最大最小值
    • 无参：min返回-Infinity,max返回Infinity
  • Math.floor()/ceil()
    • floor():向下取整
    • ceil():向上取整
  • Math.random():返回[0,1)之间的随机数，不用写参数
  • Math.round():四舍五入

Date对象

%% 以1970年1月1日0时0分0秒(格林威治时间/国际时间)作为零点，范围为前后1亿天（单位为毫秒）

  • Date.now():获取当前时间距离时间零点的毫秒数，相当于Unix时间戳乘以1000::本身这个now没什么卵用::
    • ::时间戳就是距离时间零点的秒数::后台给我们的数据就是这样的数字的1000倍，我们需要自己把这些数字转换成时间
    • Unix是20世纪70年代初出现的一个操作系统，Unix认为1970-01-01-0时是时间纪元,所以JS遵循的就是Unix的时间戳
  • 将时间戳变成完整长日期的格式
    • 给定时间戳用new Date(时间戳114514114514)
    • 现在的时间用new Date()
    • 给定英文日期new Date('January 6,2022')
    • 传入参数分别为年、月、日、时、分、秒
  • 一系列get方法:就是在日期的前提之下返回具体的部分值，比如：console.log(new Date().getDate())打印的就是当前时间的天份
    • Time()：获取时间戳毫秒数
    • Day()：星期几，星期天为0，星期一为1，以此类推
    • Year()：距离1900年的年数
    • FullYear()：四位年份
    • Month()：0表示1月，11表示12月
    • Hours()：0-23小时
    • Milliseconds()：0~999毫秒
    • Minutes()：分钟0~59
    • Seconds()：秒0~59
      %% 一般都建个变量d存储日期格式，再用d.get…使用函数

文章来源:https://blog.csdn.net/qq_65052774/article/details/135051866
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。