首页 > 编程语言 >前端基础之JavaScript

前端基础之JavaScript

时间:2023-04-15 14:22:48浏览次数:45  
标签:jason 前端 JavaScript 基础 JS let var js 代码

目录

JS简介

全称JavaScript但是与Java一毛钱关系都没有 之所以这么叫是为了蹭Java的热度

它是一门前端工程师的编程语言 但是它本身有很多逻辑错误(不是很严谨)

IT行业鄙视链: 后端 > 前端、运维、测试、产品、老板
前端想一统天下:node.js
    
JS发展史>>>:JavaScript很容易学习

JS基础

1.注释语法
	// 单行注释
	/*多行注释*/
    
2.引入js的多种方式
	1.head内script标签内编写
	2.head内script标签src属性引入外部js资源
	3.body内最底部通过script标签src属性引入外部js资源(最常用)
	ps:注意页面的下载是从上往下的 所以操作标签js代码一定要等待标签加载完毕再执行才可以正常运行
        
3.结束符号
	分号(很多时候不写也没问题)

变量与常量

"""
1.pycharm创建js文件或者html文件(适合编写较为复杂的js代码)
2.浏览器提供编写js代码的环境
"""
在js中声明变量需要使用关键字
	var
    	var name = 'jason';
 	let
    	let name = 'tony';
	ps:let是ECMA6新语法 可以在局部定义变量不影响全局
#在js中声明常量也需要使用关键字,一旦声明值就不能改变
	const 
    	const PI = 3.14;

基本数据类型

"""
在JS中查看数据类型的方式 typeof
"""
1.数值类型(Number)
	在JS中整型与浮点型不分家 都叫Number
	NaN也属于数值类型 意思是:不是一个数字(Not A Number)
        
2.字符类型(String)
	单引号		'jason'
 	双引号		"jason"
  	模板字符串  `jason`  #它可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
    
	let name1 = 'jason'
    let age1 = 18
    undefined
    # 类似于python中的标志位%s
    let desc = `my name is ${name1} my age is ${age1}`
    #my name is jason my age is 18
    
 	1.字符串拼接推荐使用加号
	2.常见内置方法
    
3.布尔类型(Boolean)
""(空字符串)、0、null、undefined、NaN都是false。
	JS里面的布尔值与Python不同
    	JS是纯小写的 而Python是首字母大小
    
4.null与undefined
● null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;
● undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined
	null表示值为空(曾经拥有过) undefined表示没有定义(从来没有过)
 
5.对象(object)
	对象之数组(Array)>>>:类似于python中的列表
        let l1 = []
        var a = [123, "ABC"];
		console.log(a[1]);  // 输出"ABC"
	对象之自定义对象(Object)>>>:类似于python的字典
        let d1 = {'name':'jason',}  #d1['name']     #d1.name
        let d2 = new Object();		jason			jason

数值(number)

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

字符串的常用方法

image
slice和substring的区别:

string.slice(start, stop)和string.substring(start, stop):

两者的相同点:
如果start等于end,返回空字符串
如果stop参数省略,则取到字符串末
如果某个参数超过string的长度,这个参数会被替换为string的长度

substirng()的特点:
如果 start > stop ,start和stop将被交换
如果参数是负数或者不是数字,将会被0替换

silce()的特点:
如果 start > stop 不会交换两者
如果start小于0,则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

对象的常用方法

image

forEach()

参数:
image
示例:
image

splice()

image

map()

image

运算符

1.算术运算符
	+ - * / % ++(自增1) --(自减1)
		var x=10;
    	var res1=x++;  加号在后面	先赋值后自增
    	var res2=++x;	加号在前面	 先自增后赋值
2.比较运算符
	!=(值不等 弱) ==(值相等 弱) ===(值相等 强) !==(值不等 强)
	ps:弱会自动转换类型进行匹配
3.逻辑运算符
	&&(与)	||(或)  !(非)

流程控制

1.单if分支
	if (条件){
        条件成立执行的代码
    }
2.if...else分支
	if(条件){
        条件成立执行的代码
    }else{
        条件不成立执行的代码
    }
3.if...else if...else分支
	if(条件1){
        条件1成立执行的代码
    }else if(条件2){
        条件1不成立条件2执行的代码
    }
    else{
        条件1和2都不成立执行的代码
    }
4.如果分支结构中else if很多还可以考虑使用switch语法
#switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。
	switch(条件){
        case 条件1:
        	条件1成立执行的代码;
        	break;  如果没有break会基于某个case一直执行下去
        case 条件2:
        	条件2成立执行的代码;
        	break;
        case 条件3:
        	条件3成立执行的代码;
        	break;
       	case 条件4:
        	条件4成立执行的代码;
        	break;
        default:
  			 条件都不满足执行的代码
    }
 
for循环
	for(起始条件;循环条件;条件处理){
        循环体代码
    }
	for(let i=0;i<10;i++){
       	 console.log(i)
    }
 	let dd = {'name':'jason','age':18}
   for(let k in dd){
        console.log(k)
    }

