文档章节

ES6语法总结

Ethan-GOGO
 Ethan-GOGO
发布于 2016/10/12 11:53
字数 2940
阅读 320
收藏 1

一.变量的结构赋值

二.属性扩展

1.字符串扩展

1).chartAt返回指定字符

'abc'.charAt(0) // "a"

2).includes,startWith,endsWith判断该字符串是否含有某字符

var s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

//指定位置
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

3).repeat复制字符

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) //NaN等于0

4).padStart,padEnd补全字符

1.常见用法,补充位数
'12'.padStart(10, '0') // "0000000012"

2.提示字符串格式
12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"

3.用空格补全
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   

2.数值扩展

1).parseInt()和parseFloat()强转字符串

Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45

2).Number.isInteger()用来判断一个值是否为整数

//整数和浮点数是同样的储存方法
Number.isInteger(25) // true
Number.isInteger(25.0) // true

3).Math.trunc方法用于去除一个数的小数部分,返回整数部分。

Math.trunc(4.1) // 4

4).Math.sign方法用来判断一个数到底是正数、负数、还是零。

参数为正数,返回+1;
参数为负数,返回-1;
参数为0,返回0;
参数为-0,返回-0;
其他值,返回NaN。

3.数组扩展

1).合并数组

// ES5的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6的合并数组
[...arr1, ...arr2, ...arr3]

2).字符串转数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]

4.对象扩展

1).对象的key为可变时,使用括号

let obj = {
  [propKey]: true,
  ['abc']: 123
};

2).Object.is判断值是否严格相等,与===行为基本一致

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

Object.is('foo', 'foo')// true
Object.is({}, {})// false

3).Object.assign方法用于对象的合并(浅拷贝)

var target = { a: 1, b: 1 };

var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

4).Object.keys() 

    返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键名

5).Object.values

    返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键值

var obj = { foo: "bar", baz: 42 };
Object.values(obj)
// ["bar", 42]

6).Object.entries

   返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键值对数组

var obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]

4.Set扩展

1).基本用法

//Set.prototype.size:返回Set实例的成员总数。
s.size // 2


add(value):添加某个值,返回Set结构本身。
delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
has(value):返回一个布尔值,表示该值是否为Set的成员。
clear():清除所有成员,没有返回值。

s.add(1).add(2).add(2);
s.has(1) // true
s.delete(2);

Array.from方法可以将Set结构转为数组。
var items = new Set([1, 2, 3, 4, 5]);
var array = Array.from(items);

2).遍历方法

keys():返回键名的遍历器
values():返回键值的遍历器
entries():返回键值对的遍历器
forEach():使用回调函数遍历每个成员,用于对每个成员执行某种操作,没有返回值。

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
  console.log(item);
}


for (let item of set.values()) {
  console.log(item);
}
/**遍历value默认等于
  for (let x of set) {
      console.log(x);
  }
或者
  let values = [...set];
*/


for (let item of set.entries()) {
  console.log(item);
}


let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )

3).去除数组的重复值

let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];

4).数组的map和filter方法也可以用于Set

let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set结构:{2, 4, 6}

let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set结构:{2, 4}

5).实现并集、交集和差集

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

5.map扩展

1).遍历方法

keys():返回键名的遍历器。
values():返回键值的遍历器。
entries():返回所有成员的遍历器。
forEach():遍历Map的所有成员。

let map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}

2).遍历和过滤

//合数组的map方法、filter方法,可以实现Map的遍历和过滤(Map本身没有map和filter方法)。
let map0 = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

let map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
// 产生Map结构 {1 => 'a', 2 => 'b'}

let map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, '_' + v])
    );
// 产生Map结构 {2 => '_a', 4 => '_b', 6 => '_c'}

3).map与其他类型之间的相互转换

http://es6.ruanyifeng.com/#docs/set-map

6.for...of循环

1).基本用法

//1.数组遍历(可以代替数组实例的forEach方法)
var arr = ['a', 'b', 'c', 'd'];

for (let a in arr) {
  console.log(a); // 0 1 2 3  获取key
}

