Fork me on GitHub

es6常用

发表于   |   分类于

es6常用特性(不定时补充)

let、const

let：块级作用域使用。一但声明，只能在块级作用域使用，不可变量声明提前。
const：块级作用域使用。一但声明，只能在块级作用域使用，不可变量声明提前。不可变。

js 箭头函数

箭头函数就是丢掉了关键字 function，然后用一个箭头=>来分离一个匿名函数的参数部分和函数体：

1
2
3
4
5
(x) => console.log(x);
相当于
function(x) {
  console.log(x);
}

使用箭头函数注意：
1、箭头函数消除了一个关键的错误源，即函数内的 this 对象的值。函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
2、不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
3、不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
4、不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

js Promises

js Promises使异步任务的处理方式变成线性。它使用一个中心直观的机制来跟踪和响应异步事件。它不仅使调试异步代码变得更容易，而且使得编写它也是一种乐趣。
所有 JavaScript Promise 都是通过 Promise() 构造函数开始和结束:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function mypromise(x) {
        return new Promise(function(resolve, reject){ 
            // 在这编写异步代码
            if(x>30){
                resolve(x)
                // 调用 resolve(x) 来表示任务成功完成  x为参数
            }else{
                resolve(x)
                // 调用 reject(x) 来表示任务失败 x为参数
            }
        })
}
mypromise(60).then((msg) => {
               console.log(msg) 
               // echos contents of text.txt
               return mypromise(50)
           }).then((msg) => {
               console.log(msg) 
               // echos contents of text2.txt
               return mypromise(40)
           }).then((msg) => {
               console.log(msg) 
               // echos contents of text3.txt
           })

当promise被拒，可以分别向一个 Promise 对象发出信号。 then() 与 catch() 方法随后可以被调用，用以处理完成或拒绝 Promise 后的工作。

解构

ES6 解构并非一个新功能，而是一个新的赋值语法，可以让您快速解压缩对象属性和数组中的值，并将它们分配给各个变量。

1
2
3
4
5
6
7
8
9
10
## 对象解构
var obj = {
    name: "liming",
    age: 20,
    user: "haha",
}
var {name,age} = obj;
//也可以使用与你正在提取值的对象属性不同的变量名
var {name: name1,age: age1} = obj;
console.log("name:"+name+",age:"+age)

嵌套对象解构

解构与嵌套对象一起工作

1
2
3
4
5
6
7
8
9
10
11
12
13
var jsondata = {
    title: 'Top 5 JavaScript ES6 Features',
    Details : {
        date: {
            created: '2017/09/19',
            modified: '2017/09/20',
        },
        Category: 'JavaScript',
    },
    url: '/top-5-es6-features/'
};
var {tip="tip", title, Details: {date: {created, modified}}} = jsondata;

默认值生效的条件是，对象的属性值严格等于undefined。

数组解构

和对象解构类似

1
2
3
4
var soccerteam = ['George', 'Dennis', 'Sandy'];
var [a,,b] = soccerteam;
console.log(a); //George
console.log(b); //Sandy

你可以跳过某些数组元素，通过使用逗号（，）：

默认和剩余参数

默认参数

1
2
3
4
5
6
7
8
9
10
11
12
es5 默认参数
function func(a, b) {
  var a = a || 10;
  var b = b || 20;
  
  return a*b;
}
es6 默认参数
function func(a = 10, b = 20) {
  return a*b;
}

剩余参数

es6中的剩余参数使得将函数参数转换成数组的操作变得简单。通过在命名参数前添加3个点 …，在该位置和之后输入到函数中的参数将自动转换为数组。

1
2
3
4
5
6
7
function func(a,...nums) {
  return nums.map(function(a) {
    console.log(a);
  })
};
上例只会从第二个参数开始转化

字符串方法

模板字符串

字符串模板引入”`”,它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量（${}）。

1
2
3
4
5
6
$(document).html(`
<ul>
  <li>1111111111111111</li>
  <li>2222222222222222222</li>
</ul>
`);

当字符串模板需要嵌入变量。可以用${}，大括号可以放任何变量或者JavaScript 表达式，可以进行运算，以及引用对象属性。

1
2
3
4
5
6
7
let x = 1;
let y = 2;
function func(a,b) {
  return a*b
}
console.log(`函数输出是什么呢：${func(x,y)}`) //2

如果需要引用模板字符串本身，在需要时执行，可以像下面这样写。

1
2
3
4
5
6
7
8
9
10
// 写法一
let str = 'return ' + '`Hello ${name}!`';
let func = new Function('name', str);
func('Jack') // "Hello Jack!"
// 写法二
let str = '(name) => `Hello ${name}!`';
let func = eval.call(null, str);
func('Jack') // "Hello Jack!"
如果call第一个参数为null,则作用域变成全局。

标签模板
字符串模板后可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let msg_a = 90;
let msg = msg_a`this is msg_a: ${a} (放大版${a*1.5} with tax)`
function func(e) {
  let result = '';
  let i = 0;
  
  while (i < e.length) {
      result += e[i++];
      if(i<arguments.length){
          result += arguments[i]
      }
  }
  
  return result;
  arguments:[['this is msg_a: ',' (放大版',' with tax)'],90,130];
  参数e:['this is msg_a: ',' (放大版',' with tax)'];
}

上函数里的参数arguments是一个类数组数组第一个元素是函数后字符串按嵌入变量分割的数组，arguments从第一个元素后的元素都是嵌入变量

includes

返回布尔值，表示是否找到了参数字符串。可接受第二个参数，表示开始查找位置

1
2
let aa = "您好";
"这是一段文字，您好".includes(aa);

endsWith、startsWith

endsWith：返回布尔值，表示参数字符串是否在原字符串的头部。可接受第二个参数，表示开始查找位置
startsWith：返回布尔值，表示参数字符串是否在原字符串的尾部。可接受第二个参数，表示开始查找位置

1
2
3
4
let aa = "您好";
let bb = "这是";
"这是一段文字，您好".endsWith(aa); //true;
"这是一段文字，您好".startsWith(bb); //true;

END

-------------本文结束感谢您的阅读-------------