web学习---JavaScript---笔记（一）

JavaScript

JS是脚本语言，一行一行的转换成二进制执行的

JS的组成：
ECMAScript、DOM、BOM

JS引入的三种方式

1. 直接引用：
   <input type="button" value="提交" onclick="alert('秋香')">

2. 文件内引用：

<script type="text/javascript">
	alert('你好');
</script>

3. 外部文件引入：

<script src="js/my.js"></script>
script标签中间，不要再写代码

my.jss中：

alert('hello word!')

HTML中推荐双引号
JS中推荐使用单引号

JS的弹框

输入框：prompt('请输入文字');
弹出框：alert('你好');
控制器自己看的打印：console.log('这里是控制台输出的内容');

---

变量

JS拥有动态类型，在运行的过程中，可能赋值了不同类型的变量

简单数据类型(基本数据类型)

Number、Boolean、String、Undefined、Null

Number

Number，整型、字符型，都可以用
8进制表示：0开头的，为8进制var num = 010;
16进制表示：0x开头的，为16进制

数据类型转换

数据类型转换有两种：

1. 隐式类型转换
2. 显示类型转换

”字符串“转换为”数字“

数据类型转换为Number：
Number();将字符串转换为Number
转换结果有两种情况
一种是”数字型字符串“转换成功
一种是，转换不成功，则输出的是NaN

NaN（Not a Number）：非数字
console.log('你好' - 100);输入结果就是NaN

isNaN()判断是否为数字，返回类型为布尔值
是非数字，返回true
是数字，返回false

parseInt(string);字符串转换为整型
parseFloat(string);字符串转换为浮点型

不仅可以将"123"转换
还可以将"11.2sss"中的11.2提出来，当然±也可以识别

”数字“转换为”字符串“

1. 与空字符串相加
2. toString()

var a = 10;
a.toString()

Undefined类型

Var a;
此时，a还不确定是什么类型，则a就是Undefined类型

隐式数据转换

console.log(18 == '18');结果是true
== 会默认转换数据类型，会把字符串转换为数字型

JS基础语法跟swift或则java差不多，以下挑重点或者不一样的地方做记录

• 伪数组

1. 具有数组的length属性
2. 按照索引的方式进行存储的
3. 它没有真正数组的一些方法：pop()、push()等方法

---

函数

JS函数调用常见有4种：

1. 直接调用
2. 在表达式中调用
3. 在超链接中调用
4. 在事件中调用

在超链接中调用：
语法：<a href="javascript: 函数名"></a>

argument就是一个伪数组

argument用来做什么？

当函数的形参，不知道有几个的时候，可以不写，然后调用的时候，随便写形参个数
然后，在函数内部，使用argument就可以接收到实参

接收的时候，是以伪数组的形式接收的

		<script >
			function func(){
				console.log(arguments);
			}
			
			func(1, 2, 3, 5);
		</script>

arguments：参数
arguments是当前函数的一个内置对象
所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有参数

匿名函数

		<script >
			var func = function(){
				console.log('匿名函数');
			};
			func();
		</script>

func是变量，不是函数名
函数为匿名函数

如果在函数内部，没有声明直接赋值的变量，也属于全局变量

???黑人问号

		<script >
			function func(){
				num = 10;
			};
			func();
			
			console.log(num);
		</script>

---

预解析

JS代码是由浏览器中的JavaScript解析器来执行的。
JS解析器在运行JS代码的时候分为两步：
预解析 和 代码执行

预解析：JS引擎会把JS里面所有的var和function提升到当前作用域的最前面
也就是
预解析分为：

1. 变量预解析（变量提升）
2. 函数预解析（函数提升）

变量提升

就是把所有的变量声明提升到当前作用域最前面 不提升赋值操作

举例：

console.log(num);
num = 10;

上述代码，相当于：

var num;
console.log(num);
num = 10;

因此，num没有赋值，不知道啥类型，报：undefined

函数提升

就是把所有的函数声明提升到当前作用域最前面 不调用函数

举例：

func();
var func = function() {
	console.log(22)
}

报错：func is not a function

原因是：
上述代码相当于：

var func;
func();
func = function() {
	console.log(22)
}

定义了一个变量func，然后调用func()，没有，所以报错

建议：函数调用永远写在函数声明后面

容易错的集体声明：
var a = b = c = 9;
相当于：
var a = 9; b = 9; c = 9;b和c直接赋值，没有var声明，因此，当全局变量看！！！

正确的集体声明：
var a = 9, b = 9, c = 9;

可以直接写：var a = 9; var b = 9; var c = 9;不会错

---

JS对象

//创建了一个空的对象
var obj = {};

