ES6课堂笔记

最新推荐文章于 2023-07-04 11:30:00 发布

然陈

最新推荐文章于 2023-07-04 11:30:00 发布

阅读量9.9k

点赞数 68

本文链接：https://blog.csdn.net/cj521zhihui/article/details/107910878

版权

ES6学习

一：数据类型

1.值类型
数字：number
字符串：string
布尔:boolean
未定义：undefined
2.应用类型
数组 Array
对象 Object

二：变量声明

加粗样式

1.let

	1.局部变量在一对{ }里面才有效
	2.不能重复声明
	3.不会变量提示

2.const

	1.声明的是常量
	2.声明必须赋值
	3.不能被修改
	4.建议变量名采用大写

在这里插入图片描述

三：解构-数组(重点)

01基础解构

let  arr = [1, 3, 5, 7, 9];
let [a, b, c] = arr;
console.log("a:",a);
console.log("b:",b);
console.log("c:",c);

02 交换变量

let a = 15;
let b = 27;
[b,a] = [a,b];
console.log("a:",a)
console.log("b:",b);

03 跳过

let  arr = [1, 3, 5, 7, 9];
 let [,a,,,b] = arr;
 console.log(a,b)

04 剩余

let  arr = [1, 3, 5, 7, 9];
let [a,...b] = arr;
console.log(a,b)

05 默认值（是1）

let  arr = [1, 3, 7];
let [a,b,c=100] = arr;
console.log(a,b,c)

06 字符串

let [a,b,c,d] = "我爱我的祖国";
console.log(c)

07 实现浅拷贝（复制）

var arr = [1,3,5];
var arr1 = [...arr];
arr1[1]=100;
console.log(arr,arr1)

四：解构-对象（重点）

01基本
02对象解构没有顺序

var obj = {name:"木木",age:19,weight:128};
// let {weight,name} = obj;
// console.log(name,weight)

03剩余值

var obj = {name:"木木",age:19,weight:128};
let {weight,...rest} = obj;
 console.log(weight,rest)

04默认值

var obj = {name:"木木",age:19,weight:128};
let {name,eye=2} = obj;
console.log(name,eye)

05 复制

var obj = {name:"木木",age:19,weight:128};
var obj2 = {...obj};
obj2.name = "zql";
console.log(obj2,obj)

在这里插入图片描述

五：字符串

1.ES5 新增方法
01trim()

 var str = '  我爱  我的祖国   ';
		console.log(str.trim()); //去掉全部空格
		console.log(str.trimLeft());//去掉左边空格
		console.log(str.trimRight());//去掉右边空格

02repeat() 重复

var str = '  我爱我的祖国';
 console.log(str.repeat(10));

02 ES6 新增方法

var str = '我爱js';
		for(let i of str){
			console.log(i);
		}

3.遍历 for of

补充：(index(查找字符串，从哪个下标开始返回下标或者-1))

01 includes 是否包含（返回ture/false）

var str = "我爱你就像老鼠爱大米";
alert(str.includes("恨"));

02 startsWith 开头

var str = "我爱你就像老鼠爱大米";
var ind = str.indexOf("狠") 找不到返回-1
alert(str.startsWith('我'))

03 endsWith 结尾

var str = "我爱你就像老鼠爱大米";
alert(str.endsWith("大米"))

六：字符串模板

var name = "捷爱士";
	var age  = 18;
	// var str = '大家好我的名字是"'+name+'"今年'+age+'岁了';
	var str = `大家好我的名字是"${name}"，
	今年${age}岁了`;
	console.log(str);

在这里插入图片描述

高阶方法六个头

七：forEach 遍历

有三个参数(形参,index（下标）,self（自己）)

var arr = ['我','爱','我的','祖国'];
		arr.forEach(function(itme,index,self){
			console.log(itme,index,self);
		})

八：map 映射

var arr = [1, 3, 5] //变成2,6,10
		var arr2 = arr.map(
			function(item,index,self) {
				console.log(item, index, self)
				return item * 2;
			}
		)
		console.log(arr2);

