JS中forEach和for、Object 、map和filter、split和join、slice和splice、concat、push和pop、shift和unshift

forEach

1. 语法:数组名.forEach(function(){});
2. 作用:遍历数组,相当于是for循环的另外一种写法, 数组中有几个数据,forEach就执行多少次;
3. 注意:这个方法中传递的参数是一个函数,在这个函数可以写一些形参,这个形参的名字自己随便去起;
4. 形参的个数可以写三个
   第一个形参指的是数组的数据,item
   第二个形参指的是数组的索引,index
   第三个形参指的是数组本身(原始数组),origin
5. 返回值:该方法没有返回值,结果是undefined

    let arr = [100, 200, 300, 400, 500]
    let sum = 0
   // arr.forEach(function (item) {
   //    sum += item  // item指的就是数组中的每一个数据
   // })
    arr.forEach((item) =>{
       sum += item  // item指的就是数组中的每一个数据
    })
    console.log(sum);
 

for循环(for in 和for of)

1. for 循环是出现最早，也是应用最普遍的一个遍历，能够满足绝大多数的遍历。可以遍历 数组、对象、字符串。

    let arr = [100, 200, 300, 400, 500]
    let sum = 0
     for (var i = 0; i < arr.length; i++) {
         sum += arr[i]    // arr[i]就是数组中的每一个数据
     }

2. 区别一：for in 和 for of 都可以循环数组。for in 输出的是数组的index下标，而for of 输出的是数组的每一项的值。

const arr = [1,2,3,4]
 
// for ... in
for (const key in arr){
    console.log(key) // 输出 0,1,2,3
    }
 
// for ... of
for (const key of arr){
    console.log(key) // 输出 1,2,3,4
    }

3. 区别二：for in 可以遍历对象，for of 不能，只能遍历带有iterator接口的，例如Set,Map,String,Array。

const object = { name: 'mary', age: 23 }
    // for ... in
    for (const key in object) {
      console.log(key) // 输出 name,age
      console.log(object[key]) // 输出 mary,23
    }
 
    // for ... of
    for (const key of object) {
      console.log(key) // 报错 Uncaught TypeError: object is not iterable
    }

4. 数组对象

const list = [{ name: 'mary' }, { age: 23 }]
 for (const val of list) {
   console.log(val) // 输出{ name: 'mary' }, { age: 23 }
   for (const key in val) {
     console.log(val[key]) // 输出 mary,23
   }
 }

Object

Object.assign()

1.语法： Object.assign(target,source1,source2,…)
2. 参数：
target 目标对象，接收源对象属性的对象，也是修改后的返回值。
sources 源对象，包含将被合并的属性。
3. 返回值：目标对象
4. 该方法主要用于对象的合并，将源对象source的所有可枚举属性合并到目标对象target上,此方法只拷贝源对象的自身属性，不拷贝继承的属性。实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。同名属性会替换。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
//同名属性会替换
const returnedTarget = Object.assign(target, source);
console.log(target);
// { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
//  { a: 1, b: 4, c: 5 }

Object.keys()

1. 返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 （两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性）。

let arr = ["a", "b", "c"];
console.log(Object.keys(arr));
// ['0', '1', '2']

/* Object 对象 */
let obj = { foo: "bar", baz: 42 },
   keys = Object.keys(obj);
console.log(keys);
// ["foo","baz"] 

Object.values()

1. 方法返回一个给定对象自己的所有可枚举属性值的数组，值的顺序与使用for…in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。Object.values会过滤属性名为 Symbol 值的属性。

var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']
 
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']

map和filter

1. filter方法：filter方法用于过滤数组中的元素，根据指定的条件筛选出符合条件的元素，然后将这些元素组成一个新的数组。

