1.新增数据类型Symbol。【Number、Boolean、Symbol、Null、Undefined、Object】

Symbol类型的值通过Symbol函数生成，相同的Symbol函数返回的值 是唯一的

Symbol函数可以接收字符串作为参数，但是即使相同参数返回的值 也是唯一的，即Symbol('a') != Symbol('a')

代码实例

    /*

    * Symbol

    * 传入相同的值，但他内部存储的值不相同

     */

    var s1=Symbol();

    var s2=Symbol();

    // console.log(typeof s1)

    console.log(s1, s2)

    var s3=Symbol('miaov');

    var s4=Symbol('miaov');

    console.log(s3, s4)

    console.log(s3==s4) // false

/************************************************************/

    var Preson =(function () {

        let _gender = Symbol('gender');  //属性私有化

        function P(name,gender) {

            this.name = name;

            this[_gender]=gender;

        }

        P.prototype.say = function () {

            console.log(this[_gender]) //

        }

        return P;

    })()

    var p1 = new Preson('张三','男');

    console.log(p1);  // {name: "张三", Symbol(gender): "男"}

    // console.log(p1[Symbol('gender')]) //undefined

2.let与const

let:

不支持变量声明预解析（先声明后使用）

支持块作用域

不允许重复声明

const:

不支持变量声明预解析（先声明后使用）

支持块作用域

不允许重复声明

常量（值一旦确定，不允许修改，所以必须初始化）

代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        button.ac{

            background-color: #00a0e9;

        }

        p{

            display: none;

        }

        p.ac{

            display: block;

        }

    </style>

</head>

<body>

<button class="ac">按钮1</button>

<button>按钮2</button>

<button>按钮3</button>

<p class="ac">内容1</p>

<p>内容2</p>

<p>内容3</p>

<script>

    var buttons = document.querySelectorAll('button');

    var ps = document.querySelectorAll('p');

    //

    // for(var i=0;i<buttons.length;i++){

    //     buttons[i].index=i

    //     buttons[i].onclick=function () {

    //         for (var i=0;i<buttons.length;i++){

    //             buttons[i].className=''

    //             ps[i].className=''

    //         }

    //         this.className='ac'

    //         ps[this.index].className='ac'

    //     }

    // }

    for(let i=0;i<buttons.length;i++){

        buttons[i].onclick=function () {

            for(let i=0;i<buttons.length;i++){

                buttons[i].className=''

                ps[i].className=''

            }

            this.className='ac'

            ps[i].className='ac'

        }

    }

</script>

</body>

</html>

3.解构赋值与扩展运算符

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

数组解构

let [a,b,c] = [1,2,3]

-顺序对应

对象解构

let  {for,bar}={foo:"aaa",bar:"bbb"}

- key值对应.

若key值 被占用可以使用别名

let {left:L,top:T}={left:100,top:200}

let {foo:[a,b]}={foo:[10,20],bar:"bbb"}

4.扩展运算符 ...

...

把数组/对象转成参数序列（使用逗号分隔的序列）

['a','b','c']=>'a','b','c'

[left:100,top:200] => left:100,top:200

例：数组对象合并

var arr = [1,2,3,4,6,8,9]

console.log(Math.max(...arr)) //求最大值 

var arr1 = [1,2,3,4,6,8,9]

var arr2 = ['a','b','c']

console.log(...arr1,...arr2) //合并

console.log(...arr1,'a',...arr2) //合并中还可以插入其他元素

5.字符串扩展

unicode表示法

console.log('\u4e01')

console.log('\u{1F602}')  //{}就是扩展

模版表示法 ``

`` 反引号，保持字符串内容

变量表达式解析：`${表达式}`

var str = `

<ul>

<li></li>

</ul>

<h1>${1+1}</h1>

<h1>${Math.random()}</h1>

`

console.log(str)

6.数值扩展

var a=0b10  //二进制 2

var b=010  //八进制 8

var c=10  //十进制 10

var d=0x10  //十六进制 16

7.属性名表示式

var x = 'aaa'

var obj1 ={

[a] :1

}

