数据类型

编写位置

1. 写在head里
   
   <script type="text/javascript">
   //alert("JS");
   //document.write("sssss");向body中输出内容
   //console.log("向输出台输出一个内容");
   </script>

2. 写在body里

<button onclick="alert('!!!');">click</button>
<a href="javascript:alert('???')">click2</a>

3. 写在外部文件引用（推荐）

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

注意事项

1.JS严格区分大小写

2.以分号结尾

3.JS会忽略多个空格和换行

字面量和变量

字面量：不可改变的值，可以直接使用，但一般不直接用

变量：可以用来保存字面量，值可以改变，开发中一般都用变量。

var a = 123;
console.log(a);
var age = 80;//可以进行描述

数据类型

1.数据类型指的就是字面量的类型，JS中有六种数据类型

String 字符串 Number 数值 Boolean 布尔值 Null 空值 Undefined 未定义 Object 对象

2.可以用一个运算符typeof来检查一个变量的类型

语法：typeof 变量

3.如果使用Number表示的数字超过了最大值，则会返回

Infinity 表示正无穷

-Infinity 表示负无穷

typeof检查Infinity也会返回number NaN是一个特殊的数字 表示Not A Number

强制转换

将a的值转化为字符串

方法一：调用toString()方法，但null和undefined这两个值没有toString()方法

var a = 123;
var b = a.toString();//调用a的toString()方法

方法二：调用String()函数，null和undefined可用

a = 123;
a = String(a);

进制表示

• 16进制 0x开头

• 8进制 0开头

• 2进制 0b开头

可以在parseInt()中传递一个第二参数，来指定数字的进制

a = parseInt(a,10);

获取输入内容

prompt()可以弹出一个提示框，用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容

var score = prompt("请输入期末成绩：");

代码块

JS中使用{ }来为语句进行分组

{
alert("hello");
console.log("你好");
document.write("语句");
} //不需要加锋号

对象

对象分类

对象中可以保存多个不同数据类型的属性

1. 内建对象 由ES标准中定义的对象

2. 宿主对象 浏览器提供的对象，比如BOM,DOM

3. 自定义对象

对象操作

增

obj.name = "孙悟空";

特殊属性名：对象["属性名"] = 属性值

obj["123"] = 789;
console.log(obj["123"]);

删

delete obj.name;

查

console.log(obj.gender);

检查对象中是否含有指定属性

in 运算符

语法：“属性名” in 对象

有返回true, 没有返回false

console.log("test2" in obj);

对象保存

JS中，变量保存在栈内存中，对象保存在堆内存中，每创建一个新对象，就会在堆内存中开辟新的空间。

变量中保存的是对象的地址。如果两个变量保存的是同一个对象引用，当一个通过变量修改属性时，另一个也会受到影响。

创建对象

var obj = new Object();

var obj = {};//对象字面量，可以创建时直接指定对象的值

语法： {属性名：属性值，属性名：属性值……}

var obj2 = {
name:"猪八戒"，
age:28,
test:{name:"沙和尚"}
}；

函数

函数定义

函数也是一个对象，函数中可以封装功能。需要时可以执行这些功能。可以保存一些代码需要时调用。

使用typeof检查一个函数对象时，会返回function。

var fun = new Function("console.log('Hello');");

封装到函数中的代码不会立即执行，在函数调用的时候执行。

调用函数：函数对象(); fun();

函数声明

结构

function 函数名([形参1，形参2…形参N]){

语句…

}

function fun2(){
console.log("hello");
}
fun2();

变量声明提前

使用var关键字声明的变量，会在所有代码执行之前被声明（但不会被赋值）

console.log(a); 相当于 var a;

console.log(a);

var a=3; a=3;

函数声明提前

使用function函数(){}会在所有代码执行之前就被创建

在函数中，不使用var的变量都会是全局变量 相当于window.d

定义形参相当于是在函数中声明了变量(var)，定义形参后，变量不再是全局变量

