一, 箭头函数
介绍
更简洁的一个封装函数的方法
1. 与普通函数的区别
<script>
// 1. 普通函数
function fn1(){
console.log('fn1');
}
// 2. 普通函数
const fn2 = function(){
console.log('fn2');
}
fn1() // 函数的调用
fn2() // 函数的调用
// 箭头函数 => 箭头中间不能有空格
const fn3 = () => {
console.log('fn3');
}
fn3() // 函数的调用
</script>
2. 箭头函数的传参
- 如果 只传递一个参数的话 小括号 可以省略
const fn3 = a => {
console.log(a);
}
- 如果 不传递参数 或者 传递参数 大于 1个的话 小括号不能省略
const fn2 = (a) => {
console.log(a);
}
const fn4 = (a,b) => {
console.log(a,b);
}
fn2('2')
fn4('1','2')
3. 箭头函数的返回值
简洁的返回值的写法 如果你的函数只有一行代码 那么 大括号可以省略 同时 这一行的代码运行结果 也会被直接返回
如果你想要省略 大括号 !! 代码不要换行
const fn2 = (a) => a + 1
const num2 = fn2(123)
console.log(num2);
- 如果不需要返回值, 就不 接收!!!!!
const fn3 = (a) => console.log(a);
// const num3 = fn3() 不要就不接收!!!!!!!!
- 如果要返回对象, 咱们解决方法用小括号包裹大括号,让浏览器识别
const fn5 = () => ({age: 18})
二， 函数的默认值
作用
如果你给我传递了参数， 那么就用你传递的参数
如果你没有给我传递参数， 那么我们可以使用默认值
代码
<script>
// 代码 const func1 = (msg = '大家好') => {}
// (msg="大家好") "大家好" 就是msg 默认值
// 如果 调用函数的时候 你没有传递 就使用默认值
// 如果 传递了参数 就会使用传递的参数 而不会使用 默认值
// const func1 = (msg = '大家好') => {
// console.log(msg);
// };
// func1("你好"); // 输出什么 undefined
// 定义一个函数 接收一个数组 告诉我们 这个数组的长度
const getLength = (arr = []) => console.log(arr.length);
const list=['a'];
getLength(list);
getLength();
</script>
三, 声明变量的关键字
介绍
var 工作不用, 到时候需要面试的时候提前刷面试题就好
const 声明的常量, 常量不能被修改, 否则报错
let 声明变量, 可以 被修改
代码
<script>
/*
1 let、const、var 都可以用来声明变量
2 var 过时的技术 有很多弊端-外面很多老程序员 以为 了解var 各种各样的弊端-是技术 错误！
1 如果你在网络上看文章 或者 视频 只要它使用 var 不用看 过时！！
2 快毕业了 去刷面试题 不晚！
3 let 和 const
4 const 声明了变量之后 这个变量 永远不能被修改！！！ const 声明的变量 叫做 常量！！
1 使用了const定义的变量 表示它永远不会被改变
项目名称 - 拼汐汐
2 规范程序员设计 我们的程序
哪些变量需要被修改 哪些不要被修改
10ml 100ml
3 什么时候使用const
1 多看老师的使用
2 担心 先使用 let
4 对于 有经验的程序员 都知道const和let区别程序员
能使用 const 就不使用let
5 let
定义变量 也可以修改变量
*/
const username = '悟空';
// 修改 常量
username = '八戒';
</script>
四, 解构
介绍
只是一种更方便的 来获取数据的写法而已
1. 数组解构
const arr = ['a', 'b', 'c'];
// 1.
// 获取 数组的 前两个数据 low
// const str1 = arr[0]
// const str2 = arr[1]
// 2.
// 数组解构 关注 顺序
const [str1, str2] = arr
console.log(str1, str2);
// str1 = 'a' str2 = 'b'
2. 解构思维 交换变量
// 交换变量 你这么写 low
let a = 100;
let b = 200;
// let c = a;
// a = b;
// b = c;
// console.log(a,b);
// 解构思维 交换变量
[200, 100] = [100, 200]
[b, a] = [a, b];
console.log(a, b)
// a 和 b 已经发生转化率
3. 对象解构
const obj = {name: '八戒', age: '三千八'}
const {name, age} = obj
console.log(name, age);
// 打印结果 name = '八戒' age = '三千八'
五, 对象简写
介绍与语法代码
对象的 简洁写法而已
<script>
// 对象的 简洁写法而已
const name = '八戒'
const age = '三万八'
const moy = '九毛九'
// const obj = {
// name: '八戒',
// age: '三万八',
// moy: '九毛九'
// }
// 如果 变量的名称 和 属性的名称 一致的话 ，可以写成下列方式
// const obj = {
// name, // => name: name
// age,// => age: age
// moy// => moy: moy
// }
// console.log(obj);
// const obj={
// username:"悟空",
// // say:function(){
// // console.log("这个是方法 函数");
// // }
// // 简写
// say(){
// console.log("这个是方法 函数");
// }
// }
// obj.say();
const name1 = '悟空';
// 变量和函数都简洁封装
const obj = {
name1,
say(){
console.log('扫哈油');
}
}
obj.say()
</script>
