<script>
    //includes()：是否包含子字符串
    //一个参数时，默认从0位置开始搜寻
    console.log("changlu".includes('ch'));//true
    console.log("changlu".includes('gu'));//false
    //两个参数，可设置指定位置开始搜寻
    console.log("changlu".includes('ch', 1));//false
    console.log("changlu".includes('gl', 2));//true
</script>

<script>
    //实际应用：拼接url的请求参数
    //需求：https://www.baidu.com  =>  https://www.baidu.com?username=changlu&sex=男
    let url = "https://www.baidu.com";
    //封装函数来进行添加
    const addUrlArg = (name, val) => {
        //判断是否包含?，若是不包含说明已经有了?，则添加&进行拼接
        url += url.includes("?") ? '&' : '?';
        //拼接请求参数
        url += `${name}=${val}`;
        return url;
    }
    console.log(addUrlArg("username", "changlu"));
    console.log(addUrlArg("sex", "男"));
</script>

<script>
    //padStart()：填充左边。下面的情况都十分合理仅需要理解即可！
    //情况1：正正好好填充3次1在最前面
    console.log("cl".padStart(5, 1));//111cl
    //情况2：目标长度为5，原字符串只有2，每次填充12，此时就会截断右边部分
    console.log("cl".padStart(5, 12));//121cl
    //情况3：填充一次大于目标字符串长度，同样会截断多余的部分
    console.log("cl".padStart(3, 123));//1cl
    //情况4：一旦目标长度小于原有字符串长度，就会返回原本字符串
    console.log("cl".padStart(1, 123));//cl
    //padEnd()：填充右边，不同情况效果与padStart()大致相同
    console.log("cl".padEnd(5, 666));//cl666
</script>

<script>
    console.log("1".padStart(2, 0));
</script>

<script>
    //trimStart()、trimEnd()：清空左边空格；清空右边空格
    const str = " a b c ";
    console.log(str.trimStart());
    // console.log(str.trimLeft());  //效果与上面一致
    console.log(str.trimEnd());
    // console.log(str.trimRight()); //效果与上面一致
</script>

<div>
    <input type="text" name="name">
    <button>提交</button>
</div>
<script>
    const btn = document.querySelector("div button");
    const m_input = document.querySelector("div input");
    btn.addEventListener('click', () => {
        //使用trim()来将左右空格清除
        if (m_input.value.trim() === "") {
            console.log("内容为空，无法提交！")
        } else {
            console.log("提交成功");
            console.log(`content:${m_input.value}`);
        }
    }, false);
</script>

<script>
    //includes()：判断数组中是否有该元素
    //传入一个参数为搜索的值，默认从0开始
    console.log([1, 2, 3].includes(1));//true
    //从位置1开始搜索
    console.log([1, 2, 3].includes(1, 1));//false
    //比较特殊：NaN,在该方法中会认为NaN=NaN
    console.log([NaN, 1, 2].includes(NaN));//true
</script>

<script>
    const arr = [1, 1, 1, 2, 2, 3, 3, 5, 8, 9, 9];
    const newArr = [];
    //使用for...of来遍历数组
    for (const val of arr) {
        //来使用新数组去判断是否包含遍历到的值，若是不包含执行之后的push操作，包含的话直接跳过本次操作
        if (newArr.includes(val)) {
            continue;
        }
        newArr.push(val);
    }
    console.log(newArr);
</script>

<script>
    //数组
    console.log(Array.from([1, 2, 3, 4]));
    //字符串
    console.log(Array.from("changlu"));
    //Set
    console.log(Array.from(new Set([1, 2, 3, 3])));
    //Map
    console.log(Array.from(new Map().set("name", "changlu").set("age", 8)));
    //NodeList
    console.log(Array.from(document.querySelectorAll("div a")));
    //arguments
    const transitionArr = function () {
        return Array.from(arguments);
    }
    console.log(transitionArr(6, 6, 6, 6));
    //自定义对象无法进行转换只能返回一个空数组[]
    console.log(Array.from({ name: 'cl', age: 8 }));
</script>

<script>
    //拥有length属性的任意对象
    //情况一(不符合)：仅有length，无对应下标为数字的作为键
    const obj = {
        name: 'changlu',
        length: 1
    };
    console.log(Array.from(obj));//undefined
    //情况二(不符合)：有length长度以及数字为键的，但是没有从0开始的
    const obj1 = {
        1: 'changlu',
        length: 1
    };
    console.log(Array.from(obj1));//undefined
    //情况三(符合)：键符合数字并从0开始，有对应的length长度
    const obj2 = {
        0: 'changlu',
        '1': 'liner',
        2: '一辈子',
        length: 4
    };
    //将指定length个元素，即[0,length-1]下标为键的存储到数组中，若是没有对应键的存储undefined到数组
    console.log(Array.from(obj2));
</script>

<script>
    //使用回调函数对每个元素进行*2返回到数组中
    console.log(Array.from("12", (val) => val * 2));
</script>

<script>
    //箭头函数中没有this，无论是否指定第二个参数其this都是window对象
    console.log(Array.from("12", (val) => {
        console.log(this);
        return val;//若是写了回调函数不返回指定值，那么就会返回undefined
    }));
    console.log(Array.from("12", (val) => {
        console.log(this);
        return val;
    }, document));
    //回调函数为普通函数，可通过设置第二个参数对函数中的this进行设置
    console.log(Array.from("12", function (val) {
        console.log(this);
        return val;
    }));
    console.log(Array.from("12", function (val) {
        console.log(this);//普通函数中设置第二个参数能够设置指定的this对象
        return val;
    }, document));
</script>

<script>
    //find()：找到并返回元素值
    console.log([1, 2, 3].find((ele, index) => {
        return ele === 2;//返回true表示找到，false表示没有找到
    }))
    //findIndex()：找到并返回索引值
    console.log([1, 2, 3].findIndex((ele, index) => {
        return ele === 2;//返回true表示找到，false表示没有找到
    }))
</script>

<script>
    const objArr = [
        {
            name: 'changlu',
            age: 18
        }, {
            name: 'liner',
            age: 20
        }, {
            name: 'tiantian',
            age: 30
        }
    ];
    //需求：找出年龄大于20岁的指定对象，并输出其name与age
    const targetObj = objArr.find((ele) => {
        return ele.age > 20;//设置元素的age属性>20作为条件
    });
    console.log(targetObj.name, targetObj.age)
</script>