ES6新特性

块级作用域let和const

let声明变量,const声明常量;都是块级作用域

//通常用var声明的变量,会有变量提升例如: 
!function(bool){
    if(bool){
        var test='test';
    }else{
        console.log(test);//undefined,说明test变量确实是被申明了,否者会打印test is not defined
    }
}(false)

!function(bool){
    if(bool){
        let test='test';
    }else{
        console.log(test)//is not defined ,说明test未被申明,
        //只存在if(bool){ let test='test';}作用域里面,可以理解为{}里面即是申明变量的作用域
    }
}(false)

//const申明常量,改变其值,会报错,例如:
const name='ouyang';
name='wei';// Assignment to constant variable.

var arr=[];
for(var i=0;i<10;i++){
    arr.push(
        function(){
            console.log(i);
        }
    )
}
arr.forEach(function(fun){
    fun();//10次10,只就是var申明i导致的,循环10,i的值一直在改变;
})

//如果用let来申明i,又会怎么样呢?
var arr=[];
for(let i=0;i<10;i++){
    arr.push(
        function(){
            console.log(i);
        }
    )
}
arr.forEach(function(fun){
    fun();//从0打印到9,这说明用let的变量的作用域,
    //只存在function(){console.log(i)};
})

//又或者用闭包来写
var arr=[];
for(var i=0;i<10;i++){
    arr.push(
        (function(args){
            return function(){
                console.log(args);
            }
        })(i)
    )
};
console.log(arr);
arr.forEach(function(fun){
    fun();
})

模板字符串

拼接字符串 用${}来划界

//${}字符串拼接
//es5
var name='ouyang';
console.log(name+'wei');//ouyangwei
//es6
console.log(`${name}wei`);//ouyangwei注意用``

反引号``

//es5用反斜来拼接多行字符
var text='hello \
ouyang';
console.log(text);//hello ouyang
//es6直接用反引号
var words=`hello 
world!`
console.log(words);//hello(换行)
//world!
// 1.includes:判断是否包含然后直接返回布尔值
let str = 'hahay'
console.log(str.includes('y')) // true
// 2.repeat: 获取字符串重复n次
let s = 'he'
console.log(s.repeat(3)) // 'hehehe'
 //如果你带入小数, Math.floor(num) 来处理

变量的解构赋值

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

\\数组解构赋值
let [a,b,c]=[1,2,3];
\\对象解构
let {foo,bar}={foo:"aaa",bar:"bbb"}
\\字符串解构
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

写法属于“模式匹配”,只有等号两边的模式相同,左边的变量就会被赋予相应的值,如果解构不成功,变量的值就等于undefined

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

不完全解构,即左边的变量,与右边的值个数不匹配,能匹配几个就是几个

let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

函数

默认值
//默认值
function fun(num){
    var num=num||20;
    console.log(num);
}
fun(0)//20因为0被当成false;
//es6的默认值问题
function fun1(num=20){
    var num=num;
    console.log(num);
}
fun1(0)//0
//与解构赋值默认值结合使用
function foo({x,y=5}){
  console.log(x,y);
}
foo({})//undefined 5
foo({x:1})// 1 5
foo({x:1,y:2})//1 2
foo()//typeError:Cannot red property 'x' of undefined
rest 参数

ES6引入rest参数(形式为:...变量名),用户获取函数的多余参数,rest参数搭配的变量是一个数组,改变量讲多余的参数放入数组中,可以替换arguments

function add(...values){
  let sum=0;
  for(var val of values){
    sum+=val;
  }
  return sum;
}
add(2,5,3)
name属性

函数name属性,返回该函数的函数名

 function foo(){}
foo.name//foo
箭头函数(=>)

箭头函数,例子:

var f=v => v
//等同于
var f=function(v){
  return v;
}
//多个参数或不需要参数的时候,使用园括号
var f = () => 5
//等同于
var f=function(){
  return 5;
}
var sum=(num1,num2) => num1+num2;
//等同于
var sum=function(num1,num2){
  return num1+num2;
}

如果要返回对象,必须在对象外面加上括号

let getTempItem = id => ({id:id,name:'temp'});
//等同于
let getTempItem=function(id){
  return {
    id:id,
    name:'temp'
  }
}

箭头函数this的指向问题,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象

function foo(){
    setTimeout(function(){
        console.log('id:',this.id);
    },1000);
}
var id=21;
foo.call({id:42});//id:21
//setTimeout全局函数,this指向全局变量
//如果换成箭头函数呢?
function fun(){
    setTimeout(()=>{
        console.log('id:',this.id);
    },1000);
}

fun.call({id:42});//id:42
//说明箭头函数this指向其定义的对象
对象表达式
const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};
promise对象

promise异步编程的一种解决方案,比传统的解决方案,回调函数和事件,更合理和强大。
所谓promise,简单来说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。promise是一个对象,从它可以获取异步操作的消息。promise提供统一的api,各种异步操作都可以用同样的方法进行处理。

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

推荐阅读更多精彩内容

  • let和const命令 var:声明变量,更多的是全局作用域,存在变量提升 let:声明变量,存在于块级作用域,不...
    zhangivon阅读 2,472评论 1 13
  • ECMAScript 6.0(以下简称ES6)是、JavaScript语音的下一代标准,已经在2015年6月正式发...
    Leisure_blogs阅读 491评论 1 2
  • 大家好,我是IT修真院成都分院第8期的学员,一枚正直纯洁善良的WEB前端程序员。今天给大家分享一下ES6新特性。 ...
    备用的昵称阅读 363评论 0 1
  • 首先感谢Carnia帮我指出ES6箭头函数中this指向的错误,此次主要更新箭头函数中this指向问题。 ECMA...
    范小饭_阅读 8,598评论 7 21
  • 2017年3月14日(星期二)下午,高一政治组全体教师结合学校转型发展的新形式,开展了一次深入的教学研讨会。...
    三木1阅读 489评论 0 1