• 初识ES6


    一、cmd创建项目

    1、cmd创建新文件夹:mkdir es6(新文件夹名)
    2、进入某文件夹:cd es6(文件夹名)
    3、查看存在哪些文件:ls
    4、cmd返回上一级目录:cd ..
    5、cmd返回某个文件夹:cd ../文件名/

    二、ES6语法

    1、let和const

    (1)块作用域(用花括号{}包括的)
    (2)let只在块作用域内有效,块作用域外访问就会报ReferenceError(引用错误)
    (3)-->为什么是引用错误而不是undefind(es6会强制开启严格模式,变量未声明就会报引用错误)
    (4)变量不能重复声明
    (5)const声明的常量不能修改并且声明时必须要赋值
    (6)const声明一个对象时,只是保证常量名指向的地址不变,并不保证该地址的数据不变,也就是说,将对象常量指向另一个地址会报错,但对象本身是可变的,可以为其添加,修改属性。

    2、解构赋值
    分类:
    (1)数组解构赋值:
    (2)对象解构赋值:
    (3)字符串解构赋值:
    (4)布尔值解构赋值:
    (5)函数参数解构赋值:
    (6)数值解构赋值:
    3、正则扩展
    (1)/g和/y修饰符:
    共同点:都是全局匹配
    不同点:g修饰符只要剩余位置中存在匹配即可,而y修饰符必须从剩余的第一个位置开始匹配

    (2)i修饰符:不区分大小写的匹配搜索

    (4)u修饰符(unicode)
    只有在使用u修饰符的情况下,Unicode表达式当中的大括号才会被正确解读,否则会被解读为量词。
    注意:如果字符串中含有大于两个字节的,必须加上u修饰符才能正确识别

    (5)flags属性:
    regex.flags ES6的flags属性,返回正则表达式的修饰符
    4、字符串扩展
    (1)codePointAt:
    (2)fromCodePoint:
    (3)遍历器:let .. of..{}
    (4)判断字符串是否包含某字符:
    let str = 'string';
    console.log('include',str.includes('s'));
    (5)一个字符串是否以某个字符开始或者结束
    startsWith:str.startsWith('s')
    endsWith:str.endsWith('s')
    (6)重复:str.repeat(2)
    (7)模板字符串:`i am ${name} ${info}`
    (8)补白(es7): padstart/padend第一个参数表示字符串最小长度,第二个参数表示替补字符串
    padStart:console.log('1'.padStart(2,'0'));可用于时间显示小于两位数时自动补零
    padEnd: console.log('1'.padEnd(2,'0'));//向后补零
    (9)raw转义:若使用String.raw 作为模板字符串的前缀,则模板字符串可以是原始(raw)的。反斜线也不再是特殊字符, 也不会被解释成换行符

    5、数值扩展
    (1)二进制(0b...)和八进制(0o...)
    (2)判断某个数值是否有尽:Number.isFinite(num)
    (3)判断是否为数字:Number.isNaN(num)
    (4)判断是否为整数:Number.isInteger(num)
    (5)判断一个数是否在-2的53次方和2的53次方之间(不包含端点):Number.isSafeInteger(num)
    (6)判断带小数的整数部分并返回:Math.trunc(num)
    (7)判断一个数是正数/负数/零:Math.sign(Num)
    (8)立方根:Math.cbrt(num)

    6、数组扩展
    (1)Array.of():返回参数值组成的数组。如果没有参数,就返回一个空数组。
    (2)Array.from():
    1、用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象
    2、映射map:(包括ES6新增的数据结构Set和Map)
    例子:console.log(Array.from([1,2,3],function(item){return item*2;}));//2,4,6
    (3)填充数组fill():
    例:console.log('fill',[1,'a',undefined].fill(7));//[7,7,7]
    例:console.log('fill,pos',['a','b','c'].fill(7,1,3));//["a", 7, 7] (第一个参数为替换内容,第二个是下标,第三个是结束位置)
    (4)遍历:entires(),keys()和value()
    ·//keys()返回的是数组的下标
    for(let index of ['d','g','e'].keys()){
    console.log('keys',index);
    }
    ·//values()返回的是数组的值
    for(let index of ['d','g','e'].values()){
    console.log('values',index);
    }
    ·//entries()返回的是数组的下标,值
    for(let [index,value] of ['d','g','e'].entries()){
    console.log('entries',index,value);
    }
    (5)从当前数组的某个位置上的元素复制到另一个数组的其他位置上:
    console.log([1,2,3,4,6,8].copyWithin(0,2,4))//从哪个位置开始替换,从哪个位置截取数据,从哪个位置截止(不包含截止位置)
    (6)查找find/findindex
    console.log([1,4,0,9,2].find(function(item){return item>3}))//只会查找符合条件的第一个
    console.log([1,4,0,9,2].findIndex(function(item){return item>3}))//1 只会查找符合条件的第一个index
    (7)数组是否包含某元素:console.log('number',[0,1,2,NaN].includes(NaN));//true


    7、函数扩展:
    (1)参数默认值:function test(x,y = 'world'){}
    (2)rest参数:
    function test3(...arg){
    for(let v of arg){
    console.log('rest',v);//在不确定有多少参数时,将传入的参数转化成数组
    }
    }
    test3(1,2,34,'d');//1,2,34,'d'
    (3)扩展运算符:
    console.log(...[1,2,4]);//1,2,4
    console.log('a',...[1,2,4]);//a,1,2,4
    (4)箭头函数
    // 函数名 参数 返回值
    let arrow = v => v+2;
    console.log(arrow(1))
    //无参数
    let arrow2 = ()=> 5;
    console.log(arrow2())
    (5)//尾调用(某个函数的最后一步是调用另一个函数)
    {
    function tail(x){
    console.log('tail',x)
    }
    function f(x){
    return tail(x)
    }
    f(123);
    }

    8、对象扩展
    (1)let es6_method = {
    hello(){
    console.log('hello2')
    }
    }
    (2)属性表达式://属性表达式
    {
    //es5
    let a = 'b';
    let es5_obj = {
    a:'c',
    b:'c'
    }

    //es6
    let es6_obj = {
    [a]:'c'
    }
    console.log(es5_obj,es6_obj)
    }
    (3)新增API

  • 相关阅读:
    高仿富途牛牛-组件化(三)-界面美化
    高仿富途牛牛-组件化(二)-磁力吸附
    高仿富途牛牛-组件化(一)-支持页签拖拽、增删、小工具
    Cef3 学习资料
    QCustomplot使用分享(八) 绘制图表-加载cvs文件
    Electron桌面应用:环境搭建
    Qt疑难问题-模态窗口父类被析构
    Qt线程实现分析-moveToThread vs 继承
    基础连接已经关闭: 未能为 SSL/TLS 安全通道建立信任关系。
    asp.net中的ListBox控件添加双击事件
  • 原文地址:https://www.cnblogs.com/pfyblog/p/7006962.html
Copyright © 2020-2023  润新知