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.取值： 对象名.属性名
属性存在，则获取属性值
属性不存在，则获取undefined
c.赋值： 对象名.属性名 = 值
属性存在，则修改属性值
属性不存在，则动态添加属性
*/
//1.声明语法 ： let 对象名 = { 属性名:属性值，属性名:属性值 };
let kid = {
name:'阿三',
age:38,
sex:'女'
};
//2.取值语法 : 点语法 ： 对象名.属性名
//2.1 属性名存在 ，则是获取属性值
console.log(kid.sex);//女
//2.2 属性名不存在,则获取undefined
console.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.取值： 对象名.属性名
属性存在，则获取属性值
属性不存在，则获取undefined
c.赋值： 对象名.属性名 = 值
属性存在，则修改属性值
属性不存在，则动态添加属性
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); //true
console.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>
扫一扫
4218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
