JavaScript(一)

❣️javaScript编程语言

  • JS简介
  • 变量与常量
  • 基本数据类型
  • 运算符
  • 流程控制
  • 函数
  • 内置对象

❣️JS简介

❤️‍🔥JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。

❤️‍🔥作用:

1.嵌入动态文本于HTML页面
2.对应浏览器时间做出响应
3.读写HTML元素
4.在数据被提交到服务器之前验证数据。
5.检测访客的浏览器信息。 控制cookies,包括创建和修改等。
6.基于Node.js技术进行服务器端编程。

❣️JS基础

❤️‍🔥1.注释语法

// 单行注释
/*多行注释*/

❤️‍🔥2.引入js的多种方法

1.headscrip标签内编写
2.headscript标签src属性引入外部的js资源
3.body内的地步通过script标签src属性引入外部js资源(常用)

PS:注意页面的下载是从上往下的,所以操作表搜前js代码一定要等待标签加载完毕之后在执行才可以正常运行

❤️‍🔥3.结束符号

		;(分号可写可不写)

❤️‍🔥4.编写代码的工具:

	1.pycharm 创建js文件或者HTML文件(适合编写复杂的js代码)
    2.浏览器提供的编写js代码的环境变量

❤️‍🔥5.小知识点(js特殊的值)

