Js 数组 & 高阶函数

// 通过Array创建数组const arr = new Array()

// 通过[]创建数组const arr = []

// 通过索引添加元素arr[0] = "test"// 如果索引不是连续的，中间的索引也会创建，只是元素是空，应该避免使用非连续数组，性能不好arr[3] = "2"

// 定义的时候添加元素const a = new Array(1,3,4)const arr = ["1","test"]

// 通过索引读取，如果读取一个不存在的元素，返回undefinedconst arr = ["1","test"]arr[0] // "1"

// 获取的实际值是数组的最大的索引+1,非连续数组因为有空值，不会特别准确console.log(arr.length) 
// 向数组的最后添加元素arr[arr.length] = "3"
// 修改长度,如果改大了，多出的部分会是空元素，如果改小，会从后往前删除元素arr.length = 10 

arr = [1,2,3,4,5,6,7,8,9,10]
// 通过长度遍历-正序for(let i=0; i < arr.length;++){  console.log(arr[i])}
// 通过长度遍历-倒序for(let i=arr.length-1;i>=0;i--){    console.log(arr[i])}
// for-of语句可以用来遍历可迭代对象for(let a of arr){      console.log(a)}

// 检查一个对象是否是数组let arr = []console.log(Array.isArray(arr)) // true

let arr = [1,2,3]// 根据索引获取数组中的指定元素，console.log(arr.at(2))

let arr = [1,2,3]let arr1 = [4,5,6]
// 用来连接两个或多个数组// 非破坏性方法，不会影响原数组，而是返回一个新的数组let new_arr = arr.concat(arr1,[7,8])console.log(new_arr) // [1,2,3,4,5,6,7,8]

let arr = [1,2,3,2]// 获取元素在数组中第一次出现的索引// 参数:要查询的元素，查询的起始位置console.log(arr.indexOf(2)) // 1console.log(arr.indexOf(2,2)) // 3

let arr = [1,2,3,2] // 获取元素在数组中最后一次出现的位置,找到了则返回元素的索引，没有找到返回-1console.log(arr.lastIndexOf(2)) // 3

let arr = [1,2,3,2] // 将一个数组中的元素连接为一个字符串
console.log(arr.join("~")) // 1~2~3~2

let arr = [1,2,3,2]
// 用来截取数组（非破坏性方法）
/* 参数:1.截取开始的索引(包括该索引元素)     2.截取的结束索引（不包括该索引元素，该参数可以省略不写，如果省略则会一直截取到最后     如果将两个参数全都省略，则可以对数组进行浅拷贝

*/console.log(arr.slice(0,2)) // [1,2]

// arr1和arr不是复制，两个指向的是一个内存地址，修改任意一个会影响其他数组let arr = [1,2,3,2]let arr1 = arr


/*  浅拷贝  通常对对象的拷贝都是浅拷贝  浅拷贝对对象的浅层进行复制（只复制一层）  如果对象中存储的数据是原始值，那么拷贝的深浅是不重要  浅拷贝只会对对象本身进行复制，不会复制对象中的属性（或元素）  调用slice时，会产生一个新的数组对象，从而完成对数组的复制- 浅拷贝  */ let arr2 = [{"name":"l"},{"name":"q"}] let arr3 = arr.slice() 
 /*深拷贝深拷贝指不仅复制对象本身，还复制对象中的属性和元素因为性能问题，通常情况不太使用深拷贝
*/let arr4 = [{"name":"l"},{"name":"q"}] let arr5 = structuredClone(arr4)

let arr = [{"name":1},{"name":2}]// 可以将一个数组中的元素展开到另一个数组中或者作为函数的参数传递，// 浅复制let arr2 = [...arr]console.log(arr2) // [ { name: 1 }, { name: 2 } ]

/*Object.assign(目标对象, 被复制的对象)将被复制对象中的属性复制到目标对象里，并将目标对象返回*/
const obj = {"name":1}const  obj1 = Object.assign({},obj)console.log(obj1) // { name: 1 }

