[js]es6语法: 字符串和数组的方法

s的方法
    根据index取value:
        取首尾项,arr[0], arr[arr.length-1]
        
    根据value取index(判断是否包含子字符串):
        s.indexOf
        
        栗子:
        'maotai'.indexOf('mao'), 如果不包含则返回-1,如果包含返回子字符串下标
        
    取切片
        s.substr(1,3)   //含3
        s.substring(1,3)//不含3
    和arr之间的转换: 
        s.split: s转为arr
        s = 'maotai|maomao'
        s.split('|') // ["maotai", "maomao"]
        
        arr.join: arr转为s
        arr = ["maotai", "maomao"]
        arr.join('|') // 'maotai|maomao'
        
    arr.toString和arr.toFixed
        arr.toSting() //["mao", "tai"] --> "mao, tai"        
        price.toFixed(2) //数字类型保留2位小数

arr方法

// 合并数组(栗子: 将二维数组合并为一维数组, reduce+arr.concat(arr2))
arr.concat(arr2)

// 1.for循环遍历数组
arr = ['mao', 'tai'];
for (let i = 0; i < arr.length; i++) {
    console.log(i,typeof i); //0 'number'
    console.log(arr[i]);
}
// 2,forEach 不支持return
// 3,for in,key转换为str类型, 数组的私有属性也打印了. 
// 4.for of, 既能return,又不会遍历私有属性
    arr = ['mao', 'tai'];
    for(val of arr){
        console.log(val);
    }





    参数类型: 基本都是回调函数
    返回值: 
    修改自身: 否
    回调函数返回值:

arr的方法

    1.arr.forEach: 遍历
        注: 不支持return
    
        返回值:        无
        修改自身:      否
        回调函数返回值:无(不支持return)
    
        //arr的forEach循环
        arr.forEach(function (item, index) {
            console.log(index + ':' + item);
        });

        
        //arr的forin循环
        let arr = ['mao','tai'];
        for(let i in arr){
            console.log(i,typeof i); //将index转为str类型打印
        }
        //0 string

        //对象的遍历(遍历key, 遍历values)
        let obj = {name:'maotai',age:22};
        console.log(Object.keys(obj));   //取index, [ 'name', 'age' ]
        console.log(Object.values(obj)); //取items, [ 'maotai', 22 ]
        for(i in Object.keys(obj)){
            console.log(i,typeof i); //0 string
        }

    2.arr.map
        注: 支持return

        返回值:        newArr
        修改自身:      否
        回调函数返回值:对老数组每个item处理的结果, 作为新数组的item
        
        栗子: 得出arr每项*10的newArr
        let arr2 = arr.map(function (index, item) {
            return item * 10;
        });

        栗子:产生'<li>1</li><li>2</li><li>3</li>'
        
        let res2 = [1, 2, 3].map(function (item) {
            return `<li>${item}</li>`;  //es6的字符串模板写法.
        });
        console.log(res2.join('')); // <li>1</li><li>2</li><li>3</li>

    3.arr.filter
        功能: 过滤arr,得到newArr
        
        返回值:        newArr
        修改自身:      否
        回调函数返回值:布尔, 如果true,添加到新数组
        
        栗子: 过滤arr 2-5之间的数字
        let res2 = [0, 1, 2, 3, 4, 5].filter(function (item) {
            return item>2 && item <5; //返回true,则放到新数组里
        });
    
        栗子: 删除表单
        remove(p) { //p代表当前删除的这一项
            this.products = this.products.filter(item => item != p);
        }
        
    4.arr.reduce: 收敛
        功能: 将arr的item合并(收敛)
        返回值:        newArr
        修改自身:      否
        回调函数返回值:布尔
        
        // 探究arr.reduce(回调())回调函数的4个参数
        let res = arr.reduce(function (prev, next, index, item) {
            // console.log(arguments);
            // console.log(prev, next); 
            return prev + next; //本次的返回值会作为上一次的prev
        });

        console.log(res);

        // 栗子1: 计算价格
            let res1 = [0,
                {'price': 30, count: 3},
                {'price': 60, count: 6},
                {'price': 90, count: 9}
            ].reduce(function (prev, next) {
                return prev+next.price*next.count;
            });
            
            //更优雅的写法
            let res2 = [
                {'price': 30, count: 3},
                {'price': 60, count: 6},
                {'price': 90, count: 9}
            ].reduce(function (prev, next) {
                return prev+next.price*next.count;
            }, 0);

        // 栗子2: 二维数组变一维数组
        let res3 = [
            [1,2,3],
            [4,5,6],
            [7,8,9]
        ].reduce(function (prev,next) {
            return prev.concat(next);
        });
        console.log(res3);



    1.arr.include:判断是否包含此项
    
        功能: arr中是否包含某一项
        返回值:        布尔
        修改自身:      否

        [1,2,3].includes(1) //true
        [1,2,55]

    2.arr.find:查找每项中是否包含关键字,
        功能: 返回包含某个子字符的item.
        返回值:        找到的那一项item
        修改自身:      否
        回调函数返回值:布尔, 返回true,表示找到, 找到后立即停止遍历.
        
        栗子: 取出包含子字符串的item
        
        let res = ['maotai','tai'].find(function (item) {
            return item.toString().indexOf('mao') > -1;
        });
        console.log(res);
        
        //本质算法: 'maotai'.indexOf('mao')
    
    
    3, arr.every
        功能: 找false,找到false后停止,返回false

        参数: 回调函数
        返回值: 布尔
        
        栗子: 检测arr所有元素是否都大于18
        let res = [23, 33, 43].every(function (item) {
            return item >= 18;
        });
        console.log(res); //true
    4.arr.some(和arr.every相反)
        功能: 找true,找到true后停止,返回true
    

    

箭头函数

箭头函数:
1, 无关键字
2, 如果1个参数, 则可以省掉小括号
3, 无this, this指向上一级作用域的this

// function fn(age) {
//     console.log(age);
// }

fn = age => console.log(age);
fn(20);


=========== return关键词可以省略
function add1(arg){
    return arg+1;
}

add_1(10); // 11

let arg2 = arg=>arg+2;
add2(10); //12 

// 有{}必须写return关键字, 
let arg2 = arg=>{return arg+2};

// 无{},箭头后面的内容默认return
let arg2 = arg=> arg+2;

/

//如果函数不需要命名
age => console.log(age);


// 箭头函数解决了this问题. this指向上一级
    created() { // 在数据被初始化后会调用，this指向指的也是vm实例,钩子函数
        axios.get('./carts.json').then(res => { //success
                            this.products = res.data; //箭头函数改变了this的指向, 这里回调this本来指向window
                        }, err => {
                            console.log(err);
                        });
    },

栗子: 
    axios.get('./carts.json').then(res => {
        console.log(res.data);
    }, err => {
        console.log(err);
    })