for (let a of arr) {
  console.log(a); // a b c d  获取value
}

//2.遍历map
var engines = new Set(["a":"Gecko","b":"Trident", "c":"Webkit", "d":"Webkit"]);
for (var [key,value] of engines) {

}

//3.遍历set
var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (var e of engines) {
}

//4.遍历对象
var es6 = {
  edition: 6,
  committee: "TC39",
  standard: "ECMA-262"
};
//不能直接使用for..of,使用Object.keys方法将对象的键名生成一个数组,然后遍历这个数组。
for (var key of Object.keys(someObject)) {
  console.log(key + ": " + someObject[key]);
}

//5.遍历Generator函数
function *foo() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
  yield 5;
  return 6;
}

for (let v of foo()) {
  console.log(v);
}
// 1 2 3 4 5

2).与其他遍历语法的比较

http://es6.ruanyifeng.com/#docs/iterator

三.Generator 函数

    Generator函数是一个普通函数,但是有两个特征。一是,function关键字与函数名之间有一个星号;二是,函数体内部使用yield语句,定义不同的内部状态。

    yield语句与return语句既有相似之处,也有区别。相似之处在于,都能返回紧跟在语句后面的那个表达式的值。区别在于每次遇到yield,函数暂停执行,下一次再从该位置继续向后执行,而return语句不具备位置记忆的功能。一个函数里面,只能执行一次(或者说一个)return语句,但是可以执行多次(或者说多个)yield语句。

    yield句本身没有返回值,或者说总是返回undefined。next方法可以带一个参数,该参数就会被当作上一个yield语句的返回值。

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

//必须调用next,才会执行下一个语句,yield是暂缓的意思
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }

1.遍历

//除了for...of循环以外,扩展运算符(...)、解构赋值和Array.from方法内部调用的

function* numbers () {
  yield 1
  yield 2
  return 3
  yield 4
}

// 扩展运算符
[...numbers()] // [1, 2]

// Array.from 方法
Array.from(numbers()) // [1, 2]

// 解构赋值
let [x, y] = numbers();
x // 1
y // 2

// for...of 循环
for (let n of numbers()) {
  console.log(n)
}
// 1
// 2

2.yield*语句

//Generater函数内部,调用另一个Generator函数,默认情况下是没有效果的。这个时候需要yield*调用
function* bar() {
  yield 'x';
  yield* foo();
  yield 'y';
}

// 等同于
function* bar() {
  yield 'x';
  yield 'a';
  yield 'b';
  yield 'y';
}

3.作为对象的属性

可以简写成下面的形式:
let obj = {
  * myGeneratorMethod() {
    ···
  }
};

完整形式:
let obj = {
  myGeneratorMethod: function* () {
    // ···
  }
}

4.常见用法

1).普通暂缓执行

//Generator函数可以不用yield语句,这时就变成了一个单纯的暂缓执行函数。
function* f() {
  console.log('执行了!')
}

var generator = f();

setTimeout(function () {
  generator.next()
}, 2000);

2).切换UI状态

function* loadUI() {
  showLoadingScreen();
  yield loadUIDataAsynchronously();
  hideLoadingScreen();
}
var loader = loadUI();
// 加载UI
loader.next()

// 卸载UI
loader.next()

3).多任务按顺序执行

function* longRunningTask(value1) {
  try {
    var value2 = yield step1(value1);
    var value3 = yield step2(value2);
    var value4 = yield step3(value3);
    var value5 = yield step4(value4);
    // Do something with value4
  } catch (e) {
    // Handle any error from step1 through step4
  }
}

function scheduler(task) {
  var taskObj = task.next(task.value);
  // 如果Generator函数未结束,就继续调用
  if (!taskObj.done) {
    task.value = taskObj.value
    scheduler(task);
  }
}

scheduler(longRunningTask(initialValue));

四.Promise对象

1.创建promise对象

var promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

2.调用promise对象

   promise.then((sucessMsg) => console.log(sucessMsg))
          .catch((errMsg) => console.log(errMsg))

