HTML5教程
第六次网页前端培训笔记(HTML)
一.数组
数组的定义
1．隐式定义
var数组名=[];1/空数组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++ ){
}
相当于Java中:
for(int index = e; index<数组长度; index++){
2. for . . .in循环
for(var下标名 in 数组){
}
3. forEach循环
数组.forEach(function(element , index){
// element:元素
// - index:下标
});
注：
for --》 不遍历属性
foreach --》不遍历属性和索引中的undefined
for- in --》·不遍历索引中的undefined
数组提供的方法:
push 添加元素到最后
index0f 数组元素索引
join 数组转成字符串
split 字符串方法:将字符串转换成数组
unshift 添加元素到最前
pop 删除最后一项
shift 删除第一项
reverse 数组翻转
slice 截取(切片)数组，原数组不发生变化
splice 剪接数组,原数组变化,可以实现前后删除效果
concat 数组合并
<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]);// 2
//如果下标不存在
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("索引:" + i +"，值："+ arr3[i])
}
console. log("----for...in----" );
//for. . .in
console.log("- --for . . .in----");for (var i in arr3) {
console. log("下标:" +i + "，值:"+arr3[i]);
}
// forEach
console.log("---forEach-- --" );
arr3.forEach(function(element,index){
console.log("下标:" + index +"，值: "+ element);
})
/*数组提供的方法*/
// push 添加元素到最后
// index0f 数组元素索引
// join 数组转成字符串
// split 字符串方法:将字符串转换成数组
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>
二.函数
函数的定义
1.函数声明语句
function函数名([参数列表]) {
}
2.函数定义表达式
var变量名/函数名= function([参数列表]) {
}
3. Function构造函数 (了解)
var函数名= new Function([参数列表],函数体);
函数的参数
定义函数时设置形参，调用函数时传递实参。
1.实参可以省略，则形参为undefinded
2.如果形参名相同，则以最后一个参数为准
3.可以设置参数的默认值
4.参数为值传递，传递副本;参数是是引用传递，则传递的是地址，操作的是同一个对象
函数的调用
1.常用调用模式
函数名([参数列表]);
2.函数调用模式(函数有返回值)
var变量名=函数名([参数列表]);
3.方法调用模式
对象.函数名([参数列表]);
函数的返回值
return
1.在没有返回值的方法中，用来结束方法。(如果方法没有返回值， 使用return, 返回的是undefinded
2.有返回值的方法中，一个是用来结束方法，一个是将值带给调用者。
函数的作用域
在JS中，只有在函数中才作用域。
1.在函数中，存在局部变量和全局变量
2.在函数中，如果声明变量时未使用var修饰符，则该变量是全局变量
<script type="text/javascript">
/*函数的定义 */
// 1.函数声明语句
function fn01(a,b) {
console.log(a+b);
}
console. log(fn01);
// 2.函数定义表达式
var fn02 = function(a,b) {
console.log(a+b);
}
console. log(fn02);
// 3. Function构造函数
var fn03 = new Function('a','b','return (a+b);');
console. log(fn03);
//相当于
function fn04(a,b) {
return (a + b);
}
/* 函数的参数 */
// 1.实参可以省略，则形参为undefinded
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(num); //实参是定义的变量
console.log(num);
//引用传递
var obj = {name: "zhangsan"};
console.log(obj);
function test06(o) {
o.name = "lisi";
}
test06(obj);
console. log(obj);
console.log("==============")
/* 函数的调用 */
//常用调用模式
function f1() {
console. log("常用调用模式...");
}
f1();
//函数调用模式
var f2 = function(a) {
console. log("函数调用模式...");
return a
}
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. 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;
// 全局变量 没有使用var修饰
box2 = 20;
}
// 调用方法，执行方法中的代码
qq();
console.log(pp); //全局变量
/* console.log(box); box是局部变量*/
console.log(box2);
</script>
-
Vite多环境配置学习：新手入门教程11-24
-
实现OSS直传，前端怎么实现？-icode9专业技术文章分享11-23
-
在 HTML 中怎么实现当鼠标光标悬停在按钮上时显示提示文案？-icode9专业技术文章分享11-22
-
html 自带属性有哪些？-icode9专业技术文章分享11-22
-
Sass教程：新手入门及初级技巧11-21
-
Sass学习：初学者必备的简单教程11-21
-
Elmentplus入门：新手必看指南11-21
-
Sass入门：初学者的简单教程11-21
-
前端页面设计教程：新手入门指南11-21
-
Elmentplus教程：初学者必备指南11-21
-
SASS教程：从入门到实践的简单指南11-21
-
前端页面设计项目实战：新手入门教程11-21
-
Elmentplus项目实战：从入门到简单应用11-21
-
Sass项目实战：新手入门教程11-21
-
ElementPlus资料入门教程：轻松上手组件库11-21
