js高级第一天
箭头函数
概念
只是函数的简写方式
语法
const func = () => {}
const fn3 = () =>{
console.log('fn3')
}
传递参数
-
只有一个参数 小括号可以省略
const fn3 = a =>{ console.log(a) } -
参数个数为0 或者个数大于1 小括号不能省略
const fn4 = () =>{ console.log('4') } const fn5 = (a,b) =>{ console.log(a,b) }
返回值
-
如果代码只有一行 可以 省略大括号 同时 把这行代码的结果直接返回
const fn2 = () => 123 + 1 const num2 = fn2() console.log(num2) // 124 -
如果返回的是一个对象 要用小括号 包裹起来
const fn5 = () =>{userName : '八戒'} // undefined // 省略大括号的情况下 要返回一个对象 固定语法: 加个小括号 const fn6 = () =>({userName : '八戒'})
声明变量关键字
var
- var声明变量存在提升（提升当前作用域最顶端）
- var没有块级作用
- var允许重复声明
- var声明的变量可以修改
const
- 不存在变量提升的情况
- 存在块级作用域
- 在同一作用域内不能重复声明
- const是常量, 不能修改
let
- 不存在变量提升的情况
- 存在块级作用域
- 在同一作用域内不能重复声明
- let声明的变量可以修改
函数参数的默认值
-
作用
如果 调用函数的时候 没有传递参数 就使用默认值
如果 传递了参数 就使用传递的参数 不会使用默认值
const fn1 = (msg = '大家好') =>console.log(msg) fn1() // 大家好 fn1('大家不好') // 大家不好
-
代码
const fnuc = (msg = '默认值') => {}
解构
概念
是一种更加方便 获取数据的写法
数组解构
// 数组解构 关注 顺序
const arr = [1,2]
const [str1,str2] = arr
console.log(str1,str2) // 1 2
交换变量
let a = 100
let b = 200
[a,b] = [b,a]
console.log(a,b) // 200 100
对象解构
const obj = {userName : '悟空', skill : '72'}
const {userName,skill} = obj
console.log(userName) // 悟空
console.log(skill) // 72
对象简写
如果变量名称 和 属性名称 一致 可以简写
const userName = '悟空'
const obj = {
userName,
say(){
}
}
剩余运算符
是一种比较方便获取数据的方式
语法 : ...
在数组中的用法
const arr = ['a','b','c','d']
const[let1,let2, ...list] = arr
console.log(list) // ['c','d']
在对象中的用法
const obj = {a:1,b:2,c:3,d:4}
const {a,...obj2} = obj
console.log(obj2) //{b:2,c:3,d:4}
函数形参用法
cale(1,2,3)
function cale(...params){
console.log(params) // [1,2,3]
}
引用类型复制
const obj = {userName:'悟空',height : 100}
const newObj = {...obj}
newObj.userName = '八戒'
console.log(obj) //{userName:'悟空',height : 100}
console.log(newObj) //{userName:'八戒',height : 100}
const arr = [1,2,3]
const newArr = [...arr]
newArr.push(4)
console.log(arr) // [1,2,3]
console.log(newArr) //[1,2,3,4]
数组方法
map( )
通过指定函数处理数组的每个元素，并返回处理后的数组
const arr = ['a','b','c']
const newArr2 = arr.map(function (value) {
return `<li>${value}</li>`
})
//map() 方法 和箭头函数 组合 写法更简单
const newArr2 = arr.map((value) => `<li>${value}</li>`)
console.log(newArr2)
filter( )
检测数值元素，并返回符合条件所有元素的数组。
用来过滤数组
const arr = [1,3,5,6,7,9]
const newArr = arr.filter(function (value) {
if (value > 3) {
return true
}else{
return false
}
})
console.log(newArr); // [5,6,7,9]
// filter 和 箭头函数 组合写法
const newArr2 = arr.filter(value =>value>3)
console.log(newArr2); // [5,6,7,9]
every( )
检测数组的每个元素是否都符合条件 返回 true or false
const names = [
'黄圣飞',
'梁子聪',
'王锦双',
'韦嘉敏',
'刘雅琴',
'王鹏',
'黄华松']
const result = names.every(value => value.length > 2)
console.log(result); // false
// every 对空数组会直接返回 true
const arr = []
const result1 = arr.every(v => v.length > 2)
console.log(result1); //true
some( )
检查数组中 只要有一个条件满足条件 返回true
const arr = [1,3,4,6,8,9,2,5]
const result = arr.some(value => value > 8)
console.log(result); // true
find()
寻找数组中满足条件的一个元素
找到后不会继续往下遍历
const arr = [
{username : '悟空',height : 80},
{username : '八戒',height : 60},
{username : '沙僧',height : 40},
{username : '龙马',height : 30},
{username : '龙马',height : 60}
]
const obj = arr.find(value=>value.height === 60)
console.log(obj) //{username: '八戒', height: 60}
findIndex( )
符合条件的元素的下标
找不到符合的元素返回 -1
const arr = [
{ username: '悟空', height: 80 },
{ username: '八戒', height: 20 },
{ username: '沙僧', height: 40 },
{ username: '龙马', height: 60 },
{ username: '龙马', height: 30 }
]
const index = arr.findIndex((value) => value.height === 60)
console.log(index) // 3
includes()
判断一个数组是否包含一个指定的值
包含返回 true 不包含 返回 false
const arr = ['a','b','c','d']
const result = arr.includes('b')
const result2 = arr.includes('e')
console.log(result) //true
console.log(result2) //false
join()
把数组的所有元素转换成一个字符串
const arr = ['a','b','c']
const result = arr.join('')
console.log(result) // abc
indexOf()
搜索数组中的元素，并返回它所在的位置
找到了 返回下标
没找到 返回 -1
const arr = ['a','b','c','d']
const index = arr.indexOf('c')
const index1 = arr.indexOf('g')
console.log(index) //2
console.log(index1) //-1