函数方法

obj.sayName = function(){}; 调方法：obj.sayName();

function fun(){}; 调函数：fun();

枚举对象中的属性

语法： for(var 变量 in 对象){}

for…in语句对象中有几个属性，循环体就会执行几次

for(var n in obj){
console.log(n);//可显示所有属性名
console.log(obj[n]);//可显示所有属性值
}

使用工厂化批量创建对象

function createPerson(name,age,gender){
//创建一个新的对象
var obj = new Object();
//向对象中添加属性
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.sayName = function(){
alert(this.name);
};
//将新的对象返回
return obj;
}

var obj2 = createPerson("猪",28,"男")；

this

解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个参数就是this.

this指向的是一个对象，这个对象我们称为函数执行的上下文对象

1.以函数形式调用时，this永远都是window

2.以方法形式调用时，this就是调用方法的那个对象

3.以构造函数的形式调用时，this是新创建的那个对象

4.使用call和apply调用时，this是指定的那个对象

call和apply()

这两个方法都是函数对象的方法，需要通过函数对象来调用

在调用call和apply可以将一个对象指定为第一个参数

此时这个对象将会成为函数执行时的this

arguments

在调用函数时，浏览器每次都会传递两个隐含的参数：

1.函数的上下文对象this

2.封装实参的对象arguments

arguments是一个类数组对象，也可以通过索引来操作数据，也可以获取长度

在调用函数时，我们所传递的实参都会在arguments中保存

arguments.length可以用来获取实参的长度

它里面有一个属性叫callee，这个属性对应一个函数对象，就是当前正在指向的函数的对象

构造函数

执行流程

1、立即创建一个新的对象

2、将新建的对象设置为函数中this

3、逐行执行函数中的代码

4、将新建的对象作为返回值返回

创建构造函数

创建构造函数，用来创建Person对象，构造函数首字母大写

function Person(name){
this.name = name;
this.sayName = fun;
}
function fun(){
alert("我是"+this.name);
}

构造函数调用

普通函数直接调用 var per = Person;

构造函数需要使用new关键字来调用 var per = new Person;

函数实例

通过一个构造函数创建的对象，称为该类的实例，例如per是Person的实例

使用instanceof可以检查一个对象是否是一个类的实例

语法： 对象 instanceof 构造函数

console.log(per instanceof Person);

所有对象都是object的后代，当以构造函数的形式调用时，this就是新创建的对象

函数原型

概念

将函数在全局作用域中定义，污染了全局作用域的命名空间，也很不安全，所以提出了原型

原型prototype：是公共区域，共有的属性和方法统一保存到原型中

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是原型对象

当函数以构造函数形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，可通过proto来访问该属性

var mc = new MyClass();
console.log(mc.proto);
//可以将对象中共有的内容，统一设置到原型对象中
MyClass.prototype.a = 123;
MyClass.prototype.sayHello = funtion(){
alert("hello");
}

image

检测方法

console.log(mc.hasOwnProperty("age"));</pre>

使用该方法只有当对象自身中含有属性时，才会返回true。hasOwnProperty：在原型里

当我们直接在页面中打印一个对象时，事件上是输出对象的toString()方法的返回值

console.log(per);

输出：[object Object]

原型与对象

原型对象也是对象，所以它也有原型

当我们使用一个对象的属性或方法时，会在自身中寻找

自身中如果没有，则去原型对象中寻找

如果没有，则去原型对象的原型中找，直到找到object对象的原型

object对象的原型没有原型

image

image

数组

分类

数组也是一个对象，用来存储值。

• 内建对象

• 宿主对象

• 自定义对象

操作

数组中可存放任意数据类型，对象，函数。

1. 创建数组对象

var arr = new Array();
var arr = [ ];
//向数组中添加元素
arr[0] = 10;
console.log(arr.length);//获取连续数组长度
arr[arr.length] = 70;

