ES6常用实例

stackvoid 发布于2019-08-23 11:37 / 2996人阅读

摘要：属性名表达式属性的简洁表示法允许在对象之中，直接写变量。函数返回一个对象。另一个栗子函数内部语句返回的值，会成为方法回调函数的参数。

属性名表达式

var obj = {
  ["student_" + "1_name"]: "jack",
  ["say" + "hello"]() { // 
    return "hi";
  }
};
console.log(obj.student_1_name);//jack
console.log(obj.sayhello());//hi

属性的简洁表示法

var b = {foo} // b = {foo:foo}
//ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值
function getPoint() {
  const x = 1;
  const y = 10;
  return {x, y};
}
getPoint();// {x:1, y:10}

解构赋值

交换变量

var x=1,y=2;
[x,y]=[y,x];
console.log(x);//2

提取JSON数据，比如从后台拿回来的返回值

var {res,code} = {res:
                    {
                        data: [1,2,4],
                        total: 3
                    },code:200};
console.log(res.total);//3

函数无序传参

function name({ x, y, z }) {
  console.log(z);
}
name({ z: 6, y: 2, x: 4 });//6

函数传参可以设置默认值

function name({ x = 1, y, z }) {
    console.log(x);
}
name({ z: 6, y: 2});

输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");
import { func1 , func2 } from "../common.js"

扩展运算符

取代concat合并数组

let arr1=[1,2,3],
    arr2 = [4,5],
    all = [...arr1,...arr2];
console.log(all);//[1,2,3,4,5]

与解构赋值配合，截取部分数组

var first = [1, 2, 3],
    second = [2],
    [first, second, ...last] = [1, 2, 3, 4, 5];
  console.log(last);//[3,4,5]

字符串转数组

var arr = [..."hello"];
console.log(arr);//["h", "e", "l", "l", "o"]

字符串扩展

字符串补全长度

//补全指定位数
"1".padStart(10,"0");//"0000000001"

数组扩展

使用 Array.from 方法，将类似数组的对象转为数组

   const foo = document.querySelectorAll("div");
   const nodes = Array.from(foo);

async函数

函数前面的async关键字，表明该函数内部有异步操作。

async function getStockPriceByName(name) {
  const symbol = await getStockSymbol(name);
  const stockPrice = await getStockPrice(symbol);
  return stockPrice;
}

getStockPriceByName("goog").then(function (result) {
  console.log(result);
});

async函数返回一个 Promise 对象。

//另一个栗子：
function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint("hello world", 50);

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

//栗子
async function f() {
  return "hello world";
}

f().then(v => console.log(v))
// "hello world"

多个await命令后面的异步操作

let [foo, bar] = await Promise.all([getFoo(), getBar()]);

class的继承

class point {
    constructor(x,y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return "("+ this.x + "," + this.y + ")";
    }
}
class circlePoint extends point {
    constructor(x,y,color) {
      super(x, y);
      this.color = color;
    }
    toString() {
      return this.color + "" + super.toString();
    }
}
console.log(new circlePoint(1,2,"red").toString()); //red(1,2)

Module 的语法

export与export default的区别
1、在一个文件或模块中，export、import可以有多个，export default仅有一个
2、通过export方式导出，在导入时要加{ }，export default则不需要

云服务器 GPU云服务器 ecs实例常用端口介绍 ES6 es6-系列 ES6入门

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

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

实例感受-es6的常用语法和优越性

摘要：在重写完了的时候，就个人总结了一下常用的一些常用的语法和比优越的方面。参数字符串是否在原字符串的尾部返回布尔值。第一个大于的成员的索引方法，用于某个数组是否包含给定的值，返回一个布尔值。 1.前言前几天，用es6的语法重写了我的一个代码库，说是重写，其实改动的并不多，工作量不大。在重写完了的时候，就个人总结了一下es6常用的一些常用的语法和比es5优越的方面。下面提到的语法可能也就是...

fsmStudy 2019-08-21 17:36 评论0 收藏0
ES6 常用知识点总结

摘要：常用知识总结之前总结了中的一些知识点。在年正式发布了，简称，又称为。作为构造函数的语法糖，同时有属性和属性，因此同时存在两条继承链。子类的属性，表示构造函数的继承，总是指向父类。 ES6常用知识总结之前总结了es5中js的一些知识点。这段时间看了石川blue老师讲解的es6课程，结合阮一峰老师的es6教程，随手做了一些笔记和总结分享给大家。内容还是es6主要的知识点，基本没有什么创新...

leap_frog 2019-08-30 14:03 评论0 收藏0
ES6 常用知识点总结

摘要：常用知识总结之前总结了中的一些知识点。在年正式发布了，简称，又称为。作为构造函数的语法糖，同时有属性和属性，因此同时存在两条继承链。子类的属性，表示构造函数的继承，总是指向父类。 ES6常用知识总结之前总结了es5中js的一些知识点。这段时间看了石川blue老师讲解的es6课程，结合阮一峰老师的es6教程，随手做了一些笔记和总结分享给大家。内容还是es6主要的知识点，基本没有什么创新...

CODING 2019-08-22 15:04 评论0 收藏0
ES6 常用知识点总结

摘要：常用知识总结之前总结了中的一些知识点。在年正式发布了，简称，又称为。作为构造函数的语法糖，同时有属性和属性，因此同时存在两条继承链。子类的属性，表示构造函数的继承，总是指向父类。 ES6常用知识总结之前总结了es5中js的一些知识点。这段时间看了石川blue老师讲解的es6课程，结合阮一峰老师的es6教程，随手做了一些笔记和总结分享给大家。内容还是es6主要的知识点，基本没有什么创新...

leon 2019-08-01 18:39 评论0 收藏0