本节课讲解了JS的基本语法,对象的创建知识
用户创建函数,函数创建对象,对象生成一切:在JS中一切皆对象
js脚本主要有变量和函数二部分组成
变量创建方式:
var:可以重复声明变量值覆盖,同时跨作用域,方法中的变量外部都是可见的
let:只能声明一次,跨作用域不可见(建议使用)
变量类型分为两大类:原始类型,引用类型
原始类型:string,number,boolean,undefined,null
引用类型:object,array,function,date,regexp,包装对象
typeof 查看数据类型
Array.isArray([1,2,3]) 判断是否为数组类型
clear() 清空控制台
--------------------------------------------------------------------------
函数分为:普通函数,函数表达式,匿名函数,自执行函数
----普通函数
let ac=10
function ad(){return ac+50;}
ad()//返回结果值60,函数外部声明的变量,在函数内部可以自己使用,但在函数内部声明的变量,在外部不能直接使用
----表达式函数,就是一个值
let ae=function(){return 200;}
ae()//返回结果值200
----匿名函数,主要用途就是传参
使用filter方法,函数item数组元素 index索引 array数组,返回元素大于3的结果返回[4,5]
[1,2,3,4,5].filter(function(item,index,array){return item>3})
----自执行函数,声明完成后自己运行
(function af(a,b){return a+b;})(20,50)
和普通函数相似,下面是进行的拆解
// (
// function af(a,b){return a+b;}
// )
// (20,50)
------------------------------------------------------------
// ----创建数组
//js中数组默认都是索引数组,如果需要使用关联数组需要模拟
//let arr1=[1,2,4] //使用字面量方式创建
//let arr2=new Array();//使用构造函数创建
//let arr3=new Array(3);//使用构造函数创建,有3个元素的素质
//let arr4=new Array(1,2,3,4);
// arr4[3]//获取到的是数组中的值4
//arr4[arr4.length-1] //获取到数组中元素个数,默认是从1开始所以这里返回的是4,使用-1,再返回最后一个元素值
// ---------------------------------------------------------------------
// 使用concat,不直接更新改变原素组的值,并且在数组尾部添加
// let arr=[1,2,3,4,5] //定义数组
// arr.concat(4,5,6,7) //在数组尾部添加元素,输出[1, 2, 3, 4, 5, 6, 7]
// arr.concat([6,7,8]) //在数组的尾部添加元素,输出[1, 2, 3, 6, 7, 8]
//使用 slice(),获取数组的结果,从指定的位置开始获取
// arr.slice(2) //输出结果[3]
//arr.slice(1,3);//从第2个位置取到第4个位置,输出结果不包含第4个位置,最后一个
// ---------------------------------------------------------------------
//arr.splice()增删改查都能实现,直接改变原数组
//删除
// arr5.splice(0,2) //删除数组中的第一个元素到第二个,不包含2最后一个
//添加
// arr5.splice(1,0,88,99) //1是起始位置,插入的数量,插入的值
//替换
//arr5.splice(2,1,55,44) //2是起始位置,1是替换的个数,如果超过自动多插入一个,55 44是要替换和插入的值
// ---------------------------------------------------------------------
//队和栈
let arr=[];
arr.push(10,20)//入队,最后添加
arr.pop()//出栈,最后一个值
arr.unshift(8,67)//入栈,头部添加
arr.shift()//出队,头部第一个值
//尾部添加,头部出
arr.push(3,2,1);
arr.shift();
//头部添加,尾部出
arr.unshift(6,7,8)
arr.shift()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script> let obj=new Object();//创建对象 obj.name='熊成浩';//设置属性和值 obj.age=30; obj.sex='男'; //创建方法getName, obj.getName=function(){ return this.name;} //执行方法返回this.name当前对象中的name obj.getName(); //访问属性值 obj["name"]; obj['name']; obj.name; </script> </head> <body> </body> </html>
点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script> let obj2={ name:'熊成浩', age:30, sex:'男', getName:function () {return this.name; } } //执行方法 obj2.getName(); //访问属性值 obj2["name"]; obj2['name']; obj2.name; </script> </head> <body> </body> </html>
点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script> function Stu(name,sex,age) { this.name=name; this.sex=sex; this.age=age; //方法这样写会出现代的冗余,每次执行实例都需要生成 // this.getInfo=function () { // return this.name+': '+this.age+': '+this.sex; // // } } //建议将公共方法写在外部,写到原型上 Stu.prototype.getInfo2=function () { return this.name+': '+this.age+': '+this.sex; } let stu1=new Stu('小强','男',18); let stu2=new Stu('小张','女',16); let stu3=new Stu('小黄','男',22); console.log(stu1); console.log(stu2); console.log(stu3); // console.log(stu1.getInfo()); // console.log(stu2.getInfo()); // console.log(stu3.getInfo()); console.log(stu1.getInfo2()); console.log(stu2.getInfo2()); console.log(stu3.getInfo2()); </script> </head> <body> </body> </html>
点击 "运行实例" 按钮查看在线实例
总结:用户创建函数,函数创建对象,对象生成一切:在JS中一切皆对象