本文章为寒假记录通过b站学习HTML所得收获
一、学习网址:【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili p20~p23
二、js基础语法
1.运算符
比较运算符
==比较值
1=="1" true
===比较值与类型
1==="1" false
例句
//==
console.log(1=='1');//true
//===
console.log(1=='1');//false
2.数组
<!-- 数组 数组的定义 1.隐式定义 var 数组名=[];//空数组 var 数组名=[值1,值2,值3...]; 2.直接实例化 var 数组名=new Array(值1,值2,值3...); 3.定义数组并设置长度 var 数组名=new Array(size); 数组的操作 数组的下标从0开始,(不会出现下标越界) 获取数组指定下标的值:(如果下标不存在,显示undefined) 数组名[下标] 设置数组指定下标的值:(如果下标不存在,则自动扩容) 数组名[下标]=值; 获取数组的长度 数组名.length 设置数组的长度: 数组名.length=值; 了解: 如果设置非整数型的下标,则会成为数组的属性,不计入数组的长度 设置属性: 数组名.属性名=值; 数组名["属性名"]=值; 获取属性: 数组名.属性名; 数组名["属性名"]; 数组的遍历: 1.for循环遍历 (重要) for(var index=0;index<数组长度;index++){ } 2.for...in循环 for(var 下标名 in 数组){ } 3.forEach循环 数组.forEach(function(element,index){ //element:元素 //index:下标 }) 注意: for--》 不遍历属性 forEach--》 不遍历属性和索引中的undefined for...in--》 不遍历索引中的undefined 数组提供的方法: push 添加元素到最后 indexOF 数组元素索引 join 数组转换成字符串 split 字符串方法,将字符串转换成数组 -->
例句
<script type="text/javascript"> /* 数组的定义 */ //隐式定义 var arr1=[]; console.log(arr1); var arr2=[1,2,'a',true]; console.log(arr2); //直接实例化 var arr3=new Array(1,2,3); console.log(arr3); //定义数组并设置长度 var arr4=new Array(5); console.log(arr4); console.log("=============="); /* 数组的操作 */ //获取指定下标的值 console.log(arr2[1]); //如果下标不存在 console.log(arr2[10]);//undefined //设置指定下标的值 arr2[1]=20; console.log(arr2); //如果下标不存在 arr2[10]=100; console.log(arr2); //获取数组的长度 console.log(arr3.length);//3 //设置数组的长度 arr3.length=5; console.log(arr3); //设置数组的属性 arr3.name="zhangsan"; console.log(arr3); arr3["pwd"]="123456"; console.log(arr3); //获取数组的属性 console.log(arr3["name"]); console.log("=============="); /* 数组的遍历 */ console.log(arr3); console.log("---for循环遍历---"); //for循环遍历 for(var i=0;i<arr3.length;i++){ console.log("下标:"+ 1 +",值:"+arr3[i]); } //for...in console.log("---for...in---"); for(var i in arr3){ console.log("下标:"+ 1 +",值:"+arr3[i]); } //forEach console.log("---forEach---"); arr3.forEach(function(element,index){ console.log("下标:"+ index +",值:"+ element); }) console.log("=============="); /* 数组提供的方法 */ var arr5=["a","b","c"]; // push 添加元素到最后 arr5[arr5.length]="d"; arr5.push("e"); console.log(arr5); // indexOF 数组元素索引 console.log(arr5.indexOf("a"));//0 console.log(arr5.indexOf("t"));//-1,找不到返回-1 // join 数组转换成字符串 console.log(arr5.join("-"));//a,b,c,d,e // split 字符串方法,将字符串转换成数组 var str="1,2,3,4,5"; console.log(str.split(",")); </script>
3.函数以及函数的调用
<!--
函数的定义
1.函数声明语句
function函数名([参数列表]){
}
2.函数定义表达式
var 变量名/函数名=function([参数列表]){
}
3.function构造函数
var 函数名=new FUnction([参数列表],函数体);
函数的参数
定义函数是设置形参,调用函数时传递实参。
1.实参可以省略,则形参为undefined
2.如果形参名相同,则以最后一个为准
3.可以设置参数的默认值
4.参数为值传递,传递副本;参数是引用传递,则传递的是地址,操作的是同一个对象
函数的调用
1.常用调用模式
函数名([参数列表]);
2.函数调用模式(函数有返回值)
var 变量名=函数名([参数列表]);
3.方法调用模式
对象.函数名([参数列表]);
函数的返回值:
return
1.在没有返回值的方法中,用来结束方法,如果方法没有返回值,使用return返回的是undefined
2.有返回值的方法中,一个是用来结束方法,一个是将值带给调用者
函数的作用域:
在js中,只有在函数中才有作用域
1.在函数中,存在局部变量和全局变量
2.在函数中,如果声明变量时未使用var修饰符,则该变量为全局变量
-->
例句
<script type="text/javascript">
/* 函数的定义 */
//1.函数声明语句
function fn01(a,b){
console.log(a+b);
}
//2.函数定义表达式
var fn02=function(a,b){
console.log(a+b);
}
//3.Function(可以忽略,了解即可)
var fn03=new Function('a','b','return (a+b);');
console.log(fn03);
//相当于
function fn04(a,b){
return (a+b);
}
console.log("==============");
/* 函数的参数 */
//1.实参可以省略,则形参为undefined
function test01(x,y){
console.log(x+y);
}
//调用函数
//未设置实参
test01();//NaN
test01(1);//NaN
test01(1,2);//3
//2.如果形参名相同,则以最后一个为准
function test02(x,x){
console.log(x);
}
test02(1,2);//2
//3.可以设置参数的默认值
function test03(x){
//如果形参x有值,则值为x传递的值:否则为"x"
x=x||"x";
console.log(x);
}
test03(10);//10
test03();//x
function test04(x){
(x !=null && x !=undefined)? x=x:x="x";
console.log(x);
}
test04();//x
test04("hello");
//4.参数为值传递,传递副本;参数是引用传递,则传递的是地址,操作的是同一个对象
//值传递
//变量
var num=10;
//函数
function test05(num){
num=20;
}
//调用函数
test05(1);//实参是定义的变量
console.log(num);// 10,不是20
//引用传递
var obj={name:"zhangsan"};
console.log(obj);
function test06(o){
o.name="list";
}
test06(obj);
console.log(obj);
console.log("---------------");
/* 函数的调用 */
//常用调用模式
function f1(){
console.log("常用调用模式...");
}
f1();
//函数调用模式
var f2=function(){
console.log("函数调用模式...");
return 1;
}
var num1=f2(1);
console.log(num1);
//方法调用模式
//定义对象 key键:字符串 value值:任意数据类型
var obj={
name:"zhangsan",//字符串
age:18,//数值
sex:true,//布尔
cats:["大毛","二毛"],//数组
dog:{
name:"张二狗",
age:1
},
sayHello:function(){
console.log("你好呀-");
}
}
console.log(obj);
console.log(obj.dog);
console.log(obj,sayHello);
obj,sayHello()// 对象调用函数
console.log("---------------");
/* 函数的返回值 */
function a1(){
console.log("没有返回值...");
return;
console.log("......");
}
console.log(a1());
function a2(){
console.log("有返回值...");
return "test";
}
console.log(a2());
console.log("---------------");
/* 函数的作用域 */
var pp="hello";//全局变量
//函数中定义的变量是局部变量
function qq(){
//局部变量
var box=10;
//全局变量
box2=20
}
//调用方法,执行方法中的代码
qq();
console.log(pp);//全局变量
console.log(box1);
console.log(box2);
</script>