ES6

作者: 豆奶不小心 | 来源:发表于2017-07-31 16:10 被阅读0次

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

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

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

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

    解构赋值
    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

    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 = "𠮷";
    str.codePointAt(); //结果:134071
    String.fromCodePoint( )函数:函数的参数是一个字符对应的码点,返回的结果就是对应的字符,哪怕这个字符是一个4字节的字符,也能正确实现
    String.fromCodePoint(134071); //结果:"𠮷"
    String.raw( );返回字符串最原始的样貌,即使字符串中含有转义符,它都视而不见,直接输出。

    ES6为数值做了哪些扩展?
    在ES5中,我们存在几个全局函数 isNaN函数,isFinite函数,parseInt函数,parseFloat函数等,属于window对象下的一个方法。
    但是在ES6的标准中,isNaN方法被移植到了Number对象上,也就是原本属于全局对象window下的函数,现在属于Number对象上了,同样被处理的函数还有isFinite函数,parseInt函数,parseFloat函数。
    Number.isNaN函数:用于判断传入的是否是非数值
    Number下面的isNaN都懒得给字符串’abc’做类型转换,直接返回false。而ES5中的isNaN函数会对字符串’abc’进行类型转换后,发现它是一个NaN(非数值),才返回true。
    Number.isFinite函数:用来检查一个数值是否非无穷。同样要注意,当Number.isFinite函数返回false的时候,参数不一定就是一个有穷的数值类型,也有可能是一个非数值类型的参数。如:字符串’abc’。
    Number.isInteger函数:用来判断是否是整数。
    Number.EPSILON常量:定义一个极小的数值。
    Math.trunc函数:用于去除一个数的小数部分,返回整数部分。
    Math.sign函数:用来判断一个数到底是正数、负数、还是零。
    Math.cbrt函数:用于计算一个数的立方根。

    ES6为数组做了哪些扩展?
    Array.of(1,2,3,4,5); 函数作用:将一组值,转换成数组。
    Array.from(ele) instanceof Array; //结果:true,是数组
    Array.from函数其中一个用处就是将字符串转换成数组,还有个是克隆数组。看下面的案例:let str = 'hello';
    Array.from(str); //结果:["h", "e", "l", "l", "o"]
    find( );函数作用:找出数组中符合条件的第一个元素。倘若所有元素都不符合匿名函数的条件,find( )函数就会返回undefind。
    let arr = [1,2,3,4,5,6];
    arr.find(function(value){
    return value > 2;
    }); //结果:value=3
    findIndex( ) 函数作用:返回符合条件的第一个数组成员的位置。
    fill( )函数作用:用指定的值,填充到数组。
    let arr = [1,2,3];
    arr.fill(4); //结果:[4,4,4]
    arr.fill(4,1,3); //结果:[1,4,4]
    entries( )函数作用:对数组的键值对进行遍历,返回一个遍历器,可以用for..of对其进行遍历。
    for(let [i,v] of ['a', 'b'].entries())
    {
    console.log(i,v);
    }
    //0 "a"
    //1 "b"
    keys( )函数作用:对数组的索引键进行遍历,返回一个遍历器。
    for(let index of ['a', 'b'].keys())
    {
    console.log(index);
    }
    //0
    //1
    values( )作用:对数组的元素进行遍历,返回一个遍历器。
    for(let value of ['a', 'b'].values())
    {
    console.log(value);
    }
    //a
    //b
    数组推导:用简洁的写法,直接通过现有的数组生成新数组
    假如我们有一个数组,我在这个数组的基础上,每个元素乘以2,得到一个新数组。
    var arr1 = [1, 2, 3, 4];
    var arr2 = [for(i of arr1) i * 2];
    console.log(arr2);
    //结果: [ 2, 4, 6, 8 ]
    在数组推导中,for..of后面还可以加上if语句
    var array1 = [1, 2, 3, 4];
    var array2 = [for(i of array1) if(i>3) i];
    console.log(array2);
    //结果: [4]

    ES6为对象做了哪些扩展?
    ES6给我们带来了更简便的表示法,我们一起来对比一下:
    var name = "Zhangsan";
    var age = 12;
    //传统的属性写法
    var person = {
    "name":name,
    "age":age
    };
    console.log(person);
    //结果:{name: "Zhangsan", age: 12}
    //ES6的属性写法
    var person = {name,age};
    console.log(person);
    //结果:{name: "Zhangsan", age: 12}

    //传统的表示法
    var person = {
    say:function(){
    alert('这是传统的表示法');
    }
    };
    //ES6的表示法
    var person = {
    say(){
    alert('这是ES6的表示法');
    }
    };
    在表示法上除了这点改进以外,还有另外一个新特点:用字面量定义一个对象的时候,可以用表达式作为对象的属性名或者方法名。
    var f = "first";
    var n = "Name";
    var s = "say";
    var h = "Hello";
    var person = {
    [ f+n ] : "Zhang",
    s+h {
    return "你好吗?";
    }
    };
    console.log(person.firstName);
    //结果:Zhang
    console.log(person.sayHello());
    //结果:你好吗?
    Object.is()函数,它的作用也跟严格相等一样,
    var str = '12';
    var num = 12;
    var num2 = 12;
    Object.is(str,num);
    //结果:false
    Object.is(num2,num);
    //结果:true
    Object.assign()函数作用:将源对象的属性赋值到目标对象上。
    //这个充当目标对象
    let target = {"a":1};
    //这个充当源对象
    let origin = {"b":2,"c":3};
    Object.assign(target,origin);
    //打印target对象出来看一下
    console.log(target);
    //结果 {a: 1, b: 2, c: 3}
    巧妙利用Object.assign( )函数的功能,我们可以完成很多效果,比如:给对象添加属性和方法,克隆对象,合并多个对象,为对象的属性指定默认值。

    ES6为函数做了哪些扩展?
    设定默认值,有默认值的参数后面不能再跟不需默认值的参数了。
    function person(name = 'Zhangsan',age = 25){
    console.log(name,age);
    }
    person();//结果:Zhangsan 25
    person('Lisi',18);//结果:Lisi 18
    rest参数,这是一个新的概念,rest的中文意思是:剩下的部分。
    //求和函数,得到的结果赋值到result
    function sum(result,...values){
    //打印values看看是什么
    console.log(values);
    //结果:[1,2,3,4]
    //进行求和
    values.forEach(function (v,i) {
    //求和得到的结果存到result
    result += v;
    });
    //打印出求和的结果看看
    console.log(result);
    //结果:10
    }
    //存储求和结果的变量res
    var res = 0;
    //调用sum函数
    sum(res,1,2,3,4);
    箭头函数,这又是一个新概念,ES6给我们介绍一种全新的定义函数的方式,就是用箭头符号(=>),故得名为箭头函数。
    var sum = function(a) {
    return a ;
    };
    //箭头函数写法
    var sum = a => a;
    / /箭头函数写法
    var sum = (a,b) => {return a+b}
    sum(1,2);//结果:3
    箭头函数中的this指向的是定义时的this,而不是执行时的this。

    JavaScript有了一种全新的数据类型:Symbol
    ES6设计出一个Symbol的初衷:解决对象的属性名冲突。
    let name = Symbol();
    let person = {
    [name]:"张三"
    };
    console.log(person[name]);
    //结果:张三
    console.log(person.name);
    //结果:undefined
    当symbol值作为对象的属性名的时候,不能用点运算符获取对应的值。
    当symbol类型的值作为属性名的时候,该属性是不会出现在for...in和for...of中的,也不会被Object.keys( )获取到。

    ES:给开发者提供了一个新特性:Proxy,就是代理的意思。
    待补充!

    for...of 一种用于遍历数据结构的方法。它可遍历的对象包括数组,对象,字符串,set和map结构等具有iterator 接口的数据结构。
    for(let i = 0;i<arr.length;i++){ }(代码不够简洁)
    arr.forEach(function (value,index) { });(无法中断停止整个循环)
    for(let i in arr){}如果用于数组的循环,那么就要注意了,上述代码中每次循环中得到的i是字符串类型,而不是预料中的数字类型,要想对它进行运算,那得先要进行类型转换,造成不方便。
    for(let value of arr){ }
    1.写法比for循环简洁很多;
    2.可以用break来终止整个循环,或者continute来跳出当前循环,继续后面的循环;
    3.结合keys( )获取到循环的索引,并且是数字类型,而不是字符串类型。
    for(let index of arr.keys()){
    console.log(index);
    }
    for...of 支持字符串的遍历。
    for...of支持类数组的遍历
    for...of支持set和map解构的遍历,考虑到set和map我们还没学习

    只要一个数据结构拥有一个叫Symbol.iterator方法的数据结构,就可以被for...of遍历,我们称之为:可遍历对象。

    ES6新增的 Set 和 WeakSet 是什么东西?
    Set是ES6给开发者带来的一种新的数据结构,它的值不会有重复项。
    var s = new Set([1,2,3]);
    console.log(s); //打印结果:Set {1, 2, 3}
    如果你不想用数组作为参数来传值初始化变量s,你还可以通过Set 结构提供的add方法来添加方法,也是没问题的。
    var s = new Set();
    //使用add方法添加成员
    s.add(1);
    s.add(2);
    s.add(3);
    console.log(s);
    //打印结果:Set {1, 2, 3}
    size属性:获取成员的个数。
    delete( )方法:用户删除Set结构中的指定值,删除成功返回:true,删除失败返回:fasle。
    clear( )方法:清除所有成员。
    has( )方法:判断set结构中是否含有指定的值。如果有,返回true;如果没有,返回fasle。
    keys( )方法:返回键名的遍历器。
    values( )方法:返回键值的遍历器。
    entries( )方法:键名+键值
    WeakSet 是给对象赋值

    相关文章

      网友评论

          本文标题:ES6

          本文链接:https://www.haomeiwen.com/subject/weczkxtx.html