es6 新特性

let和const命令：

let特点：

不存在变量提升与暂时性死区
不能重复声明
块级作用域

块级作用域,指的是除 对象{} 以外，其它花都中使用let声明的变量都是某个作用域

const特点：

/*
某些值，从始至终不会变，那么建议使用常量。
PI、LN、E。推荐使用大写
程序中：URL地址、端口号。
const 声明常量 。一旦常量必须赋值。
*/

字符串新增方法：

startsWith

语法：字符串.startsWidth( 参数字符 )
描述：参数字符串是否在原字符串的头部

endsWith

语法：字符串.endsWidth( 参数字符 )
描述：参数字符串是否在原字符串的尾部

Symbol描述符：

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。

它是 JavaScript 语言的第七种数据类型。

Symbol 值通过Symbol函数生成。

代码案例应用场景：

作为对象的 键key，不参与任何运算

常用来模拟对象私有属性和方法。

一般常用于框架、js内置函数和对象中

let sym2 = Symbol('age')

let obj = {
    username:'zs',
    sym1:20,
    [sym2]:22 ,//以symbol的值当作key
}

// console.log( obj,'obj对象' )
console.log( obj[sym2] )//22
console.log( obj.sym1 )//20
console.log( obj[ 'sym1' ] )//20

 数组新增方法：

Array.of

语法：Array.of( ...args )
作用：得到一个数组

代码案例：

/*
    字面量      []
    构造函数：new Array()
*/

// let arr1 = new Array( 3 )
// let arr2 = [3]
// console.log( arr1,'arr1',arr1[2] ) //3*undefined  有缺陷
// console.log( arr2,'arr2' ) //[3]

//es6 Array.of
let arr1 = Array.of( 3 )
let arr2 = Array.of( 33,22 )
console.log( arr1,'arr1' )//[3]
console.log( arr2,'arr2' )//[33,22]

Array.from

语法：Array.from( arrayLike )
作用：把伪数组转换成数组，相对于ES5的写法，更加简洁方便

代码案例：

<button>30元</button><button>120元</button><button>50元</button>
<script>

/*
    基本方法1：push pop concat shift unshift sort 
    有回调函数的方法：every forEach map some filter find findIndex
    以上方法是数组对象调用的：因为这些方法在原型链上
    es6提供了一些方法
        Array.of()
        Array.from()
*/

//1. Array.from( 伪数组 ) : 把伪数组转换成数组

//伪数组：和数组很相像，但不是数组，伪数组的原型链不指向Array
//arguments对象、选择元素集合、节点集合等都是伪数组

let btns = document.getElementsByTagName('button')
// console.log( btns )
// console.log( btns.forEach,'undefined' )

// btns.forEach(  ) //forEach is not a function

//转数组
a = Array.from( btns )
console.log( a,'是个数组了' )
a.forEach(function(ele){
    console.log( ele,'当前循环项' )
})
</script>

 对象新增方法：

Object.keys

语法：Object.keys( object )
描述：返回一个数组，成员是参数对象自身的属性的键名

Object.values

语法：Object.values( object )
描述：返回一个数组，成员是参数对象自身的属性的键值

代码案例：

/*
    Object.keys( 对象 )： 获取对象下的key，以数组形式返回
    Object.values( 对象 )： 获取对象下的value，以数组形式返回
*/

let obj = { username: 'zs', age: 20 } 

let keys = Object.keys( obj )
console.log( keys,'keys' )

let values = Object.values( obj )
console.log( values,'values' )

Object.assign

语法： Object.assign( target,source1,source2,... )
描述：对象的合并( 拷贝 )，将源对象（source），复制到目标对象 ( target )

代码案例：

//浅拷贝只拷贝了一层。
//Object.assign 只for...in了一层，没用上递归 。

//Object.assign( 目标对象,源对象1,源对象2,... ) //把源对象1,源对象2等等拷贝 到目标对象上

let obj1 = {
    username:'猪八戒',
    hobbies:['吃','喝','背翠兰'],
}

let obj2 = {}

Object.assign( obj2,obj1 )

// console.log( obj2,'obj2' )

obj2.username = 'zbj'
obj2.hobbies[1] = 'he'
console.log( obj2,'obj2' )
console.log( obj1,'obj1' )

