遍历

iterator是什么

iterator遍历器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.iterator的作用
        // iteratot 遍历器（迭代器）
        // for()
        // [1,2].array.forEach(element => {
            // 
        // });
        // iterator也是用来遍历的

        // 寻找iterator
        // console.log(Iterator);
        // console.log([1,2][Symbol.iterator]());

        // 使用iterator
        const it = [1,2][Symbol.iterator]();
        console.log(it.next());//{value: 1, done: false}
        console.log(it.next());//{value: 2, done: false}
        console.log(it.next());//{value: undefined, done: true}

        // it：可遍历对象（可迭代对象）
        // Symbol.iterator:可遍历对象的生成方法

        // 4.什么是iterator
        // Symbol.iterator(可遍历对象的生成方法) ->(可遍历对象)->it.next()=>...(直到done为true)
    </script>
</body>
</html>

iterator解惑

为什么需要iterator遍历器

遍历数组：for和foreach方法
遍历对象：for in循环 iterator是一个统一遍历的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.为什么需要iterator遍历器
        // 遍历数组：for循环和foreach方法
        // 遍历对象：for in循环

        // iterator 遍历器是一个统一的遍历方式

        // console.log([][Symbol.iterator]());
        // console.log({}[Symbol.iterator]());

        // 2.如何更方便的使用 iterator
        // Symbol.iteator->it->next()

        // 我们一般不会直接使用iterator去遍历
        // for...of
    </script>
</body>
</html>

for...of的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 认识for of
        // const arr = [1,2,3];
        // const it = arr[Symbol.iterator]();
        // console.log(it.next());
        // console.log(it.next());
        // console.log(it.next());
        // console.log(it.next());

        // let next = it.next()
        // console.log(next);
        // while(!next.done){
        //     console.log(next.value);
        //     next= it.next();
        //     console.log(next);
        // }

        // for(let val of arr){
        //     console.log(val);
        // }

        // for of循环只会遍历出哪些done为false时对应的value值

        // 2.与break continue一起使用
        // const arr = [1,2,3]
        // for(const item of arr){
        //     if(item ===2){
        //         // break
        //         continue
        //     }
        //     console.log(item);
        // }
        // arr.forEach()

        // 3.在for...of中取得数组的索引
        const arr = [1,2,3];

        // keys()得到的是索引的可遍历对象 可以遍历出索引值
        // console.log(arr.keys());
        for(const keys of arr.keys()){
            console.log(keys);
        }
        // values得到的是值得可遍历对象 可以遍历出值
        for(const values of arr.values()){
            console.log(values);
        }
        for(const values of arr){
            console.log(values);
        }
        
        // entries得到的是索引+值组成的数组的可遍历对象
        for(const entries of arr.entries()){
            console.log(entries);
        }
        for(const [index,value] of arr.entries()){
            console.log(index,value);
        }
    </script>
</body>
</html>

原生可遍历与非原生可遍历

1.什么是可遍历

只要有Symbol.iterator方法并且这个方法可以生成可遍历对象就是可遍历的 2.原生可遍历的有哪些
数组
Set
Map
arguments
NodeList 3.非原生可遍历的有哪些

        // 一般的对象
        // const person = {sex:'male',age:18}
        // person[Symbol.iterator]=()=>{
        //     let index = 0;
        //     return {
        //         next(){
        //             index++;
        //             if(index === 1){
        //                 return{
        //                 value:person.age,
        //                 done:false
        //                 }
        //             }else if(index ===2){
        //                 return{
        //                     value:person.sex,
        //                     done:false
        //                 }
        //             }else{
        //                 return{
        //                     value:undefined,
        //                     done:true
        //                 }
        //             }
        //         }
        //     }
        // }
        // for(let val of person){
        //     console.log(val);
        // }
        ```
        ```js
        const obj ={
            0:'alex',
            1:'male',
            length:2
        };

        obj[Symbol.iterator] = Array.prototype[Symbol.iterator]
        // obj[Symbol.iterator]=()=>{
        //     let index = 0;

        //     return {
        //         next(){
        //             if(index<obj.length){
        //                 value = obj[index];
        //                 done=false
        //             }else{
        //                 value= undefined;
        //                 done=true
        //             }
        //             index++;
        //             return{
        //                 value,
        //                 done
        //             }
        //         }
        //     }
        // }
        // for(let val of obj){
        //     console.log(val);
        // }
        // for(let val of new Map([["0",1]])){
        //     console.log(val);
        // }
        // console.log(new Map([["0","1"]]));
        // function fn(){
        //     for(let val of arguments){
        //         console.log(val);
        //     }
        // }
        // fn(1,2,3,34)
        ```
## 使用iterator的场合
```js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 原生可遍历的
        // Array数组
        // string
        // Set
        // Map
        // 函数的arguments对象
        // NodeList对象

        // for...of

        // 1.数组展开运算符
        console.log(...[12,2,3,4]);
        console.log(1,2,3);
        console.log(...'str');
        console.log(...new Set([1,2,3]));
        // console.log(...{});×

        // 2.数组的解构赋值
        // const [a,b] = [1,2];
        // const [a,b] = [...[1,2]]
        // const [a,b] ='hi'
        // const [a,b] = [...'hi']
        // const[a,b] = [...new Set([1,2])]
        // console.log(a,b);

        // 3.Set和Map的构造函数
        // new Set(iterator)
        // new Map(iterator)
    </script>