一个简单的对象：

		<script >
			var obj = {
			//属性或者方法，采取键值对的方式
				uname: '张三',//多个对象用逗号隔开
				age: 18,
				sex: '男',
				sayHi: function(){//方法冒号后面，跟一个匿名函数
					console.log('Hi');
				}
			};
			
			console.log(obj.uname);//调用对象的属性，使用.
			console.log(obj['age']);//调用对象的属性，或者使用这种方法(类似字典取值)
			obj.sayHi();
			
		</script>

变量、属性、函数、方法的区分

变量和属性都是用来保存数据的

var num = 10;
var obj = {
	age: 18;
}

变量，不在对象内部
属性，在对象内部，不需要声明

函数和方法都是实现某个功能
函数：在对象外面
方法：在对象里面

创建对象的另外一种方式：

			var obj = new Object();
			obj.uname = '李四';
			obj.age = 10;
			obj.sayHello = function() {
				console.log('Hello');
			}
			
			console.log(obj.uname);
			obj.sayHello();

构造函数

构造函数的语法格式

function 构造函数名(){
this.属性 = 值;
this.方法 = function() {}
}
new 构造函数名();

举个栗子：

function Star(uname, age, sex) {
	this.uname = uname;
	this.age = age;
	this.sex = sex;
	this.sing = function (musicName){
		console.log(uname + '在唱《' + musicName + '》');
	}
}

var zs = new Star('张三', 18, '男');
console.log(typeof zs);
console.log(zs);
console.log(zs.uname);
zs.sing('敢问路在何方');

打印结果：

object
Star {uname: '张三', age: 18, sex: '男', sing: ƒ}
张三
张三在唱《敢问路在何方》

• 构造函数的首字母要大写(🐢腚)
• 构造函数不需要return，就可以返回结果

遍历对象所有的对象

使用for in方法

for(var k in zs){
	console.log(k);
	console.log(zs[k]);
}

---

内置对象

就是JS给我们提供的对象，供我们使用，越多越好

JS对象分为三种：

1. 自定义对象
2. 内置对象
3. 浏览器对象

内置对象
可以通过查阅MDN

Math

Math.floor(1.1);向下取整1
Math.ceil(1.1);向上取整2
Math.round(1.1);四舍五入1
Math.random();[0, 1)之间的

---

数组

数组的操作
push()，添加到数组的后面，push有返回值，返回值是新数组的长度
unshift()，在数组的最前面添加值，也有返回值，同样是新数组的长度
pop()，删除数组的最后一个元素，并且返回删除元素的值
shift()，删除数组第一个元素，同样返回的是删除元素的值

数组翻转：array.reverse();

数组排序：array.sort();

var array = [12, 3, 5, 88, 72];
array.sort();
console.log(array);

运行结果：(5) [12, 3, 5, 72, 88]
其顺序，是基数排序的第一次排序结果，这可不是我们想要的，那么，如果真正的实现排序呢？

可以给sort传递一个函数：

var array = [12, 3, 5, 88, 72];
array.sort(function(a, b){
	return a-b;//从小到大排序
	return b-a;//从大到小排序
});
console.log(array);

数组查找元素所在的索引：

indexOf();从前往后找元素的索引
lastIndexOf();从后往前找元素的索引

举个栗子：

var array = [12, 3, 5, 88, 72, 12];
console.log(array.indexOf(12));
console.log(array.lastIndexOf(12));
console.log(array.lastIndexOf(120));//找不到的话，返回-1

打印结果：
0
5
-1

数组转为字符串：

arr.toString();
arr.join();

举个列子：

var array = [12, 3, 5, 88, 72];
console.log(array.toString());
console.log(array.join('~'));//可以自定义间隔符
console.log(array.join(''));

打印结果：
12,3,5,88,72
12~3~5~88~72
12358872

时间对象

var date = new Date();

字符串

字符串查找

var str = '12345123';
console.log(str.indexOf('2'));//查找元素2
console.log(str.indexOf('2', 2));//查找元素2，从位置2开始找

打印结果：
1
6

字符串的其他操作：

字符串的截取

var str = 'aabcdefgaadsd';
console.log(str.substr(0, 3));//从index 0开始，截取长度3

打印结果：
aab

字符串的替换

var str = 'aabcdefgaadsd';
console.log(str.replace('a', 'b'));//将字符串中的a替换为b   只会替换第一个，后面的不替换

打印结果：
babcdefgaadsd

字符串转换为数组

var str = '123,234,455';
console.log(str.split(','));//使用逗号分割开字符串

打印结果：
['123', '234', '455']

---

简单数据类型和复杂数据类型

简单数据类型，又称为值类型，放在栈里面
复杂数据类型，又称为引用类型，放在堆里面

值类型：string、number、boolean、undefined、null
引用类型：
在存储时，存储的仅仅是地址
通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等