JSON.parse

语法：JSON.parse( jsonstr)
描述：把json字符串转换成js对象

JSON.stringify

语法：JSON.stringify( object )
描述：把js对象转换成json字符串

代码案例：

//JSON.parse/JSON.stringify

    //重点要记住：json字符串中的key和里面字符串必须 是双引号，而且json字符串不应该有函数 。
    //JSON.stringify 把js对象转换成json字符串 ,它会把对象中的函数会删除
    //JSON.parse: 把json字符串转换成js对象

    //1. JSON.stringify
    let obj = { username: 'zs', age: 20 } //这是js对象
    let jsonstr1 = JSON.stringify(obj)
    // console.log( jsonstr1,'json字符串' )  //{"username":"zs","age":20}

    //2. JSON.parse
    let str1 = ` {"username":"zs","age":20} `  //把json字符串转换成js对象
    // console.log( JSON.parse( str1 ) )//如果JSON.parse解析一个不是json字符串的值会报错。 
    : Unexpected token a in JSON at position 18

    //3. 实现深拷贝有缺陷：函数会丢失。最没有问题的是 DeepCopy方法（ 递归+浅拷贝 ）
        //    JSON.parse( JSON.stringify(  ) )

    let obj2 = {
        username: 'zs1',
        age: 10,
        fn: function () {
            console.log('my is fn')
        }
    }

    console.log( JSON.parse( JSON.stringify( obj2 )  ) )

Set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值

/*
    数组结构：
        1） 数组：有序的（下标）
        2） 对象：无序的（无下标，由键和值组成）
*/

/*
    es6为开发者提供了2个新的数据结构
    set类似数组
    map类似对象
*/

基本用法

代码案例：

//set : 它和数组相似，是有一组数据组成，但是里面没有重复的值。我们经常会用它来实现数组去重，是个伪数组

// new Set( [数组] )

// console.log( typeof Set ) //function
//1. 得到一个set
let arr0 = [ 11,11,22,33,11,22,22,44 ]
let set1 = new Set( arr0  )
// console.log( typeof set1 ) //object
// console.log( set1 ) //{ 0:11 ,1:22 ,2:33,3:44,size:4 }

// console.log( set1[0] )

let arr1 = Array.from( set1 )
console.log( arr1 )

//去重封装
function UniqueArr( arr ){

    let set = new Set( arr  )
    return Array.from( set )
}

常见方法

size 获取set集合的长度
add(值) 给集合添加值，返回新set
delete(值) 删除某个值，返回布尔值，表示是否删除成功
has(值) 查询这个值是否时集合的成员，返回布尔值
clear() 清空集合,没有返回值

代码案例：

//new Set() 得到 一个set实例，原型链有一些方法，做为了解即可。
let arr0 = [ 11,11,22,33,11,22,22,44 ]
let set1 = new Set( arr0  )

// console.log( set1 )
//add(value) 添加值

set1.add( 44 )
set1.add( 55 )

//delete(value) 删除值
set1.delete( 11 )
// console.log( set1 )
//has() 是否有这个值
console.log( set1.has( 11 ) )//false
//clear() 清空

Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

基本用法：

对象只能用字符串和symbol当作键

let persons = { username:'zs' }

let obj = { 
    [persons]:'使用对象当作键'   //当用对象当作键，那么会自动转换字符串 。'[object Object]'
 }

/*
obj = { 
    '[object Object]':'使用对象当作键'   ,
 }
*/  
console.log( obj,'obj' )
console.log( obj['[object Object]'],'obj' )

 常见用法：

//2. new Map( [ [key,value],[key,value],... ] )
let persons = { username:'zs' }

let map1 = new Map( [ [1,'number123'],['a','my is string'],[ persons,'使用对象当作key' ] ] )
// console.log( map1,'map1' )

/*
    size
    get(key)            localStorage.getItem(key)
    set(key,value)      localStorage.setItem(key,value)
    delete(key)         localStorage.removeItem(key,value)
    clear()
    has(key)
*/

console.log( map1.get('a') )//'my is string'
map1.set(true,'my is boolean')
console.log(map1,'map1')

 运算符表达式：

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

