JavaScript：数组、函数和对象 |
您所在的位置：网站首页 › js怎么定义对象数组 › JavaScript：数组、函数和对象 |
JavaScript：数组、函数和对象
|
数组（Array）
基本定义
为什么要用数组 之前学习的数据类型，只能存储一个值。（字符串为一个值） 我们想存储多个值的时候可以使用数组。（字符串不方便） 比如：存储班级中所有学生的姓。数组变量可以存放多个数据，好比一个军队，军队里面有很多军人。
数组是什么
数组是一种引用数据类型，属于对象 把很多数据装入一个盒子中，用的时候再取出来 它和普通对象功能类似，也是用来存储一些值得 不同的是普通对象是使用字符串作为属性名的，而数组是使用数字来作为索引操作元素。数组的存储性能比普通对象要好，在开发中我们经常使用数组存储一些数据。
创建数组的方式
使用Array构造数组 ① 创建一个空数组var arr1 = new Array();
② 创建一个长度为30的数组var arr2 = new Array(30);
③ 创建一个包含两个字符串的数组var arr3 = new Array('凯','kai');
使用数组字面量 ① 创建一个空数组var arr1 = [];
② 创建一个长度为30的数组var arr2 = [];
arr2.length=20
③ 创建一个包含两个字符串的数组var arr3 = ['凯','kai'];
原理
 instanceof和typeof的区别 typeof是直接获得类型原型链的最顶层， instanceof比较的时候，只要是原型链上的上层，不论哪一层，返回都是trueArray.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 获得全部实参的个数 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之前没有块级作用域的概念，只有函数作用域 作用域链 ① 概念 只有函数可以制造作用域结果，那么只要是代码，就至少有一个作用域 即全局作用域 凡是代码中有函数，那么这个函数就构成另一个作用域 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域 预解析 ① 概念 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); }运行结果： 运行结果： 函数的参数如果特别多的话，可以使用对象简化 什么是对象① 生活中，万物皆对象，对象是一个具体的事物，一个具体的事物就有有行为和特征。比如：一部手机，一台电脑。 ②类和对象 Ⅰ. 类：描述一类事物，相当于“设计图纸”。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指向全局变量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']);
① 基本数据类型 基本数据类型又叫做值类型，在存储时，变量中存储的是值本身，因此叫做值类型 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 ②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 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);运行结果： 运行结果： 运行结果： 运行结果： |
数组存储的数据可以是任何类型(数字、字符、布尔值等)
使用arguments.length可以获取传入实参的个数 使用arguments.callee指向函数本身 使用arguments获得函数的实参
② 其它语言中变量i只能在for循环内部访问（局部变量） ③ 在ES5中，只有函数会产生作用域
也就是说，没有用var定义的变量是全局变量。
自定义对象构造函数解决了量产、创建不同对象的问题
② 遍历对象的属性
③ 删除对象的属性 : 使用delete关键字
④ 增加、修改对象的属性：直接进行赋值操作
Ⅱ. 复杂类型在内存中的存储 
Ⅲ. 基本类型作为函数的参数 也是存放在堆区 
Ⅳ. 复杂类型作为函数的参数 
Ⅱ. Array.isArray()
⑤ filter() Ⅰ. 使用：过滤筛选 callback在这里担当的是过滤器的角色，当元素符合条件，过滤器就会返回true，儿filter则会返回所有符合过滤条件的元素 Ⅱ. 操作
⑤ every(且) Ⅰ. 使用 every(callback[,thisObject])当数组中每一个元素在callback上都返回true时就返回true Ⅱ. 操作
⑤ some(或) Ⅰ. 使用 some(callback[,thisObject])当数组中有元素在callback上都返回true时就返回true Ⅱ. 操作
【本文地址】
今日新闻 |
推荐新闻 |