while循环
	while(循环条件){
        循环体代码
    }
    
"""
三元运算
	python中:   值1 if 条件 else 值2
	JS中:	   条件?值1:值2
"""

函数

"""
python中函数的定义
    def 函数名(形参):
        '''函数注释'''
        函数体代码
        return 返回值
"""
function 函数名(形参){
    // 函数注释
    函数体代码
    return 返回值
}
# 匿名函数
var s1 = function(a, b){
  return a + b;
}
# 箭头函数
var f = v => v;
//等同于
var f = function(v){
  return v;
}

var f = () => 5;
//等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
//等同于
var sum = function(num1, num2){
  return num1 + num2;
}

1.JS中函数的形参与实参个数可以不对应
	传少了就是undefined 传多了不用
2.函数体代码中有一个关键字arguments用来接收所有的实参
3.函数的返回值如果有多个需要自己处理成一个整体

内置对象

Date对象:
//方法1:不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2:参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3:参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4:参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

Date对象的方法:
var d = new Date();
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月(0-11)
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)


let dd = {name: 'jason', age: 18}
JSON.stringify(dd)	序列化
JSON.parse(ss)	   反序列化


定义正则两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
1.全局模式的规律
	lastIndex
2.test匹配数据不传默认传undefined

标签:jason,前端,JavaScript,基础,JS,let,var,js,代码
From: https://www.cnblogs.com/whxx/p/17321062.html

相关文章

  • 计算机基础和linux安装及帮助
    一、按系列罗列linux的发行版,并描述不同发行版之间的联系与区别   Linux可以分为两种版本:    1、商业版:最常见的如Redhat和centos,是属于商业公司维护的发行版本,其中很多软件都是需要收费的。Redhat系统是属于免费的,服务软件是需要收费的。其中Redhat和Centos内核相......
  • java——maven——基础转载
    Maven坐标Maven坐标一套规则,它规定:世界上任何一个构件都可以使用Maven坐标并作为其唯一标识,Maven坐标包括groupId、artifactId、version、packaging等元素,只要用户提供了正确的坐标元素,Maven就能找到对应的构件。 任何一个构件都必须明确定义自己的坐标,这是Maven的强......
  • mongodb基础教程
    知识点理解MongoDB的业务场景,熟悉MongoDB的简介,特点和体系结构,数据类型等.能够通过docker-compose创建并启动mongodb和mongo-express掌握MongoDB基本常用命令实现数据的CRUD掌握MongoDB的索引类型,索引管理,执行计划业务场景传统的关系型数据库(比如My......
  • 深度学习基础知识串烧
    ✅作者简介:热爱科研的算法开发者,Python、Matlab项目可交流、沟通、学习。......
  • Java基础知识点内部类之局部内部类和匿名内部类
    一:局部内部类1概述:将内部类定义在方法里面就叫做局部内部类。类似于方法里面的局部变量。2.注意点:外界无法直接使用,需要在方法内部创建对象并使用。3.该类可以直接访问外部类成员,也可以访问方法内的局部变量。publicclassOuter{publicstaticvoidshow(){......
  • (二)vue组件化基础跟脚手架vue-cli/vite
    vue组件化开发思想 组件化的思想:将一个页面的所有的处理逻辑放到一起,处理起来就会非常复杂,而且不利于后续的管理以及扩展;如果,将一个页面拆分为一个个小功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了;就像搭积木一样来搭建......
  • HTML5链接和图片基础用法
    一、HTML5超链接(链接)超链接可以是一个文本,也可以是一幅图像,您可以点击这些内容来跳转到新的页面或新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。1.我们通过使用a标签在HTML中创建链接。有两种使用a标签的方式:通过使......
  • Shell编程自动化之Shell编程基础
    一、Shell可以用来做什么1.自动化批量系统初始化程序;2.自动化批量软件部署程序;3.应用程序管理;4.日志分析处理程序;5.自动化备份恢复程序;6.自动化信息采集及监控程序;7.自动化管理程序;二、Shell概述1.Shell是操作系统的外壳,是用户操作系统的命令接口,是一个介于用户和系统内核......
  • 个人部署【未实现Nginx前端资源部署】
    【未在Nginx上实现静态资源部署】虚拟机A作为服务器A:安装Nginx、安装Mysql作为主库虚拟机B作为服务器B:安装能采用shell脚本部署项目所需软件:jdkgitmavenjar、安装Mysql作为从库、安装Redis作为缓存。服务器B操作:第一步:使用gitclone命令将远程仓库的代码克隆下来第二步:上......
  • Java面向对象编程基础
    类与对象类和对象的区别和联系类是抽象的,概念的,代表一类事物,比如人类,猫类..,即它是数据类型.对象是具体的,实际的,代表一个具体事物,即是实例.类是对象的模板,对象是类的一个个体,对应一个实例对象在内存中存在形式!字符串本质上是一个引用类型,按照jvm的规则会把字符串放在方法区的......