解构：解析（分析）结构 ，分析数组或对象的结构
赋值：为变量赋值
等号两边的结构需要一致才能解构并且为变量赋值

 /*
let [] = []
*/

1.完全解构：

//1. 基本语法
// let arr = [ 10,20,11 ] //arr[0] arr[1]
// let [ a,b,c ] = [ 10,20,11 ]
// console.log( a,b,c ) //10,20,11

2.不完全解构：

//2. 不完全解构 . 值比变量多
// let [ b,c ] = [ 10,20,11 ]
// console.log( b,c ) //10,20

3.解构失败：

//3. 解析失败。变量声明但未赋值，变量比值多
// let [ a,b,c ] = [ 10,20 ]
// console.log( a,b,c ) //c:undefined

4.解构缺省

//4. 缺省
// let [ ,b,c ] = [ true,false,20 ]
// console.log( b,c )//false 20

5.解构默认值：

//5. 默认值
// let [a, b, c = 111] = [10, 20,null] //没有相应的值赋值给c，所以默认值生效。如果有值则覆盖默认值 
let [a, b, c = 111] = [10, 20] //没有相应的值赋值给c，所以默认值生效。如果有值则覆盖默认值 。
console.log(a, b, c) //c:111

数组解构应用（数据交换）：

代码案例：

// let a = 10;
// let b = 20;

// let c = a;
// a = b;
// b = c;

let a = 10;
let b = 20;

 [b,a] = [a,b];
 console.log( a,b )

 对象解构：

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，而对象的属性没有次序。

无序的：

/*
    无序的
    语法1：{ key2:变量名2,key1:变量名1 } = { key1:value1,key2:value2,... }
    语法2（简写）：{ key2,key1} = { key1:value1,key2:value2,... }
                    声明了key2和key1变量 值是右键对象中对应的键的值
*/

完整语法解构：

//1. 完整写法，完全的解构（每个属性中的值都赋值给了某个变量）
// let { username:uname,age:uage } = { age:20,username:'zs' }
    //把右边对象中username中值给了变量uname，。。。。
    // console.log( uname,uage )

简写语法解构：

//2. 简写写法
// let { username,age } = { age:20,username:'zs' }
// console.log( username,age )

解构默认值：

//3. 默认值
let { username,age,sex='女' } = {sex:'男', age:20,username:'zs' }
console.log( sex ) //男

解构失败：

//4. 解构失败:变量未赋值
// let { username,age,sex } = { age:20,username:'zs' }
// console.log( sex ) //undefined

 使用场景：

当函数参数比较多时进行优化）代码案例：

// function getStyle1( ele,attr ){
        /*
            let ele = 'width'
            let attr = document
        */
//     console.log( ele,'ele' )
//     console.log( attr,'attr' )
// }
// getStyle1( 'width',document )


function getStyle2( {ele,attr} ){
    /*
        let {ele,attr} =  { ele:document,attr:'height' }
    */
    console.log( ele,'ele' )
    console.log( attr,'attr' )
}
getStyle2( { attr:'height',ele:document } )

 多层解构：

    /*
        多层解构的补充-了解
    */

    let person = {
        username: 'zbj',
        hobbies: ['吃', '喝']
    }
    // console.log( person.hobbies[1] )

    let { hobbies: [, a] } = person
    console.log(a, 'a-----')

…运算符

rest参数：

代码案例：

//rest是获取函数的剩余参数，间接的可以获取所有参数 。
        //es6的rest是为了代替es5中的arguments。
        //rest是个数组，而arguments为伪数组
        //无论有无具体的实参，rest永远是个数组
    
        //1. arguments
        // function fn1(){
        //     console.log( arguments,'arguments' )
        // }
        // fn1( 2,3,5 )
   
        //2. 获取所有参数
        // function fn2( ...rest ){ //rest名称只要符合变量名规范即可
        //     console.log( rest ) //...前面没有其它参数，则获取了所有参数
        // }
        // fn2( 2,3,5,7 )

        //3. 获取剩余参数
        function fn3( a,b,...rest ){
            console.log( a,b )
            console.log(rest)
        }
        //fn3( 11,22,33,44,55 ) //11=>a  22=>b    [33,44,55 ]=>rest
        fn3(  ) //    [ ]=>rest

扩展运算符(spread)

