Vue/Es5,6,7

Vue模板语法

1. 模板的理解:
   动态的html页面
   包含了一些JS语法代码
   大括号表达式
   指令(以v-开头的自定义标签属性)
2. 双大括号表达式
   语法: {{exp}}
   功能: 向页面输出数据
   可以调用对象的方法
3. 指令一: 强制数据绑定
   功能: 指定变化的属性值
   完整写法:
   v-bind:xxx='yyy' //yyy会作为表达式解析执行
   简洁写法:
   :xxx='yyy'
4. 指令二: 绑定事件监听
   功能: 绑定指定事件名的回调函数
   完整写法:
   v-on:click='xxx'
   简洁写法:
   @click='xxx'

Es7语法

1. 指数运算符(幂): **
2. Array.prototype.includes(value) : 判断数组中是否包含指定value

console.log(2 ** 3);//8
    let arr = [1,4,5,6,'abc'];
    console.log(arr.includes('a'));//false
    console.log(arr.includes('abc'));//true
    console.log(arr.includes(4));//true

Es6语法

字符串扩展

1. includes(str) : 判断是否包含指定的字符串
2. startsWith(str) : 判断是否以指定字符串开头
3. endsWith(str) : 判断是否以指定字符串结尾
4. repeat(count) : 重复指定次数

let str = 'asdfohsvckxnlck';
    // console.log(str.includes('t'));
    // console.log(str.includes('a'));
    // console.log(str.startsWith('a'));
    // console.log(str.endsWith('k'));
    console.log(str.repeat(5));

数值扩展

1. 二进制与八进制数值表示法: 二进制用0b, 八进制用0o
2. Number.isFinite(i) : 判断是否是有限大的数
3. Number.isNaN(i) : 判断是否是NaN
4. Number.isInteger(i) : 判断是否是整数
5. Number.parseInt(str) : 将字符串转换为对应的数值
6. Math.trunc(i) : 直接去除小数部分

console.log(0b1010);//10
    console.log(0o56);//46
    console.log(Number.isFinite(123));//true
    console.log(Number.isFinite(Infinity));//flase
    console.log(Number.isNaN(NaN));//true
    console.log(Number.isInteger(123));//true
    console.log(Number.isInteger(123.456));//false
    console.log(Number.isInteger(123.0));//true
    console.log(Number.parseInt('123abc456'));//123
    console.log(Number.parseInt('a123abc456'));//NaN
    console.log(Math.trunc('123.123'));//123

数组扩展

1. Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
2. Array.of(v1, v2, v3) : 将一系列值转换成数组
3. find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标

let btns = document.getElementsByTagName('button');
    Array.from(btns).forEach(function(item, index){
        console.log(item);
    })
    let arr = Array.of(1, 4, 'abc', true);
    console.log(arr);
    let arr2 = [2,3,4,2,5,7,3,6,5];
    let result = arr2.find(function(item, index){
        return item > 4;
    });
    console.log(result);//5
    result = arr2.findIndex(function(item, index){
        return item > 4;
    });
    console.log(result);//4

对象扩展

1. Object.is(v1, v2)

• 判断2个数据是否完全相等

2. Object.assign(target, source1, source2..)

• 将源对象的属性复制到目标对象上

3. 直接操作 proto 属性
   let obj2 = {};
   obj2.proto = obj1;

console.log(0 == -0);//true
    console.log(NaN == NaN);//false
    console.log(Object.is(0, -0));//false
    console.log(Object.is(NaN, NaN));//true
    let obj = {};
    let obj1 = {username:'iverson', age:43};
    let obj2 = {sex: '男'};
    Object.assign(obj, obj1, obj2);
    console.log(obj);
    let obj3 = {};
    let obj4 = {money: 5000000};
    obj3.__proto__ = obj4;
    console.log(obj3);
    console.log(obj3.money);

对象的深度克隆
1、数据类型：
* 数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和对象数据类型
- 基本数据类型：
特点： 存储的是该对象的实际数据
- 对象数据类型：
特点： 存储的是该对象在栈中引用，真实的数据存放在堆内存里
2、复制数据
- 基本数据类型存放的就是实际的数据，可直接复制
let number2 = 2;
let number1 = number2;
- 克隆数据：对象/数组
1、区别： 浅拷贝/深度拷贝
判断： 拷贝是否产生了新的数据还是拷贝的是数据的引用
知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用
let obj = {username: 'kobe'}
let obj1 = obj; // obj1 复制了obj在栈内存的引用
2、常用的拷贝技术
1). arr.concat(): 数组浅拷贝
2). arr.slice(): 数组浅拷贝
3). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据
4). 浅拷贝包含函数数据的对象/数组
5). 深拷贝包含函数数据的对象/数组

