JavaScript之爆肝汇总【万字长文❤值得收藏】(二)

简介: JavaScript之爆肝汇总【万字长文❤值得收藏】

二、细讲JavaScript基础语法


2.1.变量


2.1.1.定义一个变量

// 声明一个变量名为test的变量。
var test;
var age, name, sex;//声明age、name、sex三个变量
//同时声明变量并赋值
var age = 10, name = "小强", sex = "1";

2.1.2.变量命名规则及规范


1、由字母、数字、下划线、💲符号组成,不能以数字开头

2、不能使用关键字,例如:while

3、区分大小写

规范:约定俗成的写法

1、变量名要有意义.

2、遵守驼峰命名法,驼峰命名法:首字母小写,后面单词首字母大写,例如userName.


2.2.数据类型


其中数据类型有:Number类型、String类型、Boolean类型、Undefined类型、Null类型、Object类型


2.2.1.Number


Number数字类型:包含整数和小数


可以表示:十进制、八进制、十六进制


如:

var num = 10; //十进制
var num1 = 012; //八进制
var num2 = ox123; //十六进制

数值范围:

console.log(Number.MAX_VALUE); //最大值 值为5e-324
console.log(Number.MIN_VALUE); // 最小值 值为1.7976931348623157e+308
无穷大:Infinity
无穷小:-Infinity


数值判断不可以用小数验证小数以及不要用NaN验证是不是NaN (NaN----not a number) 但是可以用isNaN— is not a number结果是不是NaN


如:

var num; //声明一个变量,未赋值
console.log(isNaN(num)); // true 不是一个数字吗? 结果是true

2.2.2.String


字符串转义符:


image.png

eg:

var str = "iam a pm\\"
console.log(str); // iam a pm\

字符串拼接:

var str1 = "先生";
var str2 = "您好";
console.log(str1+str2); // 先生您好

若是字符串和数字拼接 结果也是字符串 拼接效果如上所示


2.2.3.Boolean


布尔类型的话两个属性 true/false


2.2.4.Undefined


undefined表示一个声明了没有赋值的变量,变量只声明的时候值默认是undefined


如:

var num;
console.log(num); // undefined

2.2.5.Null


Null表示一个空,变量的值如果想为null,必须手动设置


2.2.6.Object


2.3.数据类型的转换


2.3.1.转换成数值类型


(1)、Number()可以把任意值转换成数值,如果要转换的字符串中有一个不是数值的字符,返回NaN


如:

var num1 = Number("10");
console.log(num1); // 10
var num2 = Number('10adbdn');
console.log(num2); //NaN
var num3 = Number("10.78");
console.log(num3); //10.78
var num4 = Number('10.65dd');
console.log(num4); //NaN
var num5 = Number("a10");
console.log(num5); //NaN

(2)、parseInt()转整数


如:

var num1 = parseInt("10");
console.log(num1); // 10
var num2 = parseInt('10adbdn');
console.log(num2); //10
var num3 = parseInt("10.78");
console.log(num3); //10
var num4 = parseInt('10.65dd');
console.log(num4); //10
var num5 =parseInt("a10");
console.log(num5); //NaN

(3)、parseFloat()转小数


如:

var num1 = parseFloat("10");
console.log(num1); // 10
var num2 = parseFloat('10adbdn');
console.log(num2); //10
var num3 = parseFloat("10.78");
console.log(num3); //10
var num4 = parseFloat('10.65dd');
console.log(num4); //10
var num5 = parseFloat("a10");
console.log(num5);

(4)、Number()、parseInt()、parseFloat()三者的区别


Number()要比parseInt()和parseFloat()严格.


parseInt()和parseFloat()相似,parseFloat会解析第一个. 遇到第二个.或者非数字结束


2.3.2.转换成字符串类型


(1)、toString()


如:

var num = 10;
console.log(num.toString()); // 字符串 10

(2)、String()