// obj[x] = 1

8.迭代

迭代协议 ：规定了迭代与实现的逻辑

迭代器：具体的迭代实现逻辑

迭代对象：可被迭代的对象  - [Symbol.iterator]方法

迭代语句：

for...in ：以原始插入的顺序迭代对象的可枚举属性 【打印的是key值  var arr = ['a','b','c']  for(var attr in arr){console.log(attr)}  //0,1,2】

for...of：根据迭代对象的迭代器具体实现迭代对象数据 【打印的是值，且必须是一个可迭代对象 var arr = ['a','b','c']  for(var attr of arr){console.log(attr)}  //a,b,c】

对象冻结

const arr = Object.freeze([1,2,3]) //freeze冻结
arr.push(4)//无法操作

9.函数扩展

函数参数默认值 .

function fn4(obj={x:1,y:2}){

    console.log(obj)

}

fn4({x:10,y:20})

rest 剩余参数

//老写法

//function arrayPush(arr,x,y,z){

function arrayPush(){ //不定参

    var arr = arguments[0]

    for(var i=1;i<arguments.length;i++){

        arr.push(arguments[i])

    }

}

var arr1 = [1,2,3]

arrayPush(arr1,'a','b','c')

console.log(arr1)

//es6写法

function arrayPush6(arr,...newData){  //从第二个参数开始，后面的数据全部赋值给newData这个参数

//注意：剩余参数只能写在形参列表的最后面

    for(var i=0;i<newData.length;i++){

        arr.push(newData[i])

    }

}

arr1=[1,2,3]

arrayPush6(arr1,'a','b','c')

console.log(arr1)

10.箭头函数

()=>{}

let fn4 = x => x + 100 ,只有一个参数里，小括号()可以省掉，方法体{}也可以省掉

箭头函数注意事项：

a.内部this对象指向创建期上下文对象 【普通函数的this指向是在函数的执行期绑定的(确定的)】

b.不能作为构造函数

c.没有arguments

d.不能作为生成器函数

function fn6(){

    console.log(this)

}

fn6();  //指向window

var obj ={}

obj.f = fn6;

obj.f(); //指向obj

document.onclick =fn6; 指向触发该事件的对象document

//箭头函数的this在函数创建期间就绑定好了，箭头函数的this指向创建该箭头函数所在的作用域对象(this)

let fn7 =()=>{

    console.log(this)

}
fn7();
document.onclick = fn7; //fn7内部的this永远都是fn7函数声明的时候所在的this对象

11.新增内置对象  【https://developer.mozilla.org】API文档

String 、Number 、Array 、Object 、Set 、WeakSet 、Map 、WeakMap

String

startWith()

endWith()

includes()  //判断 字符串是否包含某个字符

repeat()  //复制字符串，若有参数则为执行次数

Number

isFinite()

isNaN()

parseInt()

parseFloat()

Array

includes()  //判断数组中是否包含某个值

every()

some()

filter()

map()

reduce()

var arr1 = ['a','b','c'];

arr1.forEach(function(v,k,s){

    console.log(v,k,s)

    console.log(this)

},arr1)

//写一个方法实现上面的迭代功能

function forEach(data,callback,context){

    for(var i=0;i<data.length;i++){

        callback.call(context,data[i],i,data)

    }

}

forEach(arr1,function(v,k,s){

    console.log(v,k,s)

    console.log(this)

},1)

//every()

let arr2 = [1,6,3,5,8,10] //可以做全选功能

let rs = arr2.every(v=>{   //取出数组中每一个组与5对比，都大于5返回ture,只要有一个小于5,则返回false

    return v>5;

})

console.log(re)

//some()与every()相反

//filter() //过滤，从原数组中过滤后把结果组成一个新数组，新数组的值是源数组中的一个，但是长度可能不一致

let arr3 = arr2.filter(v=>{

    return v>5;

})

console.log(arr3)

//map() //一一映射，新数组的值可以和源数组不一致，但是长度是一致的

let arr4 = arr2.filter(v=>{

    return v * 10;

})