// 不会影响原数据
    let str = 'abcd';
    let str2 = str;
    console.log(str2);
    str2 = '';
    console.log(str);
    let bool1 = true;
    let bool2 = bool1;
    bool2 = false;
    console.log(bool1);
    // 拷贝数组/对象时，没有生成新的数据，而是克隆了一份引用
    let obj = {username: 'kobe', age:40};
    let obj1 = obj;
    console.log(obj1);
    obj1.username = 'wade';
    console.log(obj.username);
    let arr = [1, 4, {username: 'kobe', age: 40}];
    let arr2 = arr;
    arr2[0] = 'abcd';
    console.log(arr, arr2);
    */
    /*
    拷贝数据：
        基本数据类型：
            拷贝后会生成一份新的数据，修改拷贝以后的数据不会影响原数据
        对象/数组：
            拷贝后不会生成新的数据，而是拷贝了引用。修改拷贝以后的数据会影响原数据
    拷贝数据的方法：
        1、直接赋值给一个变量     //浅拷贝
        2、Object.assign()       //浅拷贝
        3、Array.prototype.concat()  //浅拷贝
        4、Array.prototype.slice()   //浅拷贝
        5、JSON.parse(JSON.stringify())  //深拷贝（深度克隆），拷贝的数据里不能有函数，因为它处理不了
    浅拷贝（对象/数组）：
        特点：拷贝的引用，修改拷贝以后的数据会影响原数据，使得原数据不安全
    深拷贝（深度克隆）
        特点：拷贝的时候生成新数据，修改拷贝以后的数据不会影响原数据
    */
    /*
    let obj = {username: 'kobe'};
    let obj2 = Object.assign(obj);
    console.log(obj2);
    obj2.username = 'wade';
    console.log(obj);
    let arr = [1, 3, {username: 'kobe'}, function fun(){}];
    let testArr = [2,4];
    // let arr2 = arr.concat(testArr);
    let arr2 = arr.concat();
    // arr2[0] = 1;
    console.log(arr2);
    arr2[2].username = 'wade';
    console.log(arr);
    let arr3 = arr.slice();
    arr3[2].username = 'iverson';
    console.log(arr);
    let arr4 = JSON.parse(JSON.stringify(arr));
    console.log(arr4);
    arr4[2].username = 'duncan';
    console.log(arr, arr4);
    */
    /*
    思考：
        如何实现深度克隆
        拷贝的数据里有对象/数组会发生浅拷贝
        深拷贝的数据里不能有对象/数组，即使有，还可以继续遍历对象/数组，拿到每一项的值，直到拿到的都是基本数据类型，然后再赋值，就是深度克隆
    知识点储备
        如何判断数据类型： arr-->Array  null-->Null
            1、typeof返回的数据类型： String、Number、Boolean、Undefined、Object、Function
            2、Object.prototype.toString.call(obj)
        for in循环 对象（属性名）、数组（下标）
    */
    // 判断数据类型
    let result = 'abcd';
    result = null;
    result = [1,3];
    console.log(Object.prototype.toString.call(result).slice(8, -1));
    // console.log(typeof Object.prototype.toString.call(result));
    // for in循环
    let obj = {username: 'kobe', age:40};
    for(let i in obj){
        console.log(i);
    }
    let arr = [1,3,'abc'];
    for(let i in arr){
        console.log(i);
    }
    // 定义检测数据类型的功能函数
    function checkedType(target){
        return Object.prototype.toString.call(target).slice(8, -1);
    }
    // console.log(checkedType(result));
    //实现深度克隆 --> 对象/数组
    function clone(target){
        // 判断拷贝的数据类型
        // 初始化变量result成为最终克隆的数据
        let result, targetType = checkedType(target);
        if(targetType === 'Object'){
            result = {};
        }else if(targetType === 'Array'){
            result = [];
        }else{
            return target;
        }
        //遍历目标数据
        for(let i in target){
            // 获取遍历数据结构的每一项值
            let value = target[i];
            //判断目标结构里的每一项值是否存在对象/数组
            if(checkedType(value) === 'Object' || checkedType(value) === 'Array' ){//对象/数组里嵌套了对象/数组
                // 继续遍历获取到的value值
                result[i] = clone(value);
            }else{//获取到的value值是基本的数据类型或者是函数
                result[i] = value;
            }
        }
        return result;
    }
    let arr3 = [1,2,{username: 'kobe', age:40}];
    let arr4 = clone(arr3);
    console.log(arr4);
    arr4[2].username = 'wade';
    console.log(arr3, arr4);
    let obj3 = {username: 'kobe', age: 40};
    let obj4 = clone(obj3);
    console.log(obj4);
    obj4.username = 'wade';
    console.log(obj3, obj4);

Set和Map数据结构

1. Set容器 : 无序不可重复的多个value的集合体

• Set()
• Set(array)
• add(value)
• delete(value)
• has(value)
• clear()
• size

2. Map容器 : 无序的 key不重复的多个key-value的集合体

• Map()
• Map(array)
• set(key, value)//添加
• get(key)
• delete(key)
• has(key)
• clear()
• size

let set = new Set([1,2,4,5,2,3,6]);
    console.log(set);
    set.add(7);
    console.log(set.size, set);
    set.delete(3);
    console.log(set);
    console.log(set.has(8));//false
    console.log(set.has(7));//true
    set.clear();
    console.log(set);
    let map = new Map([['aaa', 'username', 25], [36, 'age']]);
    console.log(map);
    map.set(78, 'haha');
    console.log(map);
    let value = map.get(78)
    console.log(value);
    map.delete(36);
    console.log(map);

for_of循环
for(let value of target){}循环遍历

1. 遍历数组
2. 遍历Set
3. 遍历Map
4. 遍历字符串
5. 遍历伪数组

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>

<script type="text/javascript">
    let arr = [1,2,3,4,5,5,6,2];
    let arr1 = [];
    let set = new Set(arr);
    for(let i of set){
        console.log(i);
        arr1.push(i);
    }
    console.log(arr1);
    let map = new Map([['aaa', 'username', 25], [36, 'age']]);
    for(let i of map){
        console.log(i);
    }
</script>