ES6基础语法

ES6基础语法

一.解构

一.数组结构
1.完全解构

let [a,b,c,d,e]=[1,2,3,4]
console.log(a,b,c,d,e) //1,2,3,4,undefined
let [a,b,c,d,e]=[1,2,3,4,5]
console.log(a,b,c,d,e) //1,2,3,4,5
let [a,b,c,d,e]=[1,2,3,[4,5],6]
console.log(a,b,c,d,e) //1,2,3,[4,5],6

2.不完全解构

let [a,b,c,[d],e]=[1,2,3,[4,5],6]
console.log(a,b,c,d,e) //1,2,3,4,6

3.默认值解构

let [a=1,b=2,c=3]=[4,5,6]
console.log(a,b,c) //4,5,6
let [a=1,b=2,c=3]=[]
console.log(a,b,c) //1,2,3

4.集合解构 拓展运算符

let [a,...b]=[1,2,3,4,5]
console.log(a,b) //1 [2,3,4,5]

5.拓展运算符

let arr=[1,2,3,4]
let [...a]=arr
console.log(a) //1,2,3,4
console.log(a===arr) //false

二.对象解构
1.属性名必须和变量名一致才能取到正确的值

let {name,age}={name:'zhangan',age:12}
console.log(name,age) //zhangan,12

2.属性名和变量名不一致 给属性名重命名

let {name:a,age:b}={name:'zhangan',age:12}
console.log(a,b)//zhangan,12

3.嵌套解构

let obj={p:['hello',{y:'world'}]} //a b取到hello world
let {p:[a,{y:b}]}=obj
console.log(a,b) //hello world

4.对象默认值解构

let {x:y=8}={}
console.log(y)//8

三.字符串解构
1.使用数组进行字符串解构

let [a,b,c,d,e]='hello'
console.log(a,b,c,d,e) //h e l l o

2.使用拓展运算符解构

let [...arr]='world'
console.log(arr) //world

3.使用对象解构字符串

let {toString,valueof,length}='hello'
console.log(toString,valueof,length) //[Function: toString] [Function: valueOf] 5

四.箭头函数
1.箭头函数没有自己的this,内部this指向声明箭头函数时外部作用域中的this
2.箭头函数内arguments不再保存实参,如果想接受实参,可以使用rest参数

let test=(a,...b)=>{
	console.log(a,b); a--1 b--[2,3,4]
}
test(1,2,3,4)

3.拓展运算符
拓展运算符用到左侧是聚合 用到右侧是展开

let arr=[1,2,3,4]
let [...a]=arr
console.log(a) //[1,2,3,4]

let obj={name:'zhangsan',age:12}
let obj1={gender:'male'}
let temp={
	...obj,
	...obj1
}
console.log(temp)//{ name: 'zhsngsan', age: 12, gender: 'male' }

4.函数参数解构
1.函数参数对象解构

function test({name,age,...a}){
	console.log(name,age,a)//{ name: 'zhsngsna', age: 12, gender: 1 }
}
test({name:'zhsngan',age:12,gender:1})

2.函数参数数组解构

function test([a,b,c,d]){
	console.log(a,b,c,d)//1 2 3 4
}
test([1,2,3,4])

3.默认值解构

function test({name='lisi',age}){
	console.log(name,age)//lisi 12
}
test(age:12)

五.对象api拓展
1.Object.is(a,b)
判断a和b的值是否相等

console.log(1===1);//true
console.log(Object.is(1,1));//true
console.log(Object.is(1,2));//false
console.log(+0===-0)//true
console.log(Object.is(+0,-0));//false
console.log(NaN===NaN);//false
console.log(Object.is(NaN,NaN));//true

2.Object.assign(o,obj)
俩个参数实现对象复制/拷贝
返回值:返回第一个参数
使用场景:深拷贝 指的是被复制的对象里是基本数据类型
半深拷贝 指的是被复制的对象里面有引用数据类型