const obj = {"name":1}
const  obj1 = Object.assign({"age":1},obj)console.log(obj1) // { age: 1, name: 1 }

// 也可以使用展开运算符进行对象复制const obj = {"name":1}
const  obj1 = {...obj}console.log(obj1) // { name: 1 },将obj中的属性在新对象中展开

const  arr = []
// 向数组的末尾添加一个或多个元素，并返回新的长度let l = arr.push(1,2,3)console.log(l) // 3console.log(arr) // [ 1, 2, 3 ]

const  arr = [1,2,3,4,5]// 删除并返回数组的最后一个元素let a = arr.pop()console.log(a) //  5console.log(arr) // [ 1, 2, 3, 4 ]console.log(arr.length) // 4

const  arr = [1,2,3,4,5]// 向数组的开头添加一个或多个元素，并返回新的长度let a = arr.unshift(99,98)console.log(a) //  7console.log(arr) // [99, 98, 1, 2, 3, 4 ]

const  arr = [1,2,3,4,5]// 删除并返回数组的第一个元素let a = arr.shift()console.log(a) //  1console.log(arr) // [ 2, 3, 4, 5]console.log(arr.length) // 4

// 可以删除、插入、替换数组中的元素// 参数:1. 删除的起始位置  2. 删除的数量 3. 要插入的元素 返回值:删除的元素
// 删除元素const  arr = [1,2,3,4,5]let a = arr.splice(1,2)console.log(a) // [2,3]console.log(arr) // [1,4,5]
// 替换元素const  arr = [1,2,3,4,5]let a = arr.splice(1,1,"ao") // 可以写多个元素console.log(a) // [2]console.log(arr) // [ 1, 'ao', 3, 4, 5 ]

// 插入元素const  arr = [1,2,3,4,5]let a = arr.splice(1,0,"ao","to") //在下表为1的地方开始插入ao,to,后续元素后移console.log(a) // []console.log(arr) // [ 1, 'ao','to', 2, 3, 4, 5 ]

// 反转数组const  arr = [1,2,"a","s",5]arr.reverse()console.log(arr) // [ 5, 's', 'a', 2, 1 ]

const arr = [1, 2, 3, 2, 4, 1];// 使用set方法去重const arr1 = [...new Set(arr)];console.log(arr1); // [1, 2, 3, 4]

// 循环判断去重const arr = [1, 2, 1, 3, 2, 2, 4, 5, 5, 6, 7]
const newArr = []
for(let ele of arr){    if(newArr.indexOf(ele) === -1){        newArr.push(ele)    }}
console.log(newArr)

function user(fn,age){    fn(age)}
function admin(age){    return age === 18;}
// 一个函数当做参数传递给另一个函数，这个函数称作回调函数(callback)user(admin,18)

// 通常回调函数使用匿名函数定义user(a => age === 18,18)

function a(){    return "hello"}

