Js高级-ES5

本文主要是介绍Js高级-ES5，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

01.严格模式
1.理解:

除了正常运行模式(混杂模式)，ES5添加了第二种运行模式：“严格模式”（strict mode）
顾名思义，这种模式使得Javascript在更严格的语法条件下运行

2. 目的/作用

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
消除代码运行的一些不安全之处，为代码的安全运行保驾护航
为未来新版本的Javascript做好铺垫

3.使用

在全局或函数的第一条语句定义为: ‘use strict’;
如果浏览器不支持, 只解析为一条简单的语句, 没有任何副作用

4.语法和行为改变

必须用var声明变量
禁止自定义的函数中的this指向window
创建 eval 作用域
对象 不能有重名的属性

02.JSON对象
1.JSON.stringify(obj/arr)

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

2.JSON.parse(json)

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

3.JSON数据格式： 用于前后台数据交互

03.Object拓展1
ES5给Object扩展了一些静态方法, 常用的2个:
1.Object.create(prototype, [descriptors])

作用: 以指定对象为原型创建新的对象 为新的对象指定新的属性, 并对属性进行描述
- value : 指定值
- writable : 标识当前属性值是否是可修改的, 默认为false
- configurable: 标识当前属性是否可以被删除 默认为false
- enumerable： 标识当前属性是否能用for in 枚举 默认为false

 var obj = {
     name: 'kobe',
     showName: function () {
     console.log(this.name);
    };
  };
  
  var obj2 = Object.create(obj, {
    sex: {
       value: '男', // 修饰符
       writable: true, // 可以被修改的
       configurable: true,
       enumerable: true
    },
    age: {
      value: 43,
      enumerable: true
   }
   });
   console.log(obj2.sex);
   obj2.sex = '女';
   console.log(obj2);
   console.log(obj2.sex);
  
  
  // for(var i in obj2){ // for in枚举对象的时候除了能够枚举自身的属性之外还会枚举原型的属性
     if(obj2.hasOwnProperty(i)){// 验证是否是自身的属性
      console.log(i);
   }
  }
 
  delete obj2.sex;
  console.log(obj2);

2.Object.defineProperties(object, descriptors)
作用: 为指定对象定义扩展多个属性
get ：用来获取当前属性值得回调函数
set ：修改当前属性值得触发的回调函数，并且实参即为修改后的值
存取器属性：setter,getter一个用来监视值，一个用来取值

  var obj = {
     name: 'kobe',
     age: 42
  };
 
  Object.defineProperties(obj, { // 配置对象
     sex: {
        get: function () { // 获取, get方法的作用： 提供扩展属性的值
        console.log('get()');
        console.log(this);//用来证明get是被谁调用的
        return '男';
      },
      // set方法用来监视扩展属性的，
      // 如果扩展属性一旦被修改set就调用，并且会自动将修改之后的属性值自动作为参数传入set函数内部
        set: function (msg) {
        console.log(this);//用来证明set是被谁调用的
        console.log('set()', msg);
      }
    }
  })
   
  console.log(obj.sex); // 要获取扩展属性的值的时候就会自动调用get方法
  console.log(obj.sex); // 要获取扩展属性的值的时候就会自动调用get方法
  console.log(obj.sex); // 要获取扩展属性的值的时候就会自动调用get方法
  obj.sex = '女';
  // console.log(obj);
  console.log(obj.sex);

现有一个需求，将obj2里面的属性和值克隆都obj3里面，要怎么做？

  var obj2 = {
      name："kobe",
      age：42
   }；

  var obj3 ={ }；
  
  //枚举obj2对象
  for（var item in obj2）{
     //确保变量item是obj2里面的属性
     if（obj2.hasOwnProperty（item））{
      //console.log（obj2，":",obj2[item]）
        （function（item）{
            Object.defineProperties（obj3，{
                  [item]：{//配置对象
                       get：function（）{
                         return obj2[item]；
                        }，
                        set：function（msg）{
                            console.log（"set()"，msg）；
                             obj2[item] = msg;
                          } 
        } 
      }）
   }）（item）
   }；
}；
obj3.name = "duncan"；
console.log（obj3）；
console.log（obj2）；

Object拓展2
对象本身的两个方法

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

04.Array拓展

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

 var arr = [1,2,3,2,5,4,5];
  console.log(arr.indexOf(2)); // 1

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

  var arr = [1,2,3,2,5,4,5];
  console.log(arr.lastIndexOf(2)); // 3

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

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

//根据arr产生一个新数组,要求每个元素都比原来大10
  var arr = [1,2,3,2,5,4,5];
  var newArr = arr.map(function (item, index) {
    //return 加工之后的每一项
    return item + 10;
  });
   
  console.log(newArr);
  console.log(arr);

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

 //根据arr产生一个新数组, 返回的每个元素要大于4
   var arr = [1,2,3,2,5,4,5];
   var newArr2 = arr.filter(function (item, index) {
    return item > 3;
  });
   
  console.log(newArr2);
  console.log(arr);

问题：Array.forEach( )，Array.push( )，Array.pop( )，Array.shift( )，Array.unshift( )和Array.map（），Array.filter（）的区别是什么？

1.Array.map（）和Array.filter（）并不会改变原数组，而是返回一个新数组
2.Array.forEach( )，Array.push( )，Array.pop( )，Array.shift( )，Array.unshift( ) 直接改变数组

05.Function拓展

1. Function.prototype.bind(obj) :

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

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

都能指定函数中的this
call()/apply()是立即调用函数
bind()是将函数返回

 var obj = {
    name: 'kobe'
  }
  
  function fun(msg) {
    console.log(this, msg);
  }
 //call()/apply()是立即调用函数
  fun.call(obj, 123);
  fun.apply(obj, [123]);
  // bind修改this指向,是将函数返回
  fun.bind(obj, 123)();

对于定时器的回调函数，选用bind（）是最佳的

 setTimeout(function () {
    console.log(this);// window
  }.bind(obj), 1000)

这篇关于Js高级-ES5的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！