ECMAScript6 实用笔记(更新中...)

1、ECMAScript6 实用笔记(更新中...)

一、简介

1、目前常用的版本是ECMAScript3.0，后来改了名字叫ECMAScript5

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现

2、ECMAScript6的特点：

  • ES6增添了许多必要的特性，例如模块和类，块级作用域，常量与变量

3、浏览器的支持程度

4、可以通过Babel转码器把ES6写的代码转成ES5的，就不用担心运行环境是否支持
5、chrome下使用ES6为保证可以正常使用大部分语法，需要使用严格模式，即在js开始部分加上'use strict'
6、在firefox下使用ES6为保证可以正常使用大部分语法，需要知道测试版本，即在script标签的type属性中加上“application/javascript;version=1.7”属性值

二、let

let 声明变量的关键字
1、在相同的作用域内，let不能重复声明一个变量（不同的作用域内除外）
2、let声明的变量不会被预解析
3、暂时性死区

'use strict'        //严格模式，即在js开始部分加上'use strict'
console.log(a);     //undefined let声明的变量不会被预解析
var a=12;
var a='kaivon';
console.log(a);

//console.log(b);       //报错    不能提前使用
let b=20;
//let b=30;         //报错 let不能重复声明一个变量（不同的作用域内除外）
console.log(b);

{
    let str='kaivon';
    console.log(str);
}

三、块级作用域

块级作用域批是的是一对大括号就是一个作用域
块级作用域可以直接写一对大括号，以后就不用写自执行函数了

{
    let a=12;
    function fn(){
        let a=20;
        console.log(a);
    }
    fn();
}

四、const 常量

const 声明一个常量，一旦声明后就不能修改了
1、如果声明后再去修改的话就会报错
2、只声明不赋值也会报错
3、只能先声明后使用，不会被提前解析
4、不能重复声明一个常量
注意：const声明的对象中的属性是可以修改的

'use strict'
            
var a=12;
a='kaivon';
console.log(a);

const str='kaivon';
//str=12;       //报错  声明后再去修改的话就会报错

console.log(str);

//const b;          //报错    只声明不赋值也会报错

//console.log(c);   //报错    只能先声明后使用，不会被提前解析
const c=20;
//const c='kaivon'; //报错    不能重复声明一个常量

//声明一个对象后，可以对它里面的属性进行修改
const obj={
    name:'kaivon'   
};

obj.name='陈学辉';
console.log(obj); //const声明的对象中的属性是可以修改的

五、数组解构赋值

解构赋值:

按照一定的模式，从数组或者对象中把数据拿出来，对变量进行赋值

数组解构赋值:

等号左边与右边必需都是数组，数组的解构赋值要一一对应。如果对应不上的话就是undefined

'use strict'
/*var a=1;  //传统声明变量
var b=2;*/

var [a,b,c]=[1,2,3];  //可以使用数组进行批量声明变量
console.log(a,b,c);     //1 2 3

let [x,,y,z]=[1,2,3];   //数组的解构赋值要一一对应。如果对应不上的话就是undefined
console.log(x,y,z);     //1 3 undefined 

 var [a,[b,c]]=[1,[2,3]];
 console.log(a,b,c);        //1 2 3  可以嵌套

 //可以用来调换两个值
 var n1=10;
 var n2=15;

 var [n1,n2]=[n2,n1];
 console.log(n1,n2);        //15 10


 //也可以用来取函数的返回值
 function fn(){
    return ['red','green','blue'];
 }
 var [d,e,f]=fn();

 console.log(e);        //green

六、对象解构赋值

解构赋值:

按照一定的模式，从数组或者对象中把数据拿出来，对变量进行赋值

对象解构赋值:

等号左边与右边必需都是对象，名字要一一对应，顺序不需要对应，对应不上的值结果是undefined

'use strict'
            
var obj={
    name:'kaivon',
    QQ:356985332,
    language:['css','html','js'],
    work:function(){
        console.log('js');
    }
};

var {name,work,QQ,age}=obj; //等号左边与右边必需都是对象，名字要一一对应
console.log(name,work,QQ,age);//kaivon 356985332 js undefined


//可以用它来取一个对象的值
function fn(){
    return {
        c1:'red',
        c2:'green',
        c3:'blue'
    }
}

var {c1,c2,c3}=fn();

console.log(c2);        //green

七、字符串的扩展方法

  • includes(s) 字符串里面是否包含某个字符，参数是一个字符
  • startsWidth(s) 字符串的开始位置的字符是否是参数的，参数是一个字符
  • endsWidth(s) 字符串的结束位置的字符是否是参数的，参数是一个字符
    以上的几个方法都返回一个布尔值,包含有true,不包括为false
  • repeat(num) 复制字符串，参数为数字，表示复制的次数。参数必需是一个正数，其它的就会报错
