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. 【tomacat集群】Linux或 window配置多个Tomcat同时运行-完美解决-未来星开发团队-费元星

    Linux系统下怎样配置多个Tomcat同时运行呢,首先修改变量为第一个tomcat,然后修改第二个tomcat启动的脚本 如何在同一系统里同时启动多个Tomcat    http://www.cnb ...

  2. Eclipse 安装(Neon 版本2016年)---Eclipse教程第01课

    Eclipse 最新版本 Eclipse Neon,这个首次鼓励用户使用 Eclipse Installer 来做安装,这是一种由Eclipse Oomph提供的新技术,它通过提供一个很小的安装器来使 ...

  3. 剑指Offer - 九度1506 - 求1+2+3+...+n

    剑指Offer - 九度1506 - 求1+2+3+...+n2013-11-29 19:22 题目描述: 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switc ...

  4. 设计模式之第22章-组合模式(Java实现)

    设计模式之第22章-组合模式(Java实现) “鱼哥,有没有什么模式是用来处理树形的“部分与整体”的层次结构的啊.”“当然”“没有?”“有啊.别急,一会人就到了.” 组合模式之自我介绍 “请问你是?怎 ...

  5. Git上手：四种常见的Git协同工作方式

    1.集中式工作流 适用人群:开发小团队(4-5人),习惯使用SVN工具的小团队. 工作方式:团队组长创建远程仓库,创建一个master分支,组员可读可写. 每个开发人员都git clone远程仓库到本 ...

  6. Python 绘制棋盘

    import turtle pen = turtle.Pen() pen.speed(10) width = 30 # 格子宽度 count = 18 # 横向纵向格子数 o = width * co ...

  7. excel批量导入

    https://www.cnblogs.com/mingyue1818/p/4828865.html

  8. css:hover状态改变另一个元素样式的使用

    效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height ...

  9. iptables的配置文件/etc/sysconfig/iptables不存在 linux防火墙开关命令

    某linux服务器,使用 cat /etc/sysconfig/iptables命令时, 找不到文件. 1. service iptables status 使用该命令检查状态 如果之前找不到配置文件 ...

  10. 系统编程--标准IO

    1.流和FILE对象 对于国际字符集,一个字符可以由一个以上的字节来表示.标准I/O文件流可以用来操作单字节和多字节(宽,wide)字符集.一个流的方向(orientation)决定了字符是以单字节还 ...