ES6新语法

JS ES6常用语法

const 关键字

const关键字作用是是声明常量（一旦声明就无法修改）

• 没有变量提升
• 有块级作用域
• 不能重复声明
• 声明时必须要初始化
• 不能重新赋值

// 没有变量提升
console.log(num); // 报错
const num = 100;

// 有块级作用域
{
    const num = 200;
}
console.log(num); // 报错

// 不能重复声明
const num = 300;
const num = 400; // 报错
console.log(num);

// 声明时必须要初始化
const num;
console.log(num); // 报错

// 不能重新赋值
const num = 10;
num = 20; // 报错
console.log(num);

let 与 const 关键字

let 关键字

let 和 var 区别
var和 let作用都是声明变量的，有以下特点

var关键字

• 1.有变量提升
• 2.没有块级作用域，它是函数作用域
• 3.可重复声明
• 4.可重新赋值

// 变量提升
console.log(age);
var age = 38; // undefined

// 没有有块级作用域
for (var i = 0; i < 10; i++) {

}
console.log(i);  // 10

// 重复声明
var num = 10;
var num = 20;
console.log(num); // 20

// 可以重新赋值
var num = 10;
num = 20;
console.log(num); // 20

let关键字

• 1.没有变量提升
• 2.有块级作用域
• 3.不可重复声明
• 4.可重新赋值

// 没有变提升
console.log(age); // 报错
let age = 38;

// 没有块级作用域
for (let  i = 0; i < 10; i++) {

}
console.log(i); // 报错

// 不能重复声明
let num = 10;
let num = 20;
console.log(num); // 报错

// 可以重新赋值
let num = 10;
num = 20;
console.log(num); // 20

解构赋值

在ES6里解构赋值就是怎么声明的，就怎么给它赋值

对象解构赋值

取对象中的属性的值，赋值给变量

let obj = {
    name: "波波",
    age: 38,
    gender: "男",
    score: 100,
};

// ES5
let name1 = obj.name;
let age1 = obj.age;
let gender1 = obj.gender;
let score1 = obj.score;
console.log(name1, age1, gender1, score1); // 波波 38 男 100

// ES6第一种
let {
    name: name1,
    age: age1,
    gender: gender1,
    score: score1
} = obj;
console.log(name1, age1, gender1, score1); // 波波 38 男 100

// ES6第二种
let {
    name: name,
    age: age,
    gender: gender,
    score: score
} = obj;
console.log(name, age, gender, score); // 波波 38 男 100

// ES6第三种
// 如果声明的变量名和对象变量名一致，那就可以简写
let {
    name,
    age,
    gender,
    score
} = obj;
console.log(name, age, gender, score); // 波波 38 男 100

给对象添加一个默认值，对象内部不会改变

let {
    name,
    age,
    gender,
    score,
    height = 180
} = obj;
console.log(name, age, gender, score, height); // 波波 38 男 100 180
console.log(obj); // { name: '波波', age: 38, gender: '男', score: 100 }

数组解构赋值

是把数组中每一个元素的值依次赋值给变量。

let arr = [10, 20, 30, 40];

// ES5
let num1 = arr[0];
let num2 = arr[1];
let num3 = arr[2];
let num4 = arr[3];
console.log(num1, num2, num3, num4); // 10 20 30 40

// ES6
let [num1, num2, num3, num4] = arr;
console.log(num1, num2, num3, num4); // 10 20 30 40

解构赋值结合函数声明

形参有多个

// ES5
function test1(obj) {
    console.log(obj.name, obj.age, obj.gender);
}
test1({
    name: '波波',
    age: 38,
    gender: "男"
}); // 波波 38 男

// ES6
function test2({ name, age, gender }) {
    console.log(name, age, gender);
}
test2({
    name: '波波',
    age: 38,
    gender: "男"
}); // 波波 38 男

箭头函数

是匿名函数的一个简写，有以下规则:

