前端（八）js介绍(1)

js介绍(1)

一、js介绍

javaScript一般用来编写客户端脚本，来为html页面添加交互行为，是前台语言，而不是后台语言。
javaScript是一种解释性语言同时也是弱类型语言，想要引入js有以下几种方式：

<script>
  // 方式一
</script>

<!--方式二-->
<script src="xxx.js"></script>

js中有多行注解和单行注解两种形式：

//单行注解

/*
多行注解
*/

二、变量

js中有两种变量声明的方式var和let，它们的区别会在后面的文章中介绍。

var name="abc";
let price=99;

js的变量由字母、数字、下划线、$ 组成，但是不能数字开头，也不能纯数字，同时不能为保留字；js变量严格区分大小写；

三、数据类型

3.1数字类型

var x=111;
var x=1.234;
var x=3e-4;
var x=NaN;

//四舍五入，保留两位小数
var num=2.345
num.toFixed(2) 
<<<'2.35'

//查看数据类型
typeof num
<<<'number'

//数字转字符串
n=num.toString()
typeof n
<<<'string'

//转为整形数字
parseInt(1.23)
parseInt('1.23')
parseInt('abc')
parseInt('123abc')
parseInt('abc123')
<<<1
<<<1
<<<NaN
<<<123
<<<NaN

//转为浮点数字
parseFloat(n)
<<<2.345

//由于js为弱类型语言，不同类型的值会被强制转换后进行计算
'1'+2
'1'-2
<<<'12'
<<<-1

3.2 字符串类型

var a='张三';
var b=12;
var c=String(b);

//字符串拼接
var a0='123';
var a1='456';
a0+a1
a0.concat(a1)
<<<'123456'

//字符串的长度
a.length
<<<2

//去除字符串两端空格
var d='  123  ';
d.trim()
<<<'123'
//去除左侧/右侧空格
d.trimLeft()
d.trimRight()

//索引，超出长度不报错
var e='1234567'
e.charAt(0)
e.charAt(7)
<<<'1'
<<<''

//字符查找，找到返回索引，找不到返回-1，第二个参数表示查找的起始位置
var f='abcd'
f.indexOf('c',1)
f.indexOf('e')
<<<2
<<<-1

//切片，取头不取尾
f.substring(1,3)
f.substring(3,1)
f.substring(1,)
<<<'bc'
<<<'bc'
<<<'bcd'
f.slice(1,3)
f.slice(3,1)
f.slice(-3,-1)
f.slice(-1,-3)
<<<'bc'
<<<''
<<<'bc'
<<<''

//大小写转换
var g='aBcD';
g.toUpperCase()
g.toLowerCase()
<<<'ABCD'
<<<'abcd'

//切割，第二个参数为切割次数
var h='12gawwar';
h.split('a')
h.split('a',1)
<<< ['12g', 'ww', 'r']
<<<['12g']

//字符串模板
i=`
123
456
`

var name='张三';
j=`My name is ${name}`
<<<'My name is 张三'

3.3布尔值

var a=true;
var b=false;

//查看变量的布尔值
Boolean([])
<<<true

[]在js中布尔值为真，“”、0、null、undefined、NaN在js中布尔值为假。
另外null表示变量的值是空，undefined则表示只声明了变量但还没有赋值或者没有返回值的函数返回内容。

3.4数组

var a=[11,'12',1.23];
typeof a
<<<'object'

//长度
a.length
<<<3

//索引
a[0]
<<<11

//在末尾加入/取出元素
a0=a.push('z')
//返回数组长度
<<<4
a
<<<[11, '12', 1.23, 'z']
a1=a.pop()
<<<'z'
a
<<<[11, '12', 1.23]

//在数组头部插入/取出元素
a2=a.unshift('z')
//返回数组长度
<<<4
a
<<<['z', 11, '12', 1.23]
a3=a.shift()
<<<'z'
a
<<<[11, '12', 1.23]

//切片，取头不取尾
a.slice(1,3)
<<<['12', 1.23]

//反转数组，原数组也会反转并且返回反转后的数组
a.reverse()
<<<[1.23, '12', 11]

//数组拼接成字符串
a.join('--')
'1.23--12--11'

//数组拼接
//强行拼接会将数组中内容转为字符串后进行字符串拼接
a+a
<<<'1.23,12,111.23,12,11'
a.concat(a)
<<< [1.23, '12', 11, 1.23, '12', 11]

//数组排序
var b=[101,20,305,7]
//不传入函数sort会将数组元素转为字符串进行比较
b.sort()
<<<[101, 20, 305, 7]
//比较函数会依次比较数组中的元素，返回值>0表示x>y，以此类推，因此升序是x-y，降序是y-x
b.sort(function(x,y){return x-y})
<<<[7, 20, 101, 305]

//删除并插入元素
//从索引1位置向后删除两个元素，在向该位置插入一个元素，返回被删除的元素
b0=b.splice(1,2,1000)
<<<[20, 305]
b
<<<[101, 1000, 7]
//在数组指定位置插入n个元素
b.splice(1,0,100,200,300)
b
<<<[101, 100, 200, 300, 20, 305, 7]

