let与const
ES5中声明变量var关键字特点:
-
预解析: 变量声明提升
-
没有块级作用域: if和for大括号里面声明的变量也是全局的
ES6中声明变量let和const特点:
-
没有预解析: 变量必须先声明,才能使用
-
块级作用域: if和for大括号里面的变量是局部的
let与const区别:
-
let声明：变量,可以修改变量中的数据
-
const声明: 常量,只能赋值一次 不能修改
对象解构赋值
解构赋值本质 就是 变量赋值语法的简写语法
（1）取出 对象的属性值 赋值给 变量
let {uname,age,sex} = 对象名
（2）取出 变量的值 赋值给 对象的属性
let 变量名 = {uname,age,sex}
//1：取出 对象的属性 赋值 给变量
// let obj = {
// name: '张三',
// age: 18,
// sex: '男'
// }
/* ES5 */
let name = obj.name;
let age = obj.age;
let sex = obj.sex;
console.log(name,age,sex) /*这行代码本质:声明三个变量 name，age，sex。取出右边obj对象对应的属性名赋值给左边的变量*/
// let{name,age,sex}= obj
// console.log(obj)
let name = '李四';
let age = 20;
let sex = '男';
let sayHi = function(){
console.log('你好');
}
/* ES6 */
let obj = {
name,
age,
sex,
sayHi(){
console.log('困zzzzzz')
}
}
console.log(obj)数组解构赋值
let arr = [10, 20, 30]
/* ES6 */
// 1.取出数组的元素,赋值给变量
let [n1, n2, n3, n4] = arr
console.log(n1, n2, n3, n4)
// 2.取出变量的值,数组的元素
let num1 = 23
let num2 = 12
let num3 = 76
let arr1 = [num1,num2,num3]
console.log(arr)结构赋值语法及应用总结
结构赋值本质: 变量赋值简写
- 重点掌握: 对象结构
1.1 取出对象属性 赋值给变量
语法: let{uname,age,sex} = obj
场景: 如果函数参数是对象,就可以进行结构
1.2 取出变量的值 赋值给对象
语法: let obj = {uname,age,sex}
场景: 获取多个表单数据,装入对象中
2. 结构赋值及其他用法
2.1 结构赋值默认值
let{name,age=18,sex} = obj
2.2 自定义结构变量名
let{sex:gender} = obj 相当于 let gender = obj.sex
箭头函数
1.箭头函数语法: 就是function简写
1.1 把function单词 替换成箭头 =>
1.2 把形参() 一到箭头的左边
2.箭头函数其他用法
2.1 如果只有一个形参,则可以省略形参小括号
a=>{return a*2}
2.2 如果函数体只有一行,则可以省略大括号,此时必须要省略return
a=>a*2
箭头函数this指向: 箭头函数没有this
* 箭头函数中使用this，会访问上级作用域this
*原因(作用域链)：箭头函数没有this,就会往上级作用域找
//1.箭头函数常见用法
/* ES5 */
let fn = function () {
console.log('111')
}
fn()
/* ES6
箭头函数规则： （1）function变成 箭头符号 => (2)形参小括号写到箭头 => 左边
*/
let fn1 = () =>{
console.log('222')
}
fn1()
//2.箭头函数其他用法
//2.1 如果函数只有一个形参，则可以省略形参小括号
// let fn2 = (a) =>(return a*2)
let fn2 = a =>{
return a*2
}
let res = fn2(10)
console.log(res)
//2.2 如果函数体只有一行代码，则可以省略函数体大括号
//注意点： 如果省略函数体大括号，则返回值也要省略return
//下面代码等价于： let fn3 = function(a){ return a*2 }
let fn3 = a => a*2
let res1 = fn3(20)
console.log(res1)展开运算符
1.拓展运算符： ...
2.作用：类似于 对象遍历的一种简写形式
3.应用场景介绍
3.1 连接数组（上拉加载下一页） arr.push(...arr2)
3.2 求数组最大值 Math.max(...arr)
//1. 连接两个数组
let arr1 = [10, 20, 30]
let arr2 = [40, 50, 60]
/* ES5写法：arr.push.apply(arr1,arr2) */
// arr1.push.apply(arr1,arr2)
// console.log(arr1)
/* ES6写法：arr.push(...arr2)*/
arr1.push(...arr2)
console.log(arr1)
//2. 求数组最大值和最小值
let arr = [88, 25, 60, 90, 100]
/* ES5写法 Math.max.apply(Math,arr)*/
let max = Math.max.apply(Math,arr);
console.log(max)
/* ES6写法 Math.max(...arr)*/
let max1 = Math.max(...arr)
console.log(max1)数据类型
1.数据类型Set (集合) : 类似于数组，与数组唯一的区别是 ： 不能存储重复元素
2.应用 ： 数组去重
一行代码去重： let newArr = Array.from( new Set(数组) )
let arr = [10,10,20,20,30,30,40,40]
//1.声明Set
// let set = new Set(arr)
// console.log( set )
//2.把set转成真数组
// let newArr = Array.from(set)
// console.log(newArr)
/* 一行代码实现数组去重 */
let newArr = Array.from(new Set(arr))
console.log(newArr)
