es6常用的语法

最新推荐文章于 2024-01-27 09:38:56 发布

SeHun193

最新推荐文章于 2024-01-27 09:38:56 发布

阅读量222

点赞数

本文链接：https://blog.csdn.net/qq_56494444/article/details/118280497

版权

let关键字

1.变量不能重复生明
2.有块级作用域
3.不存在变量提升
4.不影响作用域链
eg:
  {
    let school = '前锋';
    function fn() {
      console.log(school)
    }
    fn()  //前锋
  }

const关键字

用于定义常量的

1.初始化一定要赋值
2.常量值不能修改
3.有块级作用域
4.对于数组和对象的元素修改，不算是对常量的修改，不会报错
eg:
  const arr = [1, 2, 4]
  arr.push(6)

ES6解构赋值

数组解构

 const arr =[1,3,5,7];
  let[a,b,c,d]=arr;
  console.log(a,b,c,d); //1 3 5 7

对象解构

 let obj ={
    name:'张三',
    age:12,
    eat:function(){
      console.log('能吃');
    }
  }
  let{eat}=obj;
  eat()    //能吃

模板字符串 ``

内容可以直接出现换行符
变量拼接
eg:

 let star = '周杰伦';
 let song = `花海是${star}的经典作品之一`;
 console.log(song);  //花海是周杰伦的经典作品之一

简化对象

如果对象的属性名和变量名同名，则可以光写属性名
es6允许在大括号里面直接写入变量和函数，作为对象的属性和方法

 let name = '张三';
  let eat = function () {
    console.log('好能吃');
  }
  const obj = {
    name,
    eat,
    song() {
      console.log('花海');
    }  
  }
`注意：`
  上面中函数song中省略`：function`
  对象中的方法可以省略`：function`

箭头函数 `=>`

1.htis是静态的，this始终指向所处作用域的上一层
2.不能作为构造函数实例化对象
3.不能使用arguments变量
4.箭头函数的简写
 + 省略小括号（当形参有且只有一个的时候）
 + 省略花括号（当只有一行代码的时候,此时的return必须省略,而且语句的执行结果就是函数的返回值）

给函数赋初始值

1.形参初始值（具有默任值参数，一般位置要靠后）
2.与解构赋值结合

rest参数 (`...变量名`)

就是合并运算符
用来获取函数的实参（放在函数声明的形参位置），用来代替arguments

let fn = (...arr)=>{
    console.log(arr)
}
fn(1,2,3)  //[1,2,3]

注意：必须放在参数的的最后面

扩展运算符(`...`)

（放在函数调用实参的位置）将一个数组展开为多个变量赋值给多个形参

let arr = [1,2,3]
functiobn fn(a,b,c){
    console.log(a,b,c)  //1 2 3 
}
fn(...arr)

Promise

引入异步编程的解决方案

语法上Promise是一个构造函数，用于封装异步操作并可以获取其成功或者失败的结果

new Promise(function (resolve, reject) {
  // resolve 表示成功的回调
  // reject 表示失败的回调
}).then(function (res) {
  // 成功的函数
}).catch(function (err) {
  // 失败的函数
})

async/await

es7提供了async/await来编写异步代码，是回调地狱的终极解决方案。

await要放在async函数

语法：

async function fn() {
	const res = await promise对象
}

es6模块化 (`export`和`import`)

是指将一个大的程序拆分成许多小的文件，然后将小文件组合起来

模块化的优势：
1.防止命名冲突
2.避免代码重复
3.高维护性
模块功能主要由两个命令构成：export和import

1.export命令用于规定模块的对外接口(有分别暴露，统一暴露，默认暴露)
 + 默认暴露 `export default `

2.import命令用于输入其他模块提供的功能

+ import 变量名 from '模块文件路径'
+ import {解构具体数据} from '模块文件路径'
+ import * as 变量名 from '模块文件路径';

动态的import

实现按需加载
eg:

<body>
  <button>点击按钮</button>
</body>
<script src="./a.js" type="module"></script>

const btn = document.querySelector('button');
btn.onclick = function () {
// 实现按需加载
  import("./hello.js").then(module => {
    module.hello();
  })
}

export function hello() {
  alert('hello world')
}

SeHun193

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
es6常用的语法

let关键字1.变量不能重复生明2.有块级作用域3.不存在变量提升4.不影响作用域链eg: { let school = '前锋'; function fn() { console.log(school) } fn() //前锋 }const关键字用于定义常量的1.初始化一定要赋值2.常量值不能修改3.有块级作用域4.对于数组和对象的元素修改，不算是对常量的修改，不会报错eg: const arr = [1, 2, 4]
复制链接

扫一扫