-
1.ES6全称：ECMAScript-2015, 是2015年推出的全新的js语法 -
2.一定要切记： 语法的更新，其实就是在原有的语法基础上
新增了几个新的语法。 而不是说把我们之前学习的js语法给完全替换覆盖。- 因此，我们学习ES6语法之后，相当于就是在之前的语法基础上，在额外多学几个js语法而已。 现在几乎很少有人会把ES5与ES6分的非常清楚。 基本上直接拿来用就可以了，哪个方便用哪个。
-
ES6文档推荐：es6.ruanyifeng.com/
1.1-变量声明let与const
声明变量关键字
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 = 0; i < 5; i++) {}
console.log(i);
const arr1 = [20, 55, 80, 70, 92, 35];
let res1 = arr1.reduce((sum, value) => sum + value
, 0);
console.log(res1);
对象解构赋值
/* 解构赋值 ： 变量赋值的简写(解构精髓：当变量名 和 对象属性值一致的时候，只需要写一个)
1. 取出对象的属性 赋值 给 变量
let { name,age,sex } = obj
2. 取出变量的属性 赋值 给 对象
let obj = {
name,// name : name
age,
sex
}
*/
let obj = {
name: '张三',
age: 20,
sex: '男',
score: ''
}
//1. 取出对象的属性 赋值 给 变量
//ES5
// let name = obj.name
// let age = obj.age
// let sex = obj.sex
// let score = obj.score
//ES6
let {name,age,sex,} = obj
console.log(name, age, sex, score) //'张三',20,'男',undefined
//2. 取出变量的属性 赋值 给 对象
let username = 'admin'
let password = '123456'
//ES5
// let p = {
// username:username,
// password:password
// }
//ES6
let user = {
username, //username:username
password,
eat() { //eat:function(){}
console.log(111);
}
}
console.log(user)
user.eat()
数组解构赋值
/*数组解构
1.取出数组元素 赋值给变量
2.取出变量的值 赋值给数组元素//有序结构
*/
let arr = [10, 20, 30]
// ES5
// let n1 =arr[0]
// let n2 =arr[1]
// let n3 =arr[2]
//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]
函数参数解构
/* 函数参数解构: 当函数参数是对象类型,就可以对形参进行解构 */
//传参本质： 实参给形参赋值
/* 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:'男'} ) */
function fn(obj) {
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, age, sex);
}
fn({ name: "张三", age: 20, sex: "男" });
fn1({ name: "张三", age: 20, sex: "男" });
箭头函数
/* 1.箭头函数 : 相当于 function函数的简写
(1)去掉function,改成 箭头 => (2)形参小括号写到箭头左边
2.箭头函数语法注意点
2.1 如果箭头函数只有一个形参,则可以省略小括号
2.2 如果箭头函数的 函数体 只有一行代码，则可以省略大括号。 （此时必须省略return）
*/
// let fn = function(a,b){console.log(a+b)}
let fn =(a,b) =>{console.log(a+b)}
fn(10,20)
/* let fn = (a,b) => {
console.log(a+b)
}
fn(10,20) */
//(1)如果箭头函数只有一个形参,则可以省略小括号
let fn1 = a =>{return a*a}
console.log(fn1(66));
console.log(fn1(3));
//(2)如果箭头函数的 函数体 只有一行代码，则可以省略大括号。 （此时必须省略return）
let fn2 = a=>a*2
let res = fn2(88)
console.log(res)
