JavaScript（一）--基础语法

一、数据类型

1、Undefined

//undefined类型只有一个值，这个值就是undefined
			//当一个变量没有手动赋值，系统默认赋值undefined，也可以给一个变量赋值undefined
			var i;
			var j=undefined;
			alert(i==j);//ture

2、Number

注意，number里面不一定都是数字

整数、小数、正数、负数、NaN（不是数字）、无穷大都属于number类型

function sumaa(a,b){
				if(isNaN(a)||isNaN(b)){  //判断是否为数字
					alert("参与运算的必须是 数字！！");
					return;
				}
				return a+b;
			}
			alert(sumaa("a",10));//undefined
		    alert(sumaa(10,10));//20

3、Boolean类型

//"有"就转为ture，否则为false
			alert(Boolean(12));//ture
			alert(Boolean(""));//false
			alert(Boolean("abd"));//ture
			alert(Boolean(NaN));//false
			alert(Boolean(undefined));//false
			alert(Boolean(Infinity));//true

要避免死循环！！！

while(1/3){
				alert("嘻嘻");//死循环
			}

4、String

1、 正常字符串我们使用 单引号，或者双引号包裹
可以在字符串内使用引号，只要这些引号与包围字符串的引号不匹配
2、注意转义字符 \

\' 
\n
\t
\u4e2d  \u#### Unicode字符
\x41          Ascll字符

3、多行字符串编写

//tab 上面 esc键下面
var msg = 
    `hello
world
你好ya
你好`

4、模板字符串

//tab 上面 esc键下面
let name = "zhoudan";
let age = 3;
let msg = `你好呀，${name}`

5、字符串长度

str.length

6、创建字符串对象两种方式

/*
		 * 两种方式：
		 * 第一种：var s1="zhoudan";
		 * 第二种：使用内置的方式
		 * var s2=new String("hello");父类是Object类
		 */
		//注意：第一种方式属于string，第二种属于object
		var s1="zhoudan";
		alert(typeof s1);//string
		var s2=new String("hello");
		alert(typeof s2);//object

字符串常用方法：

5、Null

//null NaN undefined数据类型不一样
	 alert(typeof null);//object
	 alert(typeof NaN);//number
	 alert(typeof undefined);//undefined
	 //null和undefined可以等同
	 alert(null==NaN);//false
	 alert(null==undefined);//true
	 alert(NaN==undefined);//false
	 
	 //在js里面有两个比较特殊的运算符
	 //==只判断值是否相等
	 //===全等运算符，即判断值是否相等，也要判断数据类型是否相等
	 console.log(1==true);//true
	 console.log(1===true);//false

6、引用类型

数组：

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6] ; //通过下标取值和赋值
arr[0]
arr[0] = 1

1、长度

arr.length

注意：加入给 arr.length 赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失

2、indexOf，通过元素获得下标索引

arr.indexOf(2)
1

字符串的 “1” 和数字 1 是不同的

3、slice（） 截取Array的一部分，返回一个新数组，类似于String中的 substring

4、push()，pop() 尾部

push： 压入到尾部
pop： 弹出尾部的一个元素

5**、unshift() , shift() 头部**

unshift： 压入到头部
shift： 弹出头部的一个元素

6、排序 sort()

(3) ["B", "C", "A"]
arr.sort()
(3) ["A", "B", "C"]

7、元素反转 reverse()

(3) ["A", "B", "C"]
arr.reverse()
(3) ["C", "B", "A"]

8、concat（）

(3) ["C", "B", "A"]
arr.concat([1,2,3])
(6) ["C", "B", "A", 1, 2, 3]
arr
(3) ["C", "B", "A"]

注意： concat（）并没有修改数组，只是会返回一个新的数组

9、连接符 join

打印拼接数组，使用特定的字符串连接

(3) ["C", "B", "A"]
arr.join('-')
"C-B-A"

10、多维数组

arr = [[1,2],[3,4],["5","6"]];
arr[1][1]
4

对象：

1、对象的三种创建方式