'use strict'
var str='kaivon';   //声明个字符串
console.log(str.includes('i'));         //true 字符串里面包含 'i'
console.log(str.includes('b'));         //false 字符串里面不包含 'b'
console.log(str.startsWith('k'));       //true  开始位置包含'k'
console.log(str.endsWith('n'));         //true  结束位置包含'n'

console.log(str.repeat(3));             //kaivonkaivonkaivon 复制三次
//console.log(str.repeat(-1));              //报错 参数必需是一个正数，其它的就会报错
//console.log(str.repeat(Infinity));        //报错 参数必需是一个正数，其它的就会报错

八、模板字符串

模板字符串：字符串及数据的拼接方式

1、字符串需要用一对反引号包起来，它可以定义多行字符串，只用一对反引号
2、要拼进去的数据需要放在${}里面
3、大括号里还可以进行运算
4、大括号里还可以调用函数

var obj={
    title:‘心情‘,
    content:’今天很爽，吃了饭，睡了觉，还打了豆豆‘
}
var text=document.getElementById("text");
//text.innerHTML='<h1>'+obj.title+'</h1><p>'+obj.content+'</p>'; //常规的拼接方法

function fn(){
    return '那么问题来了，豆豆爽么？';
}

//要拼进去的数据需要放在${}里面
var str1=`<h1>${obj.title}</h1>  
            <p>${obj.content}</p>`;
            
//大括号里还可以进行运算
var str2=`<h1>${obj.title+'+1'}</h1>    
            <p>${obj.content}</p>`;

var str3=`<h1>${obj.title+'+1'}</h1>
            <p>${obj.content+fn()}</p>`;    //大括号里还可以调用函数
            
//text.innerHTML=str1;
//text.innerHTML=str2;
//text.innerHTML=str3;

九、Math对象的扩展方法

Math.trunc(num): 去除小数部分，是直接把小数部分去掉

1、对于非数值，先调用Number方法把它转成数字
2、对于空值和无法转成数字的值，结果是NaN

console.log(Math.trunc(12.74));         //12
console.log(Math.trunc(0.5));           //0
console.log(Math.trunc('36.01'));       //36
console.log(Math.trunc('kaivon'));      //NaN

Math.sign(num): 判断一个数是正数还是负数还是0

1、参数为正数，返回1
2、参数为负数，返回-1
3、参数为0，返回0
4、参数为-0，返回-0
5、参数为其它值，返回NaN

console.log(Math.sign(5));              //1
console.log(Math.sign(-5));             //-1
console.log(Math.sign(0));              //0
console.log(Math.sign(-0));             //-0
console.log(Math.sign('kaivon'));       //NaN

十、数组的扩展方法

Array.from() 把类数组转成真正的数组

任何有length属性的对象都可以用这个方法转真正数组

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

'use strict'
var lis=document.querySelectorAll("li");
//console.log(lis);
var newLis=[].slice.call(lis); //利用以前的方法将类数组转换为数组

var newLis=Array.from(lis);     //Array.from() 把类数组转成真正的数组
console.log(newLis);            //[li, li, li, li, li]

var str='kaivon';
var newStr=Array.from(str);     //任何有length属性的对象都可以用这个方法转真正数组
console.log(newStr);            //["k", "a", "i", "v", "o", "n"]

//对象身上只要有length属性就可以调用Array.from()把对象转成数组,对象中的key必需是从0开始的数字才能转

var obj={
    0:'red',
    1:'green',
    2:'blue',
    3:'yellow',
    length:4
};
console.log(Array.from(obj)); // ['red','green','blue','yellow']

Array.of() 把一组数值转成真正的数组

console.log(new Array());       //[]
console.log(new Array(3));      //[, , ,]
console.log(new Array(1,2,3));  //[1, 2, 3]

console.log(Array.of(1));       //[1]
console.log(Array.of(1,2,3));   //[1, 2, 3]

includes(数据,起始位置) 查找数组中有没有某个数据

var arr=['red','green','blue','yellow'];
console.log(arr.includes('red'));       //true
console.log(arr.includes('pink'));      //false
console.log(arr.includes('green',2));   //false

遍历相关

  • for in 循环，能够直接读取键名
  • for of 循环，能够直接读取键值
  •          它不光可以遍历数组或者对象，只要有遍历接口的对象都可以用它
  • keys() 存储了数组的所有键名
  • values() 存储了数组的所有键值
  • entries() 存储了数组的所有键值对
'use strict'
var color=['red','green','blue','yellow'];

//for in
for(var attr in color){
    console.log(attr);  //0 1 2 3 直接读取键名
}

//for of
for(var value of color){
    console.log(value); //red green blue yellow 直接读取键值
}

//字符串也可以使用for of
var str='kaivon';
for(var value of str){
    console.log(value);     //k a i v o n 只要有遍历接口的对象都可以用它
}


//遍历keys
for(var key of color.keys()){
    console.log(key);       //0 1 2 3 存储了数组的所有键名
}