九：filter 过滤

//回调函数如果返回true, 当前元素保留。如果返回为false, 当前元素被过滤掉。

var arr1 = [2,-50,30,25,19,60,5,7];
		//目标:过滤，大于20的数
		var arr2 = arr1.filter(
			function(item){
				return item>20;
			}
		)
		console.log('arr1:',arr1);
		console.log('arr2:',arr2);

十： reduce 累计

a,b两个参数上一次计算结果是这一次的a

// reduce 累计 a,b两个参数 上一次计算结果是这一次的a
		 var arr = [2, 3, 4];
		 var ret = arr.reduce(
			function(a,b){
				return a+b;
			}
			// // 第一次 a：2  b：3  返回 5
		 	// // 第二次 a：5 b：4 返回  9
		 )
		alert(ret);

十一：every 每个

every 每个
		var arr = [2,4,6,7,100,20,50];
		// 目标判断 是否数组中的每个元素都小于10
		var ret = arr.every(
			function(item){
				return item<10;
			}
		)
		// 如果所有都小于10 最终返回true，有一个大于10 返回false
		 alert(ret);

十二：some 有一个

some 有一个
		var arr = [2, 4, 6, 7, 100, 20, 50];
		// 目标判断 是否数组中有大于20的数
		var ret = arr.some(
			function(item) {
				return item > 20
			}
		)
		alert(ret);

在这里插入图片描述

高阶方法六个尾

十三：箭头函数（重点）

1.普通函数

	function times(n){
			alert(n*2)
		}
	times(6);

2.箭头函数

箭头函数函数简写方式
1.组成: 参数 => 语句,

//箭头函数函数简写方式
var times = n =>alert(n*2);
times(6);
	声明一个变量times 为一个函数
	函数参数为n,函数执行语句为aler(n*2)
	=> 前函数的参数
	=> 后是函数的执行语句也是 返回值

var arr = ['我爱','我','的','祖国'];
arr.forEach(item=>console.log(item));

2.参数不是1个: (参数1,参数2)=>语句,

var arr = [1,2,3,4];
//目标求和
var ret = arr.reduce((a,b)=>a+b);
alert(ret);
如果不是一个参数，参数用()包裹

3.语句不止一条: 参数 =>{语句1;语句2;return 返回值}

// 默认setInterval this指向window
//  箭头函数this的指向为上一层作用域中的this obj；
var obj = {
		age:18,
		say:function(){
			console.log("今年我"+this.age)
		},
		grow:function(){
			window.setInterval(()=>{
				this.age ++;
				this.say();
			},3000)
		}
	}

4.返回的对象格式: 参数=>{(对象)}

var arr = [1,2,3,4];
	// 把arr 映射为 [{num:1},{num:2}]
	var arr2 = arr.map(item=>({num:item}))
	console.log(arr2);

十四：函数

1.函数的默认参数

function add(a,b=10){
			alert(a+b)
		}
	//add(3,5);
	add(3)

2.函数的不定参数

function add(...args){
			var ret = args.reduce((a,b)=>a+b);
			alert(ret);
		}
		// add(1)
		add(2,8,1,7,3)

3.函数的拓展参数

function metting(a,b,c,d){
			console.log('今天开会的有:',a,b,c,d);
		}
		// metting("习嘻嘻","乔开心","江起洋","王振宇");
		var arr = ["苏晓明","敲开心","王振宇","小红","小米"]
		
		metting(...arr);

在这里插入图片描述

十五：数组新增方法

1.填充 fill(“填充内容”,start,end)

var arr = [1,3,5,7];
arr.fill("love",2);
console.log(arr);

//从数组拷贝替换元素copywithin(替换开始位置，拷贝开始位置，拷贝结束位置)
var arr = [0,1,2,3,4,5,6,7];
var arr1 = arr.copyWithin(0,4,6);
console.log(arr);
console.log(arr1);

2.查找
1.includes

	var arr = ["我","好","中意","你",100];
			alert(arr.includes("好"));

2.按条件查找 find查找元素 findIndex查找下标

