JavaScript笔记（ES6）

ES6

严格模式

"use strict" 开启严格模式

<script>
    "use strict"
</script>

开启严格模式后规则

如果不使用var，let，const定义变量和常量就不能直接使用，会报错

x=3;y=4  //报错

不允许函数中参数名相同

function fn(a,a){
}
fn(3,4);//不允许

不允许使用with

var div=document.createElement("div");
        // div.style.width="50px";
        // div.style.height="50px";
        // div.style.backgroundColor="red";
        with(div.style){
            width="50px";
            height="50px";
            backgroundColor="red";
        }
        document.body.appendChild(div);

不能对只读属性赋值，冻结的属性也是只读属性

var str="aaaa";
str.length=10; 
var obj={
            a:1,
            b:2
        };
Object.freeze(obj);
obj.a=10;

定义得只读属性不能修改，对象中只有get方法，没有set方法，因此也是只读属性

var obj={};
        Object.defineProperty(obj,"a",{
            writable:false,
            value:10
        })
   obj.a=20;

不允许使用八进制

var a=067;

不可删除属性不能删除，不能删除不可配置属性，冻结属性不能被删除

//不可删除属性
var arr=[1,2,3];
delete arr.length;
//不可配置属性
var obj={};
        Object.defineProperty(obj,"a",{
            configurable:false,
            value:10
        });
delete obj.a;
// 冻结属性不能被删除
var obj={
            a:1,
            b:2
        };
Object.freeze(obj);
delete obj.a;

禁止eval

function getSum(a,b){
            console.log(a+b)
        }
eval("getSum(5,8)");

增加保留字 protected受保护函数或者属性，static静态，interface接口，类的接口

let

let定义一个有范围的变量，块状作用域，不是window的属性

for(let i=3;i<10;i++){
    //let定义的i变量仅作用于语句块内，外面打印会报错
}
        let a=3;
        function fn(){
            let b=5;
            console.log(a);//3
            if(b<10){
                let a=20;
                // let定义的变量仅作用于语句块内
                console.log(a);//20
            }
            console.log(a);//3
        }

const

const定义常量，不可以修改，定义常量全大写

定义对象不能修改引用地址，但是可以修改对象属性，对象定义为常量不能清除

const WIDTH=500;
const obj={
    a:1,
    b:2
}
obj.a=10;//可以修改对象属性

const WIDTH=500;
const obj={
    a:1,
    b:2
}
obj.a=10;//可以修改对象属性

箭头函数

使用箭头函数改变this指向，箭头函数中this指向父级作用域的this

()=>{}

函数的参数如果只有一个，函数内容只有一句话，可以不写括号;

函数参数一个以上或者没有，就需要加()

var fn=a=>a+3;
var fn1=()=>3+4;
var fn2=(a,b)=>{a++;console.log(a+b);}

解构赋值

数组解构赋值，按照顺序赋值

let [a,b,c]=[1,2,3];
console.log(a,b,c);//1,2,3

解构赋值可以用来做交换，比如前面写的冒泡排序

var arr=[1,4,2,6]
var len=arr.length-1;
while(len>0){
    for(let i=0;i<len;i++){
        if(arr[i]<arr[i+1]){
            [arr[i],arr[i+1]]=[arr[i+1],arr[i]];//解构赋值交换
        }
    }
    len--;
}

解构赋值可以有初始值，如果赋值的结果是undefined则值为初始值

let [a,b=3]=[10];//a=10,b=3
//给函数参数设置初始值
function fn([a,b=10]){
    console.log(a,b);//3,5
}
fn([3,5]);

对象解构赋值

对象解构赋值是按照属性名来解构

var {c,a,b}={a:1,b:2,c:3};// a:1,b:2,c:3
var {c,a,b=10}={a:1,c:3};//设置解构赋值的默认值
var {a,b:{a:a1},b}={a:1,b:{a:2}};
//如果多重对象解构时，属性名相同，可以使用:另外设置新变量名
// 因为b属性被解构了，就不存在了,所以需要重新设置b属性

可以解构出对象中的方法，任何对象都可以解构

let {random,max,min}=Math;
//解构出Math中的方法，就可以直接使用 random()

字符串方法

includes 判断字符串中是否有该内容

console.log("abcdef".includes("bc"));//true

startsWith endsWith 是否以什么开头或结束

console.log("abcde".startsWith("a"));//字符串是否是0开始
console.log("abcde".startsWith("b",1));//字符串在第几位是否从b开始
console.log("abcde".endsWith("e"));//以e为结尾
console.log("abcde".endsWith("d",4));//从第四位开始是否是最尾部

repeat 如果字符串的长度不足几位，就在他前面补充设置的字符

console.log("aa".padStart(4,"0"));

Symbol

Symbol表示唯一类型，没有相同的，不可被修改，不能用于任何运算

定义Symbol

let a=Symbol("a");
let b=Symbol("a");
console.log(a===b);//false  Symbol唯一性
//无法获取到值，想要获取需转换为字符串截取
function getSymbol(s){
     return s.toString().match(/^Symbol\((.*)\)$/)[1];
}
console.log(getSymbol(a));//a

//去除魔术字符串
const RUN=Symbol("run");
const WALK=Symbol("walk");
const PLAY=Symbol("play");

set map

Set 没有重复元素的列表

插入、添加、删除速度快，无重复，只要值得列表（不能有键）

没有索引，不能使用for循环，也不能用下标直接修改或者获取

方法 has add delete clear

var a=new Set([1,2,3,4]);
a.has(3)//判断是否存在
a.add(5);//值是不重复，如果有相同值时，不添加
a.delete(2)//删除
a.clear();//清除

遍历

for(let value of a){
     //列表中所有的值
     console.log(value);
} 
for(let value of a.entries()){
    //属性名和值一样的数据
    console.log(value);
} 
for(let value of a.values()){
     //列表中所有的值
     console.log(value);
} 
a.forEach((key,value,a)=>{
      // key和value相同
      console.log(key,value)
}) 

弱引用列表类型 只能添加对象类型数据

let b=new WeakSet();

Map 有长度的键值对数据类型

需要有键值对，需要有长度，可以遍历属性列表，可以遍历数值列表，增删改查速度快

方法 has get delete clear

let a=new Map();
a.set("name","jack");
a.set("age",30);
a.set("sex","man");//添加键值对
a.has("age");//只能判断是否有键名，不能判断是否有这个值
a.get("name");//可以根据键来获取值
a.delete("sex");//删除属性值
a.clear();//清除所有属性，快速删除所有属性值

遍历

可以遍历属性或者值，也可以都遍历，比对象灵活

        for(let value of b.entries()){
            //遍历所有的属性和值
            console.log(value);
        } 

        for(let prop of b.keys()){
            //遍历所有的属性名
            console.log(prop);
        } 

         for(let value of b.values()){
            //遍历所有的值
            console.log(value);
        } 

        b.forEach((value, prop) => {
            //遍历属性与值  第一个参数为值，第二个位属性
            console.log(prop, value)
        })

弱引用键值对数据 WeakMap

var c=new WeakMap();

生成器函数

function* fn(){};

function* fn(a,b){
            // 遇到yield会停止不执行
            // 当执行函数返回对象的next()方法时才会继续向下执行
            // 或者可以使用for of 自动执行完成一个yield后继续向下执行
            yield a;
            a++;
            yield a;
            yield b;
            b++;
            yield b;
            yield a+b;
            return a+b;
        } 
        var a=fn(3,4);
        /* console.log(a.next());
        console.log(a.next());
        console.log(a.next());
        console.log(a.next());
        console.log(a.next());
        console.log(a.next()); */