常用ES6

作者: 爱吃的根号三 | 来源:发表于2017-10-24 15:00 被阅读5次

1. ``

使用``包裹的字符串,仍然是字符串,但区别' ' 和 " "拥有更多的功能

1.多行字符串
let message = `Multiline
string`;
console.log(message);           // "Multiline
                            //  string"
console.log(message.length);    // 16
2.产生替换位
let name = "Nicholas",
message = `Hello, ${name}.`;
console.log(message);    //Hello, Nicholas.
3.标签化模板

模板字符串的一种更高级的形式称为带标签的模板字符串。它允许您通过标签函数修改模板字符串的输出。标签函数的第一个参数是一个包含了字符串字面值的数组(在本例中分别为“Hello”,“world”和"");第二个参数,在第一个参数后的每一个参数,都是已经被处理好的替换表达式(在这里分别为“15”和“50”)。 最后,标签函数返回处理好的字符串。在下面的例子中,命名这个标签并没有什么特殊的地方,这个函数的名字可以是任何你想要的。

var a = 5;
var b = 10;

function tag(strings, ...values) {
  console.log(strings[0]); // "Hello "
  console.log(strings[1]); // " world "
  console.log(strings[2]); // ""
  console.log(values[0]);  // 15
  console.log(values[1]);  // 50

  return "Bazinga!";
}

tag`Hello ${ a + b } world ${ a * b}`;
// "Bazinga!"

2.箭头函数 =>

1.this与闭包
2.简写

在Array类的方法很常见

let timeOut = setTimeout(
  () => next(action),
  action.meta.delay
)

3.解构

4.扩展语句

1.用于函数调用
myFunction(...iterableObj)
2.复制一个数组
let arr = [1, 2, 3];
let arr2 = [...arr]; // 就像是 arr.slice()

arr2.push(4); 

console.log(arr2) ;// [1, 2, 3, 4]
// arr 不受影响
3.一个更好的连接数组的方法
let [arr1, arr2] = [[0, 1, 2], [3, 4, 5]];

//直接连接
console.log([...arr1, ...arr2]);

let parts = ['shoulder', 'knees'];
let Tshirts = ['Lee', 'Nike'];

let lyrics = ['head', ...parts, 'and', 'toes']; //可以在任何位置
4.将类数组对象转换成数组
var nodeList = document.querySelectorAll('div');
var array = [...nodeList];

如果需要用[...nodeList],则确保nodeList为数组或者可遍历对象(iterables)
(未完待续)

相关文章

  • es5与es6常用语法教程(4)

    js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语...

  • es5与es6常用语法教程(2)

    js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语...

  • es5与es6常用语法教程(3)

    js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语...

  • es5与es6常用语法教程(5)

    js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语...

  • es5与es6常用语法教程(6)

    js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语...

  • es5与es6常用语法教程(7)

    js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语...

  • 数组去重

    1、ES6 Set 去重(ES6中最常用)

  • es6常用语法

    ES6常用语法

  • ES6特性总结

    ES6 新增了很多特性,这里罗列了一些常用的,供大家参考。 ES6常用方法罗列 let、count iterabl...

  • JS数组去重

    一、利用ES6 Set去重(ES6中最常用) functionunique(arr){ returnArray.f...

网友评论

      本文标题:常用ES6

      本文链接:https://www.haomeiwen.com/subject/madrextx.html