3.Promise.all

   Promise.all方法用于将多个Promise实例,包装成一个新的Promise实例。当全部promise都完成的时候就完成,其中一个失败即整个失败

// 生成一个Promise对象的数组
var promises = [2, 3, 5, 7, 11, 13].map(function (id) {
  return getJSON("/post/" + id + ".json");
});

Promise.all(promises).then(function (posts) {
  // ...
}).catch(function(reason){
  // ...
});

4.Promise.race

    Promise.race方法同样是将多个Promise实例,包装成一个新的Promise实例。当其中一个率先有状态,即整个都转状态。

var p = Promise.race([p1,p2,p3]);

5.done()

    Promise对象的回调链,不管以then方法或catch方法结尾,要是最后一个方法抛出错误,都有可能无法捕捉到(因为Promise内部的错误不会冒泡到全局)。因此,我们可以提供一个done方法,总是处于回调链的尾端,保证抛出任何可能出现的错误。

asyncFunc()
  .then(f1)
  .catch(r1)
  .then(f2)
  .done();

6.finally()

    finally方法用于指定不管Promise对象最后状态如何,都会执行的操作。它与done方法的最大区别,它接受一个普通的回调函数作为参数,该函数不管怎样都必须执行。

server.listen(0)
  .then(function () {
    // run test
  })//关闭服务器
  .finally(server.stop);

五.异步操作

ES6诞生以前,异步编程的方法,大概有下面四种。

  • 回调函数
  • 事件监听
  • 发布/订阅
  • Promise 对象

ES7新添Async函数

1.Async函数

1).含义

async函数就是Generator函数的语法糖。

Generator函数:
var readFile = function (fileName) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) reject(error);
      resolve(data);
    });
  });
};

var gen = function* (){
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

Async函数:
var asyncReadFile = async function (){
  var f1 = await readFile('/etc/fstab');
  var f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

1.async函数就是将Generator函数的星号(*)替换成async,将yield替换成await,仅此而已。
2.async自带执行器,所以调用只需直接asybcReadFile();

2).基本用法

async function main() {
  try {
    var val1 = await firstStep();
    var val2 = await secondStep(val1);
    var val3 = await thirdStep(val1, val2);

    console.log('Final: ', val3);
  }
  catch (err) {
    console.error(err);
  }
}


1.避免出现这个问题,应该使用try..catch
async function f() {
  await Promise.reject('出错了');
  await Promise.resolve('hello world'); // 不会执行
}
2.当有多个await的时候,可以都放在try上

3).希望多个操作同时执行

async function dbFuc(db) {
  let docs = [{}, {}, {}];
  let promises = docs.map((doc) => db.post(doc));

  let results = await Promise.all(promises);
  console.log(results);
}

// 或者使用下面的写法
//不能使用forEach,其代表三个db.post同时执行,不是相继
async function dbFuc(db) {
  let docs = [{}, {}, {}];
  let promises = docs.map((doc) => db.post(doc));

  let results = [];
  for (let promise of promises) {
    results.push(await promise);
  }
  console.log(results);
}

4).使用注意

多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发。

必须等foo完成,才能执行bar执行,太耗时
let foo = await getFoo();
let bar = await getBar();

//可更改两种写法,getFoo和getBar都是同时触发,这样就会缩短程序的执行时间。
// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

2.回调函数

/** 
 * 回调函数测试方法 
 *  
 * @param callback 
 *            被回调的方法 
 */  
function testCallback(callback) {  
    alert('come in!');  
    callback();  
}  
  
/** 
 * 被回调的函数 
 */  
function a() {  
    alert('a');  
}  
  
/** 
 * 开始测试方法 
 */  
function start() {  
    testCallback(a);  
} 

3.事件监听

//rn监听键盘
DeviceEventEmitter.addListener(‘keyboardWillShow‘, this.updateKeyboardSpace)
DeviceEventEmitter.addListener(‘keyboardWillHide‘, this.resetKeyboardSpace)