</body>
</html>

ES6字符串的新增方法

includes

判断字符串中是否有某些字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 判断字符串中是否含有某些字符

        // 1.基本用法
        // console.log('abc'.includes('a'));
        // console.log('abc'.includes('ab'));
        // console.log('abc'.includes('bc'));
        // console.log('abc'.includes('ac'));//false

        // 2.第二个参数
        // 表示开始搜索的位置 默认是0
        console.log('abc'.includes('a'));
        console.log('abc'.includes('a',0));
        console.log('abc'.includes('a',1));//false

        // 3.应用
        // https://www.imooc.com/course/list
        // https://www.imooc.com/course/list?c=javascript

        let url = 'https://www.imooc.com/course/list?'
        const addURLParam = (url,name,value)=>{
            if(!url.includes('?')){
                url +=url.includes('?') ?'&':'?'
            }
            url+=`${name}=${value}`
            return url
        }
        url = addURLParam(url,'c','fe')
        console.log(url);
        url = addURLParam(url,'a','b')
        console.log(url);
    </script>
</body>
</html>

padStart()和padEnd()

补全字符串

<script>
        // 补全字符串
        // 1.基本用法
        // console.log('x'.padStart(5,'ab'));
        // console.log('x'.padEnd(5,'ab'));
        // console.log('x'.padEnd(4,'ab'));

        // 2.注意事项
        // 原字符串的长度 等于或大于最大长度 不会消减原字符串 字符串补全不会生效返回原字符串
        // console.log('xxx'.padStart(3,'ab'));
        // console.log('xxx'.padEnd(3,'ab'));

        // 用来补全的字符串与原字符串长度之和超过了最大长度 截去超出位数的补全字符串原字符串不懂
        // console.log('abc'.padStart(10,'0101010101010101'));
        // console.log('abc'.padEnd(10,'0101010101010101'));

        // 显示日期格式
        // 2020
        // 10
        // 10

        // 2020-10-10
        // 2020-01-01
        console.log('10'.padStart(2,0));
        console.log('1'.padStart(2,0));
    </script>
    ```
## trimStart()和trimEnd()
- 清空字符串的首或尾 中间的空格不会清除
```js
<script>
        // 请空字符串的首或尾 中间的空格不会清除
        // 1.基本用法
        const s = ' a b c '
        // console.log(s);
        console.log(s.trimStart());
        console.log(s.trimEnd());
        console.log(s.trimLeft());
        console.log(s.trimRight());
        console.log(s.trim());

        // 2.应用
        const username =document.getElementById("username")
        const btn =document.getElementById("btn")
        btn.onclick=function(){
            if(username.value.trim()!==""){
                console.log(username.value);
                console.log('可以提交');
            }else{
                console.log(username.value);
                console.log("不能提交");
            }
        }
    </script>
    ```
# ES6数组的新增方法
## includes()
- 判断数组是否有某个成员
```js
 <script>
        // 1.基本用法
        // 判断数组中是否有某个成员
        console.log([1,2,3].includes('2'));//false
        console.log([1,2,3].includes(2));
        // 第二个参数表示搜索的起始位置 默认值是0
        console.log([1,2,3].includes(2,2));
        // 基本遵循严格相等(===)但是对于NaN的判断与===不同
        // includes认为NaN===NaN
        console.log(NaN===NaN);
        console.log([1,2,NaN].includes(NaN));
        // 2.应用：去重
        let arr =[]
        for(let val of [1,2,1]){
            if(!arr.includes(val)){
                arr.push(val)
            }
        }
        console.log(arr);
    </script>
    ```
## Array.from()
- 将其他数据类型转换为数组
```js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 将其他数据类型转换为数组

        // 1.基本用法
        console.log(Array.from("str"));
        // 2.哪些可以通过Array.from()转换为数组
        // 2.1 所有可遍历的
        // 数组 字符串 Set Map NodeList arguments
        // console.log(Array.from(new Set([1,2])));
        // console.log(...[new Set([1,2])]);

        // 拥有length属性的任意对象
        // const obj = {
        //     '0':'a',
        //     '1':'b',
        //     name:'alex',
        //     length:3
        // }
        // console.log(Array.from(obj));
        // console.log([...obj]);×

        // 第二个参数
        // 作用类似于数组的map方法 用来对每个元素进行处理 将处理后的值放入返回的数组
        // console.log(
        //     [1,2].map(value=>{
        //         return value *2
        //     })
        // );
        // console.log(Array.from('12',value=>value *2));
        // console.log(Array.from('12').map(value=>value *2));

        // 4.第三个参数
        Array.from(
            '12',
            value=>{
                console.log(this);
            },
            document
        )

        Array.from(
            '12',
            function(){
                console.log(this);
            },
            document
        )
    </script>
