资讯专栏INFORMATION COLUMN

实用的es6总结

qqlcbb / 624人阅读

摘要:如果不是,会被转成一个立即的对象函数内部语句返回的值,会成为方法回调函数的参数和导入导出默认有且只有一个默认导入全部并且设置别名多个导出很多模块导入部分导出新的原始数据类型,防止属性名冲突,可以接受一个字符串作为参数,表示对实例的描述。

常用的es6记录 变量声明const和let

let:块级元素,不允许在相同作用域内,重复声明同一个变量
const:对象所指向的地址不能改变,而变量成员是可以修改的

解构赋值

</>复制代码

  1. let [a, b, c] = [1, 2, 3];
  2. let { foo, bar } = { foo: "aaa", bar: "bbb" };
Spread Operator 展开运算符

就是所谓的...
复制合并数组和对象

</>复制代码

  1. const arr1= [1, 2];
  2. //复制数组
  3. const arr2= [...arr1];(对象的子对象arr2改变不会影响arr1,后面子对象会影响)
  4. //合并数组
  5. [...arr1,...arr2]

有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项

</>复制代码

  1. //对象也是类似下面这样
  2. let number = [1,2,3,4,5]
  3. let [first, ...rest] = number//2,3,4,5
字符串扩展

模板字符串:将表达式嵌入字符串中进行拼接。用${}来界定

</>复制代码

  1. var str = "hello";
  2. var result = `
    ${str} world
    `;

padStart:用于头部补全,相对的padEnd为尾部补全

</>复制代码

  1. "1".padStart(2, "0");用于日期的补全工作
数值扩展

用来判断一个数值是否为整数:Number.isInteger()
Math函数的扩展 Math.trunc 去除小数部分

数组扩展

Array.of()将一组值转换成数组
Math.max(...[14, 3, 77]),取得最大值

函数扩展

为函数的参数设置默认值

对象扩展

定义对象的函数可以省略冒号与 function 关键字
Object.assign():进行浅复制和同名属性的替换(源对象某个属性的值是对象,如果改变会反映到目标对象)
Object.is():比较两个值是否相等
Object.values(),Object.keys()通过value或者key生成的数组

箭头函数

使用“箭头”(=>)定义函数
函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象

Promise

避免了层层嵌套的回调函数,用于定时器、ajax中

Promise对象是一个构造函数,用来生成Promise实例,Promise 新建后立即执行,Promise实例的状态变为resolved,就会触发then方法绑定的回调函数

接收的函数参数是同步执行的,但是then方法中的回调函数执行则是异步的

</>复制代码

  1. function result(value){
  2. return new Promise(function(resolve,reject){
  3. if(value){
  4. resolve("你成功了");
  5. }else{
  6. reject("你失败了");
  7. }
  8. });
  9. }
  10. 也可以直接定义return Promise.reject("xxx");
  11. result(true).then(function(value){
  12. console.log(value);
  13. }).catch(function(value){
  14. console.log(value);
  15. });
  16. console.log("先输出");
async

async函数返回一个Promise对象,可以使用then方法添加回调函数

await表示紧跟在后面的表达式需要等待结果(异步操作),拿到结果才能进入下一步,await只能出现在async函数中

await命令后面是一个Promise对象。如果不是,会被转成一个立即resolve的 Promise对象

async函数内部return语句返回的值,会成为then方法回调函数的参数

</>复制代码

  1. function timer(){
  2. return new Promise((resolve,reject)=>{
  3. setTimeout(resolve,1500);
  4. });
  5. }
  6. async function go(){
  7. await timer().then(()=>{console.log("timer")});
  8. console.log("go");
  9. }
  10. go();
import 和 export

</>复制代码

  1. //导入
  2. import people from "./example"
  3. // 导出默认, 有且只有一个默认
  4. export default App
  5. //导入全部并且设置别名
  6. import * as example from "./example"
  7. //n多个 export 导出很多模块
  8. //导入部分
  9. import {name, age} from "./example"
  10. //导出
  11. export name;
  12. export age;
Symbol

新的原始数据类型,防止属性名冲突,可以接受一个字符串作为参数,表示对 Symbol 实例的描述。

</>复制代码

  1. let set = Symbol("set");
  2. let a = {};
  3. a[set] = "hello";

注意:1、Symbol值作为对象属性名时,不能用点运算符。2、该属性不会出现在for...in、for...of循环中

结束,撒花~~~

github

欢迎大家加star~~
https://github.com/ymblog/book

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97962.html

相关文章

  • ES6、7、8常用新特性总结(超实用)

    摘要:定义类常用新特性在一个数组或者列表中检查是否存在一个值还能在字符串中使用除了增强了可读性语义化,实际上给开发者返回布尔值,而不是匹配的位置。 ES6常用新特性 1. let && const let 命令也用于变量声明,但是作用域为局部 { let a = 10; var b = 1; } 在函数外部可以获取到b,获取不到a,因此例如for循环计数器就适...

    atinosun 评论0 收藏0
  • ES6、7、8常用新特性总结(超实用)

    摘要:定义类常用新特性在一个数组或者列表中检查是否存在一个值还能在字符串中使用除了增强了可读性语义化,实际上给开发者返回布尔值,而不是匹配的位置。 ES6常用新特性 1. let && const let 命令也用于变量声明,但是作用域为局部 { let a = 10; var b = 1; } 在函数外部可以获取到b,获取不到a,因此例如for循环计数器就适...

    Xufc 评论0 收藏0
  • 7个javascript实用小技巧

    摘要:每种编程语言都有一些黑魔法或者说小技巧,也不例外,大部分是借助或者浏览器新特性实现。下面介绍的个实用小技巧,相信其中有些你一定用过。当然不管语言如何变化,我们总能在编程中总结一些小技巧来精简代码。 showImg(https://segmentfault.com/img/remote/1460000018902642); 每种编程语言都有一些黑魔法或者说小技巧,JS也不例外,大部分是借...

    tinysun1234 评论0 收藏0
  • 前端最实用书签(持续更新)

    摘要:前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。 前言 一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。 书签源码 书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

    sshe 评论0 收藏0

发表评论

0条评论

qqlcbb

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<