let obj={}
let obj1={
	name:"zhangsan",
    age:12,
}
let res=Object.assign(obj,obj1)
console.log(obj)//{ name: 'zhangsan', age: 12 }
console.log(res)//{ name: 'zhangsan', age: 12 }
console.log(obj===res)//true

三个参数 合并对象
返回值:返回第一个参数

let obj={}
let obj1={name:'hzsngan',age:21}
let obj2={gender:'male'}
let res=Object.assign(obj,obj1,obj2)
console.log(res,obj);//{ name: 'hzsngan', age: 21, gender: 'male' } { name: 'hzsngan', age: 21, gender: 'male' }
console.log(res===obj);//true

3.获取原型对象的方法
Object.getPrototypeOf()

let obj={
    name:"",
    age:1
}
console.log(obj.__proto__);//[Object: null prototype] {}
console.log(obj.constructor.prototype)//[Object: null prototype] {}
console.log(Object.getPrototypeOf(obj))//[Object: null prototype] {}

4.设置原型对象的方法
Object.setPrototypeOf

let obj={}
let obj1={
    name:'lisi'
}
Object.setPrototypeOf(obj,obj1)//将obj的原型对象设置成obj1
console.log(obj.__proto__);//obj1
console.log(obj.constructor.prototype);//obj1
console.log(Object.getPrototypeOf(obj));//obj1

5.keys values entries
keys 返回键组成的数组
values 返回值组成的数组
entries 返回键值对组成的数组

let obj={
    name:'zhsngsna',
    age:28
}
console.log(Object.keys(obj));//[ 'name', 'age' ]
console.log(Object.values(obj));//[ 'zhsngsna', 28 ]
console.log(Object.entries(obj));//[ [ 'name', 'zhsngsna' ], [ 'age', 28 ] ]

6.Object.fromEntries()
将二维数组转为对象

let obj={
    name:'zhsngsna',
    age:28
}
let res=Object.entries(obj)
console.log(Object.fromEntries(res));//{ name: 'zhsngsna', age: 28 }

六.数组api拓展
1.Array.from()
将类数组转换为数组

console.log(Array.from('hello'));//[ 'h', 'e', 'l', 'l', 'o' ]

2.Array.of()
创建数组实例

var arr = new Array(10)
var arr1=Array.of(10)
console.log(arr,arr1);//[ <10 empty items> ] [ 10 ]

3.Array.prototype.find
查找满足条件数组元素
参数:回调函数(item,index,arr)
返回值:返回第一个符合条件的数组元素或者undefined

var arr=[1,2,3,4,5]
let res=arr.find((item,index,arr)=>{
    return item>3
})
console.log(res);//4

4.Array.prototype.findIndex
查找满足条件数组元素的元素索引
参数:回调函数(item,index,arr)
返回值:返回符合条件的第一个数组元素索引或-1

var arr=[1,2,3,4,5]
let res=arr.findIndex((item,index,arr)=>{
    return item>2
})
console.log(res);//2

5.keys values entries
keys 返回键组成的数组
values 返回值组成的数组
entries 返回键值对组成的数组

let arr=[1,2,3,4,5]
console.log(arr.keys());//Object [Array Iterator] {}
console.log(arr.values());//Object [Array Iterator] {}
console.log(arr.entries());//Object [Array Iterator] {}

**6.Array.prototype.flat() **
展平数组

var arr=[1,2,3,[4,5,[6,7,8]]]
console.log(arr.flat(2));//[
  1, 2, 3, 4,
  5, 6, 7, 8
]

7.Array.prototype.flatMap()

var arr=[1,2,3,[4,5]]
let res=arr.flatMap((item)=>{
    if(typeof item==='number'){
        return item*2
    }else{
        return item.map((item)=>{
            return item*2
        })
    }
})
console.log(res);//[ 2, 4, 6, 8, 10 ]