文章预览:
JavaScript高级教程
箭头函数
-
箭头函数是匿名函数,一般做为参数传递
//以前的函数格式 let test = function (a,b){ let sum = a + b return sum } // 简写成以下格式 let test = (参数) => { 函数体}
-
可以简记成把function变成了符号=>,然后位置放在了参数的右边
-
注意点:
-
如果函数体只有一句,那么可以省略{},同时默认会返回函数体的结果,不能写return
-
如果只有一个参数,那么可以省略()
-
如果没有参数,()也不能省略
-
-
剪头函数返回对象需要加return{},如果一定要忽略return的话,就在花括号外面加个括号({})
const func4 = (num) => { return { a: 123 }; }; console.log(func4());
const func7=(num)=>({ a:123});
-
各种形式的写法
-
没有形参、没有返回值、业务只有一行代码 大括号都可以省略
const func3 = () => console.log('执行业务1');
-
只有一个形参、没有返回值、业务只有一行代码
形参只有一个的时候,括号可以省略
const func4 = (num) => console.log(num + 1); const func4 = num => console.log(num + 1);
-
两个或者多个参数(括号不能省略)、没有返回值、业务只有一行代码
const func5 = (a,b) =>console.log(a + b)
-
没有形参,有返回值 业务两行代码
const func6 = () => { let a = 100 return a + 10 } console.log(func6()) //结果110
-
没有形参、有返回值,业务一行代码
const func7 = () => { return 100 +200 } console.log(func7()); //结果300
-
数组常见的方法
方法 | 描述 |
---|---|
every() | 检测数值元素的每个元素是否都符合条件。 |
filter() | 检测数值元素,并返回符合条件所有元素的数组。 |
find() | 返回符合传入测试(函数)条件的数组元素。 |
findIndex() | 返回符合传入测试(函数)条件的数组元素索引。 |
forEach() | 数组每个元素都执行一次回调函数。 |
includes() | 判断一个数组是否包含一个指定的值。 |
indexOf() | 搜索数组中的元素,并返回它所在的位置。 |
isArray() | 判断对象是否为数组。 |
join() | 把数组的所有元素放入一个字符串。 |
map() | 通过指定函数处理数组的每个元素,并返回处理后的数组。 |
reduce() | 将数组元素计算为一个值(从左到右)。 |
reverse() | 反转数组的元素顺序。 |
some() | 检测数组元素中是否有元素符合指定条件。 |
sort() | 对数组的元素进行排序。 |
forEach()
- 数组每个元素都执行一次回调函数
- for循环可以通过 break来打断、 forEach不能通过break打断
forEach(数组的值,数组的下标)
function forEach() {
const arr = ['a','b','c','d','e']
//分别打印
/* arr.forEach(function(value,index) {
console.log(`值是:${value} 下标是:${index}`)
})*/
//可以简写成以下
arr.forEach((value,index) =>
console.log(`值是:${
value} 下标是: ${
index}`)
)
}
map()
- map 根据原来的数组 来返回新的数组
- 也会循环数组 在循环的回调函数中可以返回新的数据 组装成新的数组
const list=[10,11,12];
const newList=list.map(value=>value+1);
console.log(newList);// [11,12,13]
const objectArr=[{
name:"悟空"},{
name:"八戒"}];
const newObjectArr=objectArr.map(value=>{
// 给对象增加属性
value.color="red";
return value
})
console.log(newObjectArr);// [{name:"悟空",color:"red"},{name:"八戒",color:"red"}]
every()
- 会返回 true或者false
- 如果数组中每一个元素都符合条件,every返回true
const arr = [1, 6, 3, 4];
// const result = arr.every((value) => {
// if (value < 5) {
// return true;
// } else {
// return false;
// }
// });
//可以简写以下格式
const result = arr.every((value) => value < 5)
console.log(result); //false
- every 如果是空数组,调用every 直接返回true
let arr=[];
const result=arr.every(value=>console.log(12));
console.log(result);// result = true
some()
- 数组中只要有一个元素符合条件,some返回true
const arr = [1, 3, 4, 6, 2];
// 这个数组里面有没有元素大于6的
const result = arr.some((value) => value > 6);
console.log(result); //false
filter()
- 过滤出满足条件的数据到新的数组
const arr = [1, 2, 3, 4, 5, 6, 7];
//筛选出奇数
const newArr = arr.filter((value) => value % 2 !== 0);
console.log(newArr); //[ 1, 3, 5, 7 ]
set()
- 在set对象中会过滤重复的数据
const arr = ['a','b',1,2,3]
//使用构造函数new一个set对象出来,同时传入数组数据
const set = new Set(arr)
// 给set添加数据的时候 使用add方法,在set对象中会过滤重复的
set.add(1)
set.add(2)
set.add(4)
// 把对象转换为数组
let newArr = [...set]
console.log(newArr)
面向对象
对象在内存中的示意图
创建对象的方式
字面量
- 简单粗暴
- 不适合创建多个同样类型的对象的场景
- 不方便维护
const obj ={
name:"悟空",
height:100