对象介绍对象的取值与赋值 复杂对象 对象遍历 this关键字 声明方式"/>
arguments关键字 回调函数 自调用函数 对象介绍对象的取值与赋值 复杂对象 对象遍历 this关键字 声明方式
01-高阶函数
1.1-arguments关键字
- 1.arguments关键字：获取函数的所有实参
- 2.为什么要有arguemnts关键字
- js是一门弱语言：声明函数的时候假如只有一个形参，实际上在调用的时候无论我们传入多少实参程序都不会报错
- 为了防止这种情况:函数有一个arguments关键字来获取所有的实参
- 3.arguments特点
- 1.只能在函数体中使用，在函数外使用会报错
- 2.是一个特殊的数组（伪数组）
- 有数组的三要素，但是没有数组其他的方法
- 3.arguemngs数组中的元素与形参一一对应
- 4.arguements好处:可以让函数变得更加灵活
- 可以让函数根据实参的不同而实现不同的功能
<script>/**arguments关键字作用：获取函数的所有实参* 本质：当前函数的内置对象，每一个函数都有一个arguments对象，作用是存储调用者传递过来的所有实参* 特点：1.只能在函数体中使用，函数外部使用会报错* 2.是一个特殊的数组（伪数组）* 3.arguments伪数组的元素与形参一一对应** 说明：1.可以用函数变得更加灵活* 2.arguments是一个伪数组* * 伪数组：只有数组的下标、元素、长度，没有数组其他方法*//**一：argument用法演示*///1.这行代码会报错，因为函数外部无法使用arguments// console.log ( arguments );//2.定义一个无参的函数，作用是打印该函数的所有参数function fn ( num1 ) {//(1)arguemnt保存的是所有的实参的值// console.log ( num1 );// console.log ( arguments );//arguments只能在函数内部使用//(2)arguemnt与形参是一一对应的//修改了形参，arguemnt也会修改num1 = 100;console.log ( arguments );//修改了形参，arguments也会修改//反之，修改了argeumnts，形参也会变化}fn(10,20);//实参与形参一一对应/** 二：arguments实际用途展示：求不确定数量的参数的和 */function add() {//定义变量保留数据let sum = 0;console.log(arguments);//有参数：遍历数组统计结果for (let i = 0; i < arguments.length; i++) {// 防止字符串和其他类型乱入，需要做安全判定let value = arguments[i];if (isNaN(value)) {return false;}//说明value肯定是数值了，但是还要保证不是字符串（影响+号运算）sum += Number(value);}return sum;}console.log(add());console.log(add(100));console.log(add(10,20));</script>
1.2-回调函数
- 1.什么是回调函数：如果一个函数的参数也是一个函数，那么这个参数函数就叫做回调函数
- 2.为什么要有回调函数？
- 当一个函数调用执行完毕之后，我想执行另一段代码块，也就是调用另一个函数
- 但是有时候可能本函数执行完毕后，根据不同的情况需要调用的函数也不同，那么我们可以使用形参来接收这个函数，然后再调用
- 此时：这个形参函数就称之为回调函数
<script>//回调函数：如果一个函数的参数也是一个函数，那么这个参数函数就叫做回调函数//回调函数在什么地方会执行呢？ 函数名() 的时候执行//回调函数难点： 本质是一个参数//谁来传：调用者传参 （函数名）//谁来收,调用：函数调用 （函数执行完函数体之后，调用保存在这个参数中的一段代码）function a ( ) {console.log ( "哈哈" );}function b ( ) {console.log ( "呵呵" );}//c函数有一个功能，可以接收调用者传递过来的一段代码，并且在执行完自身函数体之后，会帮调用者执行这一段代码function c ( fn ) {console.log ( "嘿嘿" );//fn里面是调用者传递过来的一段代码，怎么让这段代码执行呢？fn();};//调用函数c，传的是变量a中存储的一段代码c(a);c(b);// 注意：回调函数是将函数的代码传递给形参，让函数内部调用// 注意：在传递实参给形参的时候，如果是要回调函数，那么只要传入函数名字（此时不掉用，函数内部调用）：c(a)，fn = a// 如果在传入实参的时候，给函数名增加了括号：c(a())，此时表示将a函数先执行，然后将a()函数的返回值，传递给形参fn = a()</script>
- 实际应用
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>/*** 求和，可以实现1到N次方的数组元素的求和* @param {array} 要求和的数组* @param {function} 要调用的外部方法（求N次方）* @return sum，数组所有元素的N次方的和*/function getSum(arr, fn) {//定义变量保存结果let sum = 0;//遍历数组for (let i = 0; i < arr.length; i++) {//拿到的元素需要使用fn加工sum += fn(arr[i]);}//返回结果return sum;}/*** 求平方* @param {number} num，要求平方的数据* @return res，num的平方*/function fn1(num) {return num * num;}/*** 求立方* @param {number} num，要求平方的数据* @return res，num的平方*/function fn2(num) {return num * num * num;}//定义数组let arr = [1, 2, 3];// 求数组的所有元素的平方和console.log(getSum(arr, fn1));//求数组的所有元素的立方和console.log(getSum(arr, fn2));//匿名函数回调应用：求数组的所有元素的四次方和console.log(getSum(arr, function (num) { return Math.pow(num, 4) }));//等价于/*function getSum(arr, fn) {//定义变量保存结果let sum = 0;fn = function (num) { return Math.pow(num, 4) };//遍历数组for (let i = 0; i < arr.length; i++) {//拿到的元素需要使用fn加工sum += fn(arr[i]);}//返回结果return sum;}*///匿名回调函数的优势：用后即焚，不占用内存</script>
</body></html>
1.3-自调用函数
- 1.什么是自调用函数：函数自己调用自己
- 最常见的：匿名函数自调用
- 2.自调用函数作用
- 开辟作用域，js中只有函数才可以开辟作用域：防止全局污染
- 3.匿名函数自调用语法:( function(){} ) ()
- 将整个函数使用小括号包裹，然后在后面再加上小括号调用
<script>/*自调用函数：函数自己调用自己* 最常见的：匿名函数自调用*///作用：开辟作用域，js中只有函数才可以开辟作用域//匿名函数相当于字面量函数,由于没有函数名，所以只能在声明的同时调用//语法： ( function(){} ) () 将整个函数使用小括号包裹，然后在后面再加上小括号调用(function ( ) {console.log ( "我是匿名函数" );})();//补充：其实有名字的函数也可以自己调用自己，只是比较少见(function test( ) {console.log ( "我是有名字的函数，我也可以自调用" );})();//自调用作用：暂时因为知识点不足以支撑案例使用，等后面讲到WebAPI的时候可以用到</script>
02-对象(语法学习)
1.1-对象介绍
对象作用：一个变量存储多个数据
对象与数组异同点
相同点：一个变量存储多个数据
不同点：
数组有序存储：元素与下标一一对应
对象无序存储：属性名与属性值一一对应（键值对）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>/* 1.学习目标a. 了解对象的作用 ： 一个变量存储多个数据b. 了解对象的语法，内存工作原理let 对象名 = {属性名:属性值,属性名:属性值}2.学习路线a. 抛出需求 ： 一个变量存储多个数据b. 数组？ 对象？ 区别？数组和对象的异同点相同点：都是复杂数据类型，一个变量存储多个数据不同点：存储方式不一样数组 ： 连续存储，元素与下标一一对应对象： 不连续存储，属性名和属性值一一对应*/ //需求 ： 存储一个人的信息（name ：绿裙, age ：38 , sex ： ‘女’）//1.使用三个变量存储//弊端 : (1)代码冗余 （2）不好维护let name = '阿三';let age = 38;let sex = '女';//2.使用数组存储 ： 一个变量存储多个数据//弊端 ： 代码阅读性不高let arr = ['阿三',38,'女'];console.log(arr);//3.使用对象 ： 一个变量存储多个数据，阅读性更高let object = {name:'阿三',age:38,sex:'女'};//let object = {'name':'阿三','age':38,'sex':'女'}; //这个也可以console.log(object);//点语法取值 ： console.log(object.name);/* 数组和对象的异同点相同点：都是复杂数据类型，一个变量存储多个数据不同点：存储方式不一样数组 ： 连续存储，元素与下标一一对应对象： 不连续存储，属性名和属性值一一对应*/</script>
</body>
</html>
1.2-对象取值与赋值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>/* 1.对象作用 ： 一个变量存储多个数据a:数组和对象的异同点相同点：都是复杂数据类型，一个变量存储多个数据不同点：存储方式不一样数组 ： 连续存储，元素与下标一一对应对象： 不连续存储，属性名和属性值一一对应2.对象语法 a.声明： let 对象名 = {属性名:属性值}b.取值： 对象名.属性名属性存在，则获取属性值属性不存在，则获取undefinedc.赋值： 对象名.属性名 = 值属性存在，则修改属性值属性不存在，则动态添加属性*/ //1.声明语法 ： let 对象名 = { 属性名:属性值，属性名:属性值 };let kid = {name:'阿三',age:38,sex:'女'};//2.取值语法 : 点语法 ： 对象名.属性名//2.1 属性名存在 ，则是获取属性值console.log(kid.sex);//女//2.2 属性名不存在,则获取undefinedconsole.log(kid.bgf);//undefined//3.赋值语法 : 对象名.属性名 = 值//3.1 属性名存在， 则是修改属性值kid.name = '阿三';console.log(kid);//3.2 属性名不存在，kid.hobby = '足疗爱好者';console.log(kid);//4.对象取值还有一种方式：字符串语法console.log(kid['hobby']);</script>
</body>
</html>
1.3-对象属性补充
- 对象的属性名字也可以为数字（或数字字符串），但是一般不建议这么使用（数字使用数组更效果更好）
- 数字属性的取值和赋值访问需要使用字符串语法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>//1.数字声明对象属性let obj = {0:1,2:2}; //不会自动从0开始，而且不需要连续//2.数字属性的访问：字符串语法访问console.log(obj[0]); //1//console.log(obj.0); //语法错误//3.动态添加数字属性obj[5] = 5; console.log(obj); //{0:1,2:2,5:5}</script>
</body>
</html>
1.4-复杂对象
- 一个真实的对象往往都是带着很多数据和结构的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>/* 1.对象作用 ： 一个变量存储多个数据a:数组和对象的异同点相同点：都是复杂数据类型，一个变量存储多个数据不同点：存储方式不一样数组 ： 连续存储，元素与下标一一对应对象： 不连续存储，属性名和属性值一一对应2.对象语法 a.声明： let 对象名 = {属性名:属性值}b.取值： 对象名.属性名属性存在，则获取属性值属性不存在，则获取undefinedc.赋值： 对象名.属性名 = 值属性存在，则修改属性值属性不存在，则动态添加属性3.对象初始化let 对象名 = { 属性名:属性值 }*/ /////* 1.声明空对象 ： let 对象名= {}; 2.对象的初始化 : 声明的时候赋值 语法： let 对象名 = { 属性名:属性值 }3. 函数有两种称呼函数 ：方法 ：有归属感。 如果对象的属性值是函数，习惯上称之为对象的方法*/let kid = {name:'阿三',age:38,sex:true,//数组keyWords : ['代码','黑马程序员','广州大前端'],//方法：使用function关键字 等价于 play = function(){}play: function(){console.log('大吉大利今晚吃鸡');},//对象wife:{name:'丹丹',age:18,play:function(){console.log('看韩剧');}}};//复杂对象的深入访问：连贯使用.操作，层层递进console.log(kid);console.log(kid.sex); //trueconsole.log(kid.keyWords); // ['代码','黑马程序员','广州大前端']console.log(kid.keyWords[0]); //'代码'kid.play(); //调用方法console.log(kid.wife); //{name: "丹丹", age: 18, play: ƒ}console.log(kid.wife.name); //"丹丹",kid.wife.play//字符串语法访问多层对象注意用法console.log(kid['wife']['name']); //丹丹</script>
</body>
</html>
1.5-对象遍历
- 挨个读取对象中的每个属性：属性名和属性值
- 特定语法
for(let 属性名变量 in 对象变量){//属性名就是对象中的每一个属性//属性值通过：对象[属性名]访问：属性名是一个变量，不能使用.
}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>let person = {name:'班长',age: 32,sex: '男'};/* 1.对象的遍历 ： 获取对象的每一个属性值2.复习数组的遍历语法固定的for循环： for(let i = 0;i<数组.length;i++){ 数组名[i] }3.对象无法使用数组的遍历语法，对象的遍历有专用的for循环结构for-in循环 ： for(let key in 对象名){ 对象名[key] }*** 注意点： 只能使用字符串语法取属性值 ****/for(let key in person){console.log(key);//属性名字符串//获取属性值// console.log(person.key);// console.log(person['key']);console.log(person[key]); };//遍历对象一般是遍历复杂对象：即对象内部套对象，每个内部对象都是一组数据，简单一维对象都是直接访问，不进行遍历</script>
</body></html>
1.6-方法中的this关键字
- this是对象内部的变量：代表调用者对象
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>/* this : 谁调用我，我就指向谁*/let banzhang = {name: '阿三',age: 32,sex: '男',sayHi:function(){/* 弊端 ： 对象名变化，代码也要修改 */// console.log('猴赛雷，我的名字叫' + banzhang.name + '我的年龄是' + banzhang.age );console.log('猴赛雷，我的名字叫' + this.name + '我的年龄是' + this.age ); }}; banzhang.sayHi();banzhang.name = '广州大前端';banzhang.sayHi();//普通函数的归属为window对象，所以普通函数内部的this代表window对象的调用者function fn(){console.log(this); //Window}fn();</script>
</body></html>
1.7-对象的另一种声明方式
- 对象可以使用Object对象进行实例化得到
<script>//1.（最常用）简洁方式： let 对象名 = { 属性名：属性值 }let p1 = {name:'张三'};//2.构造函数：//构造函数：如果调用一个函数使用了new关键字，这个函数成为构造函数let p2 = new Object( {name : '张三'} );/*这两种方式没有任何区别，只是语法不同而已*/console.log ( p1 );console.log ( p2 );
</script>
03-对象练习
1.1-对象求和
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>//有一个数组，存储五件商品信息。 求出这五件商品的总价格let arr = [{name:'iPhone',price:3888},{name:'switch',price:1688},{name:'iPad',price:2460},{name:'mac',price:18880},{name:'ipod',price:188},];/* 箩筐思想求和 */let sum = 0;for(let i = 0;i<arr.length;i++){sum += arr[i].price;};console.log(sum);</script>
</body>
</html>
1.2-对象经典面试题
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>//有一个字符串数组,找出出现次数最多的字符及对应的次数let str = ['a', 'b', 'a', 's', 'f', 'g', 'g', 'g', 'h', 'j', 'j', 'k', 'k', 'g', 'f', 'd', 'd', 's', 's', 's', 's', 's', '3', '4', '4', '4', '3', '4', '3'];/*思路：利用对象两个特点属性可以动态添加=属性与属性值之间是一个键值对的关系1.声明一个空对象，遍历字符串2.将字符串的字符作为对象的属性，出现的次数作为对象的属性值*/let objc = {};for (let i = 0; i < str.length; i++) {let s = str[i];//先判断对象是否有该属性if (objc[s] == undefined) {//使用字符串语法对对象取值，如果取出来是undefined，表示对象没有这个属性//既然没有表示这个字符是第一次出现，那么就将这个字符作为对象的属性，属性的值为1 （第一次出现）objc[s] = 1;//动态赋值} else {//如果对象有这个属性，则让这个属性的值自身+1 （每出现一次就加1）objc[s]++;}}console.log(objc);//遍历这个对象，就知道哪个字符出现的最多了</script>
</body></html>
更多推荐
arguments关键字 回调函数 自调用函数 对象介绍对象的取值与赋值 复杂对象 对象遍历 this关键字 声明方式
发布评论