undefined 
	未定义,所有js变量未赋于初始值的时候,默认值都是undefined。(从未拥有过0
    
NAN(Not a Number):
    表示值为空(有过)
    
PS:简单理解就是:undefined 是没有定义的,null 是定义了但是为空。

❤️‍🔥6.判断数据类型的方法

判断数据类型的方法一般可以通过四种常用方法:typeofinstanceofconstructorObject.prototype.toString.call();

1.typeof:(可以对基本类型(包括function)做出准确的判断,但对于引用类型,用它就有点力不从心了),typeof 返回一个表示数据类型的字符串,返回结果包括:numberbooleanstringobjectundefinedfunctionSymbol6种数据类型。

2.instanceof(判断是否是某个类的实例)

3.constructor:查看对象对应的构造函数
constructor 在其对应对象的原型下面,是自动生成的。当我们写一个构造函数的时候,程序会自动添加:构造函数名.prototype.constructor = 构造函数名

4.Object.prototype.toString(可以说不管是什么类型,它都可以立即判断出)
toStringObject原型对象上的一个方法,该方法默认返回其调用者的具体类型,更严格的讲,是 toString运行时this指向的对象类型, 返回的类型格式为[object xxx],xxx是具体的数据类型
基本上所有对象的类型都可以通过这个方法获取到

❣️变量与常量

什么是变量呢?

变量就是可以用来存放某些值的内存的命名。

在js中变量是需要声明以后才能使用的,两个关键字:

var
	var name = 'andy';
let
	let name ='小明'
    
 PSletECMA6的新语法,可以在局部定义变量不影响全局

js中声明常量也需要使用关键字、(声明了就不能改变了)
	const
    	const pi =3.14

❣️基本数据类型

❣️数值类型

1.数值类型(number
	js中整型和浮点型统称为‘number
    NaN也属于数值类型,意思是:不是一个数字(NOt a number
    
    
2.字符串类型(string
单引号  ''
双引号  " "
模板字符串 ` `(顿号)

let name='小明'
let age = 7
undefined
let desc = `名字是${name} 年龄是${age}`  格式化输出
	1.字符串的拼接推荐使用 + 


3.布尔类型(Boolean
	true  false
JS中的布尔值与python中的略有不同
	js的判断是纯小写,python 的判断结果是首字母大写
    
 5.对象(object
	对象之数组(Array
    	let l1=[]
ps :类似于python中的列表

	对象之自定义对象(Object
    	let d1={'name':'小明'}
       let d2= new Object();对象实例(创建空对象)

❤️‍🔥代码:

数值(number):
	var a = 13.4
    var d= 123e4;  // 1230000 
    
字符串(string):
	var c = 'hello'
    var b = "world"
    var c= a+b ;
console.log(c);  //结果:helloworld


布尔值(Boolean):
    var a= true;
    var b = 0;  //false
    
数组对象(Object):
	var a=[123,'kimi']
    console.log(a[1]); 结果:'kimi'

forEach 循环
var l1=[11,22,33,44,55]
undefined
l1.forEach(function(value){})
undefined
l1.forEach(function(value){
    console.log(value)
})

❣️数据类型常用方法:

字符串:

image

数组的常用方法:

image

image

❣️运算符

1.算数运算符
	+ - * / % ++(自增1)  --(自减1
    var x=10;
    var res = x++;  表示先赋值后自增
    var res2 = ++x;   表示先自增后赋值
结果:    
    res;
    10
    res2;
    12
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{
        条件12都不成立执行的代码
    }
4.如果分支结构中else if很多还可以考虑使用switch语法
	switch(条件){
        case 条件1:
        	条件1成立执行的代码;
        	break;  如果没有break会基于某个case一直执行下去
        case 条件2:
        	条件2成立执行的代码;
        	break;
        case 条件3:
        	条件3成立执行的代码;
        	break;
       	case 条件4:
        	条件4成立执行的代码;
        	break;
        default:
  			 条件都不满足执行的代码
    }
 PSswitch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。

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(循环条件){
        循环体代码
    }
   

三元运算
	var =1 ;
    var =2;
    var c = a>b ? a:b
这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用

var a=10,b=20;
var x=a>b ?a:(b=="20")?a=b;
结果:
x
10

image

❣️函数

❣️定义函数:

function 函数名(形参){
    //函数注释
    函数体代码
    return 返回值
}

调用:
	函数名();

❣️匿名函数:

没有名字的函数

匿名函数如何使用:

1.将匿名函数赋值给一个变量,这样就可以通过变量进行调用
2.匿名函数自调用
PS:匿名函数不能通过直接调用来执行,因此可以通过匿名函数的自调用的方式来执行

var s1 = function(a,b){
    return a+b;
}
s1(1,2)
ps :立即执行函数 书写立即执行的函数,首先先写两个括号()()这样防止书写混乱

❣️箭头函数

ps:如果箭头函数不需要参数或需要多个参数,就是用圆括号代表参数部分

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.函数的返回值如果有多个需要自己处理成一个整体

❣️内置对象

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

❣️json对象

var str1 ={name:'kimi','age':19};
undefined
JSON.stringify(str1) //序列化
'{"name":"kimi","age":19}'
var d1=JSON.stringify(str1)
JSON.parse(d1)
{name: 'kimi', age: 19}  //反序列化

正则表达式:

定义正则的两种方式:
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][A-zA-Z 0-9]{5,11}$/;
undefined
reg1.test('jason666')
true
reg2.test('kimi999')
true
ps:第一个注意事项,正则表达式中不能有空格


var s1='tonydsb dsb dsb';
undefined
s1.match(/s/)
//['s', index: 5, input: 'tonydsb dsb dsb', groups: undefined]
s1.match(/s/g)
//(3) ['s', 's', 's']0: "s"1: "s"2: "s"length: 3[[Prototype]]: Array(0)

var reg2=/^[a-zA-z][a-zA-Z 0-9]{4,7}$/g
undefined
reg2.test('tonydsb')
true
reg2.lastIndex;
7
第二个注意事项,全局匹配时有个lastindex属性
1.全局模式的规律
	lastindex
2.test匹配数据不传的话,默认传undefined



var reg2=/^[a-zA-z][a-zA-Z 0-9]{5,9}$/
undefined
reg2.test();
true
reg2.test(undefined);
true
var reg3=/undefined/;
undefined
reg3.test();
true
3.校验时可以不用传参数

image

❣️math对象

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数(底为e)。
max(x,y)    返回 x  y 中的最高值。
min(x,y)    返回 x  y 中的最低值。
pow(x,y)    返回 x  y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。
posted @ 2022-12-05 19:18  亓官扶苏  阅读(198)  评论(0编辑  收藏  举报