箭头函数

// 箭头函数
const func3 = () => {
console.log("func3");
};
func3();

箭头函数省略写法

小括号省略

// 箭头函数传参
// 如果只传一个参数，小括号可以省略。const func2 a => {console.log(a);};
// 如果不传参数 或者传多个参数，小括号不能省略

const func2 = (a, b) => {
console.log(a, b);
};

//小括号可以省略
const func3 = a => {
console.log(a);
};
//调用
func2("2", "3");
func3("456");

大括号省略

const func1 = () => {
return 123;
};
console.log(func1());

// 简洁返回值的写法,如果函数代码只有一行,那么大括号可以省略,同时,这一行代码运行结果也会被直接返回
// 省略大括号,建议代码不要换行
const func2 = (a) => a + 1;
const num = func2(2);
console.log(num);

const func3 = (a) => console.log(a);
func3(123);

// const func4 = a => a + 1;
// const num2 = func2(5);
// console.log(num2);    //结果6

返回对象

箭头函数返回值为对象时,如果要省略大括号,那么对象得用小括号包起来

const func1 = () => 123;
const func2 = () => true;
const func3 = () => "哈哈哈";
const func4 = () => [1, 2, 3, 4, 5];
// 调用并输出
console.log(func1());
console.log(func2());
console.log(func3());
console.log(func4());

// 箭头函数如果在省略大括号时,返回值是对象就得用()小括号包起来
const func5 = (a) => ({ name: "哈哈哈", age: 18 });
console.log(func5());

默认值

// (msg="你好")  你好就是mag的默认值
// 如果调用函数时,没有传递参数,就使用默认值
// 如果传递了参数,就会用传递的参数,而不会使用默认值

const func1 = (msg = "你好") => {
console.log(msg);
};
func1();
const func2 = (msg) => {
console.log(msg);
};
func2(); //undefined   没有默认值也没有传参,就会返回undefined

// 定义一个函数,接收一个数组,返回数组长度
const getLength = (arr = []) => console.log(arr.length);
const list = ["a"];
getLength(list); //1  这里传入一个值
getLength(); //0

解构

// 解构只是一种更简洁,方便来获取数据的写法
const arr = [1, 2, 3, 4];
// 获取前两位,老方法
// const str3 = arr[0];
// const str4 = arr[1];
// console.log(str3, str4);

const [str1, str2] = arr;
console.log(str1, str2); //1 2

// 交换变量,解构
let a = 100;
let b = 200;
[b, a] = [a, b];
console.log(a, b); //200 100

// 对象解构
const obj = { name: "哈哈哈", age: 18 };
const { name, age } = obj;
console.log(name, age); //哈哈哈 18

对象简写

const name = "哈哈";
const age = 18;
// const obj = {
//   name: "哈哈",
//   age: 18,
// };

// 如果变量名跟属性名称一致的话,可以简写成一下形式
// const obj = {
//   name, //name:'name'
//   age,
// };
// console.log(obj);

// 方法简写可以将:function省略掉
// const obj = {
//   name,
//   say: function () {
//     console.log("哈哈哈");
//   },
// };
const obj = {
name,
say() {
console.log("这是一个方法,函数");
},
};
obj.say();
// console.log(obj.say);  //ƒ say() {console.log("这是一个方法,函数");}

剩余运算符...

// 剩余运算符 是一种比较方便的获取数据的方式
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const [letter1, letter2] = arr;
console.log(letter1, letter2);
// 希望获取到剩余所有元素 放在新数组中 newArr是新数组名字(自定义)
const [let1, let2, let3, ...newArr] = arr;
console.log(newArr);

const list = ["a", "b", "c"];
const [str1, str2, str3, ...newList] = list;
console.log(newList); //得到空数组[]

const obj1 = { a: 1, b: 2, c: 3, d: 4 };
const { a } = obj1;
console.log(a); //1
const obj2 = { b: 2, c: 3, d: 4 };
const { b, c, d, ...obj3 } = obj2;
console.log(obj3); //空对象

