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>

View Code

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)

View Code

Object

Object.assign()

Object.create()

Object.freeze()

Object.defineProperty()

ES6新特性及用法笔记

猜你喜欢