Js基础-1

学完html和css，下面是js

1.js中的变量

• var 变量名=值；
• 区分大小写
• 变量名要有意义
• 一般以字母，$ 符号，下划线开头，中间或者后面可以有$符号，字母，数字
• 变量名一般都是小写的
• 变量名如果是多个单词，第一个单词的首字母是小写的，后面的所有的单词的首 字母都是大写的，这种命名方式称为：驼峰命名法，例如：var
  bigNumber=10;
• 不能使用关键字

2.变量的输出

var number=10;
1.弹框
alert（num）;
2.把内容输出在浏览器的控制台中
console.log（num）;

3.js中的数据类型

(1).js中的原始数据类型

• number：数字类型（整数和小数）
• string：字符串类型（的值一般都是单引号或者双引号括起来的）
• boolean：布尔类型（值只有两个，true(真1)，false(假0)）
• null：空类型，值只有一个null，一个对象指向为空了，此时可以赋值为null
• undefined：未定义，值只有一个:undefined
  • 变量声明了，没有赋值，结果是undefined
  • 函数没有明确返回值，如果接受了，结果也是undefined
• object：对象

4.字符串的拼接

(1) 使用“+”

var str1="hello";
var str2="stranger";
console.log(str1+str2);

(2) 只要有一个是字符串，其他的是数字，那么结果也是拼接，不是相加

var str1="9";
var str2=9;
console.log(str1+str2);//结果是99

(3) 如果有一个是字符串，另一个不是字符串，用" - "，那么结果是相减的
（浏览器自动的帮我们把字符串的类型转成了数字类型，这种方式叫做：隐式转换）

var str1="10";
var str2=9;
console.log(str1-str2);//结果是1

5.类型转换

(1) 转整数：parseInt();

console.log(parseInt("10"));//10

(2) 转小数：parseFloat();

6.基本语句

和C语言差不多，前面的文章有了，不写了，我想说，学个前端，就连写星星都觉得幸福，多好看哪，看看别的，，，

7.数组

(1) 构造函数定义数组：var 变量名=new Array();
如果把数组的名字直接输出，那么就可以把数组里面的内容直接输出来。如果没有数据就看不到数据，
var 数组名=new Array(值);
定义了数组，有长度
var 数组名=new Array(值1，值2，值3…);
定义数组并且有多个数据

 var arr=new Arry(100,200,300);
 console.log(arr[3]);//获取

(2) 通过字面量的方式定义数组
var 数组名=[ ];
数组中元素的值的类型可以不一样
var array=[“red”,1,true ];

var arr=[1,2,3,4,];
console.log(arr);

(3) 案例：去掉数组中重复的0，把其他的数据放在一个新的数组中

var arr=[10,0,20,30,0,50];
var newArr=[ ];/新数组，用来存放第一个数组中所有非0的数字
for(var i=0;i<arr.length;i++){
	if(arr[i]!=0){
		newArr=[newArr.length]=arr[i];
	}
}
//把新数组的长度作为下标使用，数组的长度是可以改变的
console.log(newArr);

(4) 案例：用户输入班级人数，求总成绩，平均值，最高分，最低分

//提示用户输入班级人数，求总成绩，平均值，最高分，最低分
var perCount=parseInt(prompt("请输入班级人数"));
//定义数组存储班级的每个人的成绩
var perScores=[];
//循环的方式录入每个人的成绩
for(var i=0;i<perCount;i++){
	perScores[perScores.length]=parseInt(prompt("请输入第"+(i+1)+"个人的成绩"));
}
console.log(perScores);
//求总成绩
var sum=0;
var avg=0;
var max=perScores[0];//最大值
var min=perScores[0];//最小值
for(var i=0;i<perScores.length;i++){
sum+=perScores[i];//求和
//求最大值
if(max<perScores[i]){
	max=perScores[i];
}
//求最小值
if(min>perScores[i]){
		min=perScores[i];
	}
}
//平均值
avg=sum/perScores.length;
console.log("最大值为："+max);
console.log("最小值为"+min);
console.log("平均值"+avg);

8.函数

(1) 定义
function 函数名字(){
函数体;
}
(2) 函数调用
函数名字();

