美文网首页
2019-06-27(前端第二月第一节)

2019-06-27(前端第二月第一节)

作者: 彝_e37e | 来源:发表于2019-06-28 08:09 被阅读0次

    严格模式:

    1. 理解:

      * 除了正常运行模式(混杂模式),ES5添加了第二种运行模式:"严格模式"(strict mode)。

      * 顾名思义,这种模式使得Javascript在更严格的语法条件下运行

    2.  目的/作用

    * 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为

    * 消除代码运行的一些不安全之处,为代码的安全运行保驾护航

    * 为未来新版本的Javascript做好铺垫

    3. 使用

      * 在全局或函数的第一条语句定义为: 'use strict';

      * 如果浏览器不支持, 只解析为一条简单的语句, 没有任何副作用

    4. 语法和行为改变

    * 必须用var声明变量

    * 禁止自定义的函数中的this指向window

    * 创建eval作用域

    * 对象不能有重名的属性


    JSON对象:

    1. JSON.stringify(obj/arr)

      * js对象(数组)转换为json对象(数组)

    2. JSON.parse(json)

      * json对象(数组)转换为js对象(数组)



    Object扩展:

    ES5给Object扩展了一些静态方法, 常用的2个:

    1. Object.create(prototype, [descriptors])

      * 作用: 以指定对象为原型创建新的对象

      * 为新的对象指定新的属性, 并对属性进行描述

        - value : 指定值

        - writable : 标识当前属性值是否是可修改的, 默认为false

        - configurable: 标识当前属性是否可以被删除 默认为false

        - enumerable: 标识当前属性是否能用for in 枚举 默认为false

    2. Object.defineProperties(object, descriptors)

      * 作用: 为指定对象定义扩展多个属性

        * get :用来获取当前属性值得回调函数

        * set :修改当前属性值得触发的回调函数,并且实参即为修改后的值

      * 存取器属性:setter,getter一个用来存值,一个用来取值

    get: function(){}获取扩展属性的值,在获取扩展属性值的时候get方法自动调用

    set: function(data){}监听扩展属性,当扩展属性发生变化的时候,会自动调用,自动调用后会将变化的值作为实参注入到set函数

    对象本身的两个方法

        * get propertyName(){} 用来得到当前属性值的回调函数

        * set propertyName(){} 用来监视当前属性值变化的回调函数



    Array扩展:

    1. Array.prototype.indexOf(value) : 得到值在数组中的第一个下标

    2. Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标

    3. Array.prototype.forEach(function(item, index){}) : 遍历数组

    4. Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组,返回加工之后的值

    5. Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组, 返回条件为true的值



    Function扩展:

    1. Function.prototype.bind(obj) :

      * 作用: 将函数内的this绑定为obj, 并将函数返回

    2. 面试题: 区别bind()与call()和apply()?

      * 都能指定函数中的this

      * call()/apply()是立即调用函数

      * bind()是将函数返回



    let关键字:

    1. 作用:

      * 与var类似, 用于声明一个变量

    2. 特点:

      * 在块作用域内有效

      * 不能重复声明

      * 不会预处理, 不存在变量提升

    3. 应用:

      * 循环遍历加监听

      * 使用let取代var是趋势



    const关键字:

    1. 作用:

      * 定义一个常量

    2. 特点:

      * 不能修改

      * 其它特点同let

    3. 应用:

      * 保存不用改变的数据



    变量的解构赋值:

    1. 理解:

      * 从对象或数组中提取数据, 并赋值给变量(多个)

    2. 对象的解构赋值

      let {n, a} = {n:'tom', a:12}

    3. 数组的解构赋值

      let [a,b] = [1, 'hello'];

    4. 用途

      * 给多个形参赋值


    模板字符串:

    1. 模板字符串 : 简化字符串的拼接

      * 模板字符串必须用 `` 包含

      * 变化的部分使用${xxx}定义



    简化的对象写法:

    简化的对象写法

    * 省略同名的属性值

    * 省略方法的function


    箭头函数:

    * 作用: 定义匿名函数

    * 基本语法:

      * 没有参数: () => console.log('xxxx')

      * 一个参数: i => i+2

      * 大于一个参数: (i,j) => i+j

      * 函数体不用大括号: 默认返回结果

      * 函数体如果有多个语句, 需要用{}包围,若有需要返回的内容,需要手动返回

    * 使用场景: 多用来定义回调函数

    * 箭头函数的特点:

        1、简洁

        2、箭头函数没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候所处的对象就是它的this

        3、扩展理解: 箭头函数的this看外层的是否有函数,

            如果有,外层函数的this就是内部箭头函数的this,

            如果没有,则this是window。


    三点运算符:

    * 用途

    1. rest(可变)参数

        * 用来取代arguments 但比 arguments 灵活,只能是最后部分形参参数

        function fun(...values) {

            console.log(arguments);

            arguments.forEach(function (item, index) {

                console.log(item, index);

            });

            console.log(values);

            values.forEach(function (item, index) {

                console.log(item, index);

            })

        }

        fun(1,2,3);

    2. 扩展运算符

      let arr1 = [1,3,5];

      let arr2 = [2,...arr1,6];

      arr2.push(...arr1);


    相关文章

      网友评论

          本文标题:2019-06-27(前端第二月第一节)

          本文链接:https://www.haomeiwen.com/subject/gjpjcctx.html