//1.直接法创建
			var stu={
			name:'dandan',
			age:24,
			eat:function(pig){
				console.log('吃：'+pig)
			}
		}
			//2.构造函数创建
			function Person(){
				this.name='haha';
				this.job=function(){
					alert('program');
				}
			}
			var person=new Person();
			//3.通过object创建
			var student=new Object();
			student.name='jack';
			student.sex='gril';

2.对象赋值

person.name='lili';
"lili"

使用不存在的对象属性不会报错，只会出现undefined
3.动态添加和删除对象属性

//添加属性  直接赋值就可以
person.ear="hah";
//删除属性  delete
delete person.name；

4.判断属性是否在对象中
要用引号

'age' in person;
true

5.判断一个属性是否为对象自身所拥有 hasOwnProproperty()

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

Object类型

1、Object类是所有类的超类，自定义的任何类型，默认继承Object
2、Object包括哪些属性？prototype和constructor
3、Object包括哪些函数？
toSting();valueOf();toLocalString();
4、定义类的方式：
第一种:function 类名(形参){}
第二种：类名=function(形参){}
5、调用方式：new 类名();

            /*
	    	 * Object类型
	    	 * 1、Object类是所有类的超类，自定义的任何类型，默认继承Object
	    	 * 2、Object包括哪些属性？prototype和constructor
	    	 * 3、Object包括哪些函数？
	    	 * toSting();valueOf();toLocalString();
	    	 * 4、定义类的方式：第一种:function 类名(形参){}
	    	 *              第二种：类名=function(形参){}
	    	 * 5、调用方式：new 类名();
	    	 * 
	    	 */
	    	function student(){
	    		alert("student xixix");
	    	}
	    	student();//作为普通函数调用
	    	var stu=new student();
	    	alert(stu);//[object Object]

 //prototyp这个属性可以动态的给类动态拓展属性和函数
	    	String.prototype.suiji=function(){
			alert("动态拓展函数");
		}
	    	var s=new String();
	    	//两种方式调用都可以
	    	"abc".suiji();
	    	s.suiji();

//JS里面怎么定义类，怎么创建对象 很随意
	   User=function(username,password){
	   	this.username=username;
	   	this.password=password;
	   }
	   var u1=new User();
	   var u2=new User("zhoudan");
	   var u3=new User("dandan",18);
	    console.log(u1.username);//undefined
	    console.log(u1.password);//undefined
	    console.log(u2.username);//zhoudan
	    console.log(u2.password);//undefined
	    console.log(u3.username);//dandan
	    console.log(u3.password);//18

数组的遍历方式：
普通循环

for(let i = 0;i < array.length; i++) {
	//array[i]
}

for-in

for(let 变量名 in 数组名) {
	//变量名中所保存的值是数组下标编号的字符串内容
	//仍然使用“数组名[字符串下标]”来访问数组对应下标处的元素
}

for-of（ES6）

for(let 变量名 of 数组名) {
	//变量名中所保存的值是数组中当前便利到的元素值
}

Map和Set（ES6新特性）

Map：

var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom'); //通过key获得value！
map.set('admin',123456);  //新增或修改！
map.delete("tom"); //删除！

set：无序不重复集合

set.add(2); //添加！
set.delete(1);  //删除！
console.log(set.has(3));  //是否包含某个元素

iterator（迭代器遍历）

map和set的遍历用for… of

//map
			var map=new Map([["tom",12],["jack",11],["sarry",33]]);
		for(let i of map){//局部变量用let
			console.log(i);
		}
		//set 无序不重复集合
		var set=new Set([1,2,2,3,3]);
		for(var j of set){
			console.log(j);
		}

二、函数

定义函数

1、function 函数名（形式参数列表）{
函数体
}
2、函数名=function（形式参数列表）{//匿名函数的形式！！
函数体
}

<body>
		<script type="text/javascript">
			/*
			 * java中的函数
			 * 修饰符列表 返回值类型 函数名（参数列表）{
			 * 	return 类型；
			 * }
			 * javaScript中函数命名：
			 * 1、function 函数名（形式参数列表）{
			 * 	函数体
			 * }
			 * 2、函数名=function（形式参数列表）{
			 * 	函数体
			 * }
			 * 不用指定返回值类型，返回什么都可以！！！
			 */
			function sum(a,b){
				alert(a+b);
			}
