Vue ES6 总结

1.  normalize()

用来将字符的不同表示方法统一为同样的形式，成为Unicode正规化。

例如，'\u01D1'.normalize() === '\u004F\u030C'.normalize(),结果为true

2.  includes(),startsWith(), endsWith()

用于判断某字符串中是否包含另外的字符

例如：

var s = 'Hello world!';

s.startsWith('Hello') // true

s.endsWith('!') // true

s.includes('o') // true


这三个方法都支持第二个参数，表示开始搜索的位置

例如：

var s = 'Hello world!';

s.startsWith('world', 6) // true

s.endsWith('Hello', 5) // true

s.includes('Hello', 6) // false

3.  repeat(n) 返回一个新字符串，表示将原字符串重复n次。

4.  padStart()和padEnd()分别表示在字符串头部和尾部用指定字符串补全。

例如：

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"

'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

5.  模版字符串是增强版的字符串，用反引号（ `）来表示，字符串可以换行，可以加入用{}包围的变量，消除换行可以用trim()。

例如：$('#list').html(`

first

second

`.trim());

6.  Eval用法，eval用于执行字符串模式的函数

let str = '(name) => `Hello ${name}!`';

let func = eval.call(null, str);

func('Jack') // "Hello Jack!"

7.  Number.isFinite()和Number.isNaN(). 前者用来判断是否为数值，后者判断是否为NaN.

例如：Number.isFinite(15); // true

Number.isFinite('15'); // false

Number.isNaN(NaN) // true

Number.isNaN(15) // false

8.  Math.trunc()用于去除一个数的小数点部分，返回整数部分。

9.  Math.sign()用于判断一个数到底是正数、负数、还是零。它会返回五种值。

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

10.  Array.from()，将对象转为真正的数组。扩展运算符（…）也可以将某些数据结构转化为数组。

例如：

// NodeList对象

[...document.querySelectorAll('div')]

// NodeList对象

let ps = document.querySelectorAll('p');

Array.from(ps).forEach(function (p) {

  console.log(p);

});

Array.from()也接受第二个参数，作用类似于数组中的map方法，用来对每个元素进行处理，处理后的结果放到数组中。

例如：

Array.from(arrayLike, x => x * x);

// 等同于

Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)

// [1, 4, 9]

11.  数组的find()和findIndex()方法，find()用于找出第一个满足条件的数组成员，如果没有，则返回undefined；findIndex()同find()类似，如果有，则返回第一个符合条件的位置，若没有符合条件的就返回-1.

例如：

[1, 4, -5, 10].find((n) => n < 0)

// -5

[1, 5, 10, 15].findIndex(function(value, index, arr) {

  return value > 9;

}) // 2

另外，这两个方法都满足第二个参数，也可以查找NaN

12.  数组的includes()方法返回一个布尔值，用来表示某个数组是否包含给定的值，与字符串的includes方法类似。

Map和Set数据结构都有has方法，前者是查找key，后者查找value。

例如：

Map.prototype.has(key)

Set.prototype.has(value)

13.  数组中的filter()方法用于对数组按条件进行筛选。

例如：以下返回结果是id满足条件的组成的新数组

let filtered = this.collections.filter(coll =>{

           return coll.id === collectionId;

         });

14.  扩展运算符（spread）是三个点（…）。将一个数组转化为用逗号分隔的参数序列。

例如：

console.log(...[1, 2, 3])

// 1 2 3

function add(x, y) {

  returnx + y;

}


var numbers = [4, 38];

add(...numbers) // 42


Math.max(...[14, 3, 77])

等同于

Math.max(14, 3, 77);


扩展运算符用法：

（1）合并数组

// ES5的合并数组

arr1.concat(arr2, arr3);

// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6的合并数组

[...arr1, ...arr2, ...arr3]

// [ 'a', 'b', 'c', 'd', 'e' ]


（2）与解构赋值结合

// ES5

a = list[0], rest = list.slice(1)

// ES6

[a, ...rest] = list

将扩展运算符用于数组赋值时，只能放在最后一个参数，否则报错

const [...butLast, last] = [1, 2, 3, 4, 5];

// 报错

const [first, ...rest] = [1, 2, 3, 4, 5];

first // 1

rest  // [2, 3, 4, 5]


（3）函数的返回值

vardateFields = readDateFields(database);

var d = new Date(...dateFields);


（4） 字符串，将字符串转为数组

[...'hello']

// [ "h", "e", "l", "l", "o" ]


（5）实现Iterator接口的对象

（6）Map和Set结构，Generator函数

15.  箭头函数：

例如：

var f = () => 5;

// 等同于

var f = function () { return 5 };


varsum = (num1, num2) => num1 + num2;

// 等同于

var sum = function(num1, num2) {

  returnnum1 + num2;

};

16. 属性的简洁表示法：

var foo = 'bar';

varbaz = {foo};

baz // {foo: "bar"}

// 等同于

var baz = {foo: foo};

varms = {};

function getItem (key) {

  return key in ms ? ms[key] : null;

}

function setItem (key, value) {

  ms[key] = value;

}

function clear () {

  ms = {};

}


module.exports = { getItem, setItem, clear };

// 等同于

module.exports = {

  getItem: getItem,

  setItem: setItem,

  clear: clear

};

17. Object.assign()用于对象的合并，将源对象的所有可枚举属性，拷贝到目标对象中。第一个参数是目标对象，后面的参数是源对象。

注意：Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

常见用途：

1）为对象添加属性

class Point {

  constructor(x, y) {

    Object.assign(this, {x, y});

  }

}


2）为对象添加方法

3）克隆对象

4）合并多个对象为属性指定默认值

5）指定多个对象

18.  属性的遍历. ES6有五种方式遍历:

(1) For…in 

例如:

for (let it in data)


(2) Object.keys(obj)

例如:

Object.keys(initial).forEach(key =>{

       state[key] = initial[key];

     });


(3) Object.getOwnPropertyNames(obj) 返回一个数组

(4) Object.getOwnPropertySymbols(obj) 返回一个数组,包含所有的symbol属性

(5) Reflect.ownKeys(obj) 返回一个数组,包含所有属性

19.  __proto__ 属性

(1) __proto__ 属性,用于读取或获取当前对象的prototype对象.

var obj = {

  method:function() { ... }

};

obj.__proto__ = someOtherObj;


(2)Object.setPrototypeof(). 该方法作用与__proto__相同,用来设置一个prototype对象. 其用法为: var o = Object.setPrototypeOf({}, null);

(3)Object.getPrototypeof(). 该方法与setPrototypeof()对应着使用,用于读取prototype对象.

例如:

function Rectangle() {

}

var rec = new Rectangle();

Object.getPrototypeOf(rec) ===Rectangle.prototype

// true

Object.setPrototypeOf(rec, Object.prototype);

Object.getPrototypeOf(rec) ===Rectangle.prototype

// false

20.  Object.keys(). 读取object中的所有键名并存放到数组中

例如:

var obj = { foo: "bar", baz: 42 };

Object.keys(obj)

// ["foo", "baz"]

const header = Object.keys(items[0]);

     let csv = items.map(row =>

       header.map(fieldName =>{

         let result = row[fieldName] === null ? '' : row[fieldName];

         return result;

       })

     );

21.  Object.values(). 读取object中所有键值到数组中,如果不是显式属性,则不会遍历出来,所以symbol属性不会被遍历

例如:

var obj = { foo: "bar", baz: 42 };

Object.values(obj)

// ["bar", 42]

22.  Object.entries(), 读取object中的所有键名键值,并将键名和键值对应起来分别放到不同数组中.

例如:

var obj = { foo: 'bar', baz: 42 };

Object.entries(obj)

// [ ["foo", "bar"],["baz", 42] ]

23.  Set类似于数组,但是成员的值都是唯一的.

例如:

var s = new Set();

[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));

for (let i of s) {

 console.log(i);

}

// 2 3 5 4


// 例一

var set = new Set([1, 2, 3, 4, 4]);

[...set]

// [1, 2, 3, 4]


// 例二

var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);

items.size // 5


// 例三

function divs () {

  return[...document.querySelectorAll('div')];

}


var set = new Set(divs());

set.size // 56


// 类似于

divs().forEach(div => set.add(div));

set.size // 56


Set中两个NaN总是相等,但是两个空对象总是不相等.

let set = new Set();


set.add({});

set.size // 1


set.add({});

set.size // 2



Set实例的方法:

add(value)：添加某个值，返回Set结构本身。

delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。

has(value)：返回一个布尔值，表示该值是否为Set的成员。

clear()：清除所有成员，没有返回值。

Set的遍历方法:

keys()：返回键名的遍历器

values()：返回键值的遍历器

entries()：返回键值对的遍历器

forEach()：使用回调函数遍历每个成员

扩展运算符和Set结构相结合，就可以去除数组的重复成员。

例如:

let arr = [3, 5, 2, 2, 5, 5];

let unique = [...new Set(arr)];

// [3, 5, 2]


数组的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}

24.  Cookie, localStorage和sessionStorage的区别:

因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie 来保存用户在电商网站的购物车信息，如今有了 localStorage，似乎在这个方面也可以给 Cookie 放个假了~

而另一方面 localStorage 接替了Cookie 管理购物车的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据，localStorage 也是非常适用的。如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。

安全性考虑:

需要注意的是，不是什么数据都适合放在Cookie、localStorage和sessionStorage 中的。使用它们的时候，需要时刻注意是否有代码存在XSS 注入的风险。因为只要打开控制台，你就随意修改它们的值，也就是说如果你的网站中有XSS 的风险，它们就能对你的localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。

Vuex的数据是存放在localStorage中.

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,937评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,503评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,712评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,668评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,677评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,601评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,975评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,637评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,881评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,387评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,971评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2赞 342

推荐阅读更多精彩内容