本文详细介绍了JavaScript的基础知识，包括语言特性、变量、数据类型、运算符、函数、对象、数组及内置对象的使用，同时探讨了参数传递、面向对象编程及数组的高级操作。
文章目录
一.JS概述
-
基本特点
- 是一种解释性脚本语言（代码不进行预编译）。
- 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
- 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
-
日常用途
- 嵌入动态文本于HTML页面。
- 对浏览器事件做出响应。
- 读写HTML元素。
- 在数据被提交到服务器之前验证数据。
- 检测访客的浏览器信息。
- 控制cookies，包括创建和修改等。
二.js的摆放位置
indext.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 方式一 -->
<!-- <script type="text/javascript">
alert("hello js!");
</script> -->
<script type="text/javascript" src="indext.js"></script>
<title>Insert title here</title>
</head>
<body>
<!-- 方式三 -->
您的种子<a href="javascript:alert('您确定要删除吗')">删除</a>
<button onclick="alert('点击确定->播放')">播放</button>
</body>
</html>
同级目录下
indext.js
alert("hello world!");
三.变量
后面均使用方式二引入js文件
username="Dusk";
alert("名字: " + username);
username = 18;
alert("年龄: " + username);
console.log("控制台打印-log");
console.debug("控制台打印-debug");
console.error("控制台打印-error");
console.info("控制台打印-info");
console.warn("控制台打印-warn");
四.基本类型和常量
indext.js
console.log(1/"aa");//NaN
console.log(1/0);//Infinity
var username="Dusk 'aa'\"hello";
var msg="dusk";
console.log(typeof msg);//String
msg=19;
console.log(typeof msg);//number
五.运算符
- 比较运算符:
- = 和 == 以及 === 之间的区别:
- = 赋值运算符,用于把一个常量/变量的值赋值给另外一个变量
- == 比较运算符,用于比较两个数据的值是否相等,不会去判断类型 console.log(“18” == 18 );
- === 比较运算符,先判断数据类型是否相等,然后在去判断值是否相等 console.log(“18” === 18);
- 逻辑运算符:
-
在逻辑运算中 0,"",false,NaN,undefined,null 表示为false,其他所有的数据都表示true
-
a && b 将 a, b先转换为Boolean类型,在执行逻辑与,若a为false,则返回a,否则就返回b
-
a || b 将 a, b先转换为Boolean类型,再执行逻辑或,若a为true,则返回a,否则就返回b
-
&& 和 || 运算符的区别(开关)
-
&& 操作:从左往右依次判断,返回第一个为false的值,否则返回最后一个值
-
|| 操作:从左往右依次判断,返回第一个为true的值,否则返回最后一个值
console.log(true && true);
console.log(1 && true);
console.log(1 && 2);
console.log("A" && 2);
console.log("" && 2);
console.log(null && "B");
console.log("A" && "B");
console.log(1 && 2 && 3);
console.log(1 && null && 3);
console.log("" && null && 0);
var msg = '18';
var msg2=18;
console.log("==运算符"+msg == msg2);
console.log("===运算符"+msg === msg2);
//逻辑运算符
if(0){
alert("come on , dusk" );
}else{
alert("go die , 牛二");
}
六.函数定义和调用
通过关键字 function来定义一个函数
普通函数的语法格式:
function 函数名([参数名称1,参数名称2,...,参数名称N]){
//程序代码
[return 值;]
}
//无参数无返回
//有参数无返回
//有参数有返回
//如果函数没有返回值,就默认返回undefined
定义匿名函数
var add=function(x,y){
return x+y;
}
function fun1(){
alert("fun1");
}
fun1();
function fun2(a,b){
console.log("fun2: "+a,b);
}
fun2(1,2);
fun2(1);
function fun3(a,b){
return a + b;
}
var result = fun3(3,4);
console.log("fun3: " + result);
console.log(result);
var fun4=function(a,b){
return a+b;
};
var ret2 = fun4(1,2);
console.log("fun4: "+ret2);
var fff = fun4;
console.log("别名1: " + fff);
console.log("别名: "+ fff(2,3));
七.全局变量和局部变量
全局变量:function外部定义的变量就是全局变量
局部变量:function内部定义的变量就是局部变量
访问变量的原则:就近原则,谁离我最近,我就访问谁
var msg ='dusk';
function fun1(){
var msg="DUSK";
console.log(msg);
console.log(window.msg);
}
fun1();
function fun2(){
console.log(msg1);//undefined?
}
fun2();
八.全局函数
//编码encodeURI
var url="http:www.baidu.com?name=西门&age=18";
//
console.log(encodeURI(url));
//
console.log(encodeURIComponent(url));
//解码:
console.log(decodeURI("http:www.baidu.com?name=%E8%A5%BF%E9%97%A8&age=18"));
//
console.log(decodeURIComponent('urlhttp%3Awww.baidu.com%3Fname%3D%E8%A5%BF%E9%97%A8%26age%3D18'));
var num = "1234";
console.log(parseInt(num));
//会尽可能的解析成数字
console.log(parseInt("12a23"));//12
console.log(parseInt("a12a23"));//NaN
var msg="alert('111')";
console.log(msg);
//将传的带有js语法的字符串转换成js代码
console.log(eval(msg));
九.面向对象
//定义一个类
//方式1:无参数构造函数
function User(){
}
//创建实例
var u = new User();
//设置属性
u.username="dusk";
u.age=18;
//设置方法
u.sleep=function(){
console.log("sleeping...");
}
console.log(u);
console.log(u.username);
console.log(u.age);
//方法调用
u.sleep();
//注意:上述设置变量或者属性针对某个实例对象
var u2 = new User();
console.log(u2.username);
console.log(u2.age);
//方式2:带参数的构造器
function Person(username,age){
//this表示当前创建实例对象
this.username=username;
this.age=age;
this.eat=function(){
console.log("eat...");
};
//在info中打印username和age的值
this.info=function(){
//函数中this,表示该方法由哪一个对象调用,则表示该对象
console.log(this.username + "->>" + this.age);
};
}
var p1 = new Person("dusk",18);
var p2 = new Person("DUSK",28);
console.log(p1);
console.log(p2);
p1.eat();
p1.info();
p2.eat();
p2.info();
十.参数传值
基本类型:传递的是值的拷贝,
引用类型传递的是内存地址值的拷贝
//传值方式:基本类型:仅仅将变量的值拷贝一份,
//赋值给另外一个变量
var msg = 19;
function changeValue(num){
num = 18;
}
changeValue(msg);
alert(msg);
//引用类型:传值的时候是引用地址,
//操作对象是公用的
function User(username){
this.username=username;
}
var u = new User("dusk");
function changeValue2(user){
user.username="DUSK";
}
changeValue2(u);
console.log(u.username);
十一.内置对象
//Object
var obj = new Object();
obj.username="dusk";
obj.age = 19;
obj.sleep = function(){};
//构造方法
console.log(obj.constructor);
//表示某个对象是否拥有指定的属性
console.log(obj.hasOwnProperty("username"));
//迭代属性+方法
//其中:attr 表示属性或方法
for(var attr in obj){
//username=dusk
//注意:obj.attr表示obj对象找一个attr的属性
console.log(attr + "=" + obj[attr]);
}
//需求:获取当前年月日,时分秒
var date = new Date();
console.log("年 : " + date.getFullYear());
console.log("月 :" + (date.getMonth() + 1));
console.log("日 :" + date.getDate());
console.log("时 :" + date.getHours());
console.log("分 :" + date.getMinutes());
console.log("秒: " + date.getSeconds());
//取一个[65,91]之间的随机数
//(max - min + 1) * Math.random() + min
console.log("随机数"+parseInt((91 - 65 + 1) * Math.random() + 65));
//指定Unicode/Asscill码
alert(String.fromCharCode(65));
十二.数组
//方式1:通过无参构造器方式
var arr1 = new Array();
arr1[0] = "西施";
arr1[1] = "王昭君";
arr1[2] = "杨玉环";
arr1[3] = "貂蝉";
console.log(arr1);
//方式2:有参构造器
var arr2 = new Array("西游记","红楼梦","水浒传","三国演义");
console.log(arr2);
console.log(arr2[10]);//数组没有越界的说法
arr2[10]="金瓶梅";//注意:如果不按顺序设置值,数组自动扩容
console.log(arr2);
console.log(arr2.length);//长度
//方式3:通过带一个num类型参数类型构造器方式
//此时参数表示数组长度
var arr3= new Array(3);//表示定义一个数组长度为3
var arr33= new Array(3,2);//表示定义一个数组(方式2),里面的元素是3,2
console.log(arr3.length);
console.log(arr33);
//方式4:直接定义一个数组(推荐)
var arr4= [1,2,3,4,5,6];
console.log(arr4);
十三.数组的属性与方法
//方式4:直接定义一个数组(推荐)
var arr= [1,2,3,4,5,6];
var arr2 = ["sd","dsf","sdf"];
console.log(arr);
//长度
console.log(arr.length);
//链接,返回一个新的数组
var arr3 = arr.concat(arr2);
console.log(arr)
console.log(arr3);
//join-把一个数组转换成一个字符串,参数为分隔符
console.log(arr.join("#"));
//pop 删除并弹出一个元素,删除并返回数组中最后一个元素
console.log(arr);
var ret = arr.pop();
console.log(ret);
console.log(arr);
//移除第一个元素 删除并返回第一个元素
console.log(arr);
var ret=arr.shift();
console.log(ret);
console.log(arr);
//push放入一个元素 往数组后面添加一个元素,并返回数组的长度
console.log(arr);
var ret = arr.push("金瓶梅");
console.log(ret);
console.log(arr);
//unshift 在前面追加 往数组前面添加一个元素,并返回数组的长度
console.log(arr);
var ret = arr.unshift("金瓶梅");
console.log(ret);
//reverse 颠倒数组重点元素顺序 返回的是当前的数组
console.log(arr);
var ret = arr.reverse();
console.log(arr);
//sort 排序
//splice
console.log(arr);
/**
* 参数1:操作的开始位置
* 参数2:删除多少个元素,如果是非删除操作,都是,0,添加
* 参数3:如果添加/替换操作,才有该参数
*/
//添加操作 表示索引为1的位置,添加一个元素
//arr.splice(1,0,"三国演义");
//删除 删除在索引为1的位置 的2个元素
//arr.splice(1,2);
//替换 先将索引为1的元素删掉,然后在改为添加元素
arr.splice(1,1,"水浒传");
console.log(arr);
十四.数组深入
//方式4:直接定义一个数组(推荐)
/**
* 参数1:item 迭代数据元素
* 参数2:index: 索引
* 参数3:aaa数组本身
*/
var arr= [1,2,3,4,5,6];
arr.forEach(function(item,index,aaa){
console.log(item,index,aaa);
});
//返回一个新的数组,该数组的元素,就是function的返回值
//如果没有返回值,返回的数组就是原先数组拷贝
var ret = arr.map(function(item,index,aaa){
return item + "xxx";
});
console.log(ret);
var arr2 =['A','B','C','D','E','F'];
//index 表示数组的索引值
for(var index in arr2){
console.log(index);
}
十五.prototype
//prototype 给某指定类添加一个方法或者属性
//给所有数组添加一个set方法
Array.prototype.set=function(index,value){
this.splice(index,0,value);
};
//定义一个数组
var arr=['A','B','C','D','E'];
console.log(arr);
//需求:给arr对象添加一个方法set(index,value)
//表示在指定索引的位置,添加一个元素
arr.set(3,'F')
console.log(arr);
var arr3=['A','B','C','D','E'];
arr3.set(3,'f');
console.log(arr3);
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
