ES6常用语法总结-阿里云开发者社区

开发者社区> 小周sir> 正文

ES6常用语法总结

简介: ES6常用语法总结
+关注继续查看

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。也就是说,ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了。今天就来总结一下在工作中es6常用的属性方法

1.let

ES6新增了let命令,用来生命变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

for (let i = 0; i < 10; i++) {

}

console.log(i) //ReferenceError: i is not defined

for(var i=0;i<10;i++){

}
console.log(i) //10

for(var i=0;i<10;i++){

}
console.log(i) //10
 上面代码中,计数器i只在for循环体内有效,在循环体外引用就会报错。let具有块级作用域的。var不存在块级作用域问题,具有全局变量提示的问题存在,

2.const

const声明一个只读的常量,一旦声明,常量的值就不能改变。

const a = 10;

a = 20;

console.log(a) //TypeError: Assignment to constant variable.
上面代码表明改变常量的值会报错。
const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。

const a;

console.log(a)

上面代码表示,对于const来说,只声明不赋值,就会报错。

let与const

 1.都不能重复声明

 2.都存在块级作用域问题

   3.只在声明所在的块级作用域内有效。

3.模板字符串
模板字符串就是一种字符串的新的表现形式
(1)基本用法
  
let s1 = hello
let s2 = ' hello '
(2)字符串和变量拼接

let s3 =" a " + s1 + " b " + s2;
let s4 = a ${s1} b ${s2};

(3)字符串换行

var box =`

        <p>
          <span>123</span>
        </p>
        <p>${a1}</p>
     </div>`;

模板字符串的出现,极大的改变传统字符串的拼接方法,减少代码出现错误的几率。提高开发效率

4.解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构

  4.1:对象结构赋值

var obj ={ name:"abc",age:18 };

//用解构赋值的方式获取name、age

let { name } = obj; //创建了一个变量name,值=obj.name
console.log(name);  //"abc"

let { age } =obj;
console.log(age);  //18

  4.1:函数参数结构赋值

function f1(obj){

    console.log(obj.age);
    console.log(obj.height)
}
//等价于
function f1({ age,height }){
    console.log(age);
    console.log(height)
}

f1({age:5,height:180})

5.rest参数

ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function fn(){

    //arguments是函数内部的一个局部变量,
    //arguments.length表示函数的实参的个数
    console.log(arguments.length);

    for(var i =0 ; i<arguments.length; i++){
        console.log(arguments[i]);
    }

}
fn(1,3,5)       //3
// fn("a","b","c","d","e") //5

es6箭头函数内部不能使用arguments,为了弥补这个问题,rest参数应孕而生

//...args就是rest参数

//-->产生了一个变量,这个变量是一个数组,数组里面包含了这个函数调用时传递的所有实参
function q(...args){
    //验证args是不是数组?
    console.log(args instanceof Array);//true
    console.log(Object.prototype.toString.call(args));//"[object Array]"
    console.log(Array.isArray(args));   //true es5中的新方法

    console.log(args);
}
q(1,3,5);
q(2,3,4,5,6,7,8);

6.箭头函数

ES6 允许使用“箭头”(=>)定义函数。

场景:用于替换匿名函数
基本用法

//匿名函数

div.onclick=function(){
    console.log("你好")
}
//箭头函数
div.onclick=()=>{
    console.log("你好")
}

有一个参数的箭头函数
var fn=(a)=>{

    console.log("abc");
}
//等价于:
var fn=a=>{
    console.log("abc");
}

有2个及更多参数的箭头函数
var f=(a,b,c)=>{

    console.log("abc")
}

var p={

    age:18,
    //es6中对象方法的箭头函数表示形式
    run:()=>{
        setTimeout(()=>{
            //this:window
            console.log(this);//this是window
        },100)
    },
    travel:function(){
        //this:p
        setTimeout(()=>{
            console.log(this);//this是p
        },100)
    },
    //推荐使用的方式☆☆☆:es6中对象方法的简写形式
    say(){
        console.log("say方法中的this:",this);
        setTimeout(()=>{
            console.log("say内部的延迟函数:",this);//this是p
        },100)
    },
}

p.run();

p.travel();

p.say();

箭头函数和普通匿名函数有哪些不同?
  1.函数体内的this对象,就是定义所在的对象,而不是使用所在的对象
  2.不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误
  3.不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
  4.不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
    5.generator函数现在经常用async替代

7.对象的扩展
扩展运算符(spread)是三个点(...)。用于取出参数对象的所有可遍历属性,拷贝到当前对象中
  7.1Object.assign:实现拷贝继承
  
//Object.assign 就是进行对象的浅拷贝

var source={ age:18,height:170,className:"3年2班" }

//克隆一个新对象出来
var newObj=Object.assign({},source);
console.log(newObj);

var newObj2={};
Object.assign(newObj2,source);
console.log(newObj2);

上面可以实现浅拷贝,但是代码有点多,es6这个对象扩展,牛掰的一个方法,解决浅拷贝的问题,

var car={ brand:"BMW",price:"368000",length:"3米" }

//克隆一个跟car完全一样的对象出来:
var car2={ ...car }  
console.log(car2); 

//新车子,跟car的长度不同,其他相同
var car3={ ...car,length:"4米" }  
console.log(car3);

var car4={ ...car,type:"SUV"}
console.log(car4);

var car5={...car4,price:"69800",brand:"BYD"};
console.log(car5);

对象扩展,简单方便,代码更加简介,更少的代码实现更强大的功能。

 8.Promise

Promise是异步编程一种解决方案(回调地狱)

在没有promise都是这样写的回调,一层一层的写,
$.get("/getUser",function(res){

    $.get("/getUserDetail",function(){
        $.get("/getCart",function(){
            $.get("/getBooks",function(){
                //...
            })
        })
    })
})

promise的基本用法

var promise=new Promise((resolve,reject)=>{

    //b 把需要执行的异步操作放在这里
    $.get("/getUser",res=>{
        //获取数据的异步操作已经执行完毕了,等待下一步的执行,通过执行resolve函数,告诉外界你可以执行下一步操作了
        //c、
        resolve(res)
        //而执行的下一步操作,其实就是写在then的回调函数中的
    })
})
//a、
promise.then(res=>{
    //d、执行后续的操作
    console.log(res);
})

promise实现多层回调

new Promise((resolve,reject)=>{

    $.get("/getUser",res=>{
        resolve(res)
    })
}).then(res=>{
    //用户基本信息
    return new Promise(resolve=>{
        $.get("/getUserDetail",res=>{
            resolve(res)
        })
    })
}).then(res=>{
    //用户详情
    return new Promise(resolve=>{
        $.get("/getCart",res=>{
            resolve(res)
        })
    })
}).then(res=>{
    //购物车信息
})

promise实现错误处理

new Promise((resolve,reject)=>{

    $.ajax({
        url:"/getUser",
        type:"GET",
        success:res=>{
            resolve(res);
        },
        error:res=>{
            reject(res)
        }
    })
}).then(resSuccess=>{
    //成功的返回值
},resError=>{
    //失败的返回值
})

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6944 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4505 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
5468 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5731 0
阿里云服务器远程登录用户名和密码的查询方法
阿里云服务器远程连接登录用户名和密码在哪查看?阿里云服务器默认密码是什么?云服务器系统不同默认用户名不同
444 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3237 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
1133 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;
51
文章
41
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载