六、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 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'}
}