es6总结

字符串的扩展

  • string.codePointAt 正确识别4个字节的字符,
      判断是否为4字节字符
      for of 循环正确输出utf-16的字符
      string.fromCodePoint : 与上面相反
      at方法正确识别大于\uffff的字符 (未实现........)
    
  • 三种查询字符串

    startWith()
    endWith()
    includes()

  • 其他
    repeat()
    padStart()
    padEnd()
    
    //技巧:字符串格式
    '12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
    '09-12'.padStart(10'YYYY-MM-DD') // "YYYY-09-1
    

${} 字符串模板 可以js表达式 ,嵌套。

  • 模板编译

    标签模板 fun`参数 加 ${}`
    string.raw  原生字符串  将所有的/ 正确输出就是再加一个/
    
  • string 对象的 正则方法

    replace
    match
    split
    search
    转移到RegExp 实例中
    

正则的扩展

  • 添加 u 修饰符 判断 unicode模式

  • \S 预定义模式

    写出正确判断字符个数的函数 判断正则为 /[/\s\S/]/ug
    . 点字符  不能识别大于 \uffff 的字符, 加上u修饰符解决
    
  • i 修饰符

  • y修饰符 粘连 类似 g修饰符

    sticky 判断是否用了 y 修饰符
    flags 返回所有修饰符
    es5 先行断言 先行否定断言, (提案后行断言 后行否定断言)
    

进制的扩展

0bxxx 二进制
0oxxx 八进制
用Number(0bxxx)转化为十进制
Number.isFinite
Number.isNaN
对非数值一律false  (es5 非数值先转换为数值 在判断)
parseInt 和 parerFloat 移植到Number上,不是window上
Number.isInteger 判断是不是整数 3.0 是整数
Number.EPSILON 极小的常数
Number.isFafeInteger  在+—2得53次方间  不含端点
Math.trunc 除去小数点后面的数
Math.sing()判断正负数
Math.cbrt() 立方根
Math.clz() 32位无符号整数形式
Math.imul() 32位带符号整数型 相乘的结果
Math.fround() 返回一个带精度的浮点数
Math.hypot 返回所有参数的平方和的平方根
a**b  就是 a的b次方
b **= 3  等同于 b= b*b*b

数组的扩展

Array.from()  他不改变原数组
将 类数组(带有length属性) 和 node合集 和 interable的对象 ( 包括set 和 map ) 字符串也能
第二个参数 处理 类数组的方式

Array.from(arr,(x)=>x*x)
等同于
Array.from(arr).map(x => x*x)

可以取出每个节点的内容 形成数组输出
Array.from 可以正确处理大于\uffff的字符,可以让他输出字符串的个数

const len = str =>{
    return Array.from(str).length
}
Array.of()  将参数转化为正确的数组,不会有重载

Array.copyinWith 将一部分复制,会改变原数组

例如 [1,2,3,4,5].copyinWith(1,2,4) 复制位置1, 复制内容 位置2到位置4(不包括位置4) 结果 [1,3,4,4,5]
  • Array 空位处理
ES5对空位的处理,已经很不一致了,大多数情况下会忽略空位。
forEach(), filter(), every() 和some()都会跳过空位。
map()会跳过空位,但会保留这个值
join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符

    // forEach方法
         [,'a'].forEach((x,i) => console.log(i)); // 1
    // filter方法
           ['a',,'b'].filter(x => true) // ['a','b']
    // every方法
          [,'a'].every(x => x==='a') // true
    // some方法
          [,'a'].some(x => x !== 'a') // false
    // map方法
          [,'a'].map(x => 1) // [,1]
    // join方法
           [,'a',undefined,null].join('#') // "#a##
    //toString方法
           [,'a',undefined,null].toString() // ",a,

for of 遍历[,,] 输出两个空位
  • Array.includes 类似 String.includes
