变量的作用域与声明:
与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 //不能理解啊,数组没有长度.
