学习js的课堂笔记(一)---基础

一、编程语言
c语言
是一种编译语言
hello.c无法直接运行在操作系统上
编写-> 编译 ->运行(直接运行在操作系统上)

Java语言(跨平台)
	编写-> 编译 ->运行(运行在jvm)

js语言(nodeJS)
	解释性语言
	弱类型语言
	编写 -> 运行

二、快速入门
1、js组成
IE ----- ies
firefox ----- ffs
google chrome ----- gcs
opera
safari

	ECMAScript (ECMA)
		js语法标准
			变量
			数据类型
			关键字
			操作符
			语句(流程,循环)
			数组
			面向对象

			js开发者
			js解析者
	DOM (jquery)
		文档对象模型
		js语法标准开发出来的操作元素的js库
		var dom = document.getElementById()
		dom.onclick()
	BOM
		浏览器对象模式
		window.alert();
		confirm()
		prompt()
		setInterval()
		setTimeout()

2、第一个js例子:hello.js
var str = “hello”;
console.log(str);

	$ node hello.js

3、js注释
// 单行注释
/**/多行注释
1:1

	html注释 <!---->
	css注释	/**/

4、 关键字和保留字
var str = “hello”
var, if, else, while, do, switch,…

5、变量
可以变化的量
js中的变量是弱类型的。变量的数据类型只有在初始化的时候才能被确定
1) 弱类型
var a ; //undefined
a = 3; //number
a = true //boolean
a = “19” //string
a = null //null

  1. 变量声明
    var a ;
    var b , c;

  2. 初始化
    a = 3;
    b = true;

  3. 变量声明的提升
    console.log(e); //undefined
    var e = 3;

     	->
     	var e;	(声明提升)
     	console.log(e);
     	e = 3;
    

5)变量的数据类型
①基本数据类型(5种)
1.1 string
“true” ‘1’
“hello"11"world”
" ’ \t \n
1.2 number
1 1.1
NaN (not a number)
isNaN(变量)
如果变量为NaN,那么返回true
Infinity
var a = 1/0;
无限大
isFinite(变量)
如果变量正常,返回true
1.3 boolean
true / false
1.4 undefined
未初始化
以undefined来初始化
1.5 null
以null来初始化

				function createPerson(name,age){
					var person = null;
					if(name && age){
						person = new Object();
						person.name = name;
						person.age = age;
					}
					return person;
				}

				var p = createPerson("terry",22);
				if(p == null){
					console.log("未初始化");
				} else {
					console.log(p.name);
				}

			if(typeof a == 'boolean') {

			}

判断变量所属数据类型
typeof 变量名

②引用数据类型
除了基本数据类型之外所有的其他数据类型都为引用数据类型

三、JS中的操作符
1) 算术运算符 (Number)
+ +=
- -=
* *=
/ /=
% %=

	5%2 = 1
	var a = 3;
	a+=3

	//a = a+3;
2) 一元运算符
	++
		前置,先自增再参与其他运算
			var a = 3;
			var b = ++a + 1;
		后置,先参与其他运算再自增
			var a = 3;
			var b = (a++)+1;
	--
		与++类似
	+
		var a = 3;
		+a;
		var a = 'a';
		+a;	
		将其他类型转化为Number类型
	-
		var a = 3;
		-a 		// -3
		var a = 'a''
		-a
		将其他类型转换为Number类型,再加-
		+a
		-(-a)
3) 比较运算符 (boolean)
	== 		比较值
	===		先比较数据类型再比较值
		null == undefined 	//true undefined派生自null
		null === undefined 	//false

		'12' == 12 	//true
		'12' === 12	//false
	!=
	!==
	>
	<
	>=
	<=
4) 逻辑运算符(短路运算符) (boolean)
	&& 并且
		同真则真,有假则假
		exp1 && exp2
		exp1,exp2可以为boolean也可以为其他数据类型,如果为其他数据类型在运算前先转换为boolean在进行运算

		exp2 = true
		exp1 = false
		如何证明?

	||
		有真则真,同假才假

		var a = 3;
		var b ;

		var input = '19';

	!
		var a = true
		!a 		//false
		var a = 'hello';
		!a 		//false

		快速将其他类型转换为布尔类型的方法
		!!a