函数传参：

//1. 展开数组形式的实参。了解即可, 调用函数实参如果是数组可以展开，对象不能在此处展开
// function fn1( a,b,c ){
//     console.log( a,b,c )
// }

// fn1( 1,2,3 )

function fn1( a,b,c ){
    console.log( a,b,c )
}

// fn1( ...[10,20,30] ) //fn1( 10,20,30 )

// console.log( ...[11,22,33] )

实现浅拷贝：

//1. 实现浅拷贝

// let obj1 = { 
//     username:'zs',
//     hobbies:[ 11,22,33 ]
//  }

//  let obj2 = { ...obj1 } //实现的浅拷贝
// //  console.log( obj2 )
// obj2.username = 'ls'
// obj2.hobbies[0] = 10
// console.log( obj1,'obj1' )

数组合并：

//2. 数组合并
// concat
let arr1 = [ 10,20 ]
let arr2 = [33,44]
let arr3 = [ ...arr2,...arr1 ]
// console.log( arr3,'arr3' ) //[33, 44, 10, 20] 

 伪数组转数组：

//3. 伪数组转数组
let set1 = new Set( [11,22,33,11,22,33,33] )
// console.log( set1 )
// console.log( [ ...set1 ] )   

//三种伪数组转数组：Array.from   Array.prototype.slice.call( 伪数组 )  [ ...伪数组 ]

函数扩展：

参数特性:

 /*
 形式变了：语法变了。箭头函数，写法上更加简洁。
 形参、返回值、this指向

 (形参列表)=>{
     函数体
     return 返回值 
 }
 */

没有参数：

//1. 定义一个基本的箭头函数，使用变量声明的方式
//  let fn1 = ()=>{
//      console.log('my is fn1')
//  }

//  fn1() //先声明后使用

多个参数：

//2. 形参的扩展
//2.1 多个参数
// let fn2 = ( a,b,c )=>{
//     console.log( a,b,c )
// }
// fn2( 11,22,33 )

 一个参数：

//2.2 只有一个形参，小括号可以省略
// let fn3 = (a)=>{
// let fn3 = a =>{
//     console.log( a )
// }
// fn3(111)

返回值特性：

有返回值：

//3.1 完整写法return
let fn4 = ()=>{
    return 10
}
// console.log( fn4() )

//3.2 如果有返回值，且函数内只有1行代码那么return可以省略，同时也要把花括号省略
let fn5= ()=>20

// console.log( fn5() )//20

let fn6= a=>a*a
 
//  console.log( fn6(5 ) ) //25

//3.3 返回对象的问题

let fn7 = ()=> ( { age:20,sex:'男' } ) //把对象使用小括号包起来。

console.log( fn7() )

不做为构造函数：

//1. 不做为构造函数 
let fn1 = ()=>{

}

// new fn1() // fn1 is not a constructor

函数参数默认值：

// function fn3( a,b,c = 11 ){
//     console.log( a,b,c ) //c:11
// }
let fn3 = (a,b,c = 12)=>{
    console.log( a,b,c )
}

// fn3( 10,20 ) //c:12
fn3( 11,22,33 ) //c:33

箭头函数没有arguments：

//2. 箭头函数无arguments
let fn2 = ( ...rest )=>{
    console.log( rest )
}
// fn2( 11,22 ) //[ 11,22 ]

箭头函数中this问题：

 /*
        call/apply  bind   事件  new  普通函数调用/回调：window
        箭头函数和以上通通没有关系
        箭头函数无this指向，它里面的this指的是上层环境（ script全局、function ）的this
 */
//3.1 普通调用
let fn4 = ()=>{
    console.log( this,'fn4' )
}

// fn4( ) //window

//3.2 事件调用
document.onclick = ()=>{
    console.log( this,'事件调用' ) //window
}

//3.3 扩展一下
function Person(){
    //this = new Object()
    let fn = ()=>{
        console.log( 'fn',this )
    }
    fn()
}

// Person() //this=> window

// new Person() //this=> person的实例对象

Person.call( document ) //this=> document

箭头函数的使用场景：

