ES6声明变量 let const var
<script>
/* 声明变量关键字
1. ES5声明变量 var
1.1 有变量预解析
1.2 没有块级作用域
2.ES6声明变量 let const
1.1 没有变量预解析
1.2 有块级作用域
3. let与const区别
let : 变量。 可以修改
const : 常量。 不可以修改
* 实际开发中, 只要不修改的变量都用const,需要改的时候用let
*/
//1. ES5声明变量 var
// 1.1 预解析 : 变量的声明会提升到当前作用域最顶端
console.log(num)
var num = 10
/*
var num
console.log( num )
num = 10
*/
//1.2 没有块级作用域 :
for (var i = 1; i <= 5; i++) {
}
console.log(i)
</script>
对象的解构赋值 ： 变量赋值的简写(解构精髓：当变量名 和 对象属性值一致的时候，只需要写一个)
1. 取出对象的属性 赋值 给 变量
let {
name,age,sex } = obj
2. 取出变量的属性 赋值 给 对象
let obj = {
name,// name : name
age,
sex
}
数组解构
<script>
/*数组解构
1.取出数组元素 赋值给变量
2.取出变量的值 赋值给数组元素
*/
let arr = [10,20,30]
//ES5
// let n1 = arr[0]
// let n2 = arr[1]
// let n3 = arr[2]
// let n4 = arr[3]
//ES6
let [n1,n2,n3,n4] = arr
console.log( n1,n2,n3,n4)//10 20 30 undefined
//取出变量的值 赋值给数组
let num1 = 1
let num2 = 2
let arr1 = [num1,num2]
</script>
函数参数解构
<script>
/* 函数参数解构: 当函数参数是对象类型,就可以对形参进行解构 */
//传参本质： 实参给形参赋值
function fn(obj){
// let obj = {name:'张三',age:20,sex:'男'}
console.log( obj )
//对函数形参进行解构
let {
name,sex,age} = obj
console.log( name,sex,age )
}
function fn1( {
name,sex,age} ){
// let {name,sex,age} = {name:'张三',age:20,sex:'男'}
console.log( name,sex,age )
}
fn( {
name:'张三',age:20,sex:'男'} )
fn1( {
name:'张三',age:20,sex:'男'} )
</script>
1.箭头函数 : 相当于 function函数的简写 (1)去掉function,改成 箭头 => (2)形参小括号写到箭头左边 2.箭头函数语法注意点 2.1 如果箭头函数只有一个形参,则可以省略小括号 2.2 如果箭头函数的 函数体 只有一行代码，则可以省略大括号。 （此时必须省略return）
1.function函数this有三种指向 : 谁 调用我 , 我就指向谁
普通函数: 函数名() this -> window
对象方法: 对象名.函数名() this -> 对象名
构造函数: new 函数名() this -> new创建实例
2.箭头函数this : 没有this
* 箭头函数本质是访问 上级作用域中的this
** //由于箭头函数没有this,所以箭头函数不能作为构造函数 (new会修改this指向,而箭头没有this)
// new fn()
//箭头函数也无法修改this (call apply bind)对箭头函数是无效的
fn.call({name:‘张三’})
//由于箭头函数没有this,所以箭头函数一般不作为事件处理函数**
<script>
let obj = {
name: "zhang",
eat() {
//1级 this : obj
function fn1() {
//2级
console.log(this)//window
}
fn1()
let fn2 = () => {
//2级 ： 箭头函数访问上级 1级obj
console.log(this)//obj
}
fn2()
},
learn: () => {
//1级 ： 上级 this->window
function fn1() {
console.log(this)//window
}
fn1()
let fn2 = () => {
//2级 访问1级 this -> window
console.log(this)//window
}
fn2()
}
}
obj.eat()
obj.learn()
</script>
展开运算符 ,展开运算符: …相当于对象遍历的简写,1.连接两个数组2.求数组最大值
<script>
/*
1.展开运算符: ...
相当于对象遍历的简写
2.应用
2.1 连接两个数组
2.2 求数组最大值
*/
let arr1 = [10,20,30]
let arr2 = [40,50,60]
//ES5 : concat()
// let arr = arr1.concat(arr2)
// arr.push(70)
//ES6
let arr = [...arr1,...arr2,70]
console.log( arr )
//求数组最大值
let max = Math.max(...arr1,...arr2)
console.log( max )
</script>
set 数组去重 * Set相当于是数组类型, 和数组Array唯一的区别是不能存储重复元素
<script>
/* 数据类型 Set : 集合
* Set相当于是数组类型, 和数组Array唯一的区别是不能存储重复元素
场景 : 数组去重
let newArr = [ ...new Set(需要去重的数组) ]
*/
let arr = [10,20,30,50,60,88,20,50,60,90]
console.log( arr )
//1.创建Set,去除数组重复元素
// let set = new Set( arr )
// console.log( set )
//2.把set变成真数组
// let newArr = [...set]
//经典面试题： 一行代码实现数组去重
let newArr = [...new Set( arr ) ]
console.log(newArr)
</script>