//			sum(10,20);
		</script>
		<input type="button" value="求和" onclick="sum(20,30)" />
	</body>

注意：一旦执行到 return 代表函数结束，返回结果！
如果没有执行 return ，函数执行完也会返回结果，结果就是 undefined
如果参数不存在，可以通过抛出异常进行规避！

function abs(x){
				if(typeof x !=='number'){
					throw "not a number";
				}
				if(x>=0){
					return x;
				}else{
					return -x;
				}
			}

arguments 可以表示传递进来的所有参数

var abs=function(x){
				console.log("x=>"+x);
				for(var i=0;i<arguments.length;i++){
					console.log(arguments[i]);
				}
			}

rest 获取除了已经定义的参数之外的所有参数

var abs=function(x,y,...rest){
				console.log("x=>"+x);
				console.log("y=>"+y);
				console.log(rest);
			}
			/*结果为
			 * abs(1,2,2,2,2)
               x=>1
               y=>2
              (3) [2, 2, 2]
			 */

注意：
1、 js函数调用的时候，类型没有限制，参数个数也没限制！！
2、在js里面，如果两个函数同名，会以后面的为主，后面的会把前面的干掉！！所以函数名最好不要重名

<script type="text/javascript">
			//注意js函数调用的时候，类型没有限制，参数个数也没限制！！
			//在js里面，如果两个函数同名，会以后面的为主，后面的会把前面的干掉！！所以函数名最好不要重名
			function sum(a,b){
				return a+b;
			}
			var ss=sum("java");
			alert(ss);  //javaundefined  +是拼接符
			
			var ss1=sum();
			alert(ss1);//NaN
			
			var ss2=sum(1,2,3);
			alert(ss2);//3
			
		</script>

函数变量作用域

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function qj() {
    var x = 1;
    x = x + 1;
}

function qj2() {
    var x = 'A';
    x = x + 1;
}

内部函数可以访问外部函数的成员，反之则不行

function qj() {
    var x = 1;

    // 内部函数可以访问外部函数的成员，反之则不行
    function qj2() {
        var y = x + 1;  // 2
    }

    var z = y + 1; // Uncaught ReferenceError: y is not defined
}

局部变量和全局变量：

//全局变量
x = 1;

function f() {
    console.log(x);
}
f();
console.log(x);

<script type="text/javascript">
			/*当一个变量声明没有var关键字，那么不管变量在哪里声明，都是全局变量！！
			 * 全局变量：函数体外声明，声明周期为浏览器打开时声明，关闭时销毁，尽量少用，耗内存
			 * 局部变量：函数体内声明，函数开始执行时，为局部变量声明，结束时销毁
			 */
			var i=100;
			function access(){
				var i=30;
				//就近原则，访问局部变量
				alert("i:"+i);
			}
			access();
			//全局变量
			alert("i:"+i);
		</script>

== 所有的变量定义都放在函数的头部，不要乱放，便于代码维护；==

function qj2() {
    var x = 1,
        y = x + 1,
        z,i,a; //undefined

    // 之后随意用
}

全局对象window

var x = 'xxx';
alert(x);
alert(window.x); // 默认所有的全局变量，都会自动绑定在 window对象下；

alert() 这个函数本身也是一个 window 变量；

var x="123";
			window.alert(x);//123
			var new_alert=window.alert;
			window.alert=function(){
			};
			//失效
			alert(456);//123
           //恢复
           window.alert=new_alert;
           alert(555);

把自己的代码全部放入自己定义的唯一空间名字中， 降低全局命名冲突的问题

// 唯一全局变量
var zhouApp = {};

// 定义全局变量
zhouApp.name = 'kuangshen';
zhouApp.add = function (a,b) {
    return a + b;
}

let关键字 定义局部变量，可以解决局部作用域冲突的问题