var arr = [2,7,10,100,50,255];
		//查找arr中是否有大于100的数
			// var ret = arr.find(item=>item>100);
			// alert(ret);
		
			var ret = arr.findIndex(item=>item>100);
			alert(ret);

在这里插入图片描述

十六：对象

01 简写方式

var name = "num";
var age = 18;
		var user = {
			name,
			age,
			say(){
				alert(`大家好我的名字是${this.name},今年${this.age}`);
			}
		};
		
		
		console.log(user)

02 对象的动态属性

var str = window.prompt('请输入对象名称',"link");
var value = window.promt("请输入对象值","好好学习");
var obj = {[key+"web"]:value};

03 对象的继承

 var man={
	 leg:2,
	 walk(){console.log(`我用我的两条腿步行`)}
 }
 
 var teacher = {
	 name:"mumu",
	 age:18,
	 __proto__:man
 }

十七：call和apply

//apply 传递参，数数组的形式
// 案例求数组的最大值,最小值

// var arr = [15,20,-8,99];
		// var min = Math.min(...arr);
		// alert(min);
		
		var max = Math.max.apply(null,arr);
		alert(max);
		
		
		function say(a,b){
			//默认函数  中的this指向 window
			console.log(this)
			console.log(a+b)
		}
		say();

十八：bind

//bind 创建一个新的函数，并传入this

//bind 创建一个新的函数，并传入this
		var name = 'mumu';
		var age = 18;
		function say(){
			console.log(`大家好我的名字是${this.name}，今年${this.age}岁了`)
		}
		
		// say();
		
		var nsay = say.bind({name:"从来",age:10},10);
		//say通过bind创建一个新的函数 , this为bind第一个参数，a的值是10
		nsay(7);

十九：set

//set 是一个不重复的数组

//作用:可以对数组进行去重
		// var s1= new Set([1,2,32,7,8,7]);
		// console.log(s1)

//数组去重方式
		// var arr = [1,2,32,7,8,7];
		// var s1 = new Set(arr);
		arr = [...s1];

		// arr = Array.from(s1);
		// console.log(arr);

// 初始化new Set();
// 添加 add();
// 删除 remove();
// 获取长度 size();
// 清空clear()
// 遍历 for of;
// 转换为数组 Array.form() […];

var s = new Set([1,3,1,3,5,7,9]);
		console.log(s);
		console.log("size",s.size);//数组长度
		console.log("是否有5",s.has(5));//返回值true/false
		//-------------------------
		s.add(12);//添加
		console.log(s);
		s.delete(1);//删除
		console.log(s);
		//for of 遍历元素
		for(let i of s){
			console.log(i);
		}

二十：Map

//map 类似于对象,
//键名可以是任意对象，对象：键名只能是字符串或者 symbol符号
//map 是有序的，对象：默认排序

// 特点,有序/key可以是任意值
// new Map([[k,v],[]])
// 长度size
// 添加set(k,v)
// 设置get(k)
// remove()
// 遍历for of
// clear()
//has()检测是否有；

//map.size 获取长度
//map.get(1)获取元素
//map.set(3,“amazing”)添加
//map.delete(2)删除

var obj = {"b":100,"a":"嘻嘻嘻","2":"best","1":"good"}
		console.log(obj);
		
		var map = new Map([["b",100],["a","aaa"],[2,"best"],[1,"good"]])
		
		console.log(map);

二十一：Symbol

// Symbol 符号唯一值
// 常用于左右对象的key

//var obj = {[s1]:"mumu"}
//Symbol.for("blue") == Symbol.for("blue") True
//Symbol("blue") == Symbol("blue") False

二十二：for of

// string 字符串 Number 数字 Boolean 布尔 undefined 未定义 Symbol 符号 function 函数 Object 对象 Array 数组 Set 集合 Map 键值对 weakMap weakSet weakMap 键必须是引用类型

// 可以迭代类型:通过for of 可以遍历的,
// string Array Set Map

