持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，[点击查看活动详情]
ES6新语法
let,var与const
var声明变量:
1.var 有变量的预解析 没有块级作用域
预解析 : 变量的声明会提升到当前作用域最顶端
2.let 没有变量的预解析 有块级作用域
3.const 常量 不可以修改
对象解构
解构赋值 ： 变量赋值的简写(解构精髓：当变量名 和 对象属性值一致的时候，只需要写一个)
1.取出对象的属性 赋值 给 变量
let obj = {
name: '张三',
age: 20,
sex: '男'
}
let { name,age,sex } = obj
2.取出变量的属性 赋值 给 对象
let username = 'admin'
let password = '123456'
let object = {
username,
password,
eat() {
console.log('吃饭饭')
}
}
console.log(object.username, object.password)
object.eat()
数组解构
取出数组元素 赋值给变量
let arr = [10, 20, 30]
let [n1, n2, n3] = arr
console.log(n1, n2, n3)
函数解构
函数参数解构: 当函数参数是对象类型,就可以对形参进行解构
function fn2({ name, age }) {
console.log(name)
console.log(age)
}
fn2({ name: '一二一', age: 18 })
箭头函数
- 如果箭头函数只有一个形参,则可以省略小括号
- 如果箭头函数的 函数体 只有一行代码，则可以省略大括号。 （此时必须省略return）
let fn = () => console.log('爱你')
fn()
!!! this指向: 箭头函数自己没有this, 本质是访问上级作用域中的this
1.由于箭头函数没有this,所以箭头函数不能作为构造函数 (new会修改this指向,而箭头没有this)
2.箭头函数也无法修改this (call apply bind)对箭头函数是无效的
3.由于箭头函数没有this,所以箭头函数一般不作为事件处理函数
let obj = {
name: "ikun",
eat() {
//1级 this : obj
function fn1() {
//2级
console.log(this)//window
}
fn1()
let fn2 = () => {
//2级 ： 箭头函数访问上级 1级obj
console.log(this)//obj
}
fn2()
},
learn: () => {
//1级 ： 上级 this->window
function fn1() {
console.log(this)//window
}
fn1()
let fn2 = () => {
//2级 访问1级 this -> window
console.log(this)//window
}
fn2()
}
}
obj.eat()
obj.learn()
展开运算符
展开运算符: ...
相当于对象遍历的简写(可展开数组及对象)
let arr1 = [10, 20, 30]
let arr2 = [40, 50, 60]
arr1.push(...arr2)
console.log(arr1)
let student = {
score: 90,
sex: '男'
}
let obj = {
name: '张三',
age: 18,
...student
}
console.log(obj)
数据类型 Set
Set相当于是数组类型, 和数组Array唯一的区别是不能存储重复元素
应用场景: 数组去重
let arr = [10, 20, 30, 20, 50, 80, 20, 30, 10]
let newArr = [...new Set(arr)]
console.log(arr, newArr)
map()方法
-
map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值
-
也就是map（）进行处理之后返回一个新的数组
-
注意：map（）方法不会对空数组进行检测
-
map方法不会改变原始数组
<script> let arr = [1, 8, 48, 52, 12, 30, 16] // map 方法 在数组元素执行回调函数后返回其值 let newarr = arr.map(obj => obj + 10) console.log(newarr); //newarr[11 ,18 ,58 ,62 ,22 ,40 ,26] </script>
filter()的用法
-
遍历数组 (过滤器) 用于把数组的某些元素过滤掉 然后返回一个新数组
-
不会改变原来的数组
-
可接收三个参数(obj,index,arr) 分别为数组中的每个元素,下标,数组本身
<script> let arr = [1, 8, 48, 52, 12, 30, 16] // 筛选大于10的数组 并返回过滤后的数组 返回满足条件的元素 let newarr = arr.filter(obj => obj > 10) console.log(newarr);//newarr[12,16,30,48,52] </script>用filter方法 数组去重
<script> let arr = [1, 8, 48, 52, 12, 30, 16, 30, 16] // 数组去重 indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了，所以重复的元素仅会保留第一个位置的元素 let newarr = arr.filter((obj,index,arr)=>arr.indexOf(obj)===index) console.log(newarr); //newarr[12,16,30,48,52,1,8] </script>
forEach()用法
- forEach是操作数组的一种方法，主要功能是遍历数组。forEach方法中的function回调有三个参数：第一个参数是遍历的数组内容，第二个参数是对应的数组索引，第三个参数是数组本身。方法执行是没有返回值的，对原来数组也没有影响。
<script>
let data = [
{
index: 1,
name: "黄志林",
age: 22,
sex: "男",
},
{
index: 2,
name: "武洋",
age: 23,
sex: "男",
},
{
index: 3,
name: "IU",
age: 28,
sex: "女",
},]
data.forEach((val,index,arr)=>{
console.log(val.age)
// val数组遍历到的每一个内容 index 遍历到的 索引
// arr 遍历对象本身
})
</script>
some()与every()的用法
数组some方法作用: 判断数组中是否有符合条件的元素
1.some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。
2.只要找到符合条件的 直接返回 true
数组every方法作用: 判断数组中 是否所有的 元素都满足条件
1.every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。
2.只要找到不符合条件的 直接返回 false
<script>
let data = [
{
index: 1,
name: "谷小小",
age: 22,
sex: "男",
},
{
index: 2,
name: "一一",
age: 23,
sex: "男",
},
{
index: 3,
name: "IU",
age: 28,
sex: "女",
},]
let name = data.every(obj => obj.age === 23)
console.log(name); // false
let names = data.some(obj => obj.age === 23)
console.log(names);// true
</script>
reduce()的用法
函数的返回值存储在累加器中（结果/总计）
对数组每一个元素执行一次回调函数,累加最后一次回调的结果
<script>
let arr= [1,2,3,4,5]
let sum= arr.reduce((sum,obj)=>sum+obj,0)
// sum初始累加变量 obj 遍历数组对象 0 初始值
console.log(sum);
</script>
const array = [5,4,7,8,9,2];
最大值
array.reduce((a,b) => a>b?a:b);
// 输出: 9
最小值
array.reduce((a,b) => a<b?a:b);
// 输出: 2
findIndex()的用法
返回符合条件的元素的索引位置
1.findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
2.当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
3.如果没有符合条件的元素返回 -1
<script>
let data = [
{
index: 1,
name: "谷小小",
age: 22,
sex: "男",
},
{
index: 2,
name: "一一",
age: 23,
sex: "男",
},
{
index: 3,
name: "IU",
age: 28,
sex: "女",
},]
let name = data.findIndex(obj => obj.name == '一一')
console.log(name);
</script>
find()的用法
数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined
let arr = [20, 30, 15, 10, 8]
let name = arr.find(item => item > 20)
console.log(name) // 30
