1. let与const
let与const区别 ：
- let 变量 ： 值可以修改
- const 常量 : 值不可以被修改。 只能在声明的时候唯一赋值一次。
// let与const区别
// let : 变量。 值可以改变的
let num1 = 10
num1 = 20
console.log(num1)
// const:常量。 值不可以改变
//常量只能在声明的时候赋值一次，之后无法改变
const num2 = 100
console.log(num)
ES6声明变量特点 ：
- 没有预解析： 变量必须要先声明才可以使用
- 有块级作用域： if和for大括号里面声明的变量是局部的
//ES6声明变量特点
//1. 没有预解析 ： 变量必须要先声明才能使用
let num = 10
console.log(num)
//2. 有块级作用域 ： if和for大括号里面声明的变量是局部的
for (let i = 1; i <= 5; i++) {}
// console.log(i)//i is not defined
ES5声明变量var特点
//1. 预解析： 声明提升到当前作用域最顶端
// var num
// console.log(num)//undefined
// var num = 10
// console.log(num) //10
//2. 没有块级作用域 ： var在if和for中都是全局变量
// if (1) {
// var num = 10
// }
// console.log(num) //10
// for (var i = 1; i <= 5; i++) {
// }
// console.log(i)//6
2. 对象结构
解构赋值 ： 就是变量赋值的简写形式
语法 ：
- 取出对象的值 赋值给 变量
let { name,age,sex } = obj
- 取出变量的值 赋值给 对象
let obj = { name,age,sex }
ES5 与 ES6 变量赋值对比 :
- 取出对象的属性值，赋值给变量
- 取出变量的值，赋值给对象
//1. 取出对象的属性值，赋值给变量
let obj = {
name: '张三',
sex: '男',
age: 32
}
//1.1 ES5传统赋值
// let name = obj.name
// let sex = obj.sex
// let age = obj.age
// console.log(name, sex, age)
//1.2 ES6解构赋值 : 声明变量，自动取右边对象的同名属性赋值
// (1)let name = obj.name
// (2)let age = obj.age
// (3)let sex = obj.sex
let { name, age, sex } = obj
console.log(name, age, sex)
//2.取出变量的值，赋值给对象属性
let username = 'admin'
let password = '123456'
let code = '666888'
//ES5
// let user = {
// username: username,
// password: password,
// code: code
// }
//ES6
let user = {
username, // username:username
password,
code,
eat () {//eat:function(){}
console.log('我要吃饭')
}
}
console.log(user)
3. 数组解构
-
取出数组的值赋值给变量 语法 : let [num1,num2,num3] = [10,20,30] -
取出变量的值赋值给数组 语法 : let arr = [num1,num2]
//1.取出数组的值赋值给变量
let arr = [10,20,30]
//let num1= arr[0]
//let num2= arr[1]
//let num3= arr[2]
//let num4= arr[3]
let [num1,num2,num3,num4] = arr
console.log(num1,num2,num3,num4)//10 20 30 undefined
//2.取出变量的值赋值给数组
let n1 = 100
let n2 = 200
let arr1 = [n1,n2]
console.log(arr1)
4. 函数参数解构
函数参数解构 ： 参数为对象类型
- 函数传参本质是实参给形参赋值， 如果实参是对象，则形参可以使用解构赋值
/* 1.函数参数解构 */
//声明函数
function fn ( { name, age } ) {
//let { name,age } = { name: '张三', age: 18 }
//对象解构赋值
// let { name, age } = obj
console.log(name, age)
}
//调用函数： 传参本质是实参给形参赋值
fn({ name: '张三', age: 18 })
函数默认参数
//函数默认参数
function getSum (a = 10 , b = 20 ) {
//ES5 :逻辑中断来实现
// a = a || 10
// b = b || 20
console.log(a + b)
}
getSum()
5. 展开运算符
- 语法 ： …
- 作用 ： 相当于遍历对象简写
- 场景 ： 添加数组
//1. 需求：将arr2的所有元素，添加到arr1
let arr1 = [10, 20, 30]
let arr2 = [40, 50, 60]
//以前的写法： 遍历arr2,逐一添加
// for (let i = 0; i < arr2.length; i++) {
// arr1.push(arr2[i])
// }
// console.log(arr1)
//ES6 展开运算符
arr1.push(...arr2) // 展开 arr1.push(arr2[0],arr2[1],arr2[2])
//2.求数组最大值
let arr = [88, 100, 20, 50, 66]
//以前：
let max1 = Math.max.apply(Math, arr)
console.log(max1)
//ES6
let max2 = Math.max(...arr)
console.log(max2)
6. 数据类型 Set
- Set : 集合。 相当于数组类型，与数组唯一的区别是不能存储重复元素。
- Set唯一场景 ： 数组去重
//1.声明set
let set = new Set([20, 50, 66, 88, 20, 66, 100, 70, 88])
console.log(set)
//2.set转成数组类型
let arr = [...set]
console.log(arr)
/* 实际开发中，数组去重仅需一行代码 */
let newArr = [...new Set([10, 20, 30, 40, 10, 20, 30, 40])]
console.log(newArr)
7. 箭头函数
//.ES5声明函数有两种语法
//1.1 函数式声明： function 函数名(){}
//1.2 表达式声明: let 函数名 = function(){}
箭头函数本质 ： 其实就是 function 简写
箭头函数语法 ：
(1)去掉function,改成箭头 =>
(2)将形参小括号移到箭头=>左边
* let 函数名 = ()=>{}
箭头函数注意点:
-
如果箭头函数只有一个形参，则可以省略形参小括号 语法 ：let fn = a=>{return a*2} -
如果箭头函数的函数体只有一行，则可以省略大括号，此时必须要省略return 语法 : let fn = a=>a*2
//1.声明箭头函数
let fn = (a,b)=>{
console.log(1111)
return a + b
}
let res = fn(10,20)
console.log(res)//30
//2.箭头函数其他用法
//2.1 如果箭头函数只有一个形参，则可以省略形参小括号
let fn1 = () => { return a*2 }
console.log( fn1(10) )
//2.2 如果箭头函数大括号只有一行代码，则可以省略大括号。 此时也必须要省略return
let fn2 = a=>a*2
console.log( fn2(88) )
|