var arr = ["我爱","我的","祖国"];
		// 默认遍历是value
		for(let item of arr){			
			console.log(item);
		}
		//keys 键名的集合
		for(let key of arr.keys()){
			console.log(key);
		}
		//value值的集合
		for(let val of arr.values()){
			console.log(val);
		}
		//entries键与值的结合
		for(let [key,val] of arr.entries()){
			console.log(key,val);
		}

二十三：class类

// 类:创造对象的一个模板
// 实例:是被类创建的对象,一个类可以创建多个实例
1.创建类

 //狗类: 名字，咬人，叫
		// class Dog{
		// 	constructor(name) {
		// 		this.name = name;
		// 		//this类的实例
		// 	}
		// 	//构造函数(new 类被调用)
		// 	bark(){
		// 		console.log("旺旺旺旺");
		// 	}
		// }
		// var d1 = new Dog("大黄");
		// var d2 = new Dog("旺财");

// //猫类: 名字，咬人，叫
		// class Cat {
		// 	constructor(name) {
		// 		this.name = name;
		// 		//this类的实例
		// 	}
		// 	//构造函数(new 类被调用)
		// 	bark(){
		// 		console.log("喵喵喵喵喵");
		// 	}
		// }
		// var c1 = new Cat("TOM");
		// var c2 = newCat("kity");

2.继承类：

// 动物:名字,跑
		class Animal{
			constructor(name) {
				this.name = name;
				//this类的实例
			}
			runing(){
				console.log("我会走的");
			}
		}
		
		class Dog extends Animal{
			constructor(name) {
				super(name);//调用父类的构造函数
				//this类的实例
			}
			//构造函数(new 类被调用)
			bark(){
				console.log("旺旺旺旺");
			}
		}
		
		class Cat extends Animal{
			constructor(name){
				supr(name);
			}
			bark(){
				console.log("喵喵喵喵喵");
			}
		}
		
		
		var c1 = new Cat("TOM");
		var c2 = new Cat("kity");
		var d1 = new Dog("大黄");
		var d2 = new Dog("旺财");

3.封装

//set get 当我们去设置或者获取时对数据进行额外的操作,影藏原本的数据直接操作。

// 动物:名字,跑
		class Animal{
			constructor(name) {
				this.name = name;
				//this类的实例
				
			}
			runing(){
				console.log("我会");
			}
		}
		class Cat extends Animal{
			constructor(name,age=2){
				super(name);
				this.age = age;
			}
			bark(){
				console.log("喵喵喵喵喵");
			} 
			set Age(val){
				if(val>0){
					this.age = val;
				}else{
					console.log("设置年龄不正常")
				}
			}
			get Age(){
				console.log("被GET到了");
				return this.age;
			}
		}
		
		
		var c1 = new Cat("TOM");
		var c2 = new Cat("kity",5);

4.静态属性

class Animal {
			constructor(name) {
				this.name = name;
			}
			runing() {
				console.log("我会走会跑，主人你在哪里");
			}
		}
		class Cat extends Animal {
			constructor(name, age = 2) {
				super(name);
				this.age = age;
				// 每次构造函数被调用 num 加1 记录有多少个实例
				Cat.num ++;
				Cat.sayLog();
			}
			static num = 0;
			//  静态属性 值 0
			static sayLog(){
				console.log(`当前总共有${Cat.num}个只猫`)
			}
			
			
			bark() {
				console.log("喵喵喵喵喵");
			}
			set Age(val) {
				if (val > 0) {
					this.age = val;
				} else {
					console.log("设置年龄不正常")
				}
			}
			get Age() {
				console.log("被GET到了");
				return this.age;
			}
		}


		var c1 = new Cat("TOM");
		var c2 = new Cat("kity", 5);
		

		//set get 当我们去设置或者获取时对数据进行额外的操作,影藏原本的数据直接操作。

二十四：模块

// 导入的三种方式
// 1.import {name} from ‘./components/be.js’;
// //一个一个导出
// 2.import Cat,{func,name} from ‘./components/be.js’;//Cat直接导出
// 3.import *as obj from ‘./components/be.js’;
// //导出所有