9.函数参数

(1) 小括号内的参数不再用var

fonction getSum(x,y){
	var sum=x+y;
	return sum;
}
//函数调用
var result=getSum(10,20);
console.log(result);

• 形参：函数在定义的时候，小括号里的变量叫形参
• 实参：函数在调用的时候，小括号里传入的值叫实参，实参可以是变量，也可以是值

10.返回值

如果函数没有显示的使用 return语句 ，那么函数有默认的返回值：undefined
如果函数使用 return语句，那么跟再return后面的值，就成了函数的返回值
如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值也是：undefined
函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说return后面的所有其他代码都不会再执行。

11.arguments的使用

JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。arguments是一个伪数组，因此及可以进行遍历

function f1() {
		var sum=0;
		for(var i=0;i<arguments.length;i++){
		sum+=arguments[i];
	}
	return sum;
}
console.log(f1(10,20));

12.函数的其它使用

匿名函数
匿名函数：没有名字的函数
匿名函数如何使用：
将匿名函数赋值给一个变量，这样就可以通过变量进行调用

 var f1=function(){
    		函数体
   };		//这里加分号
   f1();

匿名函数自调用
关于自执行函数（匿名函数自调用）的作用：防止全局变量污染。

自调用函数
匿名函数不能通过直接调用来执行，因此可以通过匿名函数的自调用的方式来执行

(function () {
  alert(123);
})();

函数是一种数据类型

function fn() {}
console.log(typeof fn);

• 函数作为参数
  因为函数也是一种类型，可以把函数作为两一个函数的参数，在两一个函数中调用

• 函数做为返回值
  因为函数是一种类型，所以可以把函数可以作为返回值从函数内部返回，这种用法在后面很常见

  function fn(b) {
          var a = 10;
          return function () {
            alert(a+b);
          }
        }
        fn(15)();
  

13.预解析

JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析过程和代码执行过程
预解析过程：

1. 把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
2. 把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
3. 先提升var，再提升function

14.创建对象

(1) 调用系统的构造函数创建对象

var obj=new Object();
obj.name="zy";//添加属性：对象.名字=值;
obj.age=18;
obj.eat=function(){		//添加方法：对象.名字=函数;
	console.log("我爱吃火锅");
};
console.log(obj.name);
console.log(obj.age);
obj.eat();

(2) 工厂模式创建对象

function createPerson(name, age, job) {
	var person = new Object();
	person.name = name;
	person.age = age;
	person.job = job;
	person.sayHi = function(){
		 console.log('Hello,everyBody');
	 }
	return person;
}
var p1 = createPerson('张三', 22, 'actor');
p1.sayHi();

(3) 自定义构造函数创建对象

1. 在内存中开辟空间，存储创建的对象
2. 把this设置为当前的对象
3. 设置对象的属性和方法的值
4. 把this这个对象返回

function Person(name,age){
	this.name=name;
	this.age=age;
	this.sayHi=function(){
		console.log("我叫"+this.name+"年龄是"+this.age);
	};
}
var obj=new Person("小红",19);
console.log(obj.name);
console.log(obj.age);
obj.sayHi();

(4) 字面量方式创建对象

var obj={ 
	name:"zy",
	age="19",
	sayHi:function(){
	console.log("我是:"+this.name);
	},
	eat:function(){
		console.log("吃了");
	}
};
console.log(obj.name);
obj.sayHi();

15.for in遍历的使用

var obj = {
	name:"zy",
	age:"19"
};
	for(var key in obj) {
	console.log(key + "==" + obj[key]);
}

16.两类方法

(1) 实例方法：必须要通过new的方式创建的对象（实例对象）来调用的方法
(2) 静态方法：直接通过大写的构造函数的名字调用的方法

17.字符串对象的常用方法

