JavaScript之ES6常用语法(一)

我的未来我决定 提交于 2021-01-19 00:10:43

let a=1;  let声明的变量只在块作用域({}包含的)内有效,在作用域内不可重复定义。es6强制开启严格模式(es5中’use stric’开启严格模式),严格模式下变量未声明不能使用。

const PI=3.1415;  声明常量,必须在声明时赋值且不可重复。声明对象const k ={a:1},由于对象是引用类型(指针),其内容可变(但地址不可变),类似的还有数组。

 

Symbol:  es6新增数据类型,产生一个唯一的不可变的属性名(即key)。

创建局部Symbol,每次创建的Symbol都是不同的

var s = Symbol(‘isMoving’); d[s] = true; var q = Symbol(‘isMoving’); s===q;//false

创建全局Symbol,当描述符相同时,相等。

var s = Symbol.for(‘isMoving’); d[s] = true; var q = Symbol.for(‘isMoving’); s===q;//true

使用let of 和for in访问不到Symbol属性

使用Object.getOwnPropertySymbols()访问Symbol属性

使用Reflect.ownKeys(obj)访问所有属性

 

解构赋值(数组、对象、字符串、数值、函数、布尔值)

数组:[a,b] = [1,2];  [a,b,...rest] = [1,2,3,4,5]

用于变量交换[a,b] = [b,a];和赋值

function f(){

              return [1,2,3,4,5];

       }

[a,b] = f();//1,2  [a,,,b] = f(); //1,4,只取返回数组的第1个和第4个元素。

[a,,...b] = f();//1,[3,4,5]

对象:({a,b} = {a:1,b:2})

{ let o = {a:11,b:22}; let {a,b} = o;}

 

正则扩展

Es6新增修饰符u y

u 修饰符,含义为 "Unicode模式",用来正确处理大于 \uFFFF 的Unicode字符。也就是说,会正确处理大于2个字节的 UTF-16 编码。点不能匹配四个字节。2个字节记为1个长度。

ES6 新增了使用大括号u{}表示Unicode字符,这种表示法在正则表达式中必须加上 u 修饰符,才能识别当中的大括号,否则会被解读为量词。

y 修饰符,也叫“粘连”修饰符,作用与 g 修饰符类似,也是全局匹配,后一次匹配都从上一次匹配(lastIndex)成功的下一个位置开始。不同之处在于,g 修饰符只要剩余位置中存在匹配就可,而 y 修饰符确保匹配必须从剩余的第一个位置开始,这也就是“粘连”的含义。

 

字符串扩展

{
    let str = '\u{20bb7}abc';//𠮷2个字节
    for(let i = 0;i<str.length;i++){
        console.log(str[i]);//es5不能正确输出
    }
    for(let code of str){
        console.log('es6',code);//正确
    }
}

 

数值扩展

{
    console.log(0b111110111);//0b(0B)二进制,503
    console.log(0o767);//0o八进制,503
}

Number.isFinite()判断数字是否有限;Number.isInteger()判断是否为整数;Math.trunc()取整;Math.sign() 判断正负符号,参数必须是数字,不是数字会进行强制转换;Math.cbrt(),取立方根。

 

数组扩展

Array.of(3,4,7,9,11)创建一个数组;Array.from()将一个类数组对象转换为数组;arr.fill(arg,i,j)对数组元素arr[i]~arr[j]用arg进行填充;可用let..of遍历数组索引和元素。

{
    //fill()
    console.log('fill-7',[1,'a',undefined].fill(7));//[7,7,7]
    console.log('fill',['a','b','c'].fill(7,1,3));//['a',7,7],arr[1]-arr[3]用7替换
}

{
    //let of 遍历
    for(let index of ['a','b','c'].keys()){
        console.log('keys',index);//0 1 2 索引
    }
    for (let value of ['a','b','c'].values()){
        console.log('values',value);//a b c 值
    }
    let s = ['a','b','c'];
    for (let [index,value] of s.entries()){
        console.log('values',index,value);//a b c
    }
}

 

函数扩展

解决参数默认值问题,默认值必须放在参数最后

{
    let x='test';
    function test2(x,y=x){
        console.log('作用域',x,y);
    }
    test2('kill');//kill kill
}

箭头函数,需要注意,箭头函数里的this指针指向函数定义时所在的对象,而不是调用函数的对象。即使调用函数的this指向window对象。

{
    //箭头函数,函数参数=>函数体
    let arrow = v => v*2;
    let arrow2 = () =>11;
    console.log(arrow(3));//6
    console.log(arrow2());//11
}

 

对象扩展

在ES6中可以直接使用变量创建对象,该对象含有一个以该变量的标识相同的属性(字符串),属性值为该变量的值。

let o = 1;
    let k = 2;
    let es5 = {
        o:o,
        k:k
    }
    let es6 = {
        o,k
    }

对象的方法可简洁表示

let es5_method = {
        hello:function(){
            console.log('hello world');
        }
    }
    let es6_method = {
        hello(){
            console.log('hello world');
        }
    }
    es

属性表达式

let a = 'b';
    let es5_obj = {
        a:'c',
        b:'c'
    };
    let es6_obj = {
        [a]:'c'
    };

Object.is()判断是否相同

console.log('字符串',Object.is('abc','abc'),'abc'==='abc');//true true
    console.log('数组',Object.is([],[]),[] === []);//false false,数组是引用类型
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!