当前位置:网站首页>es6 基础知识详解 变量 字符串 解构赋值 函数 对象 从入门到精通

es6 基础知识详解 变量 字符串 解构赋值 函数 对象 从入门到精通

2022-08-09 07:01:00 丰的传说

变量声明

let

 不存在变量提升

console.log(name)//没有变量提升 所以未定义 直接报错
let name = '12132123'

有块级作用域

if(true){
    let name = "sjf"
}
console.log(name)//由于 name 在if 的块级作用域中 在外面无法访问  报错

 不能重复声明

let sex = "男"
let sex = "女"
//直接报错

  暂时性死区

name = 9999
let name = "sjf"//没有声明变量就直接使用

const

        同上 let 

        不同的地方

        

        const 定义的是常量,定义之后不能修改,

const info = {
    name:'sjf',
    age:18
}
info.name = "sjf1"
info.age = 20//const 定义的数据是引用数据类型 可以修改

如果定义的是引用数据类型 则可以修改数据

字符串

        模板字符串

        startsWith

         以什么开头 返回true或者false

let str = "何以解忧,唯有杜康"
let flag1= str.startsWith("何以")//true

          endsWith

          以什么结束 返回 true 或者 false

let str = "何以解忧,唯有杜康"
let flag2 = str.startsWith('解忧')//false

        includes

        字符串是否包含 某些字符  返回之值boolean 比indexOf 更语义化也更方便

let str = "何以解忧,唯有杜康"
let includeFlag = str.includes("唯有")
console.log("includeFlag",includeFlag)

        padStart

        开始位置补全

let str = "aa"
let padL = str.padStart("3",000)
console.log(padL)//0aa

        padEnd 

        结束位置补全


let str = "aa"
let padL = str.padEnd("3",000)
console.log(padL)

解构赋值

解构赋值的条件

左右两边结构相等

右边是个东西(即 是合法的数据i)

数组的解构赋值

let [a,b,c]=[1,2,3]
console.log("abc",a,b,c)//1,2,3

对象的解构赋值

普通解构

let {
    a,
    b
} = {
    a: '3333',
    b: 44
}

console.log(a, b)//"3333",44

给对象的属性重命名 解构

let { a: vara, b: varb } = {
    a: '222',
    b: 333
}
console.log(vara, varb)//"222",333

多层嵌套

let {
    info,info:{name,age}
}={
    info:{
        name:'sfjkfD',
        age:18
    }   
}

console.log('999',info,name,age)//{ name: 'sfjkfD', age: 18 } sfjkfD 18

函数

函数的默认参数

let fn = (a=1,b=2)=>{
    return a+b
}

函数的剩余参数 没有arguments

let fn1 = (...args)=>{
    console.log(args) //[ '23423', 'r32423423' ]
}

fn1('23423','r32423423')

箭头函数

let fn = (value)=>value*2

箭头函数的特点

  1. 箭头函数没有自己的this,谁调用指向谁
  2. 箭头函数没有arguments,需要用剩余参数 ...args 代替
  3. 箭头函数不能所为构造函数,使用new方法 创建实例

对象

属性名表达式

let info = {}
info['a'+'b']=true
console.log(info)

遍历对象

for in 

遍历对象自身的和可继承的可枚举属性

for(let k in info1){
    console.log("k",k)
} 

如果只需要遍历对象自身的属性可以结合  hasOwnProperty 判断属性是否是对象自身的

for(let k in info1){
    console.log("k",k)
    if(info1.hasOwnProperty(k)){
        console.log("ok",k)
    }
}

Object.keys()

返回一个数组,包含自身的(不包含原型上的属性) 所有可枚举的属性

Object.keys(info1).forEach(ele=>{
    console.log("k2",ele)
    console.log(info1[ele])
})

 对象的扩展运算符

解构赋值

let {x,y,...z}={x:1,y:2,z:3,b:4}
console.log(x,y,z)//1 2 { z: 3, b: 4 }

扩展运算符

let info = {
    name:'sjf'
}
let info1 = {
    age:1
}
let result = {
    ...info,
    ...info1
}

console.log(result)//{ name: 'sjf', age: 1 }

Object.is()

用于判断两数据是否相等,

有两特殊点

-0 和 +0 比较是不相等 返回  false

NaN 和 NaN 比较返回true

Object.assign()

用户合并对象

当对象的属性是基本数据类型时,是深拷贝,

当对象的属性是引用数据类型时,时 浅拷贝

合并多个对象时,后边的属性值回覆盖替换掉前面的属性值

let info = {
    name:'sjf'
}
let info1 = {
    age:1,
    name:'fjs'
}
Object.assign(info,info1)

console.log(info)//{ name: 'fjs', age: 1 }

原网站

版权声明
本文为[丰的传说]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_42389674/article/details/125719899