就应用在回调函数中，写法上更加简洁，其它形式上：事件还是普通的function！

    let obj = {
        prices:[ 100,300,200 ],
        num:10,
        sum:function(){
            //console.log( this,'obj' )
            // let _this = this
            // let ps = this.prices.map( function(item){
            //     // console.log( this )
            //     return item * _this.num
            // } )

            let ps = this.prices.map((item)=>{
                // console.log(this)
                return item * this.num
            } )
            console.log( ps,'ps'  )
        },
    }

    obj.sum()

    /*
        已知函数A，函数B
        函数B传递到A中，B在A中执行的。此时B是A的回调
    */

 类calss：

class的基本使用：

代码示例：

    /*
        class 类名{
            ....定义属性
            ....定义方法
        }
    */
    //1. class定义类
    class Person {
        //1.1 定义属性
        username = 'ls'
        age = 18
        fn2 = () => { //不推荐此写法
            console.log('fn2', this)//p1
        }

        //1.2 定义方法 //放在原型上
        fn1() {
            console.log('fn1', this) //p1
        }

    }

    //2. 实例化1
    // let p1 = new Person()
    let p1 = new Person // 如果不传参，小括号可以省略
    //    console.log( p1,'p1' )
    p1.fn1()
    p1.fn2()

对比ES5和ES6实现对象/类：

代码案例：

//es5方式问题：方法和属性是整体（封装性），但是它分开了。
function Person(username,age){
    this.username = username
    this.age = age 
}

Person.prototype.say = function(msg){
    console.log( this.username + '说了一句:' + msg)
}

// let p1 = new Person( 'zs',20 )
let p1 = new Person

p1.say( 'say hello' )

构造函数方式定义属性：

class Person{
    //constructor 内置函数名
    constructor( username,age ){  //就是做一些初始化工作的：比如为属性进行赋值
        /*
            每实例化一次，此函数就会调用一次，无需手动调用
        */
        //console.log('con执行了',this)
        this.username = username
        this.age = age
        
    }
}

let p1 = new Person( 'zs',15 )//这里的实参给了constructor的形参
console.log( p1,'p1' ) 
// new Person
let p2 = new Person( 'ls',16 )
console.log( p2,'p2' )

静态属性和静态方法：

static关键字

代码示例：

/*
    私有的：
        指属性和方法属于对象的。
        在类中定义的属性和方法都属于私有的
    
    静态的：公共的
        指属性和方法属于类的或者说属于函数的。
        static关键字指定静态

    什么时候用私有的、什么时候用静态的？
        张三：在上学的踏上捡了100元
            smoney = 100
        
        班费、班级名称可以设置为公共的（静态的）
*/

class Student{

    static CNAME = 'WEB1013' //静态属性，类直接就能访问到，对象不能访问
    constructor(username){
        this.username = username //私有属性，只能实例化出来的对象访问   
    }

    //在类中定义一个私有方法
    getClassName(){ 
        // return '1012web'
        return Student.CNAME
    }
}

// console.log( Student.username )//undefined
// console.log( Student.CNAME )//WEB1012

let xm = new Student('xm')
// console.log( xm,'xm' )
// console.log( xm.CNAME )//undefined
console.log( 'xm的班名为：',xm.getClassName() ) //1012web

let zs = new Student('zs')
console.log( 'zs的班名为：',zs.getClassName() ) //1012web

继承：

Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多

super的用法：

代码案例：

class Person{
   constructor(username){
       console.log(username,'父类----')
       this.username = username
   }

   say(){
       console.log('say function')
   }
}

//extends 扩展、继承的意思
class Student extends Person{ //即实现了属性继承，又实现原型上的方法继承
    // xuehao = 1111
    constructor(username,xuehao){
        //如果子类中书写了constructor，则必须在最前面写 super()
        super(username) //子类就是调用父类的constructor
        //console.log(username,'子类-----')
        this.xuehao = xuehao
    }
    zzy(){
        console.log(this.username + '我能做作业')
    }
}

let stu1 = new Student('小明','0002') //如果 子类没写constructor，则参数直接传递给父类的constructor。
                                //如果写了肯定传给子类的constructor
console.log( stu1,'stu1' )

封装工具原理：

代码案例：

