es6 箭头函数全集 第三章（23讲课）

<script>
	export default {
		data() {
			return {

			}
		},

		onLoad() {
			// 1.带参数默认值的函数
			// es5 参数默认值
			function add(a, b) {
				a = a || 10;
				b = b || 20;
				return a + b
			}
			console.log(add());
			// 1.带参数默认值的函数
			// es5 参数默认值
			function add(a = 10, b = 20) {
				// a = a || 10;
				// b = b || 20;
				return a + b
			}
			console.log(add());
			console.log(add(30));
			// 这个30 指向a  b 还是20
			// 结果50
			function add(a, b = getVal(5)) {
				return a + b
			}

			function getVal(val) {
				return val + 5;
			}
			console.log(add(10))
			// 剩余参数 ： 由三个点... 和一个紧跟着的具名参数数指定...keys
			function pick(obj, ...keys) {
				console.log(keys);
				let result = Object.create(null);
				for (let i = 0; i < keys.length; i++) {
					result[keys[i]] = obj[keys[i]]
				}
				return result
			}

			let book = {
				title: 'es6的教程',
				author: '小马哥',
				year: 2019
			}
			let bookData = pick(book, 'author', 'year');
			console.log(bookData);
			// const my = (...my);
			// console.log('a','b' , 'c')
			function my(...my) {
				console.log(my)
			}
			my('a', 'b', 'c');
			// console.log(my)
			// 4 扩展运算符 ...
			// 剩余运算符：把多个独立的合并到和一个数组中
			// 扩展运算符：将一个数组分割 并将各个项作为分割的参数传给函数
			// es6
			const maxNum = Math.max(20, 30);
			console.log(maxNum)
			// es6数组写法
			// arr = [1, 20, 99.77, 47];
			const arr = [1, 20, 99, 77, 47];
			console.log(Math.max(...arr));

			// es6 的箭头函数
			// 使用=>来定义的 function() {} =()=>{}
			// 这是下面es5 写法
			let adds = function(a, b) {
				return a + b
			};
			console.log(adds(10, 30));
			let addes = (a, b) => {
				return a + b
			};
			console.log(addes(10, 50));

			let addess = val => {
				return val + 10;
			}
			console.log(addess(10))
			// 还有简便写法是

			let addesss = val => (val + 5)
			console.log(addesss(10))


			let addessse = val => val
			console.log(addessse(10))


			let addessses = (val1, val2) => (val1 + val2)
			console.log(addessses(10, 20))
			// 如果没有参数怎么写
			let fn = () => 'hello worid'
			console.log(fn());

			// es6写法
			let fns = (() => {
				return () => {
					console.log('hello es62')
				}
			});
			fns();

			// 没有this 指定
			// es5 中this指向： 取决于调用该函数的上下稳对象
			// let PageHandle = {
			// 	id: 123,
			// 	init: function() {
			// 		// 给事件
			// 		document.addEventListener('click', function(event) {
			// 			// 做事情
			// 			this.doSomeThings(event.type)
			// 		})
			// 	},

			// 	doSomeThings: function(type) {
			// 		console.log('事件类型：$(type), 当前id:$(this.id)');
			// 	}
			// }
			// PageHandle.init();
			// es6写法

			let PageHandle = {
				id: 123,
				init: function() {
					// 箭头函数没有this指向 箭头函数内部this值只能通过查找作用域链才确定 一旦使用箭头函数当前不存在作用域链
					// 给事件
					document.addEventListener('click', (event) => {
						// 做事情
						this.doSomeThings(event.type)
					}, false)
				},

				doSomeThings: function(type) {
					console.log('事件类型：$(type), 当前id:$(this.id)');
				}
			}
			PageHandle.init();

			//使用箭头函数的注意事项 使用箭头函数 函数内部没有arguments
			// let getval = (a, b) => {
			// 	// console.log(arguments)
			// 	return a + b
			// }
   //          console.log (getVal(1,3))
			 // 2.箭头函数不能使用new关键字来实例化对象
			  let Person =()=>{
				  
			  };
			  // function 函数 也是一个对象 但是箭头函数不是一个对象 他其实就是一个语法使用
			  console.log(Person)
			 let  p = new Person();			
			 
			




		},
		methods: {

		}
	}
</script>