ES基础知识整理1

1. 什么是ES
   ES就是ECMAScript， 它是一个套标准 ,JavaScript就是这套标准的实施,现在来说 大部分的主浏览器支持是ES5（更多的主流浏览器 已经完美兼容支持ES6）

2. js由三部分组成
   ECMAScript （核心）
   扩展 =》浏览器
   BOM（浏览器对象模型）
   DOM （文档对象模型）
   扩展 =》服务端
   Node.js

3. ES版本
   ES5： (2009出现)
   ES6： （2015年出现的 我们也管它叫ES2015）
   ES7：2016年出现 （与上一个版本没有什么大的不同）

4. 严格模式: use strict （用在全局 或者 函数的第一行）
   作用:
   消除一些JavaScript的一些不规范的地方和不合理的代码，提高了代码运行速度，使代码高效整洁
   注意:

   1. 定义变量 必须要用var 否则就会报错 (Uncaught ReferenceError: msg is not defined)
   2. 函数中 this 报错 undefined（Uncaught TypeError: Cannot set property ‘a’ of undefined）
   3. eval() 字符串的方法 出现了本身作用域

   var str = 'ES';
    eval('var str="我是内部的字符串";console.log(str,"内部")');//我是内部的字符串 内部
    console.log(str, '外部');//ES 外部
   

5. JSON.stringify() // 把对象转化成字符串
   JSON.parse() //把字符串转化成对象

   var obj = {
   	name: '张三',
   	age: 18
   }
   console.log(obj, '转化前');
   var newObj = JSON.stringify(obj);
   console.log(newObj, 'stringify转化后');//{"name":"张三","age":18} stringify转化后
   console.log(JSON.parse(newObj).name, 'parse转化后');//张三 parse转化后
   

6. 本地存储（H5 新增的技术 webStorage 离线存储）
   离线存储中有两个方法：
   第一个 localStorage 本地存储
   第二个sessionStorage 会话存储

   经典面试题：localStorage 和 SessionStorage区别？
   相同点 ：
   (1)大小5M左右；
   (2)存储形式 必须以字符串形式进行存储；
   (3)都借助于浏览器存储在浏览器中（与服务器无关）；
   (4)使用方法 一模一样 存值用：setItem 取值getItem
   不同点：
   (1)从存储期限来说
   localStorage（永久性存储 除非你手动清除 用命令 或者清空浏览器缓存）
   sessionStorage (浏览器一关闭就消失)
   (2)应用场景 localStorage(登陆、购物车 在localStorage没有出现之前 我们用cookie 进行存储 大小4KB左右 )
   sessionStorage（对于重要信息的登陆）

   把数据存储到本地存储中的步骤
   1. 把数据存到本地存储 （必须以字符串形式存储，如果要存储的数据不是字符串需要转）
   2. 找到dom结构 然后取值 赋值（注意格式的转化）

   例如： 
   	var list = JSON.stringify(goodsList);
   	localStorage.setItem('goodsList', list);
   	var div =document.querySelector('#app'); //从本地存储里面把值拿出来
   	//需要是字符串，但它应该是个数组，那么我们需要转化下
   	var list = JSON.parse(localStorage.getItem('goodsList')) 
   

   3. 删除 removeItem(‘key’)
      删除某一项localStorage.removeItem(‘key’);
      清空所有存储clear(); 很少用

7. Object 方法

   1. object 自带
      get newName(){} //把返回值 赋给新增的属性（newName是自己定义的）
      set newName(){} //监控数据的变化

   2. Object.create(prototype,[descriptors])
      作用：以对象为原型 创建新的对象以及属性
      prototype 原型
      descriptors 描述属性
      value:值
      writable: 是否可写 即是否可修改 默认 false
      configurable : 是否可删除 detele 删除对象里面的属性 默认false
      enumerable : 是否可以可以枚举 for in 遍历 默认值：false

   3. Object.defineProperties(Object你要扩展的属性)
      get：
      get可以通过返回值赋给新的属性 (作用为对象扩展 更多的属性 这个方法中 有两个自带的方法 一个get 取出来的是函数里面的返回值
      set： 为函数设定新的值 那么实参就是那个赋值)

   var obj = { name: '张三', age: 18 }
           console.log(obj,'1');
           var obj1 = {};
           obj1 = Object.create(obj, {
               "sex": {
                   value: "男",
                   writable: true,//是否可修改 
                   configurable: true, //是否可用detele去删除
                   enumerable: true //是否可枚举 是否可遍历 
               }
           })
           console.log(obj1, 'new');
           obj1.sex = '女';
           console.log(obj1, 'new女');
           delete obj1.sex; 
           console.log(obj1, 'new  delete后');
           var obj1 = Object.defineProperties(obj, {
               "newPro": {
                   get: function () {
                       console.log(this);//{name: "张三", age: 18}，若用箭头函数，this则指向window
                       return obj.name + ':' + obj.age;
                   }
               }
           })
           console.log(obj1, '2');
           console.log(obj1.newPro);
   

8. 箭头函数 var fn = ()=>{ }
   作用: 防止this的改变 this指向全局
   一个参数的时候,小括号可以省略 （msg） === msg
   一条语句的时候 可以省略 单花括号 且 不用return

    let fn = (msg)=>{console.log(msg)};//原来
    let fn = msg=>console.log(msg);//现在
   

9. 数组： Array.prototype.indexOf(value) //取出数组第一次出现位置的下标
   Array.prototype.lastIndexOf(value) //取出最后一次在数组出现位置的下标
   Array.prototype.foreach(function(item,index){item代表每一项,index代表索引})
   遍历 Array.prototype.map(function(item,index){ return 数组 }) //映射
   通过return 把旧的数组映射成为新的数组 Array.prototype.filter(function(item,index){
   return true }) //过滤

10. let (1)不存在变量提升 (2)它出现了 块级作用域 (3)不能被重复定义
    const (1)定义常量 且 这个值不能被改变 (2)(3)和let 一样 有自己的块级作用域 且不能被重复声明