let list= [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenList = list.filter(num => num % 2 === 0);
// 过滤出所有偶数
console.log(evenList); // 输出: [2, 4, 6, 8, 10]

 let list= [
 {
	 name:'张三',
	 type:1,
 },
  {
	 name:'李四',
	 type:2,
 }
 ];
// let tempList = list.filter(item=> item.type == 1);
let tempList = list.filter((item,index)=> {
   return item.type == 1
});
// 过滤出所有type等于1的数据
console.log(tempList); // 输出: [{name:'张三',type:'1'}]

2. map方法：map方法用于对数组中的每个元素执行一个指定的函数，并将函数返回的结果组成一个新的数组。

let list= [1, 2, 3, 4, 5];
let squaredList = list.map(num => num * num);
// 对每个元素进行平方操作
console.log(squaredList); // 输出: [1, 4, 9, 16, 25]

let list= [
{
    name:'张三',
    type:1,
},
 {
    name:'李四',
    type:2,
}
];
// let nameList = list.map(item=> item.name);
// let typeList = list.map(item=> item.type);
let nameList = list.map((item,index)=> {
  return item.name
});
let typeList = list.map((item,index)=> {
  return item.type
});
console.log(nameList); // 输出: ['张三','李四']
console.log(typeList); // 输出: [1,2]

3. 这两个方法都返回一个新的数组，而不会修改原始数组的元素。都接受一个函数作为参数，这个函数可以有一个参数，代表数组中的元素，然后根据需要进行处理。你可以在这个函数中定义筛选条件、转换操作等。

split和join

1. split() 方法用于把一个字符串分割成字符串数组。string.split(separator,limit)

"2:3:4:5".split(":")//将返回["2", "3", "4", "5"]
"|a|b|c".split("|")//将返回["", "a", "b", "c"]
"hello".split("")//可返回 ["h", "e", "l", "l", "o"]
"hello".split("", 3)//可返回 ["h", "e", "l"]

2. join()方法用于把数组中的所有元素转换一个字符串，并设置元素之间的分隔符，默认分隔符是逗号，语法为“array.join(分割符)”。array.join(separator)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
//将返回 Banana,Orange,Apple,Mango

slice和splice

1. slice() 方法用于从数组中截取指定位置的元素，返回一个新的数组。语法是：array.slice(start, end)，其中，start 和 end 都是可选参数，表示选取的元素的起始位置和结束位置。如果不传入参数则默认选取整个数组。该方法返回的是一个新的数组，包含从 start 到 end（不包括 end）的元素。

const names = ['张三', '李四', '王五', '赵六'];
const slicedNames = names.slice(1, 3);
const slicedNames1 = names.slice();
const slicedNames2 = names.slice(0);
const slicedNames3 = names.slice(2);
const slicedNames4 = names.slice(3);
const slicedNames5 = names.slice(4);

//slice不改变原数组
console.log(names);          //[ '张三', '李四', '王五', '赵六' ]
console.log(slicedNames);  //[ '李四', '王五' ]
console.log(slicedNames1); //[ '张三', '李四', '王五', '赵六' ]
console.log(slicedNames2); //[ '张三', '李四', '王五', '赵六' ]
console.log(slicedNames3); //[ '王五', '赵六' ]
console.log(slicedNames4); //[ '赵六' ]
console.log(slicedNames5); //[] 参数大于等于4时就输出空数组

2. splice() 方法用于从数组中删除、替换或添加元素，并返回被删除的元素组成的数组，它会直接修改原数组。语法：array.splice(start, deleteCount, item1, item2, …) 其中，start 表示要修改的起始位置，deleteCount 表示要删除的元素个数，item1、item2 等表示要添加的元素。如果 deleteCount 为 0，则表示只添加元素，不删除元素。

//实现删除
let arr = [1,2,3,4,5]
console.log(arr.splice(0,2));  //[ 1, 2 ] 返回被删除的元素
console.log(arr);  //[ 3, 4, 5 ]   该方法会改变原数组

//实现添加
let arr2 = [1,2,3,4,5]
console.log(arrsplice(1,0,666,777)); //[] 返回空数组，没有删除元素
console.log(arr2);  //[ 1, 666, 777, 2, 3, 4, 5 ]  原数组改变了

// 实现替换
let arr3 = [1,2,3,4,5]
console.log(arrsplice(2,1,"aaa","bbb")); //[ 3 ]  返回被删除的一个元素
console.log(arr3);  //[ 1, 2, 'aaa', 'bbb', 4, 5 ]  可以添加字符串

let arr4 = [1,2,3,4,5]
console.log(arrsplice(1,4,666)); //[ 2, 3, 4, 5 ]  返回被删除的四个元素
console.log(arr4);  //[ 1, 666 ]

concat

1. concat() 方法用于合并两个或多个数组，返回一个新的数组。

const fruits1 = ['苹果', '橘子'];
const fruits2 = ['西瓜', '草莓'];
const combinedFruits = fruitsconcat(fruits2);
console.log(combinedFruits); //[ '苹果', '橘子', '西瓜', '草莓' ]

push和pop

1. push()方法用于向数组末尾添加一个或多个元素，并返回修改后的数组的新长度。

const fruits = ['苹果', '香蕉'];
const res = fruits.push('橘子', '西瓜');
console.log(fruits);  //[ '苹果', '香蕉', '橘子', '西瓜' ]
console.log(res);     //4

3. pop() 方法用于删除并返回数组的最后一个元素。

const fruits = ['苹果', '香蕉', '橘子'];
const lastFruit = fruits.pop();
console.log(fruits);     // ['苹果', '香蕉']
console.log(lastFruit); //橘子

shift和unshift

1. unshift() 方法用于向数组的开头添加一个或多个元素，并返回修改后的数组的新长度。

const fruits = ['苹果', '香蕉'];
const newLength = fruits.unshift('橘子', '西瓜');
console.log(fruits);        //[ '橘子', '西瓜', '苹果', '香蕉' ]
console.log(newLength); //4

2. shift() 方法用于删除并返回数组的第一个元素。

const fruits = ['苹果', '香蕉', '橘子'];
const firstFruit = fruits.shift();
console.log(fruits);      //[ '香蕉', '橘子' ]
console.log(firstFruit);  //苹果