ECMScript6基础语法

一、什么是node.js

node.js是基于Chrome V8引擎的JavaScript运行时

就是一个运行环境，他是基于谷歌V8引擎的运行环境。

作用：可以让js开发服务端功能

二、服务器端js与浏览器端js

1、js都是运行在浏览器端的

ECMAScript：js语法（变量，数据类型，表达式，代码结构···）BOM：浏览器对象模型（用js去操作浏览器窗口）DOM：文档对象模型（用js去操作页面上的dom树）

2、有了node.js后，js可以运行在服务器端

在node.js环境中，不可以运行DOM,BOM语法正常的js语法可以运行

三、let与var关键字

1、var声明变量

有变量的提升没有块级作用域，是函数作用域可以重复声明可以重新赋值

2、let声明变量

没有变量提升

console.log(age) //报错 let age = 18

有块级作用域

for(let i = 0; i < 10; i++){} console.log(i) //报错

不能重复声明

let num = 10 let num = 20 //报错

可以重新赋值

let num = 10 num = 20 console.log(num)

四、const关键字

定义常量的关键字，一旦定义就不可被修改

没有变量提升

console.log(num) const num = 10

有块级作用域

{ const num = 10 } console.log(num)

不能重复声明

const num = 10 const num = 20

不可以重新赋值

const num = 10 num = 20 //报错 console.log(num)

声明必须初始化

const num //报错 console.log(num)

五、解构赋值

1、对象解构

将一个对象的某些属性赋给变量

基于es6版本

let obj = { name : 'lyb', age : 22, sex : '男' } //第一种情况 let {name:name1,age:age1,sex:sex1} = obj; console.log(name1,age1,sex1) //lyb 22 男 //第二种情况 let {name:name,age:age,sex:sex} = obj; console.log(name,age,sex) //lyb 22 男 //第三种情况 let {name,age,sex} = obj; console.log(name,age,sex) //lyb 22 男 //第四种情况 let {name,age,sex,score} = obj; console.log(name,age,sex,score)//lyb 22 男 undefined //第五种情况 let {name,age,sex,score=100} = obj; console.log(name,age,sex,score) //lyb 22 男 100 //第六种情况 let {name,age,sex:gender} = obj; console.log(name,age,gender) //lyb 22 男 //第七种情况 let {name,age = 10,sex} = obj; console.log(name,age,sex) //lyb 22 男

特殊情况

let obj = { name: 'lyb', age: 22, sex: '男' } let { name, ...obj2 } = obj console.log(obj2);

2、数组解构

将数组中的值依次赋值给变量

基与es6版本：

let arr = [1,2,3] //第一种情况 let [num1,num2,num3] = arr; console.log(num1,num2,num3) //1,2,3 //第二种情况 let [num1,num2,num3,num4] = arr; console.log(num1,num2,num3,num4) //1,2,3,undefinde //第三种情况 let [num1,num2,num3,num4=100] = arr; console.log(num1,num2,num3,num4) //1,2,3,100 //第四种情况 let [num1,num2] = arr; console.log(num1,num2) //1,2 //注意：只能依次赋值，不可以间隔赋值

3、解构赋值结合函数声明

function test({ name, age, gender, height=80}){ console.log(name,age,gender,height) } test({ name: "lyb", age: 22, gender: '男', height:60 }) //lyb 22 男 60

六、箭头函数

1、简写规则

​ function 改成 =>如果只有一个形参，那就可以省略形参小括号如果不是一个形参，0个或多个形参，那就不能省略这个形参的小括号如果函数体只有一句话，那就可以省略函数体的大括号如果函数体只有一句话，并且这一句话是return返回值，那return也要省略如果函数体不是一句话，就不能省略大括号 let fn1 = () => console.log('你好吗！'); fn1() let fn2 = name => console.log('Nihaoma' + name); fn2('lyb') let fn3 = (name, age) => console.log(name + '你好吗，你是年龄是' + age); fn3('lby',22) let fn4 = age => age + 10; fn4() let fn5 = (name, age) => { console.log(name + '你好吗') return age + 10 } fn5('lyb',22)

2、箭头函数this 的指向

箭头函数的this和普通函数的this不一样，比如说在DOM操作中箭头函数的指向，由箭头函数的上下文所决定的不要什么时候都用箭头函数，有的时候不方便不能用new关键字去调用箭头函数

七、对象成员简写

let name = 'lyb'; let age = 22; let gender = '男'; let score = 100 //es5: let obj = { name: name, age: age, gender: gender, score: score } console.log(obj) // es6: let obj2 = { name, age, gender, fensu: score, score } console.log(obj2)

八、对象展开

声明对象的时候后边的对象属性的值是前面对象的数组，可以用对象展开方式简写

展开运算符：…(三个点)

//声明一个变量 let chinese = { skin: '黄色', hair: '黑色', sayHi() { console.log('Ni好，吃了没？') } } // 声明一个变量 let zhubo = { skill: '跳唱rap篮球', sex:'女' } // 声明一个变量 let person = { // skin: '黄色', // hair: '黑色', // sayHi() { // console.log('Ni好，吃了没？') // }, // skill: '跳唱rap篮球', // sex: '女' ...chinese, ...zhubo, } console.log(person)

九、数组展开

展开运算符：…(三个点)

使用场景：数组拼接、利用Math.max,Math.min求最大最小值

let arr1 = [1, 2, 3, 4] let arr2 = [...arr1, 5, 6] console.log(arr1, arr2) //[ 1, 2, 3, 4 ] [ 1, 2, 3, 4, 5, 6 ] let max = Math.max.apply(Math, arr1) console.log(max)//4 let max1 = Math.max(...arr1) console.log(max1)//4

十、数组方法（补充）

1、forEach()方法

遍历数组，把遍历出来的每一项交给回调函数

没有返回值

//eg let arr = [1, 2, 3, 4, 5] let max = -1 arr.forEach(function (item,index) {//item 就是遍历出来的每一项，index是索引 if (item > max) { max = item } }) console.log(max);//5

2、map()方法

遍历数组，有返回值，跟forEach类似

3、filter()方法

过滤器：返回新的数组，新的数组中的元素是通过检查后符合条件的元素

4、数组降维

// 将二维数组arr降维一维数组 var arr = [[1, 2, 3], [4, 5]] // 使用扩展运算符··· var arrNew = [] arr.forEach(v => { arrNew.push(...v) }) console.log(arrNew);//1,2,3,4,5 // 将二维数组arr降维一维数组 var arr = [1, [2, 3], [4, 5],6] // 使用扩展运算符··· var arrNew = [] arr.forEach(v => { if(Array.isArray(v)){ arrNew.push(...v) }else { arrNew.push(v) } }) console.log(arrNew);//1,2,3,4,5,6

5、数组升维

十一、模板字符串(``)

所有的空格缩进都会保留在输出中

// 使用场景1 let name = 'lyb'; let age = 22; let score = 100; console.log(`我的名字是${name},我的年龄${age},我的成绩是${score}`); //我的名字是lyb,我的年龄22,我的成绩是100 // 使用场景2 function test() { return '哈哈哈' } console.log(`我是神雕大侠，我在笑：${test()}`); //我是神雕大侠，我在笑：哈哈哈

十二、数据类型Set

作用：和数组类似，不同点是他不能存放重复元素

应用场景：数组去重