function b(fn){    return () => {        // ... 其他自定义代码                return fn()    }}

1.函数的嵌套2.内部函数要引用外部函数中的变量3.内部函数要作为返回值返回

function Sum() {    let num = 0 // 位于Sum作用域中    return () => {        num++        return num    }}

const newFn = new Sum()console.log(newFn()) // 1console.log(newFn()) // 2console.log(newFn()) // 3

// 闭包的原理就是利用词法作用域let a = "全局"

function one(){    console.log(a) // 全局    return a}


function two(){    let a = "局部"    console.log(a) // 局部    one()  // 全局
    function three(){         console.log(a) // 局部，函数定义是外部变量a是two中的a    }    return three}


let fn = two()fn()

function test(num){    // 终止条件    if (num === 1){        return 1    }     // 调用自身    return test(num-1) * num}

/*  sort用来对数组进行排序（会对改变原数组）  sort默认会将数组升序排列    注意：sort默认会按照Unicode编码进行排序，所以如果直接通过sort对数字进行排序        可能会得到一个不正确的结果  参数：    - 可以传递一个回调函数作为参数，通过回调函数来指定排序规则        (a, b) => a - b 升序排列        (a, b) => b - a 降序排列*/
let arr = [3,3,4,6,8,1,2,10]

arr.sort((a,b) => a -b)
console.log(arr)

/* 用来遍历数组 需要一个回调函数作为参数，这个回调函数会被调用多次 数组中有几个元素，回调函数就会调用几次 每次调用，都会将数组中的数据作为参数传递 回调函数中有三个参数：    element 当前的元素    index 当前元素的索引    array 被遍历的数组*/
let arr = [3,3,4,6,8,1,2,10]

arr.forEach((element,index,array)=>{    console.log(element)    console.log(index)    console.log(array)})

/*将数组中符合条件的元素保存到一个新数组中返回需要一个回调函数作为参数，会为每一个元素去调用回调函数，并根据返回值(true、false)来决定是否将元素添加到新数组中非破坏性方法，不会影响原数组
*//*根据当前数组生成一个新数组需要一个回调函数作为参数，回调函数的返回值会成为新数组中的元素非破坏性方法不会影响原数组*/

let a = ["商城","账户","登录","注册"]

let b = a.map(ele => "<li>" + ele + "</li>")
console.log(b) // [ '<li>商城</li>', '<li>账户</li>', '<li>登录</li>', '<li>注册</li>' ]

/*可以用来将一个数组中的所有元素整合为一个值参数：    1. 回调函数，通过回调函数来指定合并的规则    2. 可选参数，初始值*/
let arr = [1,2,3,4,5,6,7,8,10]
let b = arr.reduce((a,b) => a+b)console.log(b) // 46


let arr2 = [1,2,3,4,5,6,7,8,10]
let b2 = arr2.reduce((a,b) => a+b,10)console.log(b2) // 56

/*arguments是函数中又一个隐含参数arguments是一个类数组对象（伪数组）和数组相似，可以通过索引来读取元素，也可以通过for循环变量，但是它不是一个数组对象，不能调用数组的方法arguments用来存储函数的实参，无论用户是否定义形参，实参都会存储到arguments对象中可以通过该对象直接访问实参
*/

function test(){    console.log(arguments) // { '0': 1, '1': 3, '2': 4 }    console.log(arguments[0]) // 1
}

test(1,3,4)

/*可变参数，在定义函数时可以将参数指定为可变参数- 可变参数可以接收任意数量实参，并将他们统一存储到一个数组中返回- 可变参数的作用和arguments基本是一致，但是也具有一些不同点：    1. 可变参数的名字可以自己指定    2. 可变参数就是一个数组，可以直接使用数组的方法    3. 可变参数可以配合其他参数一起使用,当可变参数和普通参数一起使用时，需要将可变参数写到最后
*/

function test(...args){    console.log(args) // [ 1, 3, 4 ]    console.log(args[0]) // 1]

}

test(1,3,4)

function test(){  return "hello"}
test.call() // "hello"test.apply() // "hello"

/*call 和 apply除了可以调用函数，还可以用来指定函数中的thiscall和apply的第一个参数，将会成为函数的this通过call方法调用函数，函数的实参直接在第一个参数后一个一个的列出来
*/class  User{    name = "l"    age = 18}



function test(a,b){    console.log(this.name) // name    console.log(this) // User { name: 'l', age: 18 }    console.log(a) // 1    console.log(b) // 2
}

let user = new User()// 指定test函数的this是user对象test.call(user,1,2)

// 通过apply方法调用函数，函数的实参需要通过一个数组传递class  User{    name = "l"    age = 18}



function test(a,b){    console.log(this.name) // name    console.log(this) // User { name: 'l', age: 18 }    console.log(a) // 1    console.log(b) // 2
}

let user = new User()// 指定test函数的this是user对象test.apply(user,[1,2])

class  User{    name = "l"    age = 18}



function test(a){    console.log(a) // 10    console.log(this.name) // l
}

const user = new  User()
// 指定新函数的this和参数，如果是原函数()调用，则走原函数的参数和thisconst newFn = test.bind(user,10)newFn()