另外,Map和Set数据结构有一个has方法,需要注意与includes区分。Map结构的has方法,是用来查找键名的,
比如Map.prototype.has(key)、WeakMap.prototype.has(key)、Reflect.has(target, propertyKey)。
Set结构的has方法,是用来查找值的,比如Set.prototype.has(value)、WeakSet.prototype.has(value

entries()  遍历全部
keys()  遍历键
values()  遍历值
  • fill 填充数组
    例如['a', 'b', 'c'].fill(7)// [7, 7,]
    ['a', 'b', 'c'].fill(7, 1, 2)// ['a', 7, 'c]
  • Array.find(fn(value,index,arr))(未找到返回undefined) 和 Array.findIndex(value,index,arr)(未找到返回-1)
    找到匹配的然后返回数值或位置
    可以找到 NaN
    indexof 不能找到 NaN

函数的扩展

    函数的参数定义默认值后 .length 会失真, length属性只表示预期要加入参数

    参数的暂时性死区

    参数可以是函数

    参数里面的函数,在执行的时候的作用域怎么用

        var x = 1 ;

        function foo(x,y=function(){x=2}) {
             x = 3;
            console.log("x="+x);
            y();
            console.log("x="+x);
        }
        foo()

        console.log("x="+x);

    function foo(optional = undefined) {···} 表明参数可以省略
    function foo(optional = throwNoneParamError()) {···} 表明参数可以省略
  • rest 其余的参数
    function( ...rest ) { }

    参数拍序

      const sortNumbers = (...numbers) =>number.sort();
  • ... 扩展运算符
es5  Array.prototype.push.apply(arr)

arr1.push(...arr)

作用

-  合并数组

-  与解构赋值结合

例如 es5 a = list[0] ,rest = list.splice(1)

         es6 [a,...rest] = list

        -函数内传入数组,加上...就成了一个个参数

        -将字符串转化为数组,(正确识别32位utf-16的字符)

            凡是涉及到操作32位Unicode字符的函数,都有这个问题。因此,最好都用扩展运算符改写。

            let str = 'x\uD83D\uDE80y';
            str.split('').reverse().join('')//在特殊字符输出错误
            [...str].reverse().join('')//正确

-   实现了iterator接口的对象

  • name 属性,

    es 在匿名函数中返回赋值的名字
    
  • 箭头函数 => 必须加入var const let

    - 没有 this 对象
    - 没有arguments rest来代替
    - 不能当构造函数 即不能new
    - 不可以field命令  因此不能用作Generator函数
  • 函数绑定(右边是一个函数)
    代替call,apply,bind调用 es7(但已经实现)
    foo::bar 等价于 bar.bind(foo)
  • 尾调用优化
    尾调用就是最后一步return func()

    阶乘递归,会吃大量的内存,利用尾调用则不会,(666)

    factorial=(n,total=1)=>{ 
        if(n===1){
            return total
        }
        return factorial(n-1,n*total)
    }

    正常模式下无效,因为有arguments.callee arguments.caller
        采用蹦床函数
        自定义尾调用函数()

   function tco(f) {
        var value,
            active=false,
            accumulated=[];

        return function(){
            accumulated.push(arguments);
            if(!active){
                active = true;
                while(accumulated.length){
                    var b =accumulated.shift();
                    value = f.apply(this,b);
                    console.log(value)
                }
                active = false;
                return value;
            }
        }
    }

    真正的尾调用优化。。。。。。。

       function tco(f) {
            var value,
                active=false,
                accumulated=[];

            return function(){
                accumulated.push(arguments);
                if(!active){
                    active = true;
                    while(accumulated.length){
                        var b =accumulated.shift();
                        value = f.apply(this,b);
                        console.log(value)
                    }
                    active = false;
                    return value;
                }
            }
        }
        var sum = tco(function (x, y) {
            if(y>0){
                return sum(x+1,y-1)
            }
            else{
                return x
            }
        })
        console.log("sum="+sum(1,3));

es7提案参数尾部可以有逗号

iterator

  • 接口部署在Symbol.iterator

  • 数组,类数组 set map 具备接口

  • foreach
    缺点;不能停止

  • for in
    遍历对象原型属性也可能遍历
    顺序不一定

  • 遍历器对象的return() throw() 在Generator 使用

  • iterator 作用
   -解构赋值
   -扩展运算符
   -yield
   -for of ,Map(),Set(),Promise.all(),Promise.race()
  • iterator 处理对象方法
    -用keys方法处理成数组
        for (var key of Object.keys(someObject)) {
            console.log(key + ": " + someObject[key])
        }

    -用gengerator方式

        function* entries(obj) {
            for (let key of Object.keys(obj)) {
                 yield [key, obj[key]];
            }
        }
        for (let [key, value] of entries(obj)) {
            console.log(key, "->", value)
        }

set结构 (内部数组不会重复)

    add方法添加数据
    set.prototype.size 个数
    clear
    delete
    has

    Array将set转为数组

遍历
    keys()
    values()
    entries()
    foreach()

    并集 let union = new Set([...a,...b])
    交集 let union = new Set([[...a].filter(x=>b.has(x))])
    差集 let union = new Set([[...a].filter(x=>!b.has(x))])

weakSet

    内部只能对象

    WeakSet.prototype.add(value)
    WeakSet.prototype.delete(value)
    WeakSet.prototype.has(value)

    无size 无法遍历 弱引用 随时消失

    作用: 存储dom对象

Map 值对值

    map.set(key,value)
    size
    map.get(key)

    has
    delete
    clear

    遍历方法如set 顺序就是插入顺序

weakMap 放入节点,节点消失,自动销毁;


let map0 = new Map()
    .set(1,'a')
    .set(2,'b')
    .set(3,'c')

let map1 = new Map(
    [...map0].filter(([k,v])=>k<3)
)
console.log(map1);

symbol对象

var s = Symbol('斗鱼')

a[s] 不可以 a.s

在对象内部 {
          [s]:"守望先锋"
         }

Reflect.ownKeys(obj)找到所有属性,无论是Symbol 还是 常规属性

Symbol查找同一个

单例模式

    利用Symbol唯一性

Symbol.hasInstance
Symbol.isConcatSpreadable
Symbol.species
Symbol.match
Symbol.replace
Symbol.search
Symbol.split
Symbol.iterator
Symbol.toPrimitive
Symbol.toStringTag

对象的扩展

    var a = '1'
    var b = 'b'
    var c = 'c'

    var d ={a,b,c}

    d["dd"+"1"]="分开属性名"
  • Object is 判断值是否相等

  • Object.assign()

    不拷贝null,undefined
    浅拷贝

    作用

        为对象添加属性
        为对象添加方法
        克隆对象
        合拼多个对象
        默认值
  • 属性的遍历
    for...in
    Object.keys
    Object.getOwnPropertyNames(obj)
    Object.getOwnPropertySymbols(obj)
    Reflect.ownKeys(obj)
Object.setPrototypeOf(obj,prototype ) 设置原型
Object.getPrototypeOf(obj) 获取原型
getOwnPropertyDescriptors()获取描述对象
  • 扩展运算符 ...rest ()

尾调用优化

   function tco(f) {
        var value,
            active=false,
            accumulated=[];

        return function(){
            accumulated.push(arguments);
            if(!active){
                active = true;
                while(accumulated.length){
                    var b =accumulated.shift();
                    value = f.apply(this,b);
                    console.log(value)
                }
                active = false;
                return value;
            }
        }
    }
    var sum = tco(function (x, y) {
        if(y>0){
            return sum(x+1,y-1)
        }
        else{
            return x
        }
    })
    console.log("sum="+sum(1,3));
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容

  • 三,字符串扩展 3.1 Unicode表示法 ES6 做出了改进,只要将码点放入大括号,就能正确解读该字符。有了这...
    eastbaby阅读 1,510评论 0 8
  • ES6全面总结 ES6新特性概览 本文基于lukehoban/es6features,同时参考了大量博客资料,具体...
    随风而去随遇而安阅读 349评论 0 1
  • 参考基础教程的整理,方便记忆 一、Object对象 (O大写) 所有其他对象都继承自这个对象。Object本身也是...
    Viaphlyn阅读 2,302评论 0 0
  • 你看流水 我看云头 满树梨花猜不透 河水涓涓 润色季节 仿佛有鱼力争上游 你捻一把嫩草撒下去 一切都被带走 云彩有...
    子非盐阅读 137评论 0 1
  • 百度地图的POI搜索大家都知道,今天主要是想分享一下在POI搜索的基础上定义自己的POI搜索方法。毕竟我们自己定义...
    石榴的咩唁阅读 1,983评论 0 9