ES6第一天

努力-向上

已于 2022-02-27 11:59:10 修改

阅读量367

点赞数

分类专栏： ES6 文章标签： javascript

于 2021-12-13 21:09:51 首次发布

本文链接：https://blog.csdn.net/weixin_42547360/article/details/121884984

版权

ES6 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、声明变量

let、const 声明变量与var声明变量的区别

var 变量名称=赋值作用域问题：全局作用域局部作用域

第一种区别：let、cons声明变量，新增块级作用域，每一个 {} 就是一个独特的块级作用域，通过let或者const定义变量在其内部生效

第二个区别：var定义变量，存在变量的默认提升；let 和const定义的变量，不存在变量的提升

第三个区别：var定义变量可以重复定义；let和const不允许重复

第四个区别：var 定义变量会被挂载到window上，let const不会

备注：const 定义常量永远不改变的值

let定义变量在一个块级作用域中，形成一个暂时性死区在定义完成以前任何地方都不能是用哪个该变量

var a=20

if(true){

console.log(a)//报错，在块作用域，如果有let,在定义完成前不能使用。

let a=30

}

二、字符串模板，拼接字符串

字符串被 ``（esc键下面的键）包含，变量被${}包含

let x="hello world"

let str="你好"

console.log("我的口号是"+x+"加油"+str+"加油")//原生js

console.log(`我的口号是${x}加油${str}加油加油`)

三、数据解构

解构：将复杂的结构，简化成简单结构。

（备注：ES6 模块化开发 Node模块化开发每一个特殊的功能封装起来）

解构对象：

let obj={
name:'王一',
age:21,
height:180
}

// 前面必须是解构的变量，后面是解构的复杂结构（对象或者数组）

//前面的变量必须要和复杂结构的属性同名

let{name} = obj //解构name属性

console.log（name）//王一

let {name,age}=obj //解构name，age属性

解构数组：

let arr=[20,30,40]
let [a,b,c]=arr
console.log(a) //20
console.log(b)//30
console.log(c)//40

交换变量（常用）
let a=20
let b=30;
[a,b]=[b,a]
console.log(a)
console.log(b)

四、对象的简化写法

1、如果属性名等于变量可以省略：后面的内容

2、省略function

比如：

let name="王一"
let age=21
let obj={
name:name,
age:age,
eat:function(){
console.log()
}
}
//属性名等于变量可以省略：后面的内容
let obj={
name, //具有name属性并且name属性等于变量name
age,
//省略function
eat(){}

}

五、箭头函数

1、箭头函数和function的区别

1.传统定义函数中，this指向性永远不明确，随着环境随之发生变化
箭头函数中 this的指向性用于指向被定义的环境专一
2.function具有默认的提升功能，箭头函数没有
3.function 可以作为构造函数使用箭头函数不行（因为this指向不会转变）
4.function 中 arguments参数集合箭头函数中没有，但是箭头函数有...rest（...为拓展运算符）

备注：arguments是传入函数的参数集合 rest参数类比 arguments

不同点：arguments无论你是否定义过形参，所有的参数都会放入arguments

rest参数只会放入除了形参以外的所有参数

案例：

let sum=(a,b,...args)=>{
//rest参数只会放入除了形参以外的所有参数
console.log(args) //[3,4,5]
}
sum(1,2,3,4,5)

function sum(a,b){
//arguments无论你是否定义过形参，所有的参数都会放入arguments
console.log(arguments) //[1,2,3,4,5]
}
sum(1,2,3,4,5)

2、箭头函数的写法

1.如果箭头函数中只有一个参数，那么可以省略小括号
2.如果箭头函数内部有且只有一行return语句，那么可以省略 {} 和return

比如：封装一个箭头函数输入一个参数，返回其平方

let pow=(n)=>{return n*n} //正常的箭头函数

let pow= n=> n*n //因为是一个参数，可以省略小括号，只有一行语句，省略了{}和return

箭头函数的例子：this的指向性用于指向被定义的环境

let box=document.getElementsByClassName("box")[0]
       let box1=document.getElementsByClassName("box")[1]
function change(){
setTimeout(()=>{
console.log(this)
this.style.backgroundColor="blue"
},3000)
// var that=this //常规写法
// setTimeout(function(){ //因为是延迟函数，在window下调用，所以this指向window
// that.style.backgroundColor="blue"
// },3000)
}
       box.οnclick=change;
       box1.οnclick=change;

六、参数的默认值

定义函数时，存在形参的，es6语法默认参数将具有默认值放到后面，将没有默认值往前放

案例：

//定义一个函数，连接数据库本地数据在线数据库
//三个参数 host,port,password

let db={
host:"localhost",
port:33006,
password:123
}
function connect({host,port,password}){ //{host,port,password}解构形参的对象
console.log(host)
console.log(port)
console.log(password)
}
connect(db)