如:

var num1 =5;
console.log(String(num1)); // 字符串 5

(2)、JSON.stringfy()


2.3.3.转换成布尔类型


0、空字符串、null 、undefined 、NaN 会转换成false 其它都会转换成true


如:

var num1 = Boolean(0);
console.log(num1); // false
var num2 = Boolean("");
console.log(num2); // false
var num3 = Boolean(null);
console.log(num3); // false
var num4 = Boolean(undefined);
console.log(num4); // false
var num5 = 10;
var num6;
console.log(Boolean(num5+num6)); // false

2.4.运算符


运算符种类:算数运算符、复合运算符、关系运算符、逻辑运算符


(1)、算数运算符:“+”“-”“*”“/”“%”

算数运算表达式:由算数运算符连接起来的表达式 复合运


(2)、复合运算符:“+=”“-=”“*=”“/=”“%=”

复合运算运算表达式:由复合运算符连接起来的表达式


(3)、关系运算符:“>”“<”“>=”“<=”“”“=”“!=”“!==”

关系运算表达式:由关系运算符连接起来的表达式


(4)、逻辑运算符:“&&”“||”“!”

逻辑运算表达式:由逻辑运算符连接起来的表达式


表达式1 && 表达式2

如果有一个为false,整个的结果就是false


表达式1 || 表达式2

如果有一个为true,整个的结果就是false


! 表达式

表达式的结果是true,整个的结果为false

表达式的结果是false,整个的结果为true


2.5.运算符的优先级


由高到低:


() 优先级最高

一元运算符 ++ – !

算数运算符 先* / % 后 + -

关系运算符 > >= < <=

相等运算符 == != === !==

逻辑运算符 先&& 后||

赋值运算符


2.6.函数


2.6.1.简介


JavaScript中的函数就是对象。对象是“名/值”对的集合并拥有一个连到原型对象的隐藏连接。对象字面量产生的对象连接到Object.prototype。函数对象连接到Function.prototype(该原型对象本身连接到Object.prototype)。每个函数在创建时会附加两个隐藏属性:函数的上下文和实现函数行为的代码


2.6.2.函数使用

function functionname(){
这里是要执行的代码
}


语法:


圆括号可包括由逗号分隔的参数:


(参数 1, 参数 2, …)


由函数执行的代码被放置在花括号中:{}

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}


函数参数(Function parameters)是在函数定义中所列的名称。


函数参数(Function arguments)是当调用函数时由函数接收的真实的值


函数的调用:

//此处创建一个函数sum
function sum(num1, num2) {
    var result = num1 + num2;
    console.log("num1 + num2 = " + result);
}
// 函数调用
sum(10, 20);

立即执行函数:

$(function(){
  //不只有函数 所有变量输出等等在这里写都是页面加载直接运行
  sum()
})

2.7.JavaScript正则表达式


2.7.1.创建正则表达式


字面量。语法:Reg = /pattern/modifiers; 字面量的正则由两个正斜杆组成//,第一个正斜杆后面写规则:/pattern[规则可以写各式各样的元字符|量词|字集|断言…]。第二个正斜杆后面写标识符/modifiers[g全局匹配 | i忽略大小写 | m换行匹配 | ^起始位置 | $结束位置] 标识符。


var Reg = /box/gi;


构造函数。语法 Reg = new RegExp( pattern , modifiers ); pattern ,modifiers此时是字符串。何种方法创建都是一样的,pattern 模式 模板,要匹配的内容,modifiers 修饰符。

var Reg = new RegExp("box","gi");

2.7.2.String中正则表达式方法


image.png

var str = 'a1b2c3a4a5',
    reg = /a/g;
console.log(str.match(reg)); //["a", "a", "a"]
var str = 'a1b2c3a4a5',
    reg = /a/;
console.log(str.search(reg)); //0
var str = 'a1b2c3a4a5',
    reg = /a/g;
