JavaScript基础

JavaScript入门

一、如何引入js文件

1、内部引入

<script type="text/javascript">
	//编写js代码
	...
</script>

2、外部引入

src属性中写引入的js文件

<script type="text/javascript" src="js/index.js"></script>

二、基本概念

1、变量

 	alert("我是一个弹窗");//弹窗
	var a=5;//变量初始化
	alert(typeof a);//typeof检验数值类型

	//字符串  'abc'或者"abc"单引号双引号都可以
	var name="hello";
	var en="world";
	alert(typeof name);

	//boolean 0(false) 1(true)
	var c=3<4;
	alert(c);//打印结果
		
	// undefined未定义
	var x;
	alert(x);

	//null 空值 属于空对象
	var y=null;
	alert(y);
	alert(typeof y);

2、 算数运算符

	var a=10;
	var b=4;
	//加、减、乘、除、取余
	var sum=a+b;
	var min=a-b;
	var mul=a*b;
	var exc=a/b;
	var sur=a%b;

	// 递增++;递减--
	var x=5;
	x--;
	alert(x);

3、逻辑运算符

	var chinese=45;
	var math=80;
	var english=90;
	// 逻辑与&&
	if(chinese>=60&&math>=60){
		console.log("你及格了");
	}else{
		console.log("你没有及格");
	}

	// 逻辑或||
	if(chinese>=60||english>=60){
		console.log("语言课还行");
	}else{
		console.log("你要加油了");
	}
	// 取反！
	var information=false;
	if(!information){
		console.log("用户信息登录了");
	}

4、数组

1.创建数组

	//创建方式1、字面量创建
	var arr=[1,2,3,4,5];
	//判断创建是数组是否成功
	if(Array.isArray(arr)){
		alert("是数组");
		console.log(arr);
		console.log(arr.length);
		console.log(arr[2]);
	}
	else{
		console.log("不是数组");
	}
	//创建方式2、js提供构造函数
	var arr2=new Array(1,2,3,4,5);
	arr2[2]="red";

2.数组转换成字符串的三种方式：toString()、toLocaleString()、join()

	var a=arr2.toString();
	var b=arr2.toLocaleString();
	var c=arr2.join("|");//将数组转换成字符串，并且分割字符串
	
	console.log(a);
	console.log(b);
	console.log(c);
	console.log(arr2);
	// console.log(arr2.length);
	// console.log(arr2[0]);

3. 数组的操作方法concat()、slice()、splice()

var fruit=Array("苹果","香蕉","梨子");
console.log(fruit);

1、合并数组concat() 添加新数据,原数组不变，输出返回值

	var newfruit=fruit.concat("西瓜");
	console.log(fruit);	
	console.log(newfruit);

2、删除数据slice(a,b) 保留a-b之间的数据(顾头不顾尾)，原数组不变，输出返回值

	fruit=fruit.slice(1,2);
	console.log(fruit);

3、替换数据splice() 原数组发生变化，输出原数组

	// 删除（起始位置，终止位置）
	var newfruit=fruit.splice(0,1);
	console.log(newfruit);//删除的返回值
	console.log(fruit);//删除后的结果
	// 插入（起始位置，不删除，添加新数据）
	var newfruit=fruit.splice(1,0,"火龙果");
	console.log(newfruit);
	console.log(fruit);
	//替换（起始位置，替换个数，新数据）
	fruit.splice(1,2,"西瓜","葡萄");
	console.log(fruit);

5、选择语句

1）、if-else语句

 var weather="snow";
	 if(weather=="sunny") {
		console.log("今天是晴天");
	 }else if(weather=="snow") {
		console.log("今天会下雪");
	}else {
		console.log("天气未知");
		alert("天气输入有误");
	 }

2）、三目运算符

	var	result=1>3 ? "真的" :"假的";
	alert(result); //假的

3）、switch语句

switch(true){
	case score>=90:
		alert('优秀');
		break;
	...
	default:
		alert('不及格');
		break;
}

6、比较运算符

===（！===）和==（！==）的区别
前者既比较内容也比较数据类型，后者只比较内容，不比较数据内容

	var a=5;//数字5
	var b="5";//字符串5
	var c=a===b;
	console.log(c); //false
	var d=a==b;
	console.log(d); //true

7、循环语句

1）、 for循环

//for (初始化条件；结束条件；递增条件)
	var sum=0;
	for(var i=1;i<=10000;i++){
		sum=sum+i;
	}
	alert(sum);

2）、while循环

while(true){
执行代码；
递增条件；
}

	var	sum=0;
	var i=0;
	while(i<=100){
		sum=sum+i;
		i++;
	}
	document.write(sum);

3)、do-while循环

do{
	sum=sum+i;
	i++;
}while(i<=100);
document.write(sum);

8、字符串方法

8.1字符串常用操作

	var str="hello world";
	
	console.log(str.length);//11 获取字符串长度
	console.log(str.charAt(1));//e 获取指定的字符
	console.log(str.charCodeAt(1));//101 获取指定的字符串对应的编码
	console.log(str.concat("你好","世界"));//拼接字符串 
	//通常情况下使用+来进行拼接
	console.log(str+"你好"+"世界");

strName.slice(start,end) 输出从start位置到end位置的（start-end）个值
如果这个参数是负数，-1 指倒数第一个元素

	console.log(str.slice(2,4)); //ll 
	console.log(str.substring(2,4)); //ll
	//从下标为2的元素开始输出共6个元素
	console.log(str.substr(2,6));//llo wo

