var,let ,const,箭头函数,字符串相关拓展,函数拓展

var 存在预解析 let不存在预解析

	/*console.log(flag);
	var flag = true;

	console.log(num);
	let num = 1;*/

	------------------------------

let声明的变量不允许重复 (在同一个作用域中)

	/*var num = 1;
	var num = 2;
	console.log(num);

	let num1 = 1;
	let num1 = 2;
	console.log(num1);*/

	//------------------------------

ES6中引入块级作用域 块内定义的变量在外部访问不到

	/*if (true) {
		var flag = 0;
		let num = 1;
		console.log(num);
	}
	console.log(flag);
	// console.log(num);

	{
		let num = 111;
		console.log(num);
	}*/

	/*for (let i = 0; i < 10; i++) {
		console.log(i);
	}
	console.log(i);*/

在块级作用域内 变量必须先声明再使用

	//===============================
	//const   let var 声明变量  const声明常量
	1. const 声明的变量不允许重新赋值
	/*const PI = 3.14;
	let pi = 3.14;
	pi = 3.1415926;
	PI = 3.1415926;
	console.log(pi);
	console.log(PI);*/

	//--------------------------------
	//2.const  声明的变量必须初始化
	let num;
	console.log(num);

	const NUM;
	console.log(NUM);
	/*for (var i = 0; i < 10; i++) {
		console.log(i);
	}
	console.log("====" + i);*/

局部变量泄露问题

	 a是全局作用域下     函数作用域覆盖了全局作用域  变量发生提升   (结论: 函数声明要大于变量声明)
	var a = '1';
		function fn() {
			
			if (false) {
				var a = 3;
			}
			console.log(a);
		}
		fn();

解构赋值

1.数组解构赋值

		//常见
		//let [a, b, c] = [1, 2, 3];
		//存在空值
		// let [a, b, c] = [ , 22, 33];
		//有默认值的情况
		/*let [a=10, b, c] = [111, 222, 333];

		console.log(a);
		console.log(b);
		console.log(c);*/

2.对象解构赋值
let {obj1, obj2} = {obj2:"zhangsan", obj1:"lisi"}; console.log(obj1); console.log(obj2);
对象属性别名 如果取了别名 原来的名字就失效了

let {obj1:john, obj2} = {obj1: "zhangsanfeng", obj2: 'lisifeng'};
		console.log(john);
		console.log(obj2);

3.字符串的解构赋值

let [a, b, c, d, e, f, length]= 'hello';
		console.log(a);
		console.log(b);
		console.log(c);
		console.log(d);
		console.log(e);
		console.log(f);
		console.log(length);

4.对象解构赋值指定默认值

let {obj1="john", obj2} = {obj2:"lisi", obj1:"zhangsan"};
		console.log(obj1);
		console.log(obj2);

//基本数据类型 number boolean string null undefined
5.复杂(引用)数据类型 才有属性和方法
自动装箱 string对象

var str = new string("hi");
		// console.log(str);
		//console.log('hello'.length);

		let {length,a,substring} = 'hihihi';     /*{length: 6,substring:function(){}}*/
		console.log(length);
		console.log(a);
		console.log(substring);

字符串的相关扩展

1.includes() 判断字符串中是否包含指定的字符串 有的话返回true 没有返回false 第一个参数 匹配的字符串 第二个参数 从第几个开始匹配
2.startsWith() 判断字符串是否以特定的字符串开始
3.endsWith() 判断字符串是否以特定的字符串结尾

var obj = {
			name: "jerry",
			gender: "male",
			class: "mouse"
		}

		// 反引号表示模板 模板的数据用${}填充数据
		let tpl = `
			<div>
				<span>${obj.name}</span>
				<span>${obj.gender}</span>
				<span>${obj.class}</span>
			</div>
		`
		console.log(tpl);

函数扩展

1.参数默认值

function fun(p) {
			//指定默认值
			var de = p || "hello";
			console.log(de);
		}
		fun('hi');

		function fun1(param = "hello") {
			console.log(param);
		}
		fun1('how');

2.参数的解构赋值

function fun(name="tom", age="5") {
			console.log(name,age);
		}
		fun("jerry",'3');

		function fun1({name="John", age="18"} = {}) {
			console.log(name, age);
		}
		fun1({name: "Snow", age: "20"});

3.rest参数

function fun1(a,b,c,...rest) {
			console.log(a + b + c);
			console.log(rest);
		}
		fun1(1, 2, 3, 4, 5, 6);

4.扩展运算符 …

function fun(a, b, c, d) {
			console.log(a + b + c + d);
		}
		fun(1,2,3,4);
		let arr = [1, 2, 3, 4, 5];
		fun(...arr);

5.合并数组

let arr1 = [1, 2, 3];
		let arr2 = [4, 5, 6];
		let arr3 = [...arr1, ...arr2];
		console.log(arr3);

箭头函数

1.箭头函数的声明

let fun2 = () => console.log("hello");
		 fun2();

2.箭头函数的传参问题

let fun = param => console.log(param);
		fun('hello kitty');
		//传递多个参数  多个参数要用括号括起来
		let fun1 = (a,b) => console.log(a + b);
		fun1(1, 2);*/

		//foreach
		let arr = [11, 22, 33, 55, 66];
		arr.forEach(function(e, i) {
			console.log(e, i);
		})

		arr.forEach((e, i) => {
			console.log(e, i);
			console.log(1);

		});

特点一 普通函数 this 谁调用就指向谁

var obj = {
			name: "tom",
			gender: "male",
			class: "cat",
			fight: function() {
				console.log(this);   //obj
				console.log(this.name);  //tom
				setTimeout(function() {
					console.log(this);   //window
					console.log(this.name);
				})
			}
		}
		obj.fight();
//结论: 箭头函数的外部this 和内部this 指向一致     原因  取决的是函数的定义 而不是调用
		 var obj1 = {
		 	name: "jerry",
		 	gender: "male",
		 	class: "mouse",
			fight: function() {
		 		console.log(this);  //obj
		 		console.log(this.name); //jerry
		 		setTimeout(() => {
		 			console.log(this);
		 			console.log(this.name);
		 		})
		 	}
		 }
		 obj1.fight();

特点二 箭头函数不可以new

et fun = () => console.log("hello");
		 new fun();

特点三 普通函数可以通过arguments去找参数列表
箭头函数不可以通过arguments去找参数列表 但是可以通过rest参数代替

	function fun1() {
			console.log(arguments);
		}
		fun1(1, 2, 3);

		let fun2 = (...param) => {
			console.log(param);
		}
		fun2(1, 2, 3);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值