console.log(str.replace(reg,function(){
    console.log(arguments);
    return 5555;
}));
var str = 'a,b,c,d',
    reg = /,/g;
//console.log(str.split(',')); //["a", "b", "c", "d"]
console.log(str.split(reg)) //["a", "b", "c", "d"]

2.7.3.RegExp对象的方法


方法 描述
RegExp.exec(String) 在字符串中执行匹配搜索,返回首次匹配结果数组
RegExp.test(String) 在字符串中测试模式匹配,返回true或false


2.7.4.修饰符


修饰符也称作标识符,可指定匹配的模式,修饰符用于执行区分大小写和全局匹配。


i忽略大小写匹配。


g全局匹配,没有g只匹配第一个元素,就不在进行匹配。


m执行多行匹配

var patt =  /pattern/i;         //忽略大小写匹配
var patt =  /pattern/g;         //全局匹配
var patt =  /pattern/m;         //执行多行匹配

2.7.5.元字符


在正则表达式中具有特殊意义的专用字符。


特殊的转译字符. \ /。

. 单个任意字符,除了换行符\n与制表符\r 
\ 转义字符,将具有特殊意义的符号转义成普通符号: \.
\d 数字[0~9]
\D 非数字
\s 空格
\S 非空格
\w 字符[字母|数字|下划线]
\W 非字符
\b 单词边界( 除了 (字)字母 数字_ 都算单词边界) 
\B 非单词边界
var reg = /\./;//匹配.
var reg = /\\/;//匹配\
var reg = /\//;//匹配/
var str = '\\';
var reg = /\\/g;
console.log(reg.test(str)); //true

2.8.JavaScript常用对象


2.8.1.Date对象


Date对象是一个有关日期和时间的对象。它具有动态性,必须试用new关键字创建一个实例,如:


var Mydata=new Date();


Date对象没有提供直接访问的属性,只有获取和设置日期的方法,如下表


4742a908f7824a60811a58947f11ab39.png

2.8.2.String对象


String对象是JavaScript提供的字符串处理对象,创建对象实例后才能引用,它提供了对字符串进行处理的属性和方法(类似java一样)具体如下表:


属性 length —返回字符串中字符的个数。


注意:一个汉字也是一个字符!!

45154d38693a42b5a814748be96d2573.png

2.8.3.Math对象


属性:

88ace8cd679349e2a73add01a6c87acd.png

Math对象方法:


三角函数(sin(), cos(), tan(),asin(), acos(), atan(), atan2())是以弧度返回值的。可以通过除法Math.PI / 180把弧度转换为角度,也可以通过其他方法来转换。


image.png

image.png

image.png

例子1:写一个函数,返回从min到max之间的随机整数,包括min不包括max

function getRandomArbitrary(min, max) {
  return min + Math.random() * (max - min);
}

例子2:写一个函数,生成一个长度为 n 的随机字符串,字符串字符的取值范围包括0到9,a到 z,A到Z

function getRandomInt(min, max) {
  return min + Math.floor(Math.random() * (max - min + 1));
}
function randomStr(n){
  var dict = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var str = '';
  for(i = 0; i < n;i++){
    str += dict[getRandomInt(0,62)];
  }
  return str;
}
var str = getRandStr(10);
console.log(str);


