前端学习——Js（JavaScript）入门

Js引入方式

1.内部引入：直接写在head标签里面；直接写在body标签里面；直接写在body标签外面

例：

<html><head><script>// Js代码块1</script> </head><body><script>// Js代码块2</script> </body><script>// Js代码块3</script>
</html>

html文档代码自上而下进行读取，因此Js出现的顺序依照自上而下来表示（以上实例代码中代码块1、代码块2、代码块3依次执行）

2.外部引入：在html文件中的head标签引入.js文件

<html><head><script src="js/alert.js"></script> </head><body></body>
</html>

变量以及其规则

由字母、数字、下划线、$符号组成，不能以数字开头
变量名中不能使用空格和其他标点符号
变量名区分大小写
变量名必须放在同一行中
不能使用脚本语言中保留的关键字、保留字、true、false、null作为变量名

Js的变量都是弱类型，即编译后确定数据类型；强类型是指编译前进行数据类型的确定

console输出

1.控制台输出，打印一般信息

console.log("哈哈哈哈哈");
console.info("嚯嚯嚯嚯嚯");

2.控制台输出，打印错误信息

console.error("打印错误信息");

3.控制台输出，打印警告信息

console.warn("打印警告信息");

数据类型（6种数据类型）

数字型： 整数、浮点数、NaN
字符串： 可以用单引号’'、双引号""或者反引号``表示
布尔型： true、false
未定义类型（undefined）： 只声明不定义，如：var a;
空类型（null）： 无值无内存，如：var a = null;
特殊类型/对象类型（object）： 除上述数据类型以外的类型

可以使用typeof函数打印数据的类型

函数定义与调用

通过声明来定义函数：
function add（）{}
调用：add();

表达式定义法：
var fun = function add(){}
调用：fun();

算数运算符与赋值运算符

算数运算符：+、-、*、/、%、++、–
赋值运算符：=、+=、-=、*=、/=、%=

比较运算符与逻辑运算符

比较运算符：
!=/<>1不等于、==等于 (只判断内容大小)

逻辑运算符：
===恒等于、!==恒不等于 （既判断内容大小又判断数据类型）、>、<、>=、<=

数据类型转换

1.隐式转换：

字符串和数字的运算：

字符串和数字进行加运算时，会将数字转换成字符串，然后和另一个字符串进行拼接，例：

var num = '123' + 12;
console.log(num); //输出'12312'

字符串和数字进行减、乘、除运算，以及大小比较时，会将字符串转换成数字，再和另一个数字进行运算或比较，例：

var num = '123' - 12;
console.log(num); //预期输出：111

var num3 = '123' * 12;
console.log(num); // 预期输出：1476

var num3 = '123' / 12;
console.log(num); // 预期输出：10.25

var t = '123' > 12;
console.log(t); // 预期输出：true

各种值转换成布尔值：

数字0，空字符串""，null，undefined 转成布尔值的时候都是false；
非0数字，非空字符串转成布尔值的时候都是true；
任何数组（即使是空数组），任何对象（即使是空对象）转成布尔值的时候都是true；

var a = 0
if (a) { console.log('hello')
} else { console.log('world')
}
// 当a=0或""或null或undefined的时候，预期输出：world
// 当a=[]或空对象的时候，预期输出：hello
// 当a=-1或"abc"时候，预期输出：hello

2.强制类型转换：

Number: 把其它数据类型强制转换为数字类型，如：Number(‘123’)

String: 把其它数据类型强制转换为字符串类型，如：String(12)

parseInt: 把其它数据类型强制转换为数字类型，字符串类型也可转。如：parseInt(‘123hello’)

parseFloat: 把其它数据类型强制转换为字符串类型，字符串类型也可转。如：parseFloat(‘12.13hello’)

Math对象

n = Math.floor(n);向下取整
n = Math.ceil(n);向上取整
n = Math.round(n);四舍五⼊
n = Math.max(1,2,3,4,-1,-2);最⼤值
n = Math.min(1,2,3,4,-1,-2);最⼩值a
n = Math.random();随机数[0,1)
n = Math.pow(5,2); / n = 5 ** 2；5的2次⽅
n = Math.sqrt(9);开平⽅
n = Math.abs(-1);绝对值
n = Math.sin(1); n = Math.tan(1)；等等，三⻆函数
n = Math.PI;圆周率

数组的基本使用及相关操作

三种创建方式：

