数组（Array）
基本定义
- 为什么要用数组
之前学习的数据类型，只能存储一个值。（字符串为一个值）
我们想存储多个值的时候可以使用数组。（字符串不方便）
比如：存储班级中所有学生的姓。 - 数组变量可以存放多个数据，好比一个军队，军队里面有很多军人。
数组是什么
- 数组是一种引用数据类型，属于对象
把很多数据装入一个盒子中，用的时候再取出来
它和普通对象功能类似，也是用来存储一些值得
不同的是普通对象是使用字符串作为属性名的，而数组是使用数字来作为索引操作元素。 - 数组的存储性能比普通对象要好，在开发中我们经常使用数组存储一些数据。
创建数组的方式
- 使用Array构造数组
① 创建一个空数组
② 创建一个长度为30的数组var arr1 = new Array();
③ 创建一个包含两个字符串的数组var arr2 = new Array(30);var arr3 = new Array('凯','kai'); - 使用数组字面量
① 创建一个空数组
② 创建一个长度为30的数组var arr1 = [];
③ 创建一个包含两个字符串的数组var arr2 = []; arr2.length=20var arr3 = ['凯','kai'];
原理
数组存储的数据可以是任何类型(数字、字符、布尔值等)
常用操作
- length ：求数组的长度
数组的长度=数组名.length
可以通过修改数组的长度来改变数组中元素的个数，如果改小了，数组从后面删除元素。（伪数组的长度可以修改，但是不能修改里面的元素） - 获取数组中的元素
① 数组中的指定元素 = 数组名[索引值]
② 数组的索引代表的是数组中的元素在数组中的位置，从0开始
③ 如果获取数组中的元素是，数组名[索引值]，没有指定索引（元素没有那么多），系统不
报错，而是给定值为undefined
数组常用API
- instanceof 是一个关键字。判断A是否是B类型。
布尔类型值 = A instanceof B
运行结果：var a = [1, 2, '哈哈哈']; console.log(typeof a); console.log(a instanceof Array); console.log(a instanceof Object);
instanceof和typeof的区别
typeof是直接获得类型原型链的最顶层，
instanceof比较的时候，只要是原型链上的上层，不论哪一层，返回都是true - Array.isArray(a) 判断a是不是个数组
布尔类型值 = Array.isArray(变量)
调用者：Array
参数：变量（被检测值）
返回值：布尔类型
运行结果：var a = [1, 2, '哈哈哈']; varb = 'KaiSarH'; console.log(Array.isArray(a)); console.log(Array.isArray(b));
- toString() 把数组转换成字符串，每一项用逗号分割
字符串= 数组.toString()
运行结果：var a = [1, 2, '哈哈哈']; console.log(a.toString()); console.log(typeof a.toString());
- valueOf() 返回数组对象本身
运行结果：var a = [1, 2, '哈哈哈']; console.log(a.valueOf());
- join(变量) 用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。默认为逗号。
字符串 = 数组.join（变量）
运行结果：var a = [1, 2, '哈哈哈']; console.log(a.join('?')); console.log(typeof a.join('?'));
函数（Function）
定义一个函数后，deal代表这个函数，deal（）代表这个函数的执行结果。
function deal(){
alert('123');
}
定义
函数也是一个对象
函数就是可以重复执行的代码块
函数就是完成特定功能的一段代码
使用typeof检查一个函数对象时，会返回function
作用
① 因为一部分代码使用次数可能会很多，所以封装起来，需要的时候直接调用就可以了，将复杂事情简单化，将重复使用的代码进行统一封装。
② 特点
Ⅰ. 封装到函数中的代码不会立即执行
Ⅱ. 函数中的代码会在函数调用的时候执行
Ⅲ. 调用函数 语法：函数对象()
Ⅳ. 调用函数时，函数中封装的代码会按照顺序执行
基本使用
① 不常用
var fun = new Function("console.log('大家好，我是函数');");
② 常用
Ⅰ. 函数定义
Ⅱ. 函数调用
常见的声明方式
① 函数声明方式
function sum(a, b){
console.log(a + b);
}
sum(10, 20);
② 函数表达式声明方式
var sum = function(a, b){
console.log(a + b);
}
sum(10, 20);
③ 使用Function构造函数
var add = new Function('num1','num2','return num1 + num2');
不推荐使用，主要时用于面向对象时理解函数就是对象，函数名就是指针这一概念。
函数的参数
① 为什么设置参数
为了增强函数的功能性和函数的可拓展性，便于交互
② 形参
形式上参与运算的变量，无实际值，为实参占个位置，就像一个躯壳一样。
function f(a,b){}; //a,b就是形参，占位用，函数定义时形参无值
③ 实参
实际上参与运算的变量，形参为他占位置，真是参与运算的变量。
f(x,y); //x,y实参，有具体的值，会把x,y复制一份给函数内部的a和b，函数内部的值时复制的新值，无法修改外部的x,y
④ 注意
在其他语言中，实参个数必须和形参个数一致，但是JavaScript中没有函数签名的概念，实参个数和形参个数可以不相等。
函数使用注意
① 在调用函数时，可以在()中指定实参，实参将会赋值给函数中对应的形参
② 调用函数时解析器不会检查实参的类型，所以开发中一般需要对参数进行类型的检查
③ 函数的实参可以是任意的数据类型
④ 调用函数时，解析器不会检查实参的数量，多余实参不会被赋值，如果实参数量少于形参的数量，则没有对应实参的形参将会是undefined
arguments对象
function sum(num1, num2) {
console.log(arguments);
}
sum()
sum(100, 200)
sum(100, 200, 300, 400, 500);
使用arguments.length可以获取传入实参的个数
使用arguments.callee指向函数本身
使用arguments获得函数的实参
function sum() {
var value=0;
for (var i = 0; i < arguments.length; i++) {
value += arguments[i];
}
console.log(value)
}
sum(10,20,30);
运行结果：
length属性 ：返回函数形参的个数
判断函数形参和接收到的实参个数是否相等？
fun sum(num1, num2){
if(arguments.length===sum.length)
console.log(num1+num2)
}
sum(1,2,3,4);
arguments.length 获得全部实参的个数
sum.length 获得形参的个数
函数返回值(return)
① 定义
当一个函数被调用，通常会从函数的开始执行到结束。如果想提前结束该函数的执行可以使用return语句，return语句后面的所有语句将永远不会执行。
一般用于返回结果。
② 注意
Ⅰ. 如果函数没有显式的使用return语句,那么函数有默认的返回值：undefined
Ⅱ. 如果函数使用return语句，那么跟在return后面的值，就成了函数的返回值
Ⅲ. 如果函数使用return语句，但是return后面没有任何值，那么函数的返回值也是：undefined
Ⅳ.推荐的做法是要么让函数始终都返回一个值，要么不要有返回值。
🍖🍖🍖函数直接声明还函数表达式声明的区别
// 函数声明
function fsum(){
}
//函数表达式声明
var sum = function(){
}
- 函数声明必须有函数名，而函数表达式的函数名可以省略
- JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面.也就是说只要在代码中写了函数声明，不管在哪里声明，代码中所有位置都可以调用。如果使用函数表达式对函数进行声明，则会把变量的声明提前，也就是说只能在函数定义之后使用该变量调用函数。
匿名函数
- 定义 ： 没有命名的函数
- 作用
① 用在绑定事件的时候
② 定时器document.onclick = function(){ alert(1); }
③ 立即执行函数 | 闭包setIntervak(function(){ console.log('每秒爱你1遍！'); },1000);(函数)(参数)(function(num1, num2){ console.log(num1, num2); })(1, 2)
函数是一种数据类型
function fn(){}
console.log(typeof fn); //function
console.log(typeof fn());//undefined
归根结底，它还是属于object
回调函数
- 回调函数就是一个通过函数调用的函数
- 如果你把函数的指针（地址）作为参数传递给另外一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。
执行结果：// 回调函数 // 加减乘除函数 function add(num1, num2) {return num1 + num2;} function sub(num1, num2) {return num1 - num2;} function mul(num1, num2) {return num1 * num2;} function divide(num1, num2) {return num1 / num2;} // 计算器函数 function cal(num1, num2, func) { return func(num1, num2) } // 使用 var result1 = cal(10, 20, add); var result2 = cal(10, 20, sub); var result3 = cal(10, 20, mul); var result4 = cal(10, 20, divide); console.log(result1); console.log(result2); console.log(result3); console.log(result4);
- 一般用于递归
变量的作用域
-
作用域：变量可以起作用的范围
-
全局变量：在任何地方都可以访问到的变量就是全局变量；对应全局作用域
-
局部变量：只在固定的代码片段内可访问到的变量，最常见的例如函数内部；对应局部作用域（函数作用域）
局部变量，现在函数内部的作用于找变量，找到则使用，找不到去父级作用域找变量。 -
注意
① 不使用var声明的变量是全局变量，不推荐使用(XXXX)
② 变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁 -
块级作用域
① 任何一对花括号{}中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域
② 在ES5之前没有块级作用域的概念，只有函数作用域 -
作用域链
① 概念
只有函数可以制造作用域结果，那么只要是代码，就至少有一个作用域 即全局作用域
凡是代码中有函数，那么这个函数就构成另一个作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
② 其它语言中变量i只能在for循环内部访问（局部变量）
③ 在ES5中，只有函数会产生作用域 -
预解析
① 概念
JS代码的执行是由浏览器中的JS解析器来执行的
JS解析器执行JS代码的时候，分为两个过程：预解析过程和代码执行过程
② 预解析过程
Ⅰ. 把变量的声明提升到当前作用域的最前面，只会提前声明，不会提前赋值
Ⅱ. 把函数的声明提升到当前作用域的最前面，只会提前声明，不会提前调用
Ⅲ. 先提升var，再提升function -
变量提升
① 变量提升：定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升
② 函数提升：JS解析器首先会把当前作用域的函数声明提前到整个作用域的最前面 -
面试相关
①var str1='郇'; fn1(); function fn1() { console.log(str1); var str1 = '凯'; }执行结果：
②
var num1 = 10; fn2(); function fn2() { var num2 = 20; console.log(num1); console.log(num2); var num1 = '12306'; }运行结果：
③
fn3(); console.log(num1); console.log(num2); console.log(num3); function fn3(){ var num1 = num2 = num3 = 100; console.log(num1); console.log(num2); console.log(num3); }运行结果：
fn3(); // console.log(num1); console.log(num2); console.log(num3); function fn3(){ var num1 = num2 = num3 = 100; console.log(num1); console.log(num2); console.log(num3); }运行结果：
也就是说，没有用var定义的变量是全局变量。
对象（Object）
JS中为什么要用对象
function logLike(name, intro, college, site, chat, phone){
}
function logLike(liao) {
console.log(liao.name);
console.log(liao.intro);
console.log(liao.college);
console.log(liao.site);
console.log(liao.chat);
console.log(liao.phone);
}
函数的参数如果特别多的话，可以使用对象简化
什么是对象
① 生活中，万物皆对象，对象是一个具体的事物，一个具体的事物就有有行为和特征。比如：一部手机，一台电脑。
②类和对象
Ⅰ. 类：描述一类事物，相当于“设计图纸”。JavaScript中可以自定义类，同时也提供了一个默认的类Object。比如：手机是一类事物，称为手机类；我们手上的iPhone手机才是真正的对象。
Ⅱ. 对象：描述一个具体的事物，相当于“成品”。有自己的特征和行为。
JS中的对象
JS中的对象是无序属性的集合，其属性可以包含基本值、对象或者函数
对象就是一组没有顺组的值，由一组组键值对构成
事物的特征在对象中用**属性**来表示
事物的行为在对象中用**方法**来表示
JS中对象的分类
① 内建对象/内置对象
由ES标准中定义的对象，在任何ES的实现中都可以使用
比如：String Number Boolean Function Object Math
② 宿主对象
由JS的运行环境提供的对象，现在主要指由浏览器提供的对象
比如：BOM对象 DOM对象
③ 自定义对象
自己创建的对象
比如：Person Dog
对象字面量
① 字面量 10086 ‘itlike’ true null undefined [] {}
常见创建对象方式
① 对象字面量
var x1={
// 属性
name:'kai',
age:22,
sex:'男',
height:1.80
// 行为
doIt:function () {
console.log('asd');
}
};
劣势 ：内容率先定义，不易修改。
② new Object()创建对象
var kai = new Object();
kai.name = 'jaunty';
kai.age = 22;
kai.sex = '男';
劣势：虽然容易修改内容，但是不易量产。
③ 工厂函数创建对象
function cretePerson(name, age, sex) {
var p = new Object();
p.name = name;
p.age = age;
p.sex = sex;
p.doIt = function () {
console.log('我会写代码')
};
return p;
}
kai = cretePerson('kai',22,'男');
hui = cretePerson('hui',21,'女');
劣势：虽然容易量产，但是都是由Object产生的，无法描述一种具体的对象。
④ 自定义构造函数
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.doIt=function () {
console.log('我会写代码')
}
}
var kai = new Person('kai', 21, '男');
function Dog(kind, sex, height) {
this.kind = kind;
this.sex = sex;
this.height = height;
this.run=function () {
console.log('跑快快');
}
}
var jm = new Dog('jinmao', '1', 0.5)
jm.run()
运行结果：
自定义对象构造函数解决了量产、创建不同对象的问题
属性和方法
① 属性 ：如果一个变量属于一个对象所有，那么该变量就可以称之为该对象的一个属性，属性一般是名词，用来描述事物的特征。
② 方法 ：如果一个函数属于一个对象所有，那么该函数就可以称之为该对象的一个方法，方法一般是动词，用来描述事物的行为和功能。
new关键字
① 概念：new关键字一般和构造函数一起配合使用
② 构造函数：构造函数，是一种特殊的函数。构造函数用于创建一类对象，首字母要大写。构造函数要和new一起使用才有意义。
③ new做了哪些事？？？？
Ⅰ. new现在内存中创建一个新的空对象
Ⅱ. new会让this指向这个新的对象
Ⅲ. 执行构造函数，给这个新对象增加属性和方法
Ⅳ. 返回这个新对象(return this)
this关键字
① 概念 ：this是一根指针
② 几个特点
Ⅰ. 普通函数执行，内部this指向全局变量window
Ⅱ. 函数在定义的时候this是不确定的，只有在调用的时候才可以确定
Ⅲ. 如果函数作为一个对象的方法，被该对象调用，name函数内的this则指向该对象
Ⅳ. 构造函数中的this是一个隐式对象，类似于一个初始化的模型。所有方法和属性都挂载到了这个隐式对象上，后续通过new关键字来调用，从而实现可例化
对象使用
var x1={
// 属性
name:'kai',
age:22,
sex:'男',
height:1.80,
// 行为
doIt:function () {
console.log('123');
}
};
① 访问对象的属性
console.log(x1.name);
console.log(x1['name']);
② 遍历对象的属性
for(var key in x1){
console.log(key + ':' + x1[key]);
}
③ 删除对象的属性 : 使用delete关键字
for(var key in x1){
console.log(key + ':' + x1[key]);
}
delete x1.age;
delete x1.doIt;
for(var key in x1){
console.log(key + ':' + x1[key]);
}
④ 增加、修改对象的属性：直接进行赋值操作
x1.frient=['xiao','hui'];
x1.age = 24;
for(var key in x1){
console.log(key + ':' + x1[key]);
}
基本类型和引用类型在堆栈中的表示
① 基本数据类型
基本数据类型又叫做值类型，在存储时，变量中存储的是值本身，因此叫做值类型
String Number Boolean Null Undefined
② 引用数据类型
复杂数据类型，在存储时，变量中存储的仅仅是地址（引用），因此叫做引用数据类型
Object
多个变量指向一个复杂数据类型，只要一个变量发生变化，所有的都会变化。
③ 区别
JS中的变量都是保存到栈内存中的，基本数据类型的值直接在栈内存中存储，值与值之间是独立存在的，修改一个变量不会影响到其他变量
对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟一个新的内存空间，而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性时，另一个也会受到影响
④ 堆和栈
栈(操作系统)：由操作系统自动分配释放，存放函数的参数值，局部变量的值等
堆(操作系统)：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收
注意：JS中没有堆和栈的概念，我们用堆和栈来讲解，目的是方便理解，存放方式是一样的
⑤ 画图分析
Ⅰ. 基本类型在内存中的存储
Ⅱ. 复杂类型在内存中的存储
Ⅲ. 基本类型作为函数的参数 也是存放在堆区
Ⅳ. 复杂类型作为函数的参数
内置对象
概念
JavaScript提供多个内置对象：String、Math、Array、Date…
Array对象
① 检测一个对象是否是数组
Ⅰ. instanceof
var arr = ['张三','李四'];
console.log(arr instanceof Array);
console.log(arr instanceof Object);
弊端：Array的原型链父代也会返回true
Ⅱ. Array.isArray()
var arr = ['张三','李四'];
console.log(Array.isArray(arr));
②toString() / valueOf()
toString() 把数组转换成字符串，逗号分隔每一项
valueOf() 返回数组对象本身
③ sort()
Ⅰ. 使用
sort()方法用于对数组的元素进行排序，默认是按照字符编码的顺序进行排序
如果想按照其它标准进行排序，就需要提供比较函数，该函数需要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字，比较函数应该具有两个参数a和b，其返回值如下：
若a小于b，在排序后的数组中a应该出现在b之前，则返回一个小于0的值
若a等于b，则返回0
若a大于b，则返回一个大于0的值
var arr =[10,1,5,100,50];
arr.sort(function (a, b) {
return a-b; //升序
// return b-a; //降序
})
Ⅱ. sort()的内部实现
/**
* sort内部的实现
* @param {Array}array
* @param {Function}fnCompare
*/
function sort(array, fnCompare) {
//控制循环次数
for (var i = 0; i < array.length - 1; i++) {
// 标记 是否完成排序
var sortFlag = true;
//控制比较次数
for (var j = 0; j < array.length-1-i ; j++) {
if (fnCompare(array[j], array[j+1])>0){
sortFlag = false;
// 交换位置
var temp = array[j];
array[j] = array[j+1];
array[j+1] = temp;
}
}
// 判断
if (sortFlag){
break;
}
}
}
var arr = [10, 20, 5, 100, 50];
function sortNumber(a, b) {
return a-b;
}
sort(arr, sortNumber);
console.log(arr);
④ map()
Ⅰ. 使用
映射(一一对应)，[].map() 基本用法和forEach()方法类似。array.map(callback,[thisObject]);
但是callback需要有return值(如果没有，就会返回undefined)
首先遍历数组，然后在回调函数中按照自己的规则返回新的数组。
Ⅱ. 操作
var arr = [10, 20, 5, 1000, 50];
var newArr = arr.map(function (value, index, array) {
return value*2;
});
console.log(newArr);
运行结果：
⑤ filter()
Ⅰ. 使用：过滤筛选
callback在这里担当的是过滤器的角色，当元素符合条件，过滤器就会返回true，儿filter则会返回所有符合过滤条件的元素
Ⅱ. 操作
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
var newArr = arr.filter(function (value, index, array) {
return value % 2 === 0 && value > 5;
});
console.log(newArr);
运行结果：
⑤ every(且)
Ⅰ. 使用
every(callback[,thisObject])当数组中每一个元素在callback上都返回true时就返回true
Ⅱ. 操作
var arr = [11, 2, 3, 4, 15];
var result = arr.every(function (value, index, array) {
return value>1;
});
var result1 = arr.every(function (value, index, array) {
return value>4;
});
console.log(result, result1);
运行结果：
⑤ some(或)
Ⅰ. 使用
some(callback[,thisObject])当数组中有元素在callback上都返回true时就返回true
Ⅱ. 操作
var arr = [11, 2, 3, 4 ,15];
var result = arr.some(function (value, index, array) {
return value < 10;
});
var result1 = arr.some(function (value, index, array) {
return value < 0;
});
console.log(result);
console.log(result1);
运行结果：
⑥ 常用方法
| 方法 | 描述 |
|---|---|
| concat() | 连接两个或更多的数组，并返回结果。 |
| join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。默认用逗号。 |
| pop() | 删除并返回数组的最后一个元素。 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| shift() | 删除并返回数组的第一个元素。 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 |
| reverse() | 颠倒数组中元素的顺序。返回新的数组，不会对原有数组产生影响。 |
| slice() | 从某个已有的数组返回选定的元素。 |
| sort() | 对数组的元素进行排序。 |
| splice() | 删除元素，并向数组添加新元素。 |
| toSource() | 返回该对象的源代码。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| toLocaleString() | 把数组转换为本地数组，并返回结果。 |
| valueOf() | 返回数组对象的原始值。 |
| indexof() | 从指定位置开始找第一个为指定值的下标 |
| lastIndexOf() | 反向执行indexOf() |
| forEach() | 遍历数组 |
Math对象
- 概念：Math对象不是构造函数，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供。
- 常用方法
① Math.PI //圆周率
② Math.random() //生成随机数
③ Math.floor() / Math.ceil() //向下取整/向上取整Math.random() * (y-x) +x //生成x-y的随机数
④ Math.rount() //取整，四舍五入
⑤ Math.abs() //绝对值
⑥ Math.max() / Math.min() //求最大最小值
⑦ Math.sin() / Math.cos() //正弦/余弦
⑧ Math.power() / Math.sqrt() //求指数次幂/求平方根 - 静态成员和实例成员
① 静态成员：直接使用对象来调用
② 实例成员：构造函数中的成员就是实例成员。实例也称为对象。
String对象
-
概念：字符串所有的方法，都不会修改字符串本身(字符串本身是不可变得)，操作完成后会返回一个新的字符串
性能问题：拼接大量字符串的时候，会有性能问题
选择服务器渲染，模板引擎 -
常用方法
① 获取字符串中字符的个数：str.length
② 字符方法
Ⅰ. charAt() 获取指定位置处字符
Ⅱ. charCodeAt() 获取指定位置处字符的ASCII码
Ⅲ. str[]下标获取 HTML5，IE8+支持和charAt()等效
③ 字符串操作方法
Ⅰ. concat() 拼接字符串，等效于+，+更常用
Ⅱ.slice() 从start位置开始，截取到end位置，end取不到
Ⅲ. substring() 从start位置开始，截取到end位置，end取不到
Ⅳ. substr() 从start位置开始，截取length个字符截取网页、图片后缀 var str = 'www.baidu.com' var newStr = str.substr(str.lastindexOf('.'))④ 位置方法
Ⅰ. indexOf() 返回指定内容在原字符串中的位置
Ⅱ. lastIndexOf() 从后往前找，只找第一个匹配的
⑤ 去除空白：trim() 只能去除字符串前后的空白
⑥ 大小写转换方法
Ⅰ. 转小写 toLowerCase()
Ⅱ. 转大写 toUpperCase()
⑦ 其他
Ⅰ. search()
Ⅱ. split() -
URL转化成对象
var url = 'http://www.KaiSarH.com/user?name=xl&psd=lover&sex=女&age=22'; function getUrlParams(url) { // 起点 var index = url.indexOf('?')+1; // 截取 var params = url.substr(index); // 分隔 var paramsArr = params.split('&'); var obj = {}; paramsArr.forEach(function (value, index1, array) { var tempArr = value.split('='); var key = tempArr[0]; obj[key] = tempArr[1]; }); return obj; } var obj = getUrlParams(url); console.log(obj); console.log(obj.name);运行结果：
381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
