06ES5-6数组判断、遍历

100 阅读5分钟

1、ES5: 1、保护对象:保护对象的成员(属性和方法) 如何保护: 1、四大特性: Object.defineProperties(obj,{ "属性名":{ value:实际保存值, writable: true/false,//开关:控制着这个属性名是否可以被修改 enumerable: true/false,//开关:控制着这个属性名是否可以被for in循环遍历到 configurable: true/false,//开关:控制着这个属性名是否可以被删除 - 这一句是总开关,一旦设置为false,其他特性不允许在修改,一旦设置为false不可逆 } })

2、三个级别:
	1、防扩展:禁止给对象添加新属性
		Object.preventExtensions(obj);
	2、密封:禁止给对象添加新属性和删除属性
		Object.seal(obj);
	3、冻结:禁止给对象添加和删除和修改
		Object.freeze(obj);

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

2、*****数组的新的API:3组6个 1、判断:判断结果一定是一个布尔值 every:每一个 - 要求每一个元素都要满足,结果才为true,只要有一个不满足就为false - 类似于&& 语法:var bool=arr.every(function(val,i,arr){ return 判断条件; })

			//val - 当前值
			//i   - 当前下标
			//arr - 数组本身,前辈们确实提供了3个形参给我们,但我们需要哪个在用哪个

	some:有一些 - 要求每一个元素都不满足,结果才为false,只要有一个满足就为true - 类似于||
		语法:var bool=arr.some(function(val,i,arr){
				return 判断条件;
		      })

2、遍历:将数组中的每个元素取出来执行相同或相似的操作:
	forEach:遍历数组,直接修改原数组
		语法:arr.forEach(function(val,i,arr){
				直接做操作
		      })

	map:遍历数组,不修改原数组返回一个新数组
		语法: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就不写for

3、Object.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、***类数组转为普通数组:类数组名称=Array.prototype.slice.call/apply(类数组);

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


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

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

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

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

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

5、二阶段结束前,再将5个ES6的新特性,三阶段必用

作业: 1、摇号功能 2、使用let完成一个选项卡 3、保护对象(两种方式) 4、call/apply/bind - 抄一遍我的案例都可以 5、遍历API6个

6、金夫人收货时间到了(轮播、选项卡)