updateKeyboardSpace: function (frames) {
  const keyboardSpace =  frames.endCoordinates.height//获取键盘高度
  this.setState({
    keyboardSpace: keyboardSpace,
  })
},

4.订阅发布

//rn接收发送通知
DeviceEventEmitter.emit('ClickPopTicketView');
DeviceEventEmitter.addListener('ClickPopTicketView',() => { this._setModalVisible(false) });

5.Promise

            fetch(url, {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: `uid=${userinfo.uid}&sec=${userinfo.sec}&wishkey=${this.props.searchTitle}`
            })
            .then((response) => response.text())
            .then((responseText) => {
                this.setState({isShowLodding:false});
                console.log("code:"+responseText.code );
                let response = JSON.parse(responseText);
                console.log("response:"+response);
                if(response.code == "200"){
                    MyAppTool.showAlert("添加成功");
                    return;
            }
                 MyAppTool.showAlert("添加失败");
            })
            .catch((err) => {
                MyAppTool.showAlert("添加失败");
            });

 

© 著作权归作者所有

Ethan-GOGO
粉丝 13
博文 174
码字总数 82033
作品 0
广州
私信 提问
为什么说ES6的class是语法糖?

0. 前言 我们带着问题去阅读本文: 为什么说ES6的class是语法糖? class是原型的语法糖吗? 那又是如何使用原型来实现class这一语法糖的呢? 1. 基于Prototype的OOP 先来看一个prototype的例子...

pureJy
03/08
0
0
ES6-7

JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMAScript 6 Promises规范为中心,着重向各位读者介绍JavaScr...

掘金官方
2018/01/05
0
0
Promise和async/await的总结

第一次开始注意到ES6的语法,就是因为,感觉比回调好用,后来又接触到,使用后大大的减少了代码的层次结构,因此觉得有必要总结一下 是ES6的语法,是ES7的语法 Promise Promise是异步编程的一...

陨石坠灭
2018/11/13
0
0
【译】快速入门ES6解构以及rest参数语法

原文:gist.github.com/yang-wei/3d… 写在前面 我们首先会讨论如何在ES6中对数组以及对象使用解构(destructing)和rest参数语法。然后我们接下来再看一些例子,并且讨论一些quiz。 数组 使...

wooyoo
2018/09/12
0
0
Kenny小狼/validator-js

Validator-js 前端的验证工具,无其他包依赖无样式,可以适合任何环境,可根据项目环境自行组装提示信息反馈给用户。 兼容IE6以上版及目前流行的浏览器。 usage: 在 和 元素上,添加 属性,然...

Kenny小狼
2017/09/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

windows下cmd常用的命令

windows下常用的命令指示行: windows下 CMD比较常见的命令1. gpedit.msc-----组策略 2. sndrec32-------录音机 3. Nslookup-------IP地址侦测器 4. explorer-------打开资源管理器...

WinkJie
27分钟前
1
0
折叠手机适配布局

CSS Grid 设备相关参数 媒体查询 Chrome进行调试,创建相应的模拟机

lilugirl
28分钟前
1
0
Knative Eventing 中如何实现 Registry 事件注册机制

摘要: 在最新的 Knative Eventing 0.6 版本中新增了 Registry 特性, 为什么要增加这个特性, 该特性是如何实现的。针对这些问题,希望通过本篇文章给出答案。 背景 作为事件消费者,之前是...

阿里云云栖社区
31分钟前
0
0
安装 jemalloc for mysql

前言: Jemalloc 是BSD的提供的内存分配管理 安装依赖 $ yum install -y gcc$ yum install autoconf -y 安装 jemalloc $ git clone https://github.com/jemalloc/jemalloc$ cd jema......

Linux_Anna
42分钟前
2
0
linux下ctrl+c中止不了

有一台centos7的服务器,ctrl+c无效,并且tail -f也无效,只能关掉终端或者crtl+z放入后台再删掉,但是ping的时候使用ctrl+c是有效果的。 出现这种情况的原因可能是因为有人要使用ruby安装r...

gaolongquan
56分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部