8.2字符串转换

1、转换成整型

	var a=3.14
	console.log(parseInt(a));  //3

2、浮点型

	var b="151.2254";
	console.log(parseFloat(b));  //15.2254

3、出现字母等非数字符号，输出NaN

  var d="15454yy5.145"
console.log(Number(d));  //NaN

4、数转字符串

 //强制类型转换
	 var num=158.87;
	console.log(num.toString());
	console.log(String(num));
//隐式转换
	console.log(" "+num);
	console.log(num.toFixed(1));  //保留小数点后位数（四舍五入）

9、栈和队列

1、栈-lifo(后进先出)原则 push()/pop()方法

	var a=color.push("pink");	//.push()方法：往数组的最后一项添加新数据
	console.log(a);		//.push()返回的是数组的长度
	console.log(color);

	var b=color.pop();	//.pop()方法：删除数组中最后一个数据
	console.log(b); 		//.pop()返回的是删除数据的内容
	console.log(color);

2、队列FIFO（先进先出）原则 unshift() / shift()方法

	var c=color.unshift("yellow");	//unshift()方法：往数组的第一项前添加新数据
	console.log(c);		//unshift返回的是数组的长度;
	console.log(color);

	var d=color.shift();	//.unshift()方法：删除数组的第一项数据
	console.log(d);		//.shift返回的是数组中删除项的内容;
	console.log(color); 

10、排序 sort()方法

1.默认按照ASCII码排序
var arr=Array(5,2,10,3,24,0);
arr.sort();
console.log(arr);

2. 升序

function compare1(a,b){
	return a-b; 
}
arr.sort(compare1);
console.log(arr);

3.降序

function compare2(a,b){
	return b-a; 
}
arr.sort(compare2);
console.log(arr);

11、查找位置 indexOf()、 lastIndexOf() 查不到结果返回-1

1.正序寻找

    var names=Array("张三","李四","王五","赵六","李四","钱多");
    var name1=names.indexOf("李四");//1
    console.log(name1);
    var name2=names.indexOf("李四",2);//4
    console.log(name2);

2.倒序寻找

	var name3=names.lastIndexOf("李四");//4
	console.log(name3);
	var name4=names.lastIndexOf("李四",2);//1
	console.log(name4);

3.查不到结果返回-1

	var name5=names.lastIndexOf("赵六",2);
 	console.log(name5);//-1

12、迭代方法 filter()、forEach()、map()方法

1、filter()

filter()将数组的元素进行过滤 新数组只包含返回true的值，原数组保持不变

var nums=Array(1,3,5,7,9,20,19,4);
var numsResult=nums.filter(function(item,index,array){
	console.log("item："+item);
	console.log("index："+index);
	console.log("array："+array);
	return item>10;
});
console.log("numsResult:"+numsResult);

2、map（）

map()方法 映射 返回一个新数组，原数组不变

var mapResult=nums.map(function(item,index,array){
		return item*2;
	});
	console.log(mapResult);

2.1、map 方法的应用

var people=Array({name:"张三",age:"18"},{name:"李四",age:"24"},{name:"王五",age:"31"});
var peopleNames=people.map(function(item,index,array){
	return item.name;
});
console.log(peopleNames);
var peopleages=people.map(function(item,index,array){
	return item.age;
});
console.log(peopleages);

3、 forEach（）

forEach()方法：遍历操作

var foreachResult=mapResult.forEach(function(item,index,array ){
	console.log(item);
});

13、时间Date方法

var now=new Date();

console.log(now.getDate()); //获取月份的第几天（1-31）
console.log(now.getMonth());//获取月份（0-11）
console.log(now.getFullYear());//获取年份
console.log(now.getDay());//获取一星期中的第几天（0-6）
console.log(now.getHours());//获取小时（0-23）
console.log(now.getMinutes());//获取分钟（0-59）
console.log(now.getSeconds());//获取秒（0-59）

//日期格式化方法
console.log(now.toDateString()); //星期几 月 日 年
console.log(now.toTimeString());// 时 分 秒 时区
// 常用
console.log(now.toLocaleDateString());//2019/7/15
console.log(now.toLocaleTimeString());//下午5:50:30
console.log(now.toLocaleString());//2019/7/15 下午5:50:30

console.log(now.toUTCString());//Mon, 15 Jul 2019 09:50:30 GMT

14、globle对象

1、 编码

		 var uri="http://www.baidu.com .html.jj?name=:张三";
		console.log(encodeURI(uri)); //识别空格转换成%20
		console.log(encodeURIComponent(uri));//识别其他符号：---%3A

2、 解码 decodeURI 、decodeURIComponent

15、Math对象

1、获取最大、最小值使用 min() 、max()方法

console.log(Math.min(1,54,2,78,0));  //0
console.log(Math.max(1,54,2,78,0));  //78

2、求数组中的最大最小值

var a=[12,5,2,7,89,75,0,34];
console.log(Math.max.apply(null,a));

3、ceil() floor() round()

var num=24.124;
console.log(Math.ceil(num)); //25  有小数点进位
console.log(Math.floor(num));//24  保留整数部分
console.log(Math.round(num)); //24  标准的四舍五入

4、获取随机数 random() 取值范围0<=random<1

console.log(Math.random(num));