ES5&ES6

117 阅读5分钟

1、ES5带来了新特性:带来了一些新的API操作

1、保护对象:保护对象的属性和方法
	如何保护:2种方式
		1、四大特性:每一个属性都有四大特性
			{
				value: 1001, //实际保存值的地方
				writable: true,//开关,控制着此属性是否可以被修改 
				enumerable: true,//开关,控制着此属性是否可以被for in循环遍历到
				configurable: true,//开关,控制着此属性是否可以被删除
			}

		    如何设置四大特性:
			Object.defineProperties(对象名,{
				"属性名":{四大特性},
				...
			})

		2、三个级别:
			1、防扩展:禁止给对象添加属性
				Object.preventExtensions(obj);

			2、密封:禁止给对象添加属性和删除元素
  					Object.seal(obj);

			3、冻结:禁止给对象添加属性和删除元素和修改元素
				Object.freeze(obj);

			其实保护对象对于我们程序员来说可有可无:
				1、如果你用的是面向过程,你保护个屁
				2、别人基本不可能知道我们的对象叫什么名字
				3、前辈们几乎都没有保护过对象,你保护个屁

2、*****数组的新的API361、判断:2个:
		1、every 每一个 - 要求每一个元素都要满足我们的条件,结果才为true,只要有一个不满足结果就为false,类似于&&
			var bool=arr.every(function(val,i,arr){
				return 判断条件
			})

			val - 当前元素
			i - 当前元素的下标
			arr - 数组本身,前辈们提供了3个,不代表3个对我都有用

		2、some 有一些 - 要求只要一个元素都要满足我们的条件,结果就为true,只要全部不满足结果就为false,类似于||
			var bool=arr.some(function(val,i,arr){
				return 判断条件
			})

	2、遍历:把每一个元素拿出来执行相同 或 相似的操作:21、forEach:遍历数组,直接修改原数组
			arr.forEach(function(val,i,arr){
				操作
			})

		2Map:遍历数组,不修改原数组,返回一个新数组
			var newArr=arr.map(function(val,i,arr){
				return 操作
			})

	3、汇总和过滤:
		过滤:不会修改原数组,但是会得到你过滤出来的新数组
			var subArr=arr.filter(function(val,i,arr){
				return 判断条件;
			})

		汇总:把数组中的每一个元素汇总到一起
			var sum=arr.reduce(function(prev,val,i,arr){
				return prev+val;
			},基础值)

	以上6API底层都是for循环,目的 - 简化for循环,暂时可能还会用到一些for循环

3Object.create():根据父对象创建子对象,继承已经设置好了
	语法:var 子对象=Object.create(父对象,{
		"自有属性名":{四大特性},
		...
      	});

4、面试时:严格模式:很严格
   开启:在你的任何作用域的顶部加上一句话:"use strict";
   功能:1、禁止给未声明的变量赋值 - 解决全局污染
         2、静默失败升级为报错

5、*****call/apply/bind:不是自己的方法也可以使用 - 笔试面试也很容易碰到
   	call/apply:临时替换了函数中的this - 借用
	语法:函数名.call(借用的对象,实参,...); - 单独传入每一个实参
	      函数名.apply(借用的对象,arr); - 只能传入一个实参是一个数组,apply其实会悄悄的将数组打散
	强调:call/apply,相当于立刻调用函数,立即执行

   	bind:永久替换了函数中的this - 买
	3件事:
	         1、创建了一个和原函数完全相同功能的新函数
	         2、将新函数中的this永久绑定为了指定对象,别人都借不走了
	         3、将新函数中的部分参数永久固定
	         用法:var 新函数=原函数.bind(指定对象,永久实参,...) - 不是立刻执行的,需要自己调用
	         强调:bind绑定的新函数没有办法被call/apply借走

   个人更推荐:call/apply,借,白嫖

   固定套路:
	1Math.max/min.apply(Math,arr);
	2Object.prototype.toString.call/apply(arr);
	3、***类数组转为普通数组方法1:类数组名称=Array.prototype.slice.call/apply(类数组);
        4、***类数组转为普通数组方法2:类数组名称=Array.from(类数组名);(有兼容性问题,老IE不支持)

ES5其实没有什么简化,只是提供了一些API

2、ES6:简化ECMAScript - 语法较大的变化

     1、*模板字符串:可以在字符串中放入变量 - 不需要再做字符串拼接,在字符串中实现了一个简单的js的环境
 	语法:`我的名字叫${name}`

2、*块级作用域:尽量以后【优先】使用let创建变量
 	let 变量名=值;
 	作用:1、禁止声明提前
       	          2、添加了块级作用域,一个{}就是一个块
       	          3、记录着当前触发事件的元素的下标

 3、***箭头函数:简化回调函数:
 	公式:去掉function,()和{}之间添加=>,形参如果只有一个,则省略掉(),函数体如果只有一句话,省略{},
      	 函数体只有一句话并且是returnreturn和{}都省略
 	特殊:千万不要将事件也简化为箭头函数 - 暂时

4for...of循环:垃圾
 	for(var v of 数组名){
		v;//value当前值
 	}

 	缺点:1、不能修改原数组,只能返回新数组
       	          2、不能遍历hash数组,意味着也不能遍历对象,只能遍历索引数组

ECMAscript - 核心语法1 - 掘金 (juejin.cn)
ECMAscript - 核心语法2 - 掘金 (juejin.cn)
ECAM script - 核心语法3 - 掘金 (juejin.cn)
ECMA script - 核心语法4-1 - 掘金 (juejin.cn)
ECAM script - 核心语法4-2 - 掘金 (juejin.cn)
ECMA script - 核心语法5 - 掘金 (juejin.cn)
ECMA script - 核心语法6 - 掘金 (juejin.cn)
ECMA script - 核心语法7-1 - 掘金 (juejin.cn)
ECMA script - 核心语法7-2 - 掘金 (juejin.cn)
ECMAscript 8 - 掘金 (juejin.cn)