Day6 JavaScript(2)笔记

1函数定义的两种方法
function与ES6的箭头函数
function

let cloth='t-shirt-dirty'
function washMechine(cloth) {
            let result
            // slice 截取字符串,-5代表截取后五位字符
            let endStr=cloth.slice(-5)
            console.log(endStr);
            if(endStr==='dirty'){
                result='clean'
            }else{
                result=cloth
            }
            return result
        }

箭头函数

const washMechine2=(cloth)=>{
    let result
    let endStr=cloth.slice(-5)
    console.log(endStr);
    if(endStr==='dirty'){
        result='clean'
    }else{
        result=cloth
    }
    return result
}

注：区别在于箭头函数不是用function定义而是用const定义，好处是没有变量提升。箭头函数如果需要返回一个对象，用圆括号把要返回的包起来，eg:const fn2=(x,y)=>({x,y})

2 当你不知道传入的参数时，可以使用arguments获取传入的所有参数

function fn(){
    console.log(arguments);
}

fn(1,2,3) 等价于 fn.call(window,1,2,3)

3数组 3.1创建数组（以下两种方法都可）

方法一
    let array=[1,2,3];
    let array1=[1,"str",{name:"liuyang",age:21},[1,2,3]];
方法二
    let array2 = new Array(1,2,3);

3.2字符串变为数组(以下两种方法都可)

方法一
    let str = "12345";
    let array = str.split("")
方法二
     Array.from

3.3对象变为数组

//如果想让对象直接变为数组形式，需要加上length属性
    let obj = {0:"a",1:"r",2:"rt",length:3} //对象的下标必须是0,1,2且需要有length,才可以用array.from将对象转换为数组
    const array4 = Array.from(obj)
    console.log("对象变为数组"+array4);

3.4数组拼接

    const array_1 = [1,2,3,4]
    const array_2 = [5,6,7,8]
    const array_all = array1.concat(array2)

3.5数组切片

const sliceArray = array_all.slice(0,4)//截取数组前四个

3.6伪数组

    //伪数组与真数组的区别在于伪数组没有自己的原型，故它的方法没有真数组那么多
    const codelist = document.querySelectorAll('.code')
    console.log("伪数组"+codelist)
    
    
    
    <div>
        <div class="code"></div>
        <div class="code"></div>
        <div class="code"></div>
        <div class="code"></div>
    </div>

4数组的增删改查
4.1增
push

    const array = [1,2,3,4]
    array.push(5)
    array.push(6,7,8) /*或*/  array.push(...[6,7,8])//三个点把数组展开

unshift

    //从头部往数组里塞元素
    const array2 = [5,6,7,8]
    array2.unshift(1,2,3,4) //或...

splice

const array3=[1,2,3,4]
        //[1,5,6,2,3,4]
        //第一个参数开始下标    第二个参数删除的个数(往后删)    后面的参数，添加的内容
        array3.splice(1,0,5,6)

4.2删
pop

    let array01= [1,2,3,4]
    array.pop() //[1,2,3]

shift

    //shift从头部删除元素yuunshift对应
    array.shift() //[2,3]

4.3查

/*查*/
    const array02 = ["德国","英国","比利时"]
    //怎么知道下标是多少？通过值来获取下标。
    const index = array02.indexOf("比利时")//2

    const array021 = ["德国","英国","比利时","比利时"]
    const index1 = array021.indexOf("比利时")//2
    //结论：indexof只返回第一个元素的下标；如果传入一个数组中不存在的值，则返回-1


    //includes
    const result = array02.includes("美国")//False 返回布尔
    const result1 = array02.includes("德国")//True

    //通过下标获取数组中的元素值
    const Ger = array02[0]
    console.log(Ger) 

5数组的遍历
一、forEach

    //传入以函数作为参数，函数的参数自带数组的每一项以及索引
    //forEach没有返回值，直接修改原数组
    array =["北京","上海",'西安','澳门']
    array.forEach((item,index) => {
        if(index===2){
            item = "changed"
        }
    })
    console.log(array)
    //数字字符串数组在这里没有改变原数组，若是引用类型，比如对象类型，就会在这里看到变化

注：引用类型和值类型

一、基本类型
1、基本类型有：undefined / null / number / string / boolean / bigint / symbol
2、基本类型数据放在栈内存中
3、基本类型数据是不可变的

二、引用类型
1、引用类型有：Object / Array / Function 等，本质上都是属于 Object
2、引用类型以：地址: 数据 的映射关系来进行存储，其中地址放在栈内存，数据放在堆内存，若两个或 N 个变量指向同一个地址，则共用一份数据。
3、引用类型数据是可变的
详细内容：blog.csdn.net/cookcyq__/a…

二 map 映射

    //map需要给函数添加return，
    //有返回值，返回一个新的数组
    array =["北京","上海",'西安','澳门']
    const result = array.map((item,index)=>{
        if(index===2){
            return 'changed'
        }
        return item
    })
    console.log(array)
    console.log(result)

三 some 返回一个布尔值

    //只要数组中有一项满足条件就返回true
    //传入一个函数作为参数
    //有返回值，返回一个布尔值 
    array =["北京","上海",'西安','澳门']
    const result = array.some((item,index)=>{return item==="西安"})
    console.log(array)
    console.log(result)

四 findIndex方法

    //只要数组中有满足条件的，就返回对应的下标,所以findIndex更常用一点
    //有返回值，返回一个下标
    array =["北京","上海",'西安','澳门'] 
    const result = array.findIndex((item,index)=>{return item==="西安"})
    console.log(array)
    console.log(result)

五 find方法

    //只要数组中有满足条件，返回满足条件的项
    array =["北京","上海",'西安','澳门'] 
    const result = array.find((item,index)=>{return item==="西安"})
    console.log(array)
    console.log(result)

六 filter过滤

    //筛选数组中所有符合条件的项
    //有返回值，返回一个数组
    const array =["北京","上海",'西安','澳门'] 
    const result = array.filter((item,index)=>{return index<2})
    console.log(array)
    console.log(result)

注： 1window:
window 对象表示一个包含[DOM]文档的窗口，其 document 属性指向窗口中载入的 [DOM 文档]使用 [document.defaultView] 属性可以获取指定文档所在窗口。代表了脚本正在运行的窗口的 window 全局变量，被暴露给 Javascript 代码。
2this
在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）。this 不能在执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。ES5 引入了 bind 方法来设置函数的 this 值，而不用考虑函数如何被调用的。ES2015 引入了箭头函数，箭头函数不提供自身的 this 绑定（this 的值将保持为闭合词法上下文的值）