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 ]