ES6 基础01

Posted 2020-10-17 七分sunshine!

变量的作用域与声明:

与es5相比;出现的最大区别就是:{ } ,它在es6词法环境中是一个块作用域;并且 规定变量必须 先声明再使用;

 

<!-- 大括号对于 var 方式声明形同虚设-->
{　　var a=1; }

<!-- let 只在本大括号中生效;并且一个作用域只能声明一次-->
{  let aa=1; } 
console.log(aa)  　　　　　　　　　　　　　　//报错

<!-- const为声明的不能被改变;例如下面的是错误的-->
{  const a=1; a=2  } 　　　　　　　　　　　　//报错

 

解构赋值 

　@1数组的解构赋值;

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

let [a=true]=[];
console.log(a)                //a=true;
----------------------------------------------------------------

let[a=true]=[undefined];
let[b=true]=[null]
console.log(a,b)             //a=true,b=null

其实理解undefined与null的区别很简单:虽然 undefined==null;
但是还是可区分的 参照犀牛书说 null 是一个 空对象指针 
typeof null  ==>object;而undefined可以认为在下面两种情况会出现;
1.访问数组不存在的项;
2.未定义的变量var 方式;

所以:以下两种等价;
let[a=true]=[undefined];
let[a=true]=[ ]; 
就不难理解为什么了;

　　@2对象的解构赋值;

与数组不同,对象的解构赋值是根据键而不是根据索引;

let {foo,bar}={bar:"liuhf",foo:true};　　　　//跟键的顺序没有关系;

　　@3字符串的解构赋值;

const [a,b,c,d,e,f]="liuhee";
console.log(a,b,c,d,e,f);        // l i u h e e

　　不管哪一种解构赋值,必须左右对应;

 拓展运算符  ...

//当传入的参数不确定时候;
function a(...arg) {
    console.log(arg[0]);
    console.log(arg[3]);
}
a(1, 23, 0);    　　　　//1  undefined

//其实也可以用这种替代; arguments本身是一个函数实参对象;
function a() {
    console.log(arguments[0]);
    console.log(arguments[3]);
}
a(1, 23, 0)            //1  undefined

//可以这么理解: ...arg取得了一个实参对象的每一项的值;并不是那个对象;

再看:
var arr0=["liu","hai"];
var arr1=[...arr0];
arr1.push("hello");

console.log(arr0);     //["liu","hai"]
console.log(arr1)      //["liu","hai","hello"]
发现并没有共享一份数据;


function test(aa,...args){
　　console.log(aa);
　　console.log(args[0]);
　　console.log(args[1]);
　　console.log(args.length);
}

test("first",1,2);       // first 1  2  2;

 字符串模板

　　//ES5方式:
    var text = "沧海";
    var whole = "蝴蝶再美,终究飞不过" + text;

    //ES6方式; 并且支持字符串的查找(支持中文),运算;
    var name = "lovely_sr";
    var whole1 = `I love ${name} <br> <b>so much</b><br>`;
    //{}中放表达式;
    var c = 2;
    var d = -3;

    console.log(whole);
    document.write(whole1);
    document.write(whole1.repeat(10));
    document.write("呵呵");

    console.log(whole1.indexOf(name) > 0);
    console.log(whole1.includes(name));
    console.log(whole1.startsWith(name));
    console.log(whole1.endsWith(name));
    console.log(`${c+d}`);
    console.log(`${c}${d}`);

关于数字新增判断;

var binary = 0B010101; //声明二进制数;0B开头;
    var octol = 0O666; //声明八进制数;0O开头;(零与字母O)
    console.log(binary, octol) //十进制输出  21 438;

    //判断是否是数字:(整数小数都返回true;其他为false;)
    console.log(Number.isFinite(binary)); //ture;

    //判断是否是非数字;
    console.log(Number.isNaN(NaN)); //true;

    // 判读是否是整数
    console.log(Number.isInteger(11));

    //数的转换;
    let a = ‘9.18‘;
    console.log(Number.parseInt(a));
    console.log(Number.parseFloat(a));

    //最大安全整数:// 9007199254740991
    console.log(Number.MAX_SAFE_INTEGER);
    //最小安全整数:// -9007199254740991
    console.log(Number.MIN_SAFE_INTEGER);
    //安全整数判断;//false
    console.log(Number.isSafeInteger(9007199254740992)); //false;

 新的数组API:

// 标准数组json格式;
var json = {
    "0": "liuliu",
    "1": 24,
    "2": true,
    "length": 3
};
var arr = Array.from(json);
console.log(arr);

//Array.of(); 说白了其实是一种构造数组的方式;
Array(1, 2, 3, 5); //[1,2,3,5]
Array.of(1, 2, 3, 5); //[1,2,3,5]
//Array(1,2,3,5); 没见过?? No.    new Array(1,2,3,5)见过吧;new可以省略;参照犀牛书;
//区别:
Array.of(3); //[3]
Array(3); //[,,];

var arr0 = Array.of(1, 2, 3, 4);
console.log(typeof arr0);
console.log(arr0);

console.log(Array(1, 2, 3));
console.log("---------------------");

//.find()方法.实例方法;  //val:值,key:索引,arr:实例本身
var arr00 = ["liuhf", 1, 4, 5];
var arr_00 = arr00.find(function(val, key, arr) {
    return key == 0; //相当于筛选;
});
console.log(typeof arr_00);
console.log(arr_00);
console.log(arr00); //不会改变原数组;


// 数组实例的fill方法; babel无法转换 IE11暂时也无法支撑;
var liu = ["liu", "hai", "oo"];
liu.fill("李", 1, 2); //1,表示替换在liu[1]的位置(起始位置) 2,表示结束位置liu[2],但是不包括2;
console.log(liu); //[ ‘liu‘, ‘李‘, ‘oo‘ ]

//数组遍历新方法: for of

//输出值;
for (let item of liu) {
console.log(item);
}
console.log("##############");
//输出索引;
for (let keys of liu.keys()) {
console.log(keys);
}
console.log("##############");
//输出值跟索引: entries()  IE11没办法支持[babel也转化后也不支持(主要有个Symbol)];edge浏览器可以支持(win10测试;)
 for (let [val, key] of liu.entries()) { 
　　console.log(val + ":" + key); 
} 
console.log("##############"); 
console.log(liu.entries()); 　　　　//chrome下为 Array Iterator {}; Edge下为 普通Object object{} 
console.log(liu.entries().length); //undefined //不能理解啊,数组没有长度.