ES6新特征数字,关于ES6扩展属性
分类:服务器

一、let和const

ES6

  1. let和const
    1. let命令
      • 只在代码块作用域内有效
      • 不存在变量提升(不能在申明之前赋值)
      • 暂时性死区(在区域内不受外部变量影响)
      • 不允许重复申明(在相同代码块区域内)
    2. 块级作用域
      • let为es6新增了块级作用域 {let a = ...;}
      • 函数可以在块级作用域申明,不受外界影响 if(...) { function(){}}
        注:块级作用域处大括号不能省略。
    3. const命令
      • 立即初始化,不可改变。
      • 类似let于的特性。
      • 对于对象,const存储只保持地址不变,对象内属性可变,但是不可给对象重新赋值。const a = []; a = ['1'];报错
      • Object.freeze方法冻结对象,使内容不可改变。
    4. 全局对象
      • let命令、const命令、class命令声明的全局变量,不属于全局对象的属性。
  2. 变量的解构赋值

    1. 数组解构
      • 写法 var [v1,v2,v3] = [1,2,3];
      • let const都支持解构赋值
      • 支持“模式匹配” var [a,[b]] = [1,[2]]
      • set结构支持 var [a,b] = new set([1,2])
    2. 默认值
      • 允许默认值 var a[b=2] = [];
      • 默认值生效:当赋值不严格等于undefined var a[b=1] = [null]; b//null
      • 默认值的惰性, var a[b=function(){}] = [1]; //方法不执行
      • 默认值可以引用解构赋值的其他变量,但该变量必须已经声明。var [x=2,y=x] = [1];
    3. 对象解构
      • var {foo,bar} = {foo:"aa",bar:"bb"};
      • 变量名与属性名不一致时 var {foo:l,bar:a} = {foo:"aa",bar:"bb"};
      • 对于let和const来说,变量不能重新声明,所以一旦赋值的变量以前声明过,就会报错。let foo; let{foo}={foo:1} //err
        ({foo}={foo:1}) //成功 大括号不能省略
      • 类似于数组可以依靠模式嵌套对象
      • 可以指定默认值
      • 两个神奇用法:let { log, sin, cos } = Math;
        var {0 : first, [arr.length - 1] : last} = arr;
    4. 字符串解构
      • const [a, b, c, d, e] = 'hello';
      • let {length : len} = 'hello'; len //5;
    5. 数值和布尔值得解构
      • let {toString: s} = 123;
        s === Number.prototype.toString // true
      • null和undefined无法转化成对象,会报错
    6. 函数参数解构

      function move({x, y} = { x: 0, y: 0 }) {
          return [x, y];
      }
      move({x: 3, y: 8}); // [3, 8]
      move({x: 3}); // [3, undefined]
      move({}); // [undefined, undefined]
      move(); // [0, 0]
      
    7. 圆括号问题

      • 不使用圆括号情况
        1. 变量声明语句中,不能带有圆括号。
        2. 函数参数中,模式不能带有圆括号。
        3. 赋值语句中,不能将整个模式,或嵌套模式中的一层,放在圆括号之中。
      • 使用圆括号情况
        赋值语句的非模式部分,可以使用圆括号。
    8. 用途
      • 交换变量的值
      • 从函数返回多个值
      • 函数参数的定义
      • 提取JSON数据
      • 函数参数的默认值
      • 遍历Map结构
      • 输入模块的指定方法
  3. 字符串的扩展

    1. 字符的Unicode表示法
      'z' === 'z' // true
      '172' === 'z' // true
      'x7A' === 'z' // true
      'u007A' === 'z' // true
      'u{7A}' === 'z' // true
    2. codePointAt()
      codePointAt方法会正确返回32位的UTF-16字符的码点。
    3. String.fromCodePoint()
      识别32位码点。
    4. 字符串的遍历器接口
      for...of for(obj of map)
    5. at()
    6. normalize()
    7. includes(), startsWith(), endsWith()
    8. repeat()
      'hello'.repeat(2) // "hellohello"
    9. padStart(),padEnd()
      补全字符串长度
    10. 模板字符串
      ${name} 取变量值
    11. 实例:模板编译
    12. 标签模板
    13. tring.raw()
  4. 正则的扩展
    1. RegExp构造函数
      新增加写法:new RegExp(/abc/ig, 'i') 后面的参数会覆盖前面ig
    2. 字符串的正则方法
    3. u修饰符
      • 点子符 /^.$)/u.test('a') //true
      • 识别Unicode字符 /u{61}/u.test('a') //true
      • 量词 /a{2}/.test('aa') //true
    4. y修饰符
      粘连匹配,即必须从下一个字符处开始匹配。
    5. sticky属性
      查看是否设置了y修饰符
    6. flags属性
      返回正则表达式修饰符
    7. RegExp.escape()
      ES6新特征数字,关于ES6扩展属性。转义生成正则模式
    8. 后行断言
      只匹配美元符号之后的数字,要写成/(?<=$)d /
  5. 数组的扩展
    1. Array.from()
      将对象转化为数组
    2. Array.of()
      将一组值转换为数组
    3. 数组实例的copyWithin()
      将指定位置的成员复制到其他位置 (target, start, end)
    4. 数组实例的find()和findIndex()
      //返回第一个找到的值的位置
      [1, 5, 10, 15].find(function(value, index, arr) {
      return value > 9;
      }) // 10
    5. 数组实例的fill()
      填充数组,可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
    6. 数组实例的entries(),keys()和values()
      遍历map,keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
    7. 数组实例的includes()
      数组是否包含给定的值。
    8. 数组的空位
      var arr =new Array(3) //[,,]
      空位处理不一致尽量不使用
  6. 数值的扩展
    1. 二进制和八进制表示法
      二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。
    2. Number.isFinite(), Number.isNaN()
      Number.isFinite()用来检查一个数值是否为有限的(finite)。
      Number.isNaN()用来检查一个值是否为NaN。
    3. Number.parseInt(), Number.parseFloat()
      转换为整形和浮点型,成为Number的属性,减少全局性方法,是语言逐渐模块化。
    4. Number.isInteger()
      判断是否为整数。 注: Number.isInteger(3.0) //true
    5. Number.EPSILON
    6. 安全整数和Number.isSafeInteger()
      ES6引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量,用来表示这个范围的上下限,Number.isSafeInteger()是用来判断一个整数是否落在这个范围之内。
    7. Math对象的扩展
      新增了17个与数学相关的方法,详细链接Math扩展
    8. 指数运算符
      let a = 2;
      a **= 2; // 等同于 a = a * a;
  7. 函数的扩展

    1. 函数参数的默认值
      function log(x, y = 'World')
      可以与解构函数一起使用。
      函数的length属性,返回没有指定默认值的数量。
    2. rest参数
      rest参数(形式为“...变量名”),用于获取函数的多余参数
    3. 扩展运算符
      扩展运算符(spread)是三个点(...)。它好比rest参数的逆运算,将一 个数组转为用逗号分隔的参数序列。
    4. name属性
      函数的name属性,返回该函数的函数名。
    5. 箭头函数
      =>
      (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

      (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

      (3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。

      (4)不可以使用yield命令,因此箭头函数不能用作Generator函数。

    6. 函数绑定
      foo::bar;
      // 等同于
      bar.bind(foo);
      函数绑定运算符是并排的两个双冒号(::),双冒号左边是一个对象,右边是一个函数。该运算符会自动将左边的对象,作为上下文环境(即this对象),绑定到右边的函数上面。

    7. 尾调用优化
      即在return函数时,不需要对当前函数作用域的值进行保存或关联操作。

      function factorial(n, total) {
        if (n === 1) return total;
        return factorial(n - 1, n * total);
      }
      factorial(5, 1) // 120
      function factorial(n) {
        if (n === 1) return 1;
        return n * factorial(n - 1);
      }
      factorial(5) // 120
      
    8. 函数参数的尾逗号
      ES7有一个提案,允许函数的最后一个参数有尾逗号(trailing comma)。
      目前,函数定义和调用时,都不允许有参数的尾逗号。

  8. 对象的扩展

    1. 属性的简洁表示法
      var a={x} -> var a={a:a}
      var obj = {
      class () {}
      };

      // 等同于

      var obj = {
      'class': function() {}
      };

    2. 属性名表达式
      ES6允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内。

    3. 方法的name属性
      函数的name属性,返回函数名。对象方法也是函数,因此也有name属性。
    4. Object.is()
      判断两个对象严格相等,与===不同之处在于:一是 0不等于-0,二是NaN等于自身。
    5. Object.assign()
      Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。
    6. 属性的可枚举性
    7. 属性的遍历
      for...in
      Object.keys(obj)
      ...
    8. __proto__属性,Object.setPrototypeOf(),Object.getPrototypeOf()
      设置、返回原型对象
    9. Object.values(),Object.entries()
      返回属性值,返回键值对。
    10. 对象的扩展运算符
      Rest解构赋值
      扩展运算符
    11. Object.getOwnPropertyDescriptors()
      返回指定对象所有自身属性(非继承属性)的描述对象。

文章关于扩展方面的总结就到这里,ES6还增加了许多新的特性,详细了解访问: ES6入门

let

1.作用域在代码快中 外部无法获取let声明的变量

2.不存在变量提升 var声明变量前 输出变量undefined let声明变量前输出变量 直接报错

3.let const 这个区块声明变量 从一开始就形成了封闭作用域 凡是在声明之前使用这些变量 就会报错

也就是说 在let命令声明变量之前 该变量都是不可用的 语法上称为‘暂时性死区

4.typeof a a是不存在的变量 // undefined

如果 typeof在死区内 也就是 typeof b  let b = 1 typeof直接报错

5.不允许重复声明同一个变量 也不能在函数内部重新声明 参数名和函数体内let的变量名 不能相同

ES6的块级作用域

1.let实际上为js新增了块级作用域 

2.{{{{{{作用域可以任意嵌套 let a = 1}} 外层作用域无法读取内层作用域的变量  console.log(a) // 报错}}}}}

外层作用域可以定义内层同名变量

不再需要立即执行函数表达式 (function(){}())

3.ES6函数声明和let类似 允许块级作用域声明函数

函数调用也只会在当前自己的作用域内找声明的函数调用

找不到就找外层的 不会找不相干的层

const命令

1.const只读 常量不能改变

const必须赋值 只声明会报错

并且之后不能重复赋值 不可重复声明

只在作用域内有效

ES6共有6种声明方式

var let const import class function

顶层对象的属性

浏览器环境中指的是window对象 node环境中指的是global对象

var function 声明全局变量 等同于window.变量名

let const class不是

global 对象 

es5 顶层对象 浏览器中是window 

浏览器和web Worker 里 self也指向顶层对象 但是Node没有self

Node 顶层对象是global 但其它环境都不支持

没看懂

数组的解构赋值

按照一定模式从数组和对象中提取值 对变量进行赋值 被称为结构

let [a,b,c] = [1,2,3]

上面代码表示从数组中提取值 按照对应位置 对变量赋值

本质上属于’模式匹配‘ 只要等号两边的模式相同 左边的变量就会被赋予对应的值

let [foo, [[bar], baz]] = [1,[[2],3]] //一一对应

let [, , third] = ['foo','bar','baz'] //third baz

let [head, ...tail] = [1, 2, 3, 4];

head // 1

tail // [2, 3, 4]

let [x, y, ...z] = ['a'];

x // "a"

y // undefinedz // []

结构不成功 变量的值就是undefined

...z 没有时为空数组  ...是数组

不完全解构

let [x, y] = [1, 2, 3];

x // 1y // 2

let [a, [b], d] = [1, [2, 3], 4];

a // 1b // 2d // 4

按照结构赋值

let [x,y,z] = new Set(['a','b','c'])

x //a

set解构也可以使用数组解构赋值

解构赋值允许指定默认值

let [foo = true] = []

foo // true

let [x,y='b'] = ['a'] // x = 'a' y = 'b'

let [x, y = 'b'] = ['a', undefined];  // x='a', y='b'

赋值 === undefined默认才会生效

赋值null则默认不生效 =号左侧被赋值null

有默认值的情况下 赋值的过程

先按照结构 = 右侧向左侧赋值 当右侧!== undefined时赋值成功 否则是默认值 默认值如果是变量 未被声明会报错

function f() { console.log('aaa');} 

let [x = f()] = [1];

解构赋值过程

let x;if ([1][0] === undefined)

{ x = f();}

else { x = [1][0];}

对象的解构赋值

与数组的不同之处 数组的元素是按照次序排列的 变量取值由位置决定 而对象的属性没有次序 变量必须与属性同名才能取到正确的值

对象赋值是先找到对应的属性 对属性值进行赋值 

对象也可以指定默认值  ===undefined 默认值生效

let {foo} = {bar: 'bar'} 解构失败 foo//undefined

let {foo: {bar}} = {baz: 'baz'}; 属性不存在 取子属性会报错

由于数组本质是特殊对象 因此可以对数组进行对象属性的解构

let arr = [1,2,3,]

let {0:first, [arr.length-1]: last} = arr

first // 1

last //3

索引相当于是属性名

字符串的结构赋值

字符串会被转换成一个类似数组的对象

const [a,b,c,d,e] = 'hello'

类似数组的对象都有一个length属性 因此还可以对这个属性解构赋值

let {length: len} = 'hello'

len //5

数值和布尔值的解构赋值

数值和布尔值会转为对象

let {toString: s} = 123

s === Number.prototype.toString // true

相当于 123变成了Number对象 s是toString 这个方法

let {toString: s} = true;

s === Boolean.prototype.toString // true

同上 被转换成了Boolean对象 s为方法

解构赋值的规则是 只要等号右边的值不是对象或数组就将其转换为对象

undefined 和 null 无法转为对象 所以对他们进行解构赋值 都会报错

函数参数的结构赋值

function add([x,y]) {

return x y

}

add([1,2]) // 3

圆括号的问题

建议不要再模式中放置圆括号

不能使用圆括号的情况

(1) 变量的声明语句

let [(a)] = [1] 报错

(2) 函数参数

函数参数也属于变量声明 因此不能带有圆括号

(3)赋值语句的模式

({p: a}) = {p: 42} 报错

圆括号不是很理解 奇奇怪怪

用途

(1)交换变量

let x = 1

let y = 2

[x,y ] = [y,x]

(2)从函数返回多个值

function example() {

 return [1,2,3];

}

let [a,b,c] = example()

function example() {

    return {

    foo: 1,

    bar: 2

}

}

let {foo, bart} = example()

(3)函数参数的定义

解构赋值可以方便的将一组参数与变量名对应起来

// 参数是一组有次序的值function f([x, y, z]) { ... }f([1, 2, 3]);

// 参数是一组无次序的值function f({x, y, z}) { ... }f({z: 3, y: 2, x: 1});

(4)提取json数据

解构赋值对提取json对象中的数据尤其有用

let jsonData = {

    id: 42,

    status:'OK',

    data: [867,5309]

}

let {id, status, data: number} = jsonData;

(5)函数参数的默认值

(6)遍历Map结构

const map = new Map()

map.set('first','hello')

map.set('second','world')

字符串的拓展

for of 遍历字符串

let str = 'abc'

for(let v of str) {

`    console.log(v)

}

// a

// b

// c

at()

‘abc’.at(0) // a 

浏览器支持度不高 建议还是使用charAt()

includes() 返回布尔 表示是否找到了参数字符串

startsWith() 返回布尔 表示参数字符串是否在原字符串头部

endsWith() 返回布尔 表示参数字符串是否在原字符串尾部

第二个参数标识开始搜索的位置

let s = 'Hello world!';

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

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

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

上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

repeat() 返回一个新字符串 标识将原字符串重复n次

‘x’.repeat(3) ‘xxx’

'hello'.repeat(2) 'hellohello'

'na'.repeat(0) ''

参数如果是小数点会被取整

‘na’.repeat(2.9) 'nana'

参数为负数或Infinity 会报错

参数在0-1和 0到-1之间 以及 NaN等同于0

如果参数是字符串 会被转换成数字

‘na’.repeat('na') '' //'na'转换为字符串是NaN所以结果是‘’

'na'.repeat('3') // 'nanana'

padStart 常见用途 为数值补全指定位数 

下面代码生成10位

‘1’.padStart(10,'0') // 0000000001

'12'.padStart(10,'0') // 0000000012

‘123456’.padStart(10, '0') //0000123456

另一个用途 提示字符串格式

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

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

数组的扩展 扩展运算符

主要用于函数调用

扩展运算符的应用

复制数组

const a1 = [1,2]

const a2 = [...a1]

const [...a2] = a1

合并数组

[1,2].concat(more)

[1,2,...more]

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

扩展运算符用于数组赋值 只能放在参数最后一位 否则会报错

字符串转换数组

[...'hello']

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

Map 和 Set 结构 

映射 和 集合 // 不是很懂

Array.from()

将类似数组的对象和可遍历的对象(包括Map和Set)转为数组

let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3};

Array.from(arrayLike) ['a', 'b', 'c']

NodeList对象[...document.querySelectorAll('div')]

直接得到一个NodeList集合

Array.from(NodeList) 转换为真正的数组

可以将字符串转换为数组

let str = 'sdfsdf35165'

Array.from(str)

// ['s', 'd', 'f'....]

Array.of() 返回参数组成的数组

Array.of() // []

Array.of(undefined) //[undefined]

Array.of(1) // [1]

find() 找到第一个符合条件的数组成员

参数为回调 第一个满足回调返回true的成员 返回该成员

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

回调有三个参数 value 当前值 index 当前索引 arr 原数组 ↓

[1, 5, 10, 15].find(function(value, index, arr) { return value > 9; }) // 10

findIndex 与find类似 返回索引

这两个方法 可以接受第二个参数 find(f,person) 回调中的this指向第二个参数

function f(v){ return v > this.age; } let person = {name: 'John', age: 20}; [10, 12, 26, 15].find(f, person); // 26

fill() 给定值填充一个数组

['a','b','c'].fill(7) // [7,7,7]

new Array(3).fill(7) // [7,7,7]

还可以接受第二第三个参数 起始位置和结束位置(包头不包尾) 

[‘a’, 'b', 'c'].fill(7,1,2) // ['a', 7, 'c']

如果参数类型是对象 那么被赋值的是同一个内存地址的对象 而不是深拷贝的对象

let arr = new Array(3).fill({name: "Mike"});

arr[0].name = "Ben"; arr

// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}] l

et arr = new Array(3).fill([]);

arr[0].push(5); arr // [[5], [5], [5]]

entries() keys() values()

遍历数组 键值对遍历 键遍历 值遍历

[1, 2, 3].includes(2) 返回布尔

数组的空位ES6方法会解析成undefined

Object.is()

类似于全等 ===

区别在于 全等 0 === -0 // true

                Object.is( 0, -0) // false

                全等 NaN === NaN // false

                Object.is(NaN, NaN) // true

对象的合并  Object.assign() 

第一个参数 目标对象 后面都是源对象

如果有同名属性 后面的会覆盖前面的

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

如果只有一个参数 会直接返回该参数

如果该参数不是对象则会转成对象 然后返回

undefined和null做参数 会报错

如果undefined和null不在第一个参数位置 则不会报错

字符串做参数 会以数组的形式拷贝入对象 数值和布尔 没效果

const v1 = 'abc';

const v2 = true;

const v3 = 10;

const obj = Object.assign({}, v1, v2, v3);

console.log(obj); // { "0": "a", "1": "b", "2": "c" }

Object.assign() 拷贝的属性是有限的 只拷贝源对象自身属性 不拷贝继承属性 不拷贝不可枚举属性

注意点

Object.assgin()实现的是浅拷贝 拷贝的是对象的引用

同名属性会替换

数组视为对象

Object.assign([1, 2, 3], [4, 5])

// [4, 5, 3]

数组视为对象则是索引做键值做值的对象

所以4在0的位置 会覆盖1 ,5覆盖2

函数的处理

Object.assign()参数如果有函数 则是先运行只会拿到值再复制

常见用途

ES6的遍历

for...in 遍历对象自身和继承的可枚举属性

Object.keys(obj) 返回一个数组 包含对象自身可枚举属性不含继承的键名

Object.getOwnPropertyNames(obj)

返回一个数组 包含对象自身所有属性 包含不可枚举属性的键名

参考文章地址:1, https://babeljs.io/learn-es2015/#ecmascript-2015-features-destructuring
2,https://segmentfault.com/a/1190000005863641

什么是ECMAScript?
ECMAScript就是JavaScript中的语法规范!

let:声明变量,只在声明的块级作用域内起作用[注意:let不向var那样可以自动提升]

Arrows and Lexical This(箭头函数)

一、 箭头函数没有独立上下文的(this), 其内部引用this对象其实是父级的this
二、 箭头函数没有独立的arguments,所以如果需要取不定参数的时候,要么用function,要么用ES6另一个新特性:rest

// 箭头函数没有独立的this
var bob = {
  _name: "Bob",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>  //箭头函数使用父级的this
      console.log(this._name   " knows "   f));
  }

// 普通方法有独立的this。
var bob = {
  _name: "Bob",
  _friends: [],
  printFriends: function printFriends() {
    var _this = this;

    this._friends.forEach(function (f) {
      return console.log(_this._name   " knows "   f);
    });
  }
};

关键字 let 的用法
let关键字是用了声明变量的,类似于var。let声明的变量仅仅在自己的块级作用域起作用,出了这个块级作用域就不起作用。需要先声明定义再使用,同一个块级作用域内,不允许重复声明同一个变量,函数内不能用let重新声明函数的参数。

如果一个区块内存在let或const命令,该区块就被解析成封闭作用域 [所以一个区块内只要有let,就可能存在死区,就可能会出现变量声明使用顺序的错误]

Classes 类

ES6中实现的一个语法糖,用于简化基于原型集成实现类定义的场景,但是它实际上并没有其他语言的Class应用的特点。

class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
  }
  update(camera) {
    //...
    super.update();
  }
  static defaultMatrix() {   //ES6中可以定义静态的方法。
    return new THREE.Matrix4();
  }
  static get personName(){  //ES6中定义静态变量
     return 'jelly';
   }
}

//Class没有私有属性,但是可以通过一种其他方式实现的私有属性
// 自动执行的闭包
const TbFedMembers = (() => {
 const personName = 'jelly';
 return class{
   getOneMemberName(){
     return HuaChen;
   }
 };
})();

关键字 const 的用法
const和 let一样,也是用来声明变量的,但是const是专门用于声明一个常量的,顾名思义,常量的值是不可改变的。只在块级作用域起作用,不存在变量提升,必须先声明后使用,不可重复声明同一个变量,声明后必须要赋值。

let为JavaScript增加了块级作用域

Enhanced Object Literals(增强的对象字面量)

增强的对象字面量是 ES6 中的升华功能,他设计了很多简写,这些简写不但保留了明确的语义,还减少了我们多余的代码量。

var obj = {
    // Sets the prototype. "__proto__" or '__proto__' would also work.
    __proto__: theProtoObj,
    // Computed property name does not set prototype or trigger early error for
    // duplicate __proto__ properties.
    ['__proto__']: somethingElse,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d "   super.toString();
    },
    // Computed (dynamic) property names(计算所得的(动态的)属性名称)
    [ "prop_"   (() => 42)() ]: 42
};

// ES6 增强写法
var obj = {
    handler,
    toString() {
        return "d "   super.toString();
    },
    [ 'prop_'   (() => 42)() ]: 42
};

//普通写法
var obj = {
    handler: handler,
    toString: function() {
        return "d "   super.toString();
    },
    prop42: 42
};

快速让浏览器兼容ES6特性
比较通用的工具方案有babel,jsx,traceur,es6-shim等。
各大转换工具、javascript解析引擎对ES6的支持程度情况,可以参查看这个地址:'http://kangax.github.io/compat-table/es6/'

ES6中在块级作用域声明的函数不能在外部被引用,但在ES5中可以(ES5中的函数声明可以提升到全局作用域或函数作用域头部,ES6中不行,但是ES6位了避免对老代码的冲击放开了新的规定)

Template Strings 模板字符串

模板字符串提供构造字符串的语法糖,这与Perl、Python等许多语言中的字符串插值功能非常相似,你也可以通过添加标签(tag)来自定义构造字符串,避免注入攻击,或者基于字符串构建更高层次的数据结构。

// Basic literal string creation
// 基础字符串字面量的创建
`In JavaScript 'n' is a line-feed.`

// Multiline strings
// 多行字符串
`In JavaScript this is
 not legal.`

 // String interpolation
// 字符串插值
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// Construct an HTTP request prefix is used to interpret the replacements and construction
// 构造一个HTTP请求前缀用来解释替换和构造,大意就是可以构造一个通用的HTTP prefix并通过赋值生成最终的HTTP请求
GET`http://foo.org/bar?a=${a}&b=${b}
    Content-Type: application/json
    X-Credentials: ${credentials}
    { "foo": ${foo},
      "bar": ${bar}}`(myOnReadyStateChangeHandler);

解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。
var arr = [1,2,3];//把数组的值分别赋给下面的变量;(传统)
var a = arr[0];
var b = arr[1];
var [a,b,c] = [1,2,3]; //把数组的值分别赋给下面的变量;(解构)
console.log(a);//a的值为1
console.log(b);//b的值为2
console.log(c);//c的值为3
var { a,b,c} = {"a":1,"b":2,"c":3};(对象解构)
console.log(a);//结果:a的值为1
console.log(b);//结果:b的值为2
console.log(c);//结果:c的值为3
var [a,b,c,d,e,f] = "我就是前端君";(字符串解构)
console.log(a);//我
console.log(b);//就
console.log(c);//是
交换变量的值
var x = 1;
var y = 2;
[x,y] = [y,x];
提取函数返回的多个值
function demo(){
return {"name":"张三","age":21}
}
var {name,age} = demo();
console.log(name);//结果:张三
console.log(age);//结果:21

const声明值不能被改变的常量

字符串的扩展

ES5对字符串对象提供了CharAt方法,返回字符串给定位置的字符。但是该方法不能识别码点大于0xFFFF的字符。于是在ES7中提供了一个at方法,可以识别Unicode编号大于0xFFFF的字符。

includes(),startsWith(),endsWith()方法。JS中只有indexOf方法可以用来确定一个字符串是否包含在另一个字符串中,ES6又提供了三种方法:

includes():返回布尔值,表示是否找到了参数字符串;

startsWith():返回布尔值,表示参数字符串是否在源字符串的头部;

endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部;

repeat(),repeat方法返回一个新字符串,表示将原字符串重复n次。

padStart(),padEnd():ES7推出了字符串补全长度的功能。如果某个字符串长度未达指定长度,会在头部或尾部补全。padStart用于头部补全,padEnd用于尾部补全。如果原字符串的长度大于或等于指定的最小长度,则返回原字符串。例如:

'x'.padStart(5, 'ab') //'ababx'
'x'.padStart(4, 'ab') //'abax'

'x'.padEnd(5, 'ab') //'xabab'
'x'.padEnd(4, 'ab') //'xaba'

'xxx'.padStart(2, 'ab') //'xxx'

ES6为字符串String带来哪些好玩的特性?
字符串实现拼接
let name = "Jacky";
let occupation = "doctor";
//传统字符串拼接
let str = "He is " name ",he is a " occupation;
//模板字符串拼接
let str = He is ${name},he is a ${occupation};
${ }中可以是运算表达式
var str = the result is ${a b};
${ }中可以是对象的属性
var str = the result is ${obj.a obj.b};
${ }中可以是函数的调用
var str = the result is ${ fn() };
repeat( )函数:将目标字符串重复N次,返回一个新的字符串,不影响目标字符串。
includes( )函数:判断字符串中是否含有指定的子字符串,返回true表示含有和false表示未含有。第二个参数选填,表示开始搜索的位置。
startsWith( )函数:判断指定的子字符串是否出现在目标字符串的开头位置,第二个参数选填,表示开始搜索的位置。
endsWith( )函数:判断子字符串是否出现在目标字符串的尾部位置,第二个参数选填,表示针对前N个字符。
ES6给我们提供的codePointAt( )函数,就可以处理这种4个字节的字符
var str = "

本文由澳门新萄京发布于服务器,转载请注明出处:ES6新特征数字,关于ES6扩展属性

上一篇:澳门新萄京:JS数据类型转换,数字转换研究总结 下一篇:没有了
猜你喜欢
热门排行
精彩图文