目录
关键字 const (const关键字就是用来声明常量的;)
块级作用域
ES6中的块级作用域: 指的是 { } 之间可以生成作用域 ; { }内的具有块级作用域的变量(let,const)只能在{ }内被访问;
关键字 let (let关键字就是用来声明变量的;)
- 遇到{ } 就会形成作用域, for,if 等语句的都会形成作用域
- 通过let定义的变量 遵循ES6的块级作用域规范 ;也就是说, let声明的变量只能在,{ }该块级作用域内被访问;
- 在{ }内, 使用let关键字声明的变量具有块级作用域;
- 防止循环变量变成全局变量;for循环的不同
- 使用let声明变量, 没有变量声明的提升 ,会有暂时性死区特性;
- let不可以重复定义同名变量
- let定义的变量不会自动注册到window身上
- for循环的不同
let没有变量声明提升
console.log(a); //报错; let声明之前的区域 叫作"暂时性死区"
let a = 10;
let 不可以重复定义同名变量
var a = 20;
let a = 30;
console.log(a); //报错
let定义的变量不会自动注册到window身上
var a = 10;
let b = 12;
console.log(window.a);
console.log(window.b);//undefined
for 循环不同
var arr = new Array(5).fill(0);
for (let i = 0; i < arr.length; i++) {
arr[i] = function() {
console.log(i);
}
}
// 如果上面定义循环变量i时使用的是var 则下面代码执行时都输出5 如果用let定义变量 则如下执行
arr[0](); // 0
arr[1](); // 1
arr[2](); // 2
arr[3](); // 3
arr[4](); // 4
关键字 const (const关键字就是用来声明常量的;)
这个常量就是不能改变的变量, 这个变量的值在声明的时候就被确定,值不能改变;
作用:声明常量，常量就是值(内存地址),是不能变化的量。
命名规范: 推荐全部大写 如果出现了单词需要使用_进行分割 ; 例如 : const HELLO_WORLD = 10;
具有块级作用域;
- 声明常量必须赋值;
- 常量赋值后，值不能修改;值一旦被赋值 不能使用等号改 .
- 不可以做循环变量;
- 其他特点与let 一致;
const A = 10; A = 11; // 报错,因为修改了常量所保存的值; /* 如果常量保存的是引用类型 可以使用方括号语法和点语法进行属性的修改 */ const OBJ = {}; OBJ = 123; // 会报错 OBJ["hello"] = 123; //const 管的是变量,而不是值;const定义的常量也遵守块级作用域 也没有声明提升 也不会注册到window身上 千万不要使用const来定义循环变量
三者区别:var let const 关键字之间的区别_qq_38793572的博客-CSDN博客
解构语法
-
封装 封装指的是将内容包装在一起
-
代码封装 使用函数
-
数据封装 使用数据结构 目前为止我们学习的数据结构一共有两种 分别是数组和对象
-
-
解构: 指的是解除构造(换句话说就是，你封装的，我给你拆了),从数组中或对象中提取值，将提取出来的值赋值给另外的变量。
解构数组
数组解构允许我们按照一 一对应的关系,从数组中提取值, 然后将值赋值给变量
人工解构
// 定义数组
var arr = [1, 2, 3, 4, 5];
// 人工解除结构
var a = arr[0];
var b = arr[1];
var c = arr[2];
var d = arr[3];
var e = arr[4];
ES6语法解构
// 定义数组
let arr = [1, 2, 3, 4];
// 解构语法
let [a, b, c, d] = arr;等号右边是数组, [1,2,3,4]
等号左边 是 [ ] 解构,意思是从数组中提取值,赋值给左边[ ]对应的变量;
a,b,c,d是变量的名字;
相当于 let a =1; let b = 2; let c = 3; let d = 4;
一一对应关系;(因为下标,所以注意顺序)
解构对象
对象解构允许我们,使用变量的名字,匹配对象的属性, 匹配成功 将对象属性的值赋值给变量
// 解构对象
let obj = {
username: "zhangsan",
password: "123321",
dog: {
name: "xiaobai"
}
}
let {password, username, dog} = obj;console.log(username, password, dog);
等号左边 { } 内是变量的名字, 右边是被解构的对象;
对象解构允许我们,使用变量的名字,匹配对象的属性, 匹配成功 将对象属性的值赋值给变量
// 对象解构，是使用属性名对应，所以不用注意顺序，但是要注意属性名是否对应。
对象解构的另一种写法: 冒号左边去匹配,冒号右边是变量 ;
使用冒号, 冒号左边去对象中匹配对应的属性名, 匹配到对应的属性名,将属性值赋值给冒号的右边的变量, 冒号右边才是变量 ;
let obj = { name: "小明", age: 18, sex: "男" };
let { name: mz, age: nl ,sex:xb} = obj;
console.log(mz); //小明
console.log(nl); //18
console.log(xb); //男
箭头函数
语法： ( ) => { }
() 形参列表
=> 箭头
{} 函数体定义箭头函数: 箭头函数只能用函数表达式来定义;
var fn = () => {
console.log("箭头函数");
};
fn();
调用箭头函数: 变量名( )
在箭头函数中,如果形参只有一个; 形参外侧的小括号也是可以省略的
var fn1 = (a) => {
console.log(123);
};
fn1();
---------------------------------------------------------------------------------------------------------
箭头函数中, 如果函数体内只有一条代码且是返回值,则可以省略 {} 和 return;
var fn2 = (a,b) => {
return a+b;
}
var fn2 = (a, b) => a + b;
var sum = fn2(2, 3);
console.log(sum);
var fn3 = a => a*a;
var result = fn3 (7) ;
console.log(result) //49
箭头函数this指向 :箭头函数的this指向的是定义箭头函数时上层作用域中的this,且永不改变;
箭头函数没有arguments;
箭头函数不能new;
箭头函数的返回值是一个对象,要用() 包起来 ;
let obj = ()=>({a:"xxx"}) obj() // {a:"xxx"}
剩余参数 ... 语法 ( 该语法有两个作用：1 收集 ;2 展开) ,收集剩余的参数 到args数组中; ... 语法是固定的写法, args只是个变量名
作用1:作为函数的参数收集器 ;
let fn = (a, ...args) => {
console.log(a); //1
console.log(b); //[2,3,4] ...args作为一个数组,接收2,3,4参数;
};
fn(1, 2, 3, 4);
作用2 解构数组时使用
var arr = ["小明", "小刚", "小花"];
var [a, ...b] = arr; //解构数组
console.log(a); //小明
console.log(b); //["小刚","小花"]
作用3 , 展开对象;
var obj = { name: "小白", sex: "男", hobby: "吃" };
var obj1 = { age: 123, ...obj }; //把对象obj展开;
console.log(obj1); // age: 123 , hobby: "吃" , name: "小白" , sex: "男"
作用4, 展开数组 ,
var arr = [1, 2, 3, 14, 2, 1];
var result = Math.max(...arr);
console.log(result); //14
es6 对象的定义简化
ES6中 针对对象的定义 进行了语法上的简化
如果对象的属性名和属性值一致,可简写为一个;对象的方法 函数 可以省略 : function
var color = "red"
var obj = {
color:color;
}等价与 : var obj = { color}
定义方法时 可以省略 :functio
var obj5 = {
name: "小花",
// sayHellow : function () {
// console.log("你好");
// },
sayHellow() {
console.log("你好"); //省略 : function
},
};
obj5.sayHellow(); //小花
console.log(obj5.name); //你好
使用变量作为对象的属性名,通过[ ] 方括号
var name = "张三";
var obj = { [name]: name };
console.log(obj); / {张三: "张三"}
多行字符串(字符串模板 )
ES6定义多行字符串方式 反引号 `` ; 通过 ${ } 插入
插入语法: &{ } 注: ${}内是一个JS执行环境，可以放变量，可以放表达式，可以调用方法 ;
var str = `
<div>
<div class="box1">${username}
</div>
<div class="box1">${password}
</div>
<div class="box1">${email}
</div>
</div>
`
新的数据类型, symbol
获取： Symbol() 返回一个symbol类型的值 ;
作用： 主要解决对象的属性不能重复的问题。
特点：作为对象的属性值的时候，默认不可被遍历。
var s = Symbol(); //Symbol() var s1 = Symbol(); console.log(s == s1); //false 它表示符号(独一无二的) console.log(typeof s); //symbol数据类型
变量作为对象的属性名, 通过[ ];
读取 : 对象名[属性名],[ ]括号内不加引号;
读取对象的属性值:
obj[a]; obj[b]; obj.c; == obj["c"]
var a = "hello"; var b = "world"; var obj = { [a]: "你好", [b]: "世界", c: "good lucky", }; console.log(obj); //{hello: "你好", world: "世界", c: "good lucky"} console.log(obj[a]); //你好 console.log(obj[b]); //世界 console.log(obj.c); //good lucky console.log(obj["c"]); //good lucky
var s = Symbol("123"); console.log(s); //Symbol(123) var s1 = Symbol("hello"); console.log(s1); //Symbol(hello) console.log(typeof s); //symbol数据类型 ------------------------------------------------------------------------------- //用它来解决对象的属性名不能重复的问题; var color1 = Symbol("color"); var color2 = Symbol("color"); var obj = { [color1]: "red", [color2]: "blue", color3: "pink", }; console.log(obj); //{Symbol(color): "red", Symbol(color): "blue"} console.log(obj[color1]); //red console.log(obj[color2]); //blue console.log(obj.color3); //pink console.log(obj["color3"]); //pink
1494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