var array = new Array();

 var array = new Array(1,2,3,4,5); 表示创建内容为{1,2,3,4,5}的数组

var array = new Array(3); 表示开辟⻓度为3的数组

var arr = []; 最常⽤

var arr = [‘哈哈哈’,’霍霍霍’,’嘻嘻嘻’];

去数字⻓度： 数组名.length

相关操作

去数字长度：数组名.length
push & pop
push:在数组最后添加⼀个元素n 数组名.push(“红红火火”);
pop:删除数组最后⼀个元素数组名.pop();
unshift & shift
unshift:在数组的开头添加⼀个元素n 数组名.unshift(“红红火火”);
shift:删除数组的第⼀个元素数组名.shift()
concat：拼接数组
变量 = 数组1.concat(数组2)；将数组2拼接到数组1后，返回⼀个新的数组，需要被接收
splice：在任意位置技能删除元素，也能添加元素
数组名.splice(下标，删除元素的个数，新插⼊的元素列表)
slice：截取元素
数组名.slice(start[,end]); 返回⼀个新的数组
reverse:反转数组
数组名.reverse();

join(规则)：按照规则将数组字符串，例：

var arr = [1,2,3,4];
console.log(arr.join()); 输出1，2，3，4
console.log(arr.join(“-”)); 输出1-2-3-4

indexOf(⼦元素)：从数组中查询⼦元素，返回下标，没有就返回-1
数组名.indexOf(“哈哈哈哈哈”)；
forEach：遍历

数组名.forEach(function(item,index){
console.log(item,index);
});
item:数组的每⼀个值，index：下标
map：遍历回调函数中return⼀个新的值，返回新数组

var arr = [1,2,3,4];
var newArr = arr.map(function(item){return item ** 2;
});
console.log(newArr); 输出[1,4,9,16]

sort:排序

var arr = [7,18,-9,-23,0,56];
arr.sort(function(a,b){ a b是数组相邻的两个值return a-b; 此回调函数：如果返回值⼤于0，就交换a b
})

对象结构

表达形式：key:value

var cage = {
name:”哈哈哈”，
age:18，
hobby：sing
}

访问 & 修改：

通过 .语法：
console.log(cage.name); 数组name对应的值
console.log(cage); 输出所有内容
cege.name = “霍霍霍”; 修改内容
通过 [变量]：
var str = “age”;
console.log(cege[str]);
为对象添加任意属性：cege.car = “爱玛”;
删除属性：delete cege.car;

遍历：for in

for(var key in cege){console.log(cege[key]);}

字符串操作

var author = “李⽩”;
d1.innerHTML = `
<p>哈哈哈</p>
<p>${author}</p>
<p>哈哈哈</p>
`;

toUpperCase():全部⼤写
toLowerCase():全部⼩写
splite(规则)：以某种规则将字符串转为数组

var str = “你好”；
var arr = str.split(“”); // 此语句打印出来的结果为[‘你’,’好’]
var str = “你-好”；
var arr = str.split(“-”); // 此语句打印出来的结果为[‘你’,’好’]

indexOf 查询下标，跟数组的用法相同
substring(start,end)：截取字符串，包含start不包含end
substr(start,length)：截取字符串
replace(new,old)：替换

var str = “⼀棵是枣树，另⼀棵也是枣树”;
console.log(str.replace(“枣树”,”桃树”))；输出：⼀棵是桃树，另⼀棵也是枣树

⽇期对象

创建对象：获取当前的时间戳：var date = new Date();
获取当前年份：console.log(date.getFullYear()); 输出2022
获取当前⽉份：console.log(date.getMonth()); 输出3 此⽅法输出的数值区间是[0,11],因此正确的⽉份需要+1
获取当前号数：console.log(date.getDate()); 输出25
获取当前星期数：console.log(date.getDay()); 输出1
获取当前⼩时数：console.log(date.getHours()); 输出19
获取当前分钟数：console.log(date.getMinutes()); 输出12
获取当前秒数：console.log(date.getSeconds()); 输出47
获取距离1970.1.1的毫秒数：console.log(date.getTime());
获取指定时间的时间戳：var date = new Date(“2022-1-1 00:00:00”); 可⽤于倒计时

arguments

arguments用于在不知道会传多少个参数的情况下，代替函数参数列表的形参定义

function add（）{
var sum = 0;
for(var i = 0;i < arguments.length;i++){
sum += arguments[i];
}
return sum;
}
var n = add(1,2,3,4,5);
console.log(n);