//遍历数组的函数
//map与forEach的使用方法相似，但是forEach没有返回值，map会将每次执行函数的返回值放入数组中
var a=[11,22,33,44]
//v比填，表示当前元素，i选填，表示索引，arr选填，表示元素隶属的数组，"hello"可以不写，为传给this的参数
a.forEach(function(v,i,arr){
    console.log(v,i,arr);
    console.log(this);
},"hello")
<<<11 0 [11, 22, 33, 44] String {'hello'}
<<<22 1 [11, 22, 33, 44] String {'hello'}
<<<33 2 [11, 22, 33, 44] String {'hello'}
<<<44 3 [11, 22, 33, 44] String {'hello'}
<<<undefined

//map函数传入参数和forEach一样
a.map(function(v){
    return v+'tt';
})
<<<['11tt', '22tt', '33tt', '44tt']

//另外如果map、forEach在遍历过程中修改了原数组，下次遍历的是修改以后的数组
a.map(function(v){
	console.log(v);
    if (v==22){a.shift()};
    
})
<<<11
<<<22
<<<44
<<<[undefined, undefined, undefined, null]

3.5日期对象

//不传入数值默认获取当前时间
var d1 = new Date();
console.log(d1.toLocaleString());
<<<2024/12/26 21:53:21

//传入字符串
var d2 = new Date("2018/01/27 11:12:13");
console.log(d2.toLocaleString());
<<<2018/1/27 11:12:13

//传入时间戳
var d3 = new Date(7000);
console.log(d3.toLocaleString());
<<<1970/1/1 08:00:07

//分开传入，700表示毫秒，毫秒不会显示
var d4 = new Date(2018,1,27,11,12,13,700);
console.log(d4.toLocaleString());
<<<2018/2/27 11:12:13

//将时间对象转为计算机时间格式显示
console.log(d1.toLocaleString());
<<<2024/12/26 21:53:21

//按下面的格式显示时间
console.log(d1.toUTCString());
<<<Thu, 26 Dec 2024 13:53:21 GMT

d1.getDate()：返回日
d1.getMonth()：返回月
d1.getFullYear()：返回年
d1.getDay()：返回星期
d1.getHours()：返回时
d1.getMinutes()：返回分
d1.getSeconds()：返回秒
d1.getMilliseconds()：返回毫秒
d1.getTime()：返回时间戳

3.6Math对象

Math.floor()：向下取整
Math.ceil()：向上取整
Math.max(a,b)：最大值
Math.min(a,b)：最小值
Math.random()：0~1随机数，也可以取其他区间的随机数，如3+Math.random()*4表示3至7的随机数

3.7json对象

var dic={"name":"张三","age":18};
//转为json格式
var d0=JSON.stringify(dic)
//转回原始格式
JSON.parse(d0)
//js中字典取值
dic['name']
dic.name
<<<"张三"

3.8正则对象

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
reg1.test('a12345')
reg2.test('12345')
<<<true
<<<false

//匹配模式
var s2="hello HELLO"
//默认为惰性匹配
s2.replace(/l/,"9")
<<<'he9lo HELLO'
//加上g为贪婪匹配
s2.replace(/l/g,"9")
<<<'he99o HELLO'
//加上i表示忽略大小写
s2.replace(/l/gi,"9")
<<<he99o HE99O'

//如果想创建正则对象的时候就带上匹配模式可以这么写
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$",'g');
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;

//另外使用test进行测试时，如果正则带有g会存在一个指针问题
var a=/eg/g
a.test('egeg')
<<<true
//可以看到此时指针到了2的位置
a.lastIndex
<<<2
a.test('egeg')
<<<true
//再次使用test指针位置不会归零
a.lastIndex
<<<4
//下一次的test指针从4位置开始找会报错，要想解决这个问题可以使用a.lastIndex=0让指针归零或者再次使用test返回false后指针自动归零

//正则的四种方法
var s='hello'
var a=/l/
//replace表示替换匹配的内容
s.replace(a,'L')
<<<'heLlo'
//match返回匹配到的正则内容
s.match(a)
<<<['l']
//search只进行一次寻找并返回索引，没找到返回-1
s.search(a)
<<<2
//split表示按正则内容分割字符串
s.split(/[eo]/)
<<<['h', 'll', '']

3.9object对象

//创建object对象
var obj=new Object();
obj.name='张三'
obj.age=18

var obj = {
  name :'张三',
  age :18
};

//js中可以使用构造函数起到类似结构体的功能
function Student(name, age) {
  this.name = name;
  this.age = age;
}
var student1 =new Student("aa", 20);
var student2 =new Student("bb", 21);

四、运算符

//与python中相同功能的一些运算符这里就不再介绍了
var i=0;
//选赋值后+1
i++;
//先+1后赋值
++i;
//==表示宽松等于，类型不同时会强制转换后再比较，===为严格等于，类型不同会返回false
1=='1'
<<<true
1==='1'
<<<false
//!为逻辑取反，||为逻辑或，&&为逻辑与

五、流程控制

条件判断

var d=new Date();
if (d.getDay()==0){alert("休息")}
else if (d.getDay()==6){alert("周六也有工作")}
else{alert("工作")}

switch判断

var d=new Date();
switch(d.getDay()){
	case 0:{alert("休息")}
	case 6:{alert("周六也有工作")}
	default:{alert("工作")}
}

for循环

for(var i=0;i<5;i++){
	console.log(i)
}

while循环

var i=0;
while(i<5){
	console.log(i);
	i++;
}

三元表达式

10>3?"yes":"no"
<<<'yes'