目录
相关文章
|
网络架构 Python
【flask入门系列】处理请求之url 路径参数的获取以及转换器的使用
这节我们写一下url路径参数的获取以及转换器的使用,学一下如何在我们的的url路径中加参数以及如何使用转换器,并且自定义转换器。
1049 0
【flask入门系列】处理请求之url 路径参数的获取以及转换器的使用
|
移动开发 安全 Java
钉钉企业应用网关了解一下
通过企业应用网关,即便该服务器完全在互联网上运行,我们也能够实现“零信任”访问。
2747 1
钉钉企业应用网关了解一下
|
8月前
|
存储 弹性计算 算法
阿里云服务器实例选购参考:经济型e实例与通用算力型u1实例性能、价格与适用场景解析
在阿里云目前的云服务器实例规格中,通用算力型u1和经济型e实例的云服务器凭借其相对较低的活动价格,成为了众多用户关注的焦点。其中经济型e(ecs.e-c1m1.large)实例2核2G3M带宽特惠价99元1年,通用算力型u1实例(ecs.u1-c1m2.large)2核4G5M带宽特惠价199元1年。由于经济型e实例属于共享型实例规格,而通用算力型u1实例则是独享型实例规格,因此,用户在选择时往往会对这两款云服务器的性能、适用场景及价格进行比较。本文将为您详细介绍这两款云服务器的区别、性能特点、适用场景及价格对比,以供参考和选择。
|
10月前
|
人工智能 安全 数据挖掘
MedRAX:专注于胸部X光检查的AI医学推理智能体,帮助医生快速解读胸部X光片
MedRAX 是一款专门用于胸部X光检查的医学推理AI智能体,整合了多种最先进的分析工具,支持多模态推理和动态任务分解。
641 10
MedRAX:专注于胸部X光检查的AI医学推理智能体,帮助医生快速解读胸部X光片
|
8月前
|
JSON 供应链 API
深入研究:微店商品列表API接口详解
微店商品列表API接口支持开发者以编程方式获取微店平台的商品数据,适用于电商数据分析、商品展示等场景。请求方式为POST,需提供`method`和`access_token`等参数,可选参数包括页码、排序方式、商品状态及关键词等。返回数据为JSON格式,包含商品ID、标题、价格、库存和缩略图URL等信息。常见错误包括`access_token`无效或参数错误,需根据错误码调整请求。
|
11月前
|
JavaScript
jQuery+HTML5实现的微信大转盘抽奖源码
这是一款基于jQuery+HTML5实现的微信大转盘抽奖效果源码,是一款可配置奖品抽奖的jQuery大转盘抽奖代码,可实现点击按钮转轮旋转实现抽奖功能,效果逼真自然,代码里面有详细的注释,可以修改文字或者二次开发都可以
292 11
|
Java
SpringBoot使用汇总
SpringBoot使用汇总
218 1
SpringBoot使用汇总
|
监控 Linux
在Linux中,如何查看系统资源使用情况?
在Linux中,如何查看系统资源使用情况?
|
C# Android开发 开发者
当跨平台开发成为热点,.NET MAUI 如何触动开发者的心弦,引领未来?
【8月更文挑战第28天】在数字化浪潮中,跨平台应用开发需求激增,.NET MAUI 如新星般闪耀,为开发者指明了方向。它提供统一的 C# 和 XAML 开发体验,支持 Android、iOS、Windows 多平台应用构建,大幅提高效率,降低成本。使用 .NET MAUI,一个团队即可打造多平台流畅应用,简化工作流程。其简洁代码示例展示了强大功能与易用性,同时在性能优化方面表现出色,确保各平台上的流畅体验。加之活跃社区支持,.NET MAUI 必将推动跨平台开发迈向新高峰。
243 0
|
人工智能 搜索推荐 Serverless
《阿里云 AI 客服解决方案测评》
作为一名即将步入大学的新生,我对科技充满好奇与热情。阿里云的“10分钟构建AI客服并应用于网站、钉钉或微信”的解决方案深深吸引了我。经过为期一周的亲身体验,从简易上手到深入定制,我都感到惊喜连连。阿里云详尽的文档指导与强大的云产品支持让我轻松应对挑战,尤其是函数计算FC与大模型服务平台百炼提供的免费额度,为初学者创造了友好的试验环境。整个过程不仅让我收获了技术知识,更激发了我对科技应用的无限想象。我期望阿里云能提供更多面向学生的教程和支持,让我们共同探索科技的无限可能。