ES6新特性及用法笔记

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新特性及用法笔记的更多相关文章

前端学习笔记 --ES6新特性
前言这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...
Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
ES6新特性（函数默认参数，箭头函数）
ES6新特性之函数参数的默认值写法和箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
ES6新特性简介
ES6新特性简介环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...
前端入门21-JavaScript的ES6新特性
声明本篇内容全部摘自阮一峰的:ECMAScript 6 入门阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...
ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
ES6新特性之模板字符串
ES6新特性概览 http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串 http://www.infoq.c ...
ES6新特性：Proxy代理器
ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...
轻松学会ES6新特性之生成器
生成器虽然是ES6最具魔性的新特性,但也是最难懂得的一节,笔者写了大量的实例来具体化这种抽象的概念,能够让人一看就懂,目的是希望别人不要重复或者减少笔者学习生成器的痛苦经历. 在说具体的ES6生成器之 ...

随机推荐

你是怎么封装一个view的
可以通过纯代码或者xib的方式来封装子控件建立一个跟view相关的模型,然后将模型数据传给view,通过模型上的数据给view的子控件赋值 /** * 纯代码初始化控件时一定会走这个方法 */ - ...
codility
// you can also use imports, for example: // import java.util.*; // you can write to stdout for debu ...
ssl证书原理
SSL证书(HTTPS)背后的加密算法 SSL证书(HTTPS)背后的加密算法之前我们介绍SSL工作原理了解到当你在浏览器的地址栏上输入https开头的网址后,浏览器和服务器之间会在接下来的几百毫秒 ...
用PHP写一个双向队列
PHP写一个双向队列,其实是在考察PHP几个内置数组的函数用PHP写一个双向队列 <?php class Deque{ public $queue = array(); /** * 尾部入对 ...
【转】Thinkphp框架的项目规划总结和踩坑经验
http://www.360doc.com/content/16/1206/22/466494_612576533.shtml
Linux命令－文件操作类
声明:本文所涉及到的Linux命令均为最常见的用法,未列举之参数,自行查阅man 1.ls 查看文件与目录 -a 打印全部的文件,包括隐藏文件 -l 列表打印,数据项包括文件属性,大小和权限等 ...
[bzoj1033] [ZJOI2008]杀蚂蚁antbuster
Description 最近,佳佳迷上了一款好玩的小游戏:antbuster.游戏规则非常简单:在一张地图上,左上角是蚂蚁窝,右下角是蛋糕,蚂蚁会源源不断地从窝里爬出来,试图把蛋糕搬回蚂蚁窝.而你的任 ...
方伯伯的OJ ( onlinejudge )
方伯伯的OJ 题目描述方伯伯正在做他的OJ.现在他在处理OJ 上的用户排名问题. OJ 上注册了n 个用户,编号为1 ∼ n,一开始他们按照编号排名.方伯伯会按照心情对这些用户做以下四种操作,修改用 ...
【CF Round 439 C. The Intriguing Obsession】
time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...
HDU 5366 dp 递推
The mook jong Accepts: 506 Submissions: 1281 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65 ...

ES6新特性及用法笔记

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

随机推荐

热门专题