<script>
    //class模拟JavaScript等一系列的对象
    //我们扮演的角色是使用对象 。
    //数组对象、字符串对象、数学对象、时间对象、定时器对象、正则对象、地址栏对象、历史记录对象，学的函数

    class JS {
        Math(){
            return {
                ceil(){
                    console.log('向上取整方法')
                },
                round(){
                    console.log('四舍五入方法')
                }
            }
        }

        Date(){

        }
    }

    let j = new JS()
    let ma = j.Math()
    // console.log( ma )
    ma.ceil()
    ma.round()
</script>

Jquery使用原理：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

    $.prototype.aa = 'my is aa'

    let t = $()   //$是个构造函数
    // console.log( typeof t )//object: jquery对象
    // console.log(  t )//object: jquery对象

    console.log( t.aa )//原型链继承
</script>

iterator 迭代器：

简介：

迭代、循环、遍历、递归等可以称为循环。

Iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制, 遍历器, 因为现在有Array / Object / Set / Map 4种结构, 所以ES6 加入了Iterator遍历器, 只要拥有这个Iterator遍历器, 就都可以使用for…of进行遍历

以前的循环方式：

for / for in / while / do...while .. $.each forEach map ....

正是因为以前的遍历方式太混乱，所以es6统一了 遍历，for…of。掌握for…of遍历即可。

作用：

为各种数据结构，提供一个统一的、简便的访问接口
使得数据结构的成员能够按某种次序排列
ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of使用
Iterator是一个抽象的概念, 具体的实现 for...of / Symbol.iterator

for…of：

代码案例：

<script>
    //字符串 、数组、伪数组（set/map/元素集合）等等。唯独对象不能使用for...of
    /*
        for( let val of 要遍历的数据 ){

        }
    */
   //1. 遍历字符串
    // let str = 'abcde'

    // for( let val of str ){
    //     console.log( val ) //a b c d e
    // }
    //2. 遍历数组
    // let arr = ['11',22]
    // for( let v of arr ){
    //         console.log(v,'--') //11 22
    // }

    //3. 遍历set
    // let set1 = new Set( [11,22,33,11,22,33] )
    // for( let v of set1 ){
    //     console.log( v,'set1' )
    // }

    //4. 唯独对象不能使用for...of
    let obj = { useranme:'abc' }
    for( let v of obj ){  //obj is not iterable ,对象不是一个可遍历的数据
        console.log( v,'sdf' )
    }
</script>

注意事项：在使用for…of遍历数据时, 要确保被遍历的数据, 拥有Iterator功能

原生具备iterator接口的结构有：

数组、伪数组（set/map/元素集合）等等。唯独对象不能使用for...of

数组和Iterator：

原理分析：

 //for...of遍历数据时, 要确保被遍历的数据, 拥有Symbol.iterator

    //比如我们分析数组
    let arr = [11,22]
    //console.log( arr )
    //console.log( typeof arr[Symbol.iterator])//function
    let iterObj = arr[Symbol.iterator]() //指针对象的原型链上 有一个next方法。
    //console.log( iterObj,'指针对象' )
    let value1 = iterObj.next() 
    console.log( value1,'value1' ) //{ value:11,done:false }
    let value2 = iterObj.next() 
    console.log( value2,'value2' ) //{ value:22,done:false }
    let value3 = iterObj.next() 
    console.log( value3,'value3' ) //{ value:undefined,done:true }

    // let obj = { useranme:'abc' }
    // console.log( obj )

为对象部署iterator接口：

往对象身上加 Symbol.iterator即可。

代码案例：

<script>
    let obj = { useranme: 'zs', age: 20,sex:'男' }

    //Symbol.iterator是个函数 
    obj[Symbol.iterator] = function () {

        let aa = Object.values( obj ) //获取对象所有的值以数组返回
       // console.log( aa,'aa' )
        let index = 0

        return {
            //a:123
            next:function(){
                if( index >= aa.length ){
                    return { value:undefined,done:true }
                }else{
                    return { value:aa[index++],done:false }
                }
                              
            }
        }
    }

    for( let val of obj ){
        console.log( val,'val' )
    }

    // let iterObj = obj[Symbol.iterator]()
    // //console.log( iterObj )
    // console.log( iterObj.next() ) //{ value:zs,done:false }
    // console.log( iterObj.next() )
    // console.log( iterObj.next() )

</script>