2. 数组中添加对象

var obj = {name:"孙悟空"}；
arr[arr.length] = obj;
arr = [{name:"孙悟空"},{name:"猪八戒"},{name:"沙和尚"}]；
console.log(arr[1].name);

3. 数组中添加函数

arr = [function(){alert(1)},function(){alert(1)},function(){alert(1)}];
arr0;

4. 数组末尾操作元素

arr.push("xxx","yyy","zzz");
//可以向数组末尾添加一个或多个元素，并将数组新的长度作为返回值返回
arr.pop();
//可以删除数组的最后一个元素，并将被删除的元素作为返回值返回

5. 数组开头操作元素

arr.unshift("牛魔王");
//向数组开头添加一个或多个元素，并返回新的数组长度
arr.shift();
//删除数组开头第一个元素，并将删除函数作为返回值返回

遍历

//筛选数组中成年的元素
function getAdult(arr){
var newArr = [];
//遍历arr,获取arr中的Person对象
for(var i=0 ; i<arr.length ; i++){
console.log(arr[i]);
if(p.age >= 18){
newArr.push(p);
}
}
}

对象方法

forEach()

可以替代for循环，该方法需要一个函数作为参数，数组中有几个元素就会执行几次

每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，我们可以定义形参，来读取这些内容

浏览器会在回调函数中传递三个参数

• 第一个参数：当前正在遍历的元素

• 第二个参数：当前正在遍历的元素索引

• 第三个参数：正在遍历的数组

回调函数：由我们创建但不由我们调用

arr.forEach(function(value,index,obj){
console.log(value);
});

slice()

可以用来从数组提前指定提取指定元素

该方法不会改变原数组，而是将截取到的元素封装到一个新数组中返回

参数：

第一个参数：截取开始的位置的索引，包括开始索引

第二个参数：截取结束的位置的索引，不包括结束索引（可不写，此时截取开始到结束所有元素；可写负值）

var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
var result = arr.slice(0,2);
console.log(result);//此时控制台输出“孙悟空，猪八戒”
var result = arr.slice(1);
console.log(result);//此时控制台输出“猪八戒,沙和尚,唐僧,白骨精”
var result = arr.slice(1，-2);
console.log(result);//此时控制台输出“猪八戒,沙和尚”

splice()

可以用于删除数组中的指定元素

该方法会影响原数组，会将指定元素从数组中删除，并将被删除的元素作为返回值返回

参数：

第一个参数：开始位置的索引

第二个参数：删除的数量

第三个及以后参数：可以传递一些新的元素，会自动插入到开始位置的索引前面（类似替换）

var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
var result = arr.splice(0,2);
console.log(arr);//"沙和尚,唐僧,白骨精"
console.log(result);//"孙悟空，猪八戒"
var result = arr.splice(1,0,"牛魔王");
console.log(arr);//"孙悟空,牛魔王,沙和尚,唐僧,白骨精"

concat()

可以连接两个或多个数组，并将新的数组返回

该方法不会对原数组产生影响

var arr = ["孙悟空","猪八戒","沙和尚"];
var arr2 = ["唐僧","白骨精"];
var result = arr.concat(arr2,"牛魔王")
console.log(reasult);//输出"孙悟空,猪八戒,沙和尚,唐僧,白骨精,牛魔王"

join()

可以将数组转换为一个字符串

该方法不会对原数组产生影响

join()中指定一个字符串作为参数，会成为连接字符

var arr = ["孙悟空","猪八戒","沙和尚"];
result = arr.join();
console.log(typeof result);//输出string

result = arr.join(hello);
console.log(result);//输出"孙悟空hello猪八戒hello沙和尚"

reverse()

用来反转数组

该方法会直接修改原数组

sort()

可以对数组中元素进行排序，但对于一些数字不适用

该方法会直接修改原数组

arr.sort(function(a,b){
return a - b;//升序排列
})