5) 三目运算符
	? : 
	boolean_exp ? exp1 : exp2;
	var xb = gender == 1 ? '男' : '女'; 
	var a = day==1?'周一':day==2?'周二':'周三'

	<div id="main">	
		姓名<div>{{name}}</div>
		性别<div>{{gender==1?"男":"女"}}</div>
	</div>

	<script>
		export default {
			data(){
				return {
					name:'terry',
					gender:1
				}
			},
			methods:{
				sayName:function(){

				}
			}
		}
	</script>
6) 位运算符

四、基本数据类型的类型转换
1) 将其他数据类型转换为Number
转换
+a
-(-a)
Number(a)
true 1
false 0
undefined NaN
解析
parseInt() 解析为整数
parseFloat() 解析为小数
true NaN
false NaN
undefined NaN
2) 将其他数据类型转换为Boolean
!!a
Boolean(a)
number
非0/Infinity true
0/NaN false
string
非空字符串 true
空字符串 false
null false
undefined false

  1. 将其他数据类型转换为String
    var a = true;
    a = a+’’

五、流程控制语句
1) if语句
if(exp){
//…
}
当exp为真,才可以执行大括号中的内容
当exp不为boolean的时候,先转换为boolean类型

2) if-else 
	if(condition) {
		exp1
	} else {
		exp2
	}
	当condition为真,执行exp1,否则执行exp2
3) if-else if - else
	if(condition1){
		exp1
	} else if (condition2) {
		exp2
	} else {
		exp3
	}

4) switch
	var day = "3";
	switch(day){
		case 1:

			break;
		case 2:

			break
		case 3:

			break;
		default:
			...
	}
	1. 变量与常量比较的时候使用===
	2. 在case代码块不可以省略break;不然代码会直接向下执行直到遇到break或者代码结束
	3. default的位置可以不在最后,当在其他位置上时,break不能省略

六、 循环语句
要素
初始化条件
结束条件
迭代

1) for循环
	for(初始化条件; 结束条件; 迭代) {
		//循环体
	}
	
	初始化条件执行1次
	结束条件执行 n+1次
	迭代 n次

	1 + 2 + 3 + ... + 100
	(1+100)*50
2) do-while

	var i = 10;
	var total = 1;
	do {
		total *=i;
		i--;
	} while(i>0);

3) while
	var i = 10;
	var total = 1;
	while(i>0){
		total *= i;
		i--;
	}

	10

4) for-in (增强for循环)
	主要用于遍历数组或者对象
	var arr = ["terry","larry",true,12];
	for(var i in arr){
		console.log(i);
	}

七、对象
引用数据类型
复杂的数据结构,类似于C语言中的结构体,用于保存多个值。
1) 创建
1. 通过构造函数(根 Object)
Object是一个构造函数,所有的子构造函数都继承自Object

		var obj; //创建一个东西
		obj = new Object();	//引用
		obj.name = 'terry';
		obj.age =22;
		obj.gender = true;
		
		var a ;
		a = 12;	//基本
		
	2. 使用对象字面量

		var obj = {
			name:'terry',
			age:12,
			gender:true,
			firends:null
		};
		属性名与属性值通过:隔开,属性与属性之间通过,隔开。属性名可以不加引号。当属性名出现特殊字符,需要加引号。 属性可以动态添加删除

2) 对象属性的访问
		var obj = {name:'terry',age:12};
	obj.属性名
		obj.name

	obj[属性名]
		obj['name']
		=>
		var a = 'name';
		obj[a]

	属性删除
		delete obj.key

3) 引用拷贝,值拷贝
		var obj1 = {name:'terry',age:12};
		var obj2 = obj1;
		obj2.age++;

		obj1.age 	13
		obj2.age 	13

		var a = 1;
		var b = a;
		b++;

		a 	1
		b 	2
4) 检测
	in

	var obj = {name:"terry",age:12};
	'name' in obj

	user

	if('gender' in user){
		console.log(user.gender);
	} else {
		console.log('性别未初始化');
	}

	console.log(user.gender);

5) Object(拓展)

	var obj = new Object();
	=>
	var obj = {};

	Object是一个构造函数 			人类
	obj2构造函数产生的实例 			李老师

	Object
		toString()	对象转换为字符串
		valueOf() 	对象转换为number

	obj1 obj2 obj3
       由于obj1是Object的实例,所以obj1可以调用Object中的方法。
  obj2,obj3也同样可以。因为他们都属于Object的实例

猜你喜欢

转载自blog.csdn.net/qq_37957971/article/details/82314066
今日推荐