ES6核心基础知识（二）

一、运算符的使用和数组的方法

1、深拷贝一维数组

const list = [1, 2, 3, 4, 5];
const list1 = [...list];

console.log(list1); // [1, 2, 3, 4, 5]

2、分割数组

const list = [1, 2, 3, 4, 5];
const [, ...list1] = list;

console.log(list1); // [2, 3, 4, 5]

3、将数组转化成为参数传给函数

const list = [1, 2];
function test(a, b) {
 console.log(a + b); // [3]
}

test(...list);

4、fill方法（替换数组中的值）

const list = [1, 2, 3, 4, 5];
const list1 = [...list].fill(6);
const list2 = [...list].fill(6, 1, 4); //第一个为替换后的值，第二个第三个为替换的位置

console.log(list1); // [6, 6, 6, 6, 6]
console.log(list2); // [1, 6, 6, 6, 5]

5、find/findIndex方法（查询对象数组中的元素）

const list = [
    { hobby: '吃饭', id: 1 },
    { hobby: '睡觉', id: 1 },
    { hobby: '敲代码', id: 1 },
    { hobby: '吃饭', id: 2 },
   ];

const result = list.find(function (item) {
    return item.hobby === '吃饭';
   });
const result1 = list.findIndex(function (item) {
    return item.hobby === '吃饭';
   });
   
console.log(result);  // {hobby: '吃饭', id: 1}
console.log(result1); // 0

6、concat/flat方法(数组扁平化)

const list = [1, 2, 3, ['2nd', 5, 6, ['3rd', 7, 8]]];
const list1 = [].concat(...list); 
console.log(list1); // [1, 2, 3, '2nd', 5, 6, Array(3)]

const list2 = list.flat(2); //可以设置拉平次数
console.log(list2); // [1, 2, 3, '2nd', 5, 6, '3rd', 7, 8]

7、filter（把满足条件的元素筛选出来放到新数组中）

const list = [
 { hobby: '吃饭', id: 1 },
 { hobby: '睡觉', id: 1 },
 { hobby: '敲代码', id: 1 },
 { hobby: '吃饭', id: 2 },
];
const result = list.filter(function (item) {
 return item.hobby === '吃饭';
});

console.log(result); // [{ hobby: '吃饭', id: 1 },{ hobby: '吃饭', id: 2 }]

8、数组中map（改变内容）

const list = [
    { hobby: '吃饭', id: 1 },
    { hobby: '睡觉', id: 1 },
    { hobby: '敲代码', id: 2 },
   ];
const list1 = list.map(function (i) {
    let obj = {};
    Object.assign(obj, i);  //拷贝对象
    obj.state = i.id === 1 ? '喜欢' : '沉迷';
    return obj;
   });

   console.log(list); 
//    [
//     {hobby: '吃饭', id: 1},
//     {hobby: '睡觉', id: 1},
//     {hobby: '敲代码', id: 2}
//    ]
   console.log(list1);
//    [
//     {hobby: '吃饭', id: 1, state: '喜欢'}
 //    {hobby: '睡觉', id: 1, state: '喜欢'}
 //    {hobby: '敲代码', id: 2, state: '沉迷'}
 //   ]

二、运算符的使用和对象的方法

1、深拷贝简单对象

const a = {
 aa: 1,
 bb: 2,
 cc: {
 dd: 1,
 },
};

const b = {...a};
a.cc.dd = '4';

console.log(b);
// {
//   aa: 1,
//   bb: 2,
//   cc: {
//   dd: '4',
//   },
// };

2、给对象设置默认值

const a = {
    aa: 1,
    bb: 2,
};
const b = { ...a, aa: '5' };

console.log(b);
//  {
//   aa: '5',
//   bb: 2,
//  };

3、合并对象

const a = {
 aa: 1,
 bb: 2,
};
const b = { cc: 3, dd: 4 };
const c = { ...a, ...b };

console.log(c); //{ aa: 1, bb: 2, cc: 3, dd: 4}

4、属性初始化、方法的简写

const name = '张三';
const age = 18;
let obj = {
     name,
     age,
     sayHello() {
     console.log('hello');
     },
    };
obj.sayHello();

console.log(obj);
// hello
// {name: '张三', age: 18}

5、Object.is（判断俩个值是否相等）

let res = Object.is(NaN, NaN);

console.log(res); //true

6、Object.assign（合并对象）

let a = { aa: 1, bb: 2 };
let b = { cc: '1' };
let c = Object.assign(b, a);

console.log(c); //{cc: '1', aa: 1, bb: 2}

7、Object.keys(获取对象中的所有key值)

let test = {
 hobby1: '吃饭',
 hobby2: '睡觉',
 hobby3: '敲代码',
};

console.log(Object.keys(test)); // ['hobby1', 'hobby2', 'hobby3']

8、Object.values(获取对象中的所有values值)

let test = {
 hobby1: '吃饭',
 hobby2: '睡觉',
 hobby3: '敲代码',
};

console.log(Object.values(test)); //['吃饭', '睡觉', '敲代码']

9、Object.entries(获取对象中的key，values值)

let test = {
    hobby1: '吃饭',
    hobby2: '睡觉',
    hobby3: '敲代码',
   };

console.log(Object.entries(test)); 
// [
//   ['hobby1', '吃饭'],
//   ['hobby2', '睡觉'],
//   ['hobby3', '敲代码']
// ]