引入的js名be.js

var name = "mumu";
function func (){
	console.log("大家好"+name);
}
class Cat{
	constructor(name) {
	    this.name = name;
	}
}
//导出
export {func,name};

//默认导出
export default Cat;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="module">//要注意type = "module"
		// 第一种方法
		// import {name} from './components/be.js';
		// alert(name);
		// import {func} from './components/be.js';
		// func();
		//第二种方法
		// import Cat,{func,name} from './components/be.js';
		
		// func();
		// var c1 = new Cat("kitty");//需要一下初始化classl类，才能调用
		// console.log(c1);//调用
		// console.log(name);
		
		
		// 导入的三种方式
		// 1.import {name} from './components/be.js';
		// //一个一个导出
		// 2.import Cat,{func,name} from './components/be.js';//Cat直接导出
		// 3.import *as obj from './components/be.js';
		// //导出所有
	</script>
</html>

二十五：生成器

1.迭代生成器

//js 可以迭代类型string Array Set Map
		function *gen(){
			yield "我";//遇到yield时停止
					   //隐藏的done为false 时没有完成，需要继续下一步
			yield "好";
			
			yield "中意";
			
			yield "你";
			
						//没遇到yield时，完成
						//隐藏的done为true 时完成，不需要继续下一步
		}
		//接收一下函数
		var iter = gen();
		
		// 生成器函数generator 遇到yield 停止执行
		// 通过 next 去调用的是 移动到下一个yield停止
		// 返回的值 为yield {value:yield的结果,done:false}
		
		//for of循遍历iter出gen()的value:yield的结果; 
		for(let item of iter){
			console.log(item);
		}

2.//迭代对象

var obj = {
			name: "mumu",
			age: 18,
			weight: 130
		};
		//创建一个生成器函数
		function *gen(obj) {
			// 获取对象的所有key(键)的列表
			var keys = Object.keys(obj);
			
			// 遍历所有的键 执行yield 返回 一个数组[键，值]
			for (var i = 0; i < keys.length; i++) {
				yield [keys[i], obj[keys[i]]];
			}
		}
		
		var iter = gen(obj);
		// 遍历可迭代对象
		// 取出k键，v值
		// for (let [k, v] of iter) {
		// 	console.log(k, v);
		// }
		// 当h1被单击
		myh.onclick = function(){
			// 获取迭代next 结果
			var obj = iter.next();
			
			if(!obj.done){
				myh.innerText = obj.value;//设置返回的值
			}else{
				myh.innerText = "请充值"; //如果已经完毕 
			}
			
		}

二十六：promise承诺（重点）

		// 承诺 Promise
		// 结果：resolve 兑现   reject 拒绝
		// 凭据：then 然后 ， catch 捕获捕获
		
		
		// 目标：小王同学给自己的女朋友承诺 等30岁后给它买个别墅，前面有花园，后面有游泳池，顶楼是停机坪，底层是车库。
		var p = new Promise(function(resolve,reject){//小王承诺做出(兑现/拒绝)
			setTimeout(()=>{
				var n = Math.random();//创建一个0-1随机数
				if(n>0.5){//如果大于0.5兑现
					resolve("买个别墅，前面有花园，后面有游泳池，顶楼是停机坪，底层是车库。")
				}else{
					reject("要不等40岁的时候");
				}
				
				
			},2000)//答应的时间期限
		})
		
		
		p.then(function(res){//res 是resolve的形参
			console.log(res)  //调用得到了兑现
		})//如果兑现调用这个函数
		
		.catch(err=>{//err 是reject的形参
			console.log(err)//被拒绝
		})//如果被拒绝调用这个函数

二十七：回调函数

function say(str,time,callback){
			setTimeout(()=>{
				console.log(str);
				if(callback){callback()}//判断是否传入函数参数,有就调用。
			},time)
		}
		say("你好能加你一个微信吗？",3000,function(){
			say("我非常喜欢你",5000,function(){
				say("邀请你一起去玩",2000);
			})
		})
		
		//回调函数  实现延期任务  层级多深(回掉地狱)