function aaa() {
    for (let i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i+1); //Uncaught ReferenceError: i is not defined
}

常量const

const PI = '3.14'; // 只读变量  没加const的时候可以修改值
console.log(PI);
PI = '123'; // TypeError: Assignment to constant variable.
console.log(PI);

方法

方法定义：

var person={
				name:'丹丹',
				birth:1996,
				//定义方法
				age:function(){
					var now=new Date().getFullYear();
					return now-this.birth;
				}
			}

this是无法指向的，默认指向调用它的那个对象！

apply 可以控制this的指向

getAge=function(){
					var now=new Date().getFullYear();
					return now-this.birth;
				}
			var person={
				name:'丹丹',
				birth:1996,
				//定义方法
				age:getAge
			};
			//使用apply改变指向
			getAge.apply(person,[]);//指向了person，参数为空

三、 内部对象

Date

typeof 123
“number”
typeof ‘123’
“string”
typeof true
“boolean”
typeof NaN
“number”
typeof []
“object”
typeof {}
“object”
typeof Math.abs
“function”
typeof undefined
“undefined”

使用

	var date=new Date();
		    alert(date);//Tue Jan 07 2020 21:52:21 GMT+0800 (中国标准时间)
		    alert(date.getFullYear());//年
		    alert(date.getMonth());//月  0-11
		    alert(date.getDate());//日
		    alert(date.getDay());//星期几
		    alert(date.getMinutes());//分
		    alert(date.getHours());//时
		    alert(date.getSeconds());//秒
		    
		    alert(date.getTime());//时间戳 全世界一样1578405141308
		    alert(new Date(1578405141308));//时间戳转为当前时间
		    
		    alert(date.toLocaleDateString());//2020/1/7
		    alert(date.toGMTString());//Tue, 07 Jan 2020 13:57:26 GMT

JSON

JSON是一种轻量级的数据交换格式！！
具有层次结构和传输效率高！！

对象都用{}
数组都用[]
所有键值对 用key:value

var user={
				name:'zhoudan',
				age:18,
				sex:'女'
			}
			//对象转为JSON字符串
		var jsonuser=JSON.stringify(user);
		//JSON字符串转为对象
		var obj=JSON.parse('{"name":"zhoudan","age":18,"sex":"女"}');
	/*
	 * 结果为
	 * {name: "zhoudan", age: 18, sex: "女"}
        name: "zhoudan"
        age: 18
        sex: "女"
	 */

js对象和JSON的区别：

var obj = {a: 'hello',b:'hellob'};
var json = '{"a": "hello","b":"hellob"}'

四、 面向对象

• 类: 模板 原型对象
• 对象: 具体的实例
  1、对象原型：
  所有 JavaScript 对象都从原型继承属性和方法。

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
var myFather = new Person("Bill", "Gates", 62, "blue");
var myMother = new Person("Steve", "Jobs", 56, "green");

Person.nationality = “English”;是不可以的

无法为已有的对象构造器添加新属性

prototype 属性允许您为对象构造器添加新属性

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";

prototype 属性也允许您为对象构造器添加新方法

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};

var Student = {
    name: "qinjiang",
    age: 3,
    run: function () {
        console.log(this.name + " run....");
    }
};


var xiaoming = {
    name: "xiaoming"
};

//原型对象  类似与小明继承Student
xiaoming.__proto__ = Student;


var Bird = {
    fly: function () {
        console.log(this.name + " fly....");
    }
};

// 小明的原型 是 Student
xiaoming.__proto__ = Bird;

class 继承 ES6新特性

class Student{
			constructor(name){
				this.name=name;
			}
			hello(){
				alert('hello');
			}
		}
			var jack =new Student("haha");
			jack.hello();

ES6 之后

class Student {
				constructor(name){
					this.name=name;
				}
				hello(){
					alert('hello');
				}
			}
			 class Person extends Student{
				constructor(grade){
					super(name);
					this.grade=grade;
				}
				myGrade(){
					alert('我是学生！');
				}
			}
			var jack=new Person();
			jack.hello();
		    jack.myGrade();

本质如下图：