console.log(arr4)

//reduce() //拆分步骤 可用在购物车累加商品价格

let arr5 = arr2.reduce(function(prev,current){

    return prev + current;

),0) //0表示初始值 

console.log(arr5)

Object

Object.assign()  //浅拷贝

Object.create()  //创建对象原型

Object.freeze()  //冻结

Object.defineProperty()

Set  //类似数组，但是值 是无序的，无重复值

//集合：它类似于数组，但成员都是唯一的，没有重复的值，并且是无序的

Set是一个构造函数，可以传入一个可迭代对象初始化默认值

//利用不可重复特性，可以实现去重  let arr1 = ['a','b','c','a']   arr1=[..new Set(arr1)]

ES6新特性及用法笔记的更多相关文章

  1. 前端学习笔记 --ES6新特性

    前言 这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...

  2. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

  3. ES6新特性（函数默认参数，箭头函数）

    ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...

  4. ES6新特性简介

    ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...

  5. 前端入门21-JavaScript的ES6新特性

    声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...

  6. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  7. ES6新特性之模板字符串

    ES6新特性概览  http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串   http://www.infoq.c ...

  8. ES6新特性：Proxy代理器

    ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...

  9. 轻松学会ES6新特性之生成器

    生成器虽然是ES6最具魔性的新特性,但也是最难懂得的一节,笔者写了大量的实例来具体化这种抽象的概念,能够让人一看就懂,目的是希望别人不要重复或者减少笔者学习生成器的痛苦经历. 在说具体的ES6生成器之 ...

随机推荐

  1. Eclipse 工作空间(Workspace)---Eclipse教程第07课

    Eclipse 工作空间(Workspace) eclipse 工作空间包含以下资源: 项目 文件 文件夹 项目启动时一般可以设置工作空间,你可以将其设置为默认工作空间,下次启动后无需再配置: 工作空 ...

  2. 初学JS——利用JS制作的别踩白块儿（街机模式） 小游戏

    这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是 可能普通模式的别踩白块儿因为他的“块儿”是滚动的向上这种,以我目前会的技术想不出怎么写, 但是如果是街机模式,通过你每按 ...

  3. 《Cracking the Coding Interview》——第14章：Java——题目1

    2014-04-26 18:20 题目:从继承的角度,把构造函数设成private有什么意义? 解法:就不能继承了.单体模式里也这么干,目的是为了不让使用者自主生成对象,进行限制. 代码: // 14 ...

  4. git bash中文显示为数字

    转自:http://blog.csdn.net/zhujiangtaotaise/article/details/74424157 今天让去做一个另外一个项目,导入项目后,git status 发现原 ...

  5. HDU 4669 Mutiples on a circle 动态规划

    参考了官方题解给的方法: 对于处理循环,官方给了一种很巧妙的方法: #include <cstdio> #include <cstring> #include <cstd ...

  6. C# 访问修饰符internal的访问范围误区释疑

      一.前言                                               MSDN关于访问修饰符的访问级别解释: 访问修饰符是一些关键字,用于指定声明的成员或类型的可访 ...

  7. LINQ to Entities 不识别方法“System.Guid Parse(System.String)”，因此该方法无法转换为存储表达式。

    LINQ to Entities 不识别方法"System.Guid Parse(System.String)",因此该方法无法转换为存储表达式. linq 中不能转换类型

  8. PHPEXCEL 设置被导出的表格样式代码

    1.设置表格高度.宽度 代码: $objPHPExcel->getActiveSheet()->getRowDimension('6')->setRowHeight(30);//行高 ...

  9. poj 1743 Musical Theme (后缀数组+二分法)

    Musical Theme Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 16162   Accepted: 5577 De ...

  10. [BZOJ4205][FJ2015集训] 卡牌配对 [建图+最大流]

    题面 这是bzoj权限题,题面可以去下面的离线题库找 离线4205,只有题面,不能提交 思路 二分图匹配 这道题模型显然就是个二分图匹配嘛 那我们两两判断一下然后连边匹配.....就只有30分了 因为 ...