function say(str,time){
			return new Promise((resolve,reject)=>{
				setTimeout(()=>{
					console.log(str);
					resolve(str);
				},time)
			})
		}
		say("你好能加你一个微信吗？",3000)
		.then(res=>{
			return say("我非常喜欢你",5000)
		})
		.then(res=>{
			return say("邀请你一起去玩",2000)
		})
		
		.then(res=>{
			
		})
		//返回的是上一个结果

二十八：案例

01weather获取地址，温度，天气，图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./jquery-3.3.1.js"></script>
	</head>
	<body>
		<p>
			<span class="add"></span> 
			<span class="weather"></span>
			<span class="temp"></span>
			<img src="" class="img" alt="" width="30">
		</p>
<script>
	
	$(function(){
		
		// 获取网络请求 信息（根据不同的url返回不同的结果）
		function getApi(url){
			// 返回一个承诺
			return new Promise((resolve,reject)=>{
				$.ajax({
					url:url,
					dataType:"jsonp",
					success:function(res){
						resolve(res); //如果请求成功就可以兑现（兑现的数据是请求回来的数据）
					},
					error:function(err){
						reject(err) //如果失败 拒绝兑现 给出拒绝理由
					}
				})
			})
		}
		
		// 获取地址
		var urlA = "https://apis.map.qq.com/ws/location/v1/ip?key=CAABZ-AVSAQ-RDR5L-GTBDJ-HLA4O-A5FDB&output=jsonp&_=1593478015329";
		var urlB = "https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc";
		// 添加&province=省份&city=城市
		
		getApi(urlA)
		.then(add=>{// 获取地址
			console.log(add);
			var info = add.result.ad_info;//具体的地址信息
			$(".add").text(info.city);
			return getApi(urlB+`&province=${info.province}&city=${info.city}`)
		})
		.then(data=>{// 获取天气
			console.log(data);
			$(".weather").text(data.data.observe.weather)
			$(".temp").text(data.data.observe.degree)
			$(".img").attr("src",`https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/weather/${data.data.observe.weather_code}.svg`)
		})
		.catch(err=>{// 失败
			console.error(err);
		})
		
	 
		
	})
</script>
	</body>
</html>

02按序加载图片，只显示一张

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 
	</head>
	<body>
	
			
<script>
	var arr = [
		"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340",
		"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b746a4db2e0473cc076a3a4b9bbe0235.jpg?w=632&h=340",
		"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
	]
	// 同时加载这三张图片，哪张图片加载，只显示哪张 race 比赛
	function loadImg(url){
		// 返回一个promise 实例
		return new Promise((resolve,reject)=>{
			var img = document.createElement("img");
			// 创建一个图片节点
			img.src = url;// 设置src
			img.width = 200; //设置宽度
			img.onload = function(){
				// 图片加载完毕
				resolve(img); //返回图片
			}
			img.onerror=function(e){
				reject(e) //失败 e失败事件对象
			}
		})
	}
	// Promise.race 比赛 哪个promise最先 reslove 返回哪个
	Promise.race([
		loadImg(arr[0]),
		loadImg(arr[1]),
		loadImg(arr[2])		
	])
	.then(res=>{
		document.body.append(res)
		// 插入到body标签里面
	})
	.catch(err=>console.error(err))
	// 如果失败打印失败的元素


</script>
	</body>
</html>

二十九：async

function say(msg,time){
			return new Promise((resolve,reject)=>{
				setTimeout(()=>{
					console.log(msg);
					resolve(msg);
				},time)
			})
		}
		// say("我们去玩吧",3000)
		// .then(res=>{
		// 	return say("我想想",2000)
		// })
		// .then(res=>{
		// 	return say("ok",2000)
		// })
		
		async function doit(){
			await say("我们去玩吧",2000)
			await say("我想想",2000)
			await say("ok",2000)
		}
		
		doit();

三十：代理 proxy

//代理目标 target
//带理操作 handler