• function 改成 =>，=> 可以读成 goesto
• 如果只有一个形参，那就可以省略形參小括号
• 如果不是一个形参,0个或者多个形参，那就不能省略这个形参小括号
• 如果函数体只有一句话,那就可以省略函数体的大括号
• 如果函数体只有一句话,并且这一句话是 return返回值，那 return` 也要省略
• 如果函数体不是一句话，那就不能省略这个大括号

// 普通的匿名函数
let fn = function (name) {
    console.log("我的名字是" + name);
}
fn("波波"); // 我的名字是波波

// 箭头函数
let fn = name => console.log("我的名字是" + name);
fn("波波"); // 我的名字是波波

// 变化过程

let fn1 = function (name) {
    return name + '你好吗？';
}

let fn1 = (name) => {
    return name + '你好吗？';
}

let fn1 = name => {
    return name + '你好吗？';
}

let fn1 = name => name + '你好吗？';

对象成员的简写

let name = '千里';
let age = 18;
let gender = '男';
let score = 100;

• 声明一个对象，对象里面有name，age,gender.score属性,希望这些属性的值是上面对应变量的值

// ES5
var obj = {
    name: name,
    age: age,
    gender: gender,
    score: score,
    sayHi: function () {
        console.log('哈哈，你好！');
    }
}
console.log(obj);
obj.sayHi();
// {
//  name: '千里',
//  age: 18,
//  gender: '男',
//  score: 100,
//  sayHi: [Function: sayHi]
// }

// 哈哈，你好！

// ES6：对象成员简写
let obj = {
    name,
    age,
    gender,
    score,
    sayHi: function () {
        console.log('哈哈，你好！');
    }
}
console.log(obj);
obj.sayHi();
// {
//  name: '千里',
//  age: 18,
//  gender: '男',
//  score: 100,
//  sayHi: [Function: sayHi]
// }

// 哈哈，你好！

拓展(展开)运算符

对象展开

用 … + 对象名 来复制对象全部属性

// 声明一个对象
let chinese = {
    skin: '黄色皮肤',
    hair: '黑色头发',
    sayHi() {
        console.log('你好，你吃了吗？');
    }
}

// 声明一个对象
let zhuBo = {
    skill: '眺唱rap打篮球，老铁双击666',
    song: "唱大碗宽面"
}
let linge = {
    ...chinese,
    ...zhuBo,
}
console.log(linge);
// {
//     skin: '黄色皮肤',
//     hair: '黑色头发',
//     sayHi: [Function: sayHi],
//     skill: '眺唱rap打篮球，老铁双击666',
//     song: '唱大碗宽面'
//   }

数组展开

用 … + 数组名 来复制数组内全部的值

用途：

• 数组拼接
• 用 Math.max()或 Marh.min()来求数组里的最大值和最小值

let arr1 = [10, 20, 30];
let arr2 = [...arr1, 40, 50];
console.log(arr1); // [ 10, 20, 30 ]
console.log(arr2); // [ 10, 20, 30, 40, 50 ]

// 求数组中的最大值
let arr1 = [10, 8, 7, 66, 65, 34];
let max1 = Math.max(...arr1);
console.log(max1); // 60

数据类型 Set

Set 类型和数组类似，就是不能放一样的元素
用途：数组去重
语法结构：

 new Set(arr);

• 参数：arr 是一个数组

// 基本使用
let set1 = new Set([10, 20, 30, 40, 10, 20, 30, 50]);
console.log(set1); // Set { 10, 20, 30, 40, 50 }

// 数组去重
let arr = [10, 20, 30, 40, 10, 20, 30, 50];
let set1 = new Set(arr);
console.log(set1); // Set { 10, 20, 30, 40, 50 }

let arrNew = [...set];
console.log(arrNew); // [ 10, 20, 30, 40, 50 ]

模板字符串

字符串种类	符号	特点
普通字符串	’‘ 或 " "	没有格式,里面也不能写变量
模板字符串	``	会保留原样字符串格式,以及可以占位. 可以放变量和函数 格式是：${变量名}

// 模板字符串
let autor = `波波`;
let str1 = `
        静夜思
          ${autor}
        床前明月光，
        地上写两双。
        举头望明月，
        低头思阿香。
`;
console.log(str1);
        // 静夜思
        //   波波
        // 床前明月光，
        // 地上写两双。
        // 举头望明月，
        // 低头思阿香。

function test() {
  return `hhhh`;
}
console.log(`${test()}`); // hhhh

补充:数组方法

• forEach();

let arr = [10, 20,30, 40];

arr.forEach(function( item, index) {
    //item就是遍历出来的每一个项
    //index就是遍历出来每-项对应的索引.
    // console. log(item, index);
    console.log(item + 10);
});

map()

• 遍历数组的，有返回值

let arr = [10, 20, 30 , 40];
let arrNew = arr.map(function( item, index) {
    //item就是遍历出来的每一项
    //ipdex就是遍历出来的每一项对应的索引
    // console.log(item, index);
    return item*item
});
console.log(arrNew);//[ 100, 400, 900, 1600 ]

filter(); 过滤器

• filter()方法会返回一个新的数组，新的数组中的元素是通过检查后符合条件的元素.

let arr=[10,20,11,23,45,67,88]
let arrNew = arr.filter((item,index)=>{
    //item就是遍历出来的每一项
    //index遍历出来的每一项对应的索引
    // console . log (item, index);
    return item % 2 == 0如果条件成立,会返回当前项，如果条件不成立,不会返回当前项
})
console.log(arrNew);//[ 10, 20, 88 ]