</body>
</html>

find()和findIndex()

find():找到满足条件的一个立即返回
findIndex()：找到满足条件的一个立即返回索引

<script>
        // find():找到满足条件的一个立即返回
        // findIndex()：找到满足条件的一个 立即返回索引

        // 1。基本用法
        // console.log(
        //     [1,5,10,15].find((value,index,arr)=>{
        //         // console.log(value,index,arr);
        //         return value>9
        //     },document)
        // );
        // console.log(
        //     [1,5,10,15].findIndex((value,index,arr)=>{
        //         // console.log(value,index,arr);
        //         console.log(this);
        //         return value>9
        //     },document)
        // );
//      console.log([1,5,10,15].findindex(function(value,index,arr){
//            // console.log(value,index,arr);
//             console.log(this);
//             return value>9
//        },document)
// );
    

        const student = [
            {
                name:'张三',
                sex:"男",
                age:19
            },
            {
                name:'小红',
                sex:"女",
                age:19
            },
            {
                name:'小王',
                sex:"男",
                age:26
            },
        ]
        console.log(student.find((value=>value.sex==="女")));
        console.log(student.findIndex((value=>value.sex==="女")));
    </script>
    ```
# ES6对象的新增方法
## Object.assign()
- Object.assign()：用来合并对象
 Object.assign直接合并到了第一个参数中 返回的就是合并后的对象
```js
Object.assign(目标对象,源对象1,,源对象2...)

<script>
        // 基本用法
        // Object.assign(目标对象,源对象1,源对象2)
        // 用来合并对象
        // const apple ={
        //     "color":'红色',
        //     "shape":'圆形',
        //     'taste':'甜'
        // }
        // const pen ={
        //     "color":'黑色',
        //     "shape":'圆柱形',
        //     'taste':'写字'
        // }
        // console.log(Object.assign(apple,pen));
        // console.log(apple);
        // console.log({...apple,...pen});

        // Object.assign直接合并到了第一个参数中 返回的就是合并后的对象
        // console.log(Object.assign(apple,pen)===apple);

        // 可以合并多个对象
        // console.log(Object.assign({},apple,pen));

        // 注意事项
        // 2.1基本数据类型作为对象
        // 与对象的展开类似先转换成对象 再合并
        // console.log(Object.assign({},undefined));
        // console.log(Object.assign({},null));
        // console.log(Object.assign({},null));
        // console.log(Object.assign({},true));
        // console.log(Object.assign({},'str'));
        // 2.2同名属性的替换
        // 后面的直接覆盖前面的
        // const apple ={
        //     "color":'红色',
        //     "shape":'圆形',
        //     'taste':'甜'
        // }
        // const pen ={
        //     "color":'黑色',
        //     "shape":'圆柱形',
        //     'taste':'写字'
        // }
        // console.log(Object.assign({},apple,pen));

        // 3.应用
        // 合并默认参数和用户参数
        const logUser = userOptions=>{
            const DEFAULTS ={
                username:'ZS',
                age:0,
                sex:'male'
            }

            const options = Object.assign({},DEFAULTS,userOptions)
            // const options = Object.assign({},DEFAULTS,undefined)
            console.log(options);
        }
        logUser({})
        logUser({username:'alex'})
    </script>
    ```
## Object.keys() Object.values() Object.entries()
```js
<script>
        // 基本用法
        // const person = {
        //     name:'alex',
        //     age:16
        // }
        // console.log(Object.keys(person));
        // console.log(Object.values(person));
        // console.log(Object.entries(person));

        // 2.与数组类似方法的区别
        console.log([1,2].keys());
        console.log([1,2].values());
        console.log([1,2].entries());
        // console.log(person.keys());

        // 数组的keys() values() entries()等方法是实例方法 返回的都是iterator
        // 对象的Object.keys() Object.values() Object.entries()等方法是构造函数的方法 返回的是数组
        // 使用for of循环遍历对象
        const person = {
            name:'alex',
            age:16
        }    
        // for(let keys of Object.keys(person)){
        //     console.log(keys);
        // }
        // for(let values of Object.values(person)){
        //     console.log(values);
        // }
        // for(let entries of Object.entries(person)){
        //     console.log(entries);
        // }
        // Object.keys()/values/entries并不能保证顺序一定是你看到的样子 这一点和for in是一样的
    </script>
    ```

ES6（2）

遍历

iterator是什么

iterator解惑

for...of的用法

原生可遍历与非原生可遍历

ES6字符串的新增方法

includes

padStart()和padEnd()

find()和findIndex()