var target = {name:"mumu",age:18};
		//代理处理函数  set 设置处理函数,get 获取处理函数
		var handler = {			
			set(target,key,value){
				console.log(key,"我被设置了")
				if(value<=0){
					console.warn("年龄非法")
				}else{
					target[key] = value;
				}
				
			},
			get(target,key){
				console.log(key,"我被获取了")
			}
		}
		
		//设置一个新的代理对象
		//代理可以让设置，获取的对象属性是进行一些控制操作
		var proxy = new Proxy(target,handler);

三十一：反射

var obj = {name:"name",age:10,leg:2}
		//反射 ES6 新出的特性
		//若需要在Proxy内部调用对象的默认行为，反射
		var name = Reflect.get(obj,"name")
		console.log(name);
		
		//设置obj的age值为30
		Reflect.set(obj,"age",30);
		
		//检查对象是否有某个属性
		var flag = Reflect.has(obj,"leg");
		console.log(flag);

		//获取对象的所有键名
		var keys = Reflect.ownKeys(obj);
		console.log(keys);

三十二：Object.defineProperty()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		//Object.defineProperty(obj,prop,descriptor);
		// obj:必须。目标对象
		// prop：必需。需定义或修改的属性的名字
		// descriptor：必需。目标属性所拥有的特性
		
		// 01 value属性,设置属性值的。
		
		
		// var user = {};
		// Object.defineProperty(user,"name",{
		//  value:"狂奔的蜗牛"
		// })
		// console.log(user);//{name: "狂奔的蜗牛"}
		
		// Object.defineProperty(user,"isSlow",{
		// 	value:true
		// })
		
		// Object.defineProperty(user,"sayHi",{
		// 	value:function(){
		// 		console.log("HI!")
		// 	}
		// })//传入方法属性
		
		// Object.defineProperty(user,"birth",{
		//  value:{
		//   date:"2018-06-29",
		//   hour:"15:30"
		//  }
		// })	//传入对象属性
		
		// console.log(user)
		
		
		
		
		// 02 writable属性,属性是否可以被重新赋值。
		//接受数据类型为 boolean（默认为false） true ,支持被重新赋值 false,只读。
		
		// var user = {};
		// Object.defineProperty(user,"name",{
		// 	value:"王者",
		// 	writable:true
		// })
		// console.log(user);
		
		// user.name="荣耀王者"
		// console.log(user);
		
		
		
		
		
		
		
		// 03 enumerable属性是否可以被枚举
		//受数据类型为 boolean（默认为false） true,支持被枚举 false,不支持
		
		
		// var user ={
		//  name:"狂奔的蜗牛",
		//  age:25
		// } ;
		// var keys = Object.keys(user);
		// console.log(keys);//['name','age']
		
		
		// var user ={
		//  name:"狂奔的蜗牛",
		//  age:25
		// } ;
		
		// //定义一个性别 可以被枚举
		// Object.defineProperty(user,"gender",{
		// 	value:"男",
		// 	enumerable:true
		// })
		// //定义一个出生日期 不可以被枚举
		// Object.defineProperty(user,"birth",{
		//  value:"1956-05-03",
		//  enumerable:false
		// })	//不显示的意思
		
		// var keys = Object.keys(user);
		// console.log(keys);
		
		
		
		
		
		
		// 04 configurable属性 
		// 两个作用：1 属性是否可以被删除
		
		// 2 属性的特性在第一次设置之后可否被重新定义特性
		// var user ={
		//  name:"狂奔的蜗牛",
		//  age:25
		// } ;
		
		
		// //定义一个性别 不可以被删除和重新定义特性
		// // 设置为 false
		// Object.defineProperty(user,"gender",{
		// 	value:"男",//设置属性
		// 	writable:true,//可以重新赋值
		// 	enumerable:true,//可以到看设置的这个属性
		// 	configurable:false//不可以被删除和重新定义特性
		// })
		
		
		
		
		// // //删除一下
		// var user ={
		//  name:"狂奔的蜗牛",
		//  age:25
		// } ;
		// //定义一个性别 可以被删除和重新定义特性
		// Object.defineProperty(user,"gender",{
		//  value:"男",
		//  enumerable:true,
		//  configurable:true
		// })
		
		// //删除前
		// console.log(user);
		// // {name: "狂奔的蜗牛", age: 25, gender: "男"}
		// //删除一下
		// delete user.gender;
		// console.log(user);
		// // {name: "狂奔的蜗牛", age: 25}
		 
		// //重新定义特性
		// Object.defineProperty(user,"gender",{
		//  value:"男",
		//  enumerable:true,
		//  configurable:false
		// })
		// //删除前
		// console.log(user);
		// //删除一下 删除失败
		// delete user.gender;
		// console.log(user);
		// {name: "狂奔的蜗牛", age: 25, gender: "男"}
		
		 // configurable设置为 true 则该属性可以被删除和重新定义特性；反之属性是不可以被删除和重新定义特性的，默认值为false（除了可以给新定义的属性设置特性，也可以给已有的属性设置特性）
		
		
		
		
	// 05 set和get重要的两个属性
	
		// get属性
		// var user ={
		//  name:"狂奔的蜗牛"
		// } ;
		// var count = 12;
		// //定义一个age 获取值时返回定义好的变量count
		// Object.defineProperty(user,"age",{
		// 	get:function(){
		// 		return count;
		// 	}
		// })
		// console.log(user.age);//12
		
		//如果我每次获取的时候返回count+1呢
		// var user ={
		//  name:"狂奔的蜗牛"
		// } ;
		// var count = 12;
		// Object.defineProperty(user,"age",{
		// 	get:function(){
		// 		return count+1;
		// 	}
		// })
		// console.log(user.age);//13
		
		
		// set属性
		
		// var user ={
		//  name:"狂奔的蜗牛"
		// } ;
		// var count = 12;
		// //定义一个age 获取值时返回定义好的变量count
		// Object.defineProperty(user,"age",{
		// 	get:function(){
		// 	  return count;
		// 	 },
		// 	 set:function(newVal){
		// 		 count = newVal;
		// 	 }
		// })
		// console.log(user.age);//12
		// user.age=145;
		// console.log(user.age);//145
		// console.log(count);//145
		
		