calc(1); //[1]
calc(1, 2); //[1,2]
calc(1, 2, 3); //[1,2,3]

function calc(...params) {
// params可以获取所有传递给calc的参数 封装到一个数组中
console.log(params);
// 对数组做什么业务都可以 计算总和 计算最大值 最小值
}

值类型和引用类型

// js数据类型 分成了两种 1 值类型  2 引用类型
// 1 值类型 简单数据类型  字符串、数字、布尔类型、
// 2 引用类型   对象 、 数组

// 两者区别 体现  =
// 值类型 使用 = 复制
// 引用类型 使用 =  关联在一起

// let a =1 ;
// let b = a;
// // b a 的一份复制 两个值 一样 但是两个数据是完全独立！
// b=10;
// // a 不会发生变化
// console.log(a);

const obj = { username: "悟空" };
// 也使用 =
const newObj = obj; // newObj 看起来和 obj 数据一样   两个数据 本身一起！  修改了其中的任意一个，另外一个也会收到影响
newObj.username = "八戒";
console.log(obj); //{username: '八戒'}

复制引用类型-剩余运算符

// 复制一份对象,修改新的数据之后,旧的数据不会受到影响
const obj = { name: "哈哈", height: 170 };

const newObj = obj;
// const newObj = { ...obj };  //复制一份
// console.log(obj);//{name: '哈哈', height: 170}
// console.log(newObj);//{name: '哈哈', height: 170}

newObj.name = "悟空";
// console.log(newObj);
console.log(obj); //{name: '悟空', height: 170}  旧的数据被更改了

const list = ["a", "b"];
const newList = [...list]; //将旧的复制一份并放入新数组newList
newList.push("c");
console.log(list); //["a", "b"]
console.log(newList); //["a", "b","c"]

数组

map方法

// 处理原数组,返回新数组
// map 返回 处理后的数组
// map 数组的一个方法 也会遍历数组 接收一个函数
// value 值  index 索引
const arr = ["a", "b", "c"];
const newArr = arr.map(function (value, index) {
return `<li>${index}-${value}</li>`;
});
console.log(newArr); //['<li>0-a</li>', '<li>1-b</li>', '<li>2-c</li>']

map方法跟箭头函数结合

const arr = ["a", "b", "c"];
const newArr = arr.map((value) => `<li>${value}</li>`);
console.log(newArr); //['<li>a</li>', '<li>b</li>', '<li>c</li>']

filter方法

// filter 过滤 返回 过滤后的数组
const arr = [1, 6, 3, 5, 8, 45, 21, 12];
// 返回大于40的数据,重新组成数组
const newArr = arr.filter(function (value) {
if (value >= 40) {
return true;
} else {
return false;
}
});

console.log(newArr);

// 结合箭头函数
const newArr2 = arr.filter((value) => value > 40);
console.log(newArr2);

const newArr3 = arr.filter((value) => {
return value >= 20;
});
console.log(newArr3);

every方法

// every 检测数值元素的每个元素是否都符合条件,全部都符合就会返回true,否则返回false
const arr = [1, 5, 2, 12, 15, 42, 32, 30, 22];
const result = arr.every(function (value) {
if (value > 20) {
return true;
} else {
return false;
}
});
console.log(result); //false

// 简写
const result2 = arr.every((v) => v < 50); //true 全部数值小于50
console.log(result2); //true

// every 对于空数组,也会直接返回true

some方法

// some检测数组中是否有元素符合指定条件,只要有一个符合条件都返回true
// 检测到符合就返回了,后续不会再检测下去了
const arr = ["聪明", "聪明", "聪明", "聪明", "憨憨", "聪明", "聪明"];
const result = arr.some((value) => value === "憨憨");
if (result) {
console.log("快乐");
} else {
console.log("nice");
}

注意点:some跟every的区别

every是全部符合才返回true

some是只要有一个符合就返回true