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);