(1) 字符方法
charAt() //获取指定位置处字符
charCodeAt() //获取指定位置处字符的ASCII码
str[0] //HTML5，IE8+支持 和charAt()等效
(2) 字符串操作方法
concat() //拼接字符串，等效于+，+更常用
slice() //从start位置开始，截取到end位置，end取不到
substring() //从start位置开始，截取到end位置，end取不到
substr() //从start位置开始，截取length个字符
(3) 位置方法
indexOf() //返回指定内容在元字符串中的位置
lastIndexOf() //从后往前找，只找第一个匹配的
(4) 去除空白
trim() //只能去除字符串前后的空白
(5) 大小写转换方法
to(Locale)UpperCase() //转换大写
to(Locale)LowerCase() //转换小写
(6) 其它
search()
replace()
split()
fromCharCode()
String.fromCharCode(101, 102, 103); //把ASCII码转换成字符串

18.Math对象

Math对象不是构造函数，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供

• Math.PI // 圆周率
• Math.random() // 生成随机数
• Math.floor()/Math.ceil() // 向下取整/向上取整
• Math.round() // 取整，四舍五入
• Math.abs() // 绝对值
• Math.max()/Math.min() // 求最大和最小值
• Math.sin()/Math.cos() // 正弦/余弦
• Math.power()/Math.sqrt() // 求指数次幂/求平方根

19.Date对象

创建Date实例用来处理日期和时间。Date对象基于1970年1月1日（世界标准时间）起的毫秒数。

// 获取当前时间，UTC世界时间，距1970年1月1日（世界标准时间）起的毫秒数 var now = new Date();
console.log(now.valueOf()); // 获取距1970年1月1日（世界标准时间）起的毫秒数

Date构造函数的参数

1. 毫秒数 1498099000356 new Date(1498099000356)
2. 日期格式字符串 ‘2015-5-1’ new Date(‘2015-5-1’)
3. 年、月、日…… new Date(2015, 4, 1) // 月份从0开始

获取日期的毫秒形式

var now = new Date();
// valueOf用于获取对象的原始值
console.log(date.valueOf())	

// HTML5中提供的方法，有兼容性问题
var now = Date.now();	

// 不支持HTML5的浏览器，可以用下面这种方式
var now = + new Date();			// 调用 Date对象的valueOf() 

日期格式化方法

toString() // 转换成字符串
valueOf() // 获取毫秒值
// 下面格式化日期的方法，在不同浏览器可能表现不一致，一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()

获取日期指定部分

getTime() // 返回毫秒数和valueOf()结果一样，valueOf()内部调用的getTime()
getMilliseconds()
getSeconds() // 返回0-59
getMinutes() // 返回0-59
getHours() // 返回0-23
getDay() // 返回星期几 0周日 6周6
getDate() // 返回当前月的第几天
getMonth() // 返回月份，从0开始
getFullYear() //返回4位的年份 如 2016

20.Array对象

创建数组对象的两种方式

• 字面量方式
• new Array

// 1. 使用构造函数创建数组对象
// 创建了一个空数组
var arr = new Array();
// 创建了一个数组，里面存放了3个字符串
var arr = new Array('zs', 'ls', 'ww');
// 创建了一个数组，里面存放了4个数字
var arr = new Array(1, 2, 3, 4);
// 2. 使用字面量创建数组对象
var arr = [1, 2, 3];
// 获取数组中元素的个数
console.log(arr.length);

• 检测一个对象是否是数组
  • instanceof
  • Array.isArray() HTML5中提供的方法，有兼容性问题
    函数的参数，如果要求是一个数组的话，可以用这种方式来进行判断
• toString()/valueOf()
  • toString() 把数组转换成字符串，逗号分隔每一项
  • valueOf() 返回数组对象本身
• 数组常用方法
  演示：push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()

1 栈操作(先进后出)
push()
pop() //取出数组中的最后一项，修改length属性
2 队列操作(先进先出)
push()
shift() //取出数组中的第一个元素，修改length属性
unshift() //在数组最前面插入项，返回数组的长度
3 排序方法
reverse() //翻转数组
sort(); //即使是数组sort也是根据字符，从小到大排序
// 带参数的sort是如何实现的？
4 操作方法
concat() //把参数拼接到当前数组
slice() //从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
splice() //删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)
5 位置方法
indexOf()、lastIndexOf() //如果没找到返回-1
6 迭代方法 不会修改原数组(可选)
every()、filter()、forEach()、map()、some()
7 方法将数组的所有元素连接到一个字符串中。
join()