//遍历values
/*for(var value of color.values()){  存储了数组的所有键值
    console.log(value);     //red green blue yellow 提示一下，chrom还不支持
}*/

//遍历entries
for(let [key,value] of color.entries()){
    console.log(key,value); //0 "red"    1 "green"  2 "blue"        3 "yellow"  存储了数组的所有键值对
}

十一、函数参数默认值

'use strict'
function fn(a,b){
    b=b||'kaivon';  //以往设置默认参数方法
    console.log(a,b);
}
fn('hello');        //hello kaivon
fn('hello','moto'); //hello moto

//参数变量是默认声明的，不能用let或者const再次声明
function fn2(a=20,b=10){    //直接将默认参数写在函数括号中
    //console.log(a,b);     //20 10
    //let a=12;             //报错
    console.log(a+b);       //30
}
fn2();          //30
fn2(23,45);     //68

十二、箭头函数

语法：
1、function用var、let、const来表示
2、参数要写在第一个等号后面

  • 1、如果没有参数，需要写一对空的小括号
  • 2、只有一个参数，那就直接写，不用加括号
  • 3、参数有多个，需要加一个小括号，参数用逗号隔开
'use strict'
/*function fn1(){
    console.log('kaivon');
}
fn1();*/ //常规写法

var fn1=()=>console.log('kaivon');  //es5写法 如果没有参数，需要写一对空的小括号
fn1();


let fn2=a=>console.log(a);  //只有一个参数，那就直接写，不用加括号
fn2('kaivon');          //kaivon

const fn3=(a,b)=>{      //参数有多个，需要加一个小括号，参数用逗号隔开
    let result=a+b;
    console.log(result);
}
fn3(1,2);       //3

十三、对象的简洁表示法

属性与方法都可以简洁表示

'use strict'
/*function fn(){
    var x=10;
    var y=20;
    function sum(){
        return x+y;
    }
    
    return {x:x,y:y,sum:sum}
}
console.log(fn());*/        //常规获取函数内部变量及方法


function fn(){              //ES6获取函数内部变量及方法
    var x=10;
    var y=20;
    function sum(){
        return x+y;
    }
    
    return {
        x,
        y,
        sum(){
            return x+y;
        }
    }
}
console.log(fn());
console.log(fn().sum())         //30

十四、属性名表达式

可以把表达式放在中括号里作为属性名

'use strict'

let key='interest';

let obj={
    name:'kaivon',
    [key]:'打豆豆',
    ['show'](){
        console.log(this.name);
    }
}
console.log(obj);

十五、Object.is()

比较两个值是否相等，与===的结果一样，但是还是有一些区别

  • 返回的结果是一个布尔值
    区别:
  • 1、+0与-0比较的结果为false
  • 2、NaN与NaN比较的结果为true
'use strict'
console.log(Object.is('kaivon','kaivon'));      //true

console.log(+0===-0);           //true
console.log(Object.is(+0,-0));  //false

console.log(NaN===NaN);         //false
console.log(Object.is(NaN,NaN));    //true

十六、Object.is()

将一个对象身上的属性复制到另一个对象身上

  • 至少需要两个参数
  • 1、第一个参数为合并后的对象
  • 2、从第二个参数开始往后就是所有要合并的对象
  • 3、如果有同名的属性，后面会把前面覆盖了
  • 4、如果有嵌套的对象，是覆盖并不是添加
'use strict'
var obj1={a:1};
var obj2={b:2};
var obj3={a:4,c:3};

Object.assign(obj1,obj2,obj3);
console.log(obj1); //{a:1,b:2,c:3}  //如果有同名的属性，后面会把前面覆盖了

//封装个函数
const merge=(target,...souce)=>{
    Object.assign(target,...souce);
    return target;
}
console.log(merge(obj1,obj2,obj3));     //Object {a: 4, b: 2, c: 3}

//如果有嵌套的对象，是覆盖并不是添加
var obj4={
    d:{
        e:5
    }
}
var obj5={
    d:{
        f:6
    }
}

console.log(merge({},obj4,obj5)); //{a: 4, b: 2, c: 3}

十七、Set数据结构

Set 数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数

  • size 数据的长度
  • add() 添加一个数据
  • deleate() 删除一个数据
  • has() 查找某条数据，返回一个布尔值
  • clear() 删除所有数据
'use strict'
var set=new Set([1,3,4,5,4,3,2]);
set.add(6);     //在数据结构中添加 6 
set.delete(1);  //在数据结构中删除 1
console.log(set.has(5));    //true 在数据结构中查找是否有 5
set.clear();    //删除所有数据内容
console.log(set,set.size);          //Set {1, 3, 4, 5, 2} 5
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,692评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,482评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,995评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,223评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,245评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,208评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,091评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,929评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,346评论 1赞 311
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,570评论 2赞 333
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,739评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,437评论 5赞 344
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,037评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,677评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,833评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,760评论 2赞 369
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,647评论 2赞 354

推荐阅读更多精彩内容