//等等，如果我想设置的时候是 自动加1呢？我设置145 实际上设置是146
		
		// var user ={
		//  name:"狂奔的蜗牛"
		// } ;
		// var count = 12;
		// //定义一个age 获取值时返回定义好的变量count
		
		// Object.defineProperty(user,"age",{
		// 	 get:function(){
		// 	  return count;
		// 	 },
		// 	 set:function(newVal){
		// 	   count=newVal+1;
		// 	  }
		// })
		// console.log(user.age);//12
		// user.age=145;
		// console.log(user.age);//146
		// console.log(count);//146
		 //注意：当使用了getter或setter方法，不允许使用writable和value这两个属性(如果使用，会直接报错)
		// get 是获取值的时候的方法，类型为 function ，获取值的时候会被调用，不设置时为 undefined
		// set 是设置值的时候的方法，类型为 function ，设置值的时候会被调用，undefined
		// get或set不是必须成对出现，任写其一就可以
		
		var user ={
		 name:"狂奔的蜗牛"
		} ;
		var count = 12;
		//定义一个age 获取值时返回定义好的变量count
		Object.defineProperty(user,"age",{
			get:function(){
				console.log("我要来获取值了！！");
				return count;
			},
			set:function(newVal){
				console.log("我要来设置值了！！");
				count=newVal+1;
			}
		})
		
		console.log(user.age);//12
		user.age=145;
		console.log(user.age);//146
		
		// 总结:  Object.defineProperty方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象
		// 1 value: 设置属性的值,
		// 2 writable: 值是否可以重写。true | false,
		// 3 enumerable: 目标属性是否可以被枚举。true | false,
		// 4 configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false,
		// 5 set: 目标属性设置值的方法,
		// 6 get：目标属性获取值的方法   
		
		
		
		
	</script>
</html>