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. jQuery监控动画执行完毕事件

    $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend' ...

  2. Activiti入门 -- 轻松解读数据库

    相关文章: <史上最权威的Activiti框架学习指南> <Activiti入门 --环境搭建和核心API简介> 在Activiti中,相对前身JBPM基础上又额外多了5张,框 ...

  3. apache的/etc/httpd/conf/httpd.conf和/usr/local/apache2/conf/httpd.conf区别

    一.问题 centos系统用yum安装完apache后,重启后有时会失效,然后去网上找资料,发现有的说重启命令是这样的: /etc/init.d/httpd restart 而有的呢,说重启命令应该是 ...

  4. 安装LoadRunner11报缺少vc2005_sp1_with_atl_fix_redist的错误

    找到安装程序自带的lrunner\Chs\prerequisites\vc2005_sp1_redist,双击运行vcredist_x86.exe,再重新安装LoadRunner即可成功. 参考资料: ...

  5. crmsh语法

    .查看配置信息 crm(live)# configure crm(live)configure# show node node1 node node2 property cib-bootstrap-o ...

  6. initialization of 'zf' is skipped by 'case' label原因及解决方法

    原因:switch 的 case 中不能定义变量,不然就会报错.可能是变量的初始化会因为有时候case条件不被执行而跳过. 解决方法: 1:在case中用{}将代码括起来,这样在{}中就能定义变量了; ...

  7. 团队项目-第九次scrum 会议

    时间:11.5 时长:40分钟 地点:F楼1039教室 工作情况 团队成员 已完成任务 待完成任务 解小锐 完成员工commit函数的数值函数编写 完成多种招聘方式的逻辑编写 陈鑫 实现游戏的暂停功能 ...

  8. 《大道至简》第一章 编程的精义 java伪代码形式

    愚公.这位名家身上,浓缩了项目组织者.团队经理.编程人员.技术分析师等众多角色的优秀素质. 愚公移山事件分析: 原始需求:惩山北之塞,出入之迂 项目沟通方式:聚室而某曰 项目目标:毕力平险,指通豫南, ...

  9. android之SlideMenu双向滑动

    开始动手之前先来讲一下实现原理,在一个Activity的布局中需要有三部分,一个是左侧菜单的布局,一个是右侧菜单的布局,一个是内容布局.左侧菜单居屏幕左边缘对齐,右侧菜单居屏幕右边缘对齐,然后内容布局 ...

  10. org.apache.catalina.core.StandardWrapperValve.invoke Servlet.service() for servlet [WebApp] in context with path关于数据库库的问题

    1.在本地~~把你的查询的sql打印出来~~~然后拿到测试库里面执行一遍~~然后拿到正式库里面在执行一遍  2.看生产和本地~~1).代码不同步:2).就是数据为空问题 3.也有可能是数据库配置文件问 ...