ES6新特性使用小结(二)
六、Array 扩展
/* * Array Api Array.of 数组的构建 * */ { let arr = Array.of(3, 4, 5, 6, 7, 8); console.log(arr); //[3,4,5,6,7,8] let empty = Array.of(); console.log(empty); // [] } /* * Array API Array.from *将伪数组或一些集合转化为真正的数组 * *类似map方法 * */ { let p = document.querySelectorAll('p'); //拿到的是一个伪数组 let pArr = Array.from(p); pArr.forEach(function (item) { console.log(item.textContent); //依次输出每个 p 元素的文本内容 }); console.log(Array.from([1, 2, 3, 4, 5], function (item) { return item * 2; // 对要构建的数组成员进行处理 })) // [2,4,6,8,10] } /* * Array API Array.fill(*,startIndex,endIndex) 数组的填充 * */ { console.log('fill-5', [1, 0, 2, undefined].fill(5)); //[5,5,5,5] console.log('fill,pos', ['a', 'b', 'c', 'd', 'e'].fill(7, 1, 3)); //[a,7,7,d,e] *含头不含尾 } /* * Array 遍历相关API keys() * values()[需要编译,最新版的Chrome还未支持] * entries() * */ { for (let index of ['1', 'a', 'b', '2'].keys()) { console.log(index); //0 1 2 3 } //for (let v of ['1', 'a', 'b', '2'].values()) { // console.log(v); //1 2 b 2 //} for (let [index,value] of ['1', 'a', 'b', '2'].entries()) { console.log(index, value); //0 1 1 a 2 b 3 2 } } /* * Array API Array.copyWithin(target, start, end = this.length) * 最后一个参数为可选参数,省略则为数组长度。 * 该方法在数组内复制从start(包含start)位置到end(不包含end)位置的一组元素覆盖到以target为开始位置的地方 * */ { console.log([1, 2, 3, 4, 5].copyWithin(0, 3, 5)); //[4,5,3,4,5] //将 5>index>=3的成员 4,5 //从 index=0的位置开始覆盖 } /* * Array API Array.find(fun) *找出符合fun条件的 第一个 数组中成员的值 * Array.find(fun) *找出符合fun条件的 第一个 数组中成员的下标 * Array.includes(target) *寻找数组中是否包含 target **可以处理NaN * */ { console.log([1, 2, 3, 4, 5, 6].find(function (item) { //4 return item > 3; })); console.log([1, 2, 3, 4, 5, 6].findIndex(function (item) { //3 return item > 3; })); console.log([1,2,NaN].includes(2)); //true console.log([1,2,NaN].includes(NaN)); //true *ES5中 NaN!=NaN }
七、function 扩展 *尾调用相关 参考:http://www.ruanyifeng.com/blog/2015/04/tail-call.html
/* * 函数参数默认值 * */ { function test(x, y = 'world') { // *如果 参数y 不存在 则为y指定默认值 console.log(x, y); } test('hello'); //hello world test('hello', 'kill'); //hello kill function testError(x, y = 'world', c) { // *在设置了默认值的参数后面不能再有没有默认值的变量 // ** 错误写法 } } /* * 函数作用域 ... rest参数 把离散的值变成一个数组 * */ { let x = 'test'; function test2(x, y = x) { // * 作用域存在x时 y的取值 console.log('作用域', x, y); } test2('kill'); //kill kill test2(); //'作用域', undefined undefined function test3(c, y = x) { // * 作用域不存在x时 y的取值 console.log('作用域', c, y); } test3('kill'); //'作用域', kill test function test4(...arg) { //* rest参数后面不能再有其他的参数 for (let v of arg) { console.log('rest', v); } } test4(1, 2, 3, 4, 'a'); //依次输出了所以的参数 } /* * 扩展运算符 将一个数组变成 离散的值 * */ { console.log(...[1, 2, 4]); //1 , 2 , 4 } /* * 箭头函数 函数名 = 参数 => 返回值 * */ { let arrow = v=>v * 2; console.log('arrow', arrow(2)); //arrow 4 let arrow2 = ()=>5; console.log('arrow2', arrow2()); //'arrow2' 5 } /* * 尾调用 某个函数的最后一步是调用另一个函数。 * 提升性能 解决函数地址嵌套 * */ { function tail(x) { console.log('tail', x); } function fx(x) { return tail(x); } fx(123); //tail 123 }
八、Object 扩展
/* * obj 简洁表示法 * */ { let o =1; let k =2; let es5 = { o:o, k:k } let es6 = { o, k } console.log(es5,es6); let es5_method = { hello:function(){ console.log('hello') } } let es6_method ={ hello(){ console.log('hello'); } } console.log(es5_method.hello(),es6_method.hello()); } /* * 属性表达式 * */ { let a= 'b'; let es5_obj = { a:'c' } let es6_obj={ [a]:'c' //[]表达式 使用变量作为key b:'c' } console.log(es5_obj,es6_obj); } /* * Obj API Object.is(arg1,arg2) 判断两个参数是否相等 功能上等于 === * */ { console.log('String',Object.is('abc','abc')); //true console.log('Array',Object.is([],[]),[]===[]) //false false 对于引用类型判断和 === 一致 } /* * Obj API Object.assign(源对象,要拷贝到的对象) 对象的拷贝 *浅拷贝 只修改引用地址 不会拷贝继承和不可枚举的属性 * */ { console.log('拷贝',Object.assign({a:'c'},{b:'b'})); //{a:'c',b:'b'} } /* * Obj API Object.entries(obj) 对象遍历法 * */ { let test = {a:'a',b:'b'}; for(let [key,value] of Object.entries(test)){ console.log(key,value); } } /* * Obj 扩展运算符 * */ { let {a,b,...c}={a:'test',b:'bbb',c:'ccc',d:'ddd'} console.log(c); //{c:'ccc',d:'ddd'} }