理解ES使用

1，理解ES

1. 全称：EcMAScript
2. js语言的规范
3. 我们用的js是它的实现
4. js的组成

• EcMAScript(js基础)
• 扩展-->浏览器端

           * BOM
           * DOM

• 扩展-->服务器端

           * Node.js   egg(否)  koa(否)  express(否) mongdb(了解)

2，ES5扩展（重点）

2.1严格模式(常用)

  * 运行模式: 正常(混杂)模式与严格模式

  *声明严格模式'use strict'

  * 应用上严格式: 'strict mode';

  * 作用: 
    * 使得Javascript在更严格的条件下运行
    * 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
    * 消除代码运行的一些不安全之处，保证代码运行的安全
    * 需要记住的几个变化
      * 声明定义变量必须用var
      * 禁止自定义的函数中的this关键字指向全局对象window
      * 创建eval作用域, 更安全，避免全局变量污染

实例代码

<script>
        // 声明严格模式
        'use strict'
        // 消除javascript语法的一些不合理,不严谨之处，减少一些怪异行为
        // 必须用var声明变量
        var age = 20;
        console.log(age);
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        // 禁止自定义的函数中的this指向window
        var obj = new Person('yanan',20)
        console.log(obj);
        // 清除代码运行的一些不安全之处,为代码的安全运行护驾护航
        var name = '李四';
        // eval是把js字符串转为js语法
        eval('var name="王五";alert(name)');
        alert(name)
</script>

 1. 理解:
      * 除了正常运行模式(混杂模式)，ES5添加了第二种运行模式："严格模式"（strict mode）。
      * 顾名思义，这种模式使得Javascript在更严格的语法条件下运行
 2.  目的/作用
        * 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
        * 消除代码运行的一些不安全之处，为代码的安全运行保驾护航
        * 为未来新版本的Javascript做好铺垫
 3. 使用
      * 在全局或函数的第一条语句定义为: 'use strict';
      * 如果浏览器不支持, 只解析为一条简单的语句, 没有任何副作用
 4. 语法和行为改变
        * 必须用var声明变量
        * 禁止自定义的函数中的this指向window
        * 创建eval作用域
        * 对象不能有重名的属性

2.2 JSON对象(常用)

  * 作用: 用于在json对象/数组与js对象/数组相互转换

  * JSON.stringify(obj/arr)
      js对象(数组)转换为json对象(数组)
      
  * JSON.parse(json)
      json对象(数组)转换为js对象(数组)

实例代码

 <script>
        // 作用: 用于在json对象 / 数组与js对象 / 数组相互转换
        // JSON.stringify(obj / arr)
        // js对象(数组) 转换为json对象(数组)
        // JSON.parse(json)
        // json对象(数组) 转换为js对象(数组)
        var o = {
            "name": "李四",
            "age": 20
        }
        var o1 = {
            name: "王五",
            age: 21
        }
        var oo = JSON.stringify(o1)
        console.log(oo, 'json格式');
        var obj = JSON.parse(oo)
        console.log(obj, '对象格式');
</script>

2.3 Array扩展(常用)

  * Array.prototype.indexOf(value) : 得到值在数组中的第一个下标
  * Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
  * Array.prototype.forEach(function(item, index){}) : 遍历数组
  * Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组
  * Array.prototype.filter(function(item, index){}) : 遍历过滤出一个子数组

 实例代码

 <script>
        // 需求:
        // 1. 输出第一个6的下标
        // 2. 输出最后一个6的下标
        // 3. 输出所有元素的值和下标
        // 4. 根据arr产生一个新数组, 要求每个元素都比原来大10
        // 5. 根据arr产生一个新数组, 返回的每个元素要大于4
        var arr = [1, 4, 6, 2, 5, 6];
        // 遍历数组  item是值 index是下标
        arr.forEach(function (item, index) {
            console.log(item, index);
        });
        // 遍历数组返回一个新的数组，返回加工之后的
        var arr1 = arr.map(function (item, index) {
            return item + 10
        });
        console.log(arr, arr1);
        // 遍历过滤出一个新的子数组， 返回条件为true的值
        var arr2 = arr.filter(function (item, index) {
            return item > 4
        });
        console.log(arr, arr2);
</script>