前言
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。使用ES6语法可以大大的减少JS代码，弊端是浏览器并不识别ES6语法，主流浏览器一般都是将ES6语法转为ES5语法。本编文章讲解的都是一些工作中常用到的知识点，并不包含所有知识点。
ES6
demo地址: https://github.com/pengjunshan/WebPJS/ES6
其它Web文章
CSS浮动的使用和解决浮动的五种方法
CSS定位relative、absolute、fixed使用总结
原生开发WebApi知识点总结
开发中常用jQuery知识点总结
C3动画+H5+Flex布局使用总结
Vue学习知识点总结
开发环境到生产环境配置webpack
待续......
本编文章会讲到的知识点
- 变量声明let、const
- 箭头函数
- 解构赋值
- 字符串扩展
- 函数默认参数
- 对象的扩展
- 扩展运算符
- ES6遍历数组
- ES6遍历对象
- import和export
变量声明let、const
ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
特点
1.块级作用域；
2.先声明再使用；
3.在同作用域中不能重复声明；
4.声明了但没有赋值，值是undefined
let num = 2;
let mm;//undefined
{
let num = 3;
// let num = 4;//再次声明会报错，提示已经声明过num了
console.log(num)//3
}
console.log(num)//2
for (var i = 0; i < 10; i++) {
}
//i被变量提升了成为了全局变量
console.log(i)//10
for (let j = 0; j < 10; j++) {
}
// console.log(j)//报错找不到j,因为j是局部变量出了for循环就找不到j了
const声明一个只读的常量。一旦声明，常量的值就不能改变。const的作用域与let命令相同：只在声明所在的块级作用域内有效;
特点
1.声明必须赋值，否则报错；
2.一旦声明，值不可以变；
3.可以更改对象中属性的值
const name = '邓紫棋'
// const sex;//报错，提示常量声明缺少初始值
console.log(name)
// name = '张韶涵'//报错，常量不能改值
//可以改变对象中的属性的值
const user = {name:'张萌萌'}
user.name = '关晓彤'
console.log(user.name)
箭头函数
特点
1.箭头函数里没有this，如果要用this就是父级的this 如果父级也没有this 那么就继续往上找 直到找到window
2.无法使用arguments，没有arguments对象
3.不需要 function 关键字来创建函数
4.不要在Vue的选项属性或回调上使用箭头函数
5.相当于java中的lamda表达式
//使用一:没有入参，函数内就一行
let aa1 = function(){
return 1;
}
//转箭头函数，可以省略return和{}
let aa2 = ()=> 1;
//使用二：有入参，函数内就一行
let bb1 = function(num){
return num+1;
}
//转箭头函数，可以省略return和{}
let bb2 = num=> num+1;
//使用三：有多个入参，函数内有多行
let cc1 = function(pp,jj){
pp = pp+'你好';
return jj+'你好'
}
//转箭头函数，多个参数时用()包含着，
let cc2 = (pp,jj)=>{
pp = pp+'你好';
return jj+'你好'
}
console.log(cc2('aa','邓紫棋'));//邓紫棋你好
解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
数组解构
let arr = [1,2,3];
let [a,b,c] = arr;
console.log(""+a+b+c)
对象解构
let obj = {name:'邓紫棋',sex:'女'}
//赋给对应的字段名
let {name,sex} = obj
console.log(name+sex)
//赋给对应字段的变量,如果发现对应的字段名已经存在了可以用这种方式解构
let {name:x,sex:y} = obj
console.log(x+y)
在函数参数中使用解构
let obj = {name:'邓紫棋',sex:'女'}
let fn =function({name,sex}){
console.log(name+sex)
}
//箭头函数+对象解构
let fn1 = ({name,sex})=> console.log(name+sex+'fn1')
fn(obj)
fn1(obj)
字符串扩展
自从ES6出了``字符串模板标记后，再也不用双引号拼接字符串了。如果模板中有需要插入变量值使用${变量名}来界定；
//上篇文章中组件就使用了字符串模板
const template = `
<div>
<p>你好！</p>
<p>邓紫棋</p>
</div>
`
console.log(template)
//将表达式嵌入字符串中进行拼接。用${}来界定
let name = '邓紫棋'
console.log(`我爱你${name}`)
函数默认参数
ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。
//如果传参了就是传参的值，如果没有传参默认为6
let fn = function(num=6){
console.log(num)
}
fn();//没有传值默认6
fn(8);//传了值8 num值就是8
对象的扩展
经常遇到key:value形式，把key和value命名都一样的话可以省略:value
//键值对重名
let fn = function (name, age) {
return {
name: name,
age: age
}
}
//简化 键值命名一样
let fn1 = function (name, age) {
return {
name,
age
}
}
ES6 同样改进了为对象字面量方法赋值的语法
let obj = {
fn: function () {
console.log(111111)
}
}
//省略function关键字
let obj1 = {
fn() {
console.log(222222)
},
}
obj.fn();
obj1.fn();
// Object.keys(obj)：获取对象的所有key形成的数组
// Object.values(obj)：获取对象的所有value形成的数组
// Object.entries(obj)：获取对象的所有key和value形成的二维数组。格式：[[k1,v1],[k2,v2],…]
// Object.assign(dest, …src) ：将多个src对象的值 拷贝到 dest中（浅拷贝）。
扩展运算符
ES6中另外一个好玩的特性就是Spread Operator 也是三个点儿...， 它可以是数组也可以是对象，可以很好的把两个数组或者两个对象合并在一起；
数组
在一个数组中添加元素返回一个新数组，不会除重
//数组，在一个数组中添加元素返回一个新数组，不会除重
let arr = [1,2,3,4,5]
let arr1 = [...arr,6,7,8,9,5]
console.log(arr1)//[1,2,3,4,5,6,7,8,9,5]
//两个数组合并不会除重
let arr2 = [1,2,3,4,5]
let arr3 = [1,2,3,4,5]
console.log([...arr2,...arr3])//[1,2,3,4,5,1,2,3,4,5]
对象
1.在老对象中新增属性返回一个新的对象;
2.两个对象合并,后面对象会覆盖前面重复的属性
//对象,在老对象中新增属性返回一个新的对象
let obj = {
name:'邓紫棋',
age:18
}
let obj1 = {...obj,sex:'女'}
console.log(obj1)
//两个对象合并,后面对象会覆盖前面重复的属性
let obj2 = {
name:'邓紫棋',
age:18
}
let obj3 = {
name:'邓紫棋',
age:19,
sex:'女'
}
let obj4= {...obj2,...obj3}
console.log(obj4)
函数中使用
let fn = function(...n){
console.log(n)
}
fn(1,2,3)//[1,2,3]
ES6遍历数组
map
map()方法,map常用在修改item中属性的值，不会改变数组的长度。
- 如果数组是值类型的，不会改变老的数组中的值；
- 如果数组的类型是对象，会改变老的数组中的值；
- item:当前元素； index:当前元素的下标；arr:当前操作的数组
//值类型数组
let arrNum = [1, 2, 3, 4, 5, 6]
//对象类型数组
let arrObj = [
{ id: 1, name: '邓紫棋', age: 18 },
{ id: 2, name: '高圆圆', age: 19 },
{ id: 3, name: '周芷若', age: 16 },
]
//如果数组是值类型的，不会改变老的数组中的值
let mapArrNum = arrNum.map((item,index,arr) => {
return item * 2
})
console.log('arrNum老的数组', arrNum)//[1, 2, 3, 4, 5, 6]
console.log('mapArrNum新的数组', mapArrNum)//[2, 4, 6, 8, 10, 12]
//如果数组的类型是对象，会改变老的数组中的值
//item:当前元素； index:当前元素的下标；arr:当前操作的数组
// let mapArrObj = arrObj.map((item,index,arr)=>{
let mapArrObj = arrObj.map((item) => {
if (item.id === 3) {
item.age = 20
}
return item;
})
console.log('arrObj老的数组', arrObj)//{ id: 3, name: '周芷若', age: 20 }
console.log('mapArrObj新的数组', mapArrObj)//{ id: 3, name: '周芷若', age: 20 }
filter
- filter()方法，用来过滤数组，返回一个新的数组;
- filter方法需要在循环的时候判断一下是true还是false，是true才会返回这个元素然后加入到新的数组中;
let filterArrObj = [
{ id: 1, name: '邓紫棋', age: 18 },
{ id: 2, name: '高圆圆', age: 19 },
{ id: 3, name: '周芷若', age: 16 },
]
let filterArr = filterArrObj.filter((item, index, arr) => {
return item.age >= 18;
})
console.log('age大于等于18的人', filterArr)//{id:1...}{id:2...}
forEach
- forEach()方法，没有返回值，map()、filter()都会返回一个新数组；
- forEach遍历方式遍历数组全部元素，利用回调函数对数组进行操作，自动遍历数组.length次；
- 且无法break中途跳出循环，不可控、不支持return操作输出，return只用于控制循环是否跳出当前循环；
let eachArrObj = [
{ id: 1, name: '邓紫棋', age: 18 },
{ id: 2, name: '高圆圆', age: 19 },
{ id: 3, name: '周芷若', age: 16 },
]
eachArrObj.forEach((item,index,arr)=>{
item.age>18? item.age=18:item.age=item.age
})
console.log('forEach遍历后：',eachArrObj)//{id:1,age:18}{id:2,age:18}{id:3,age:16}
every
- every()方法，循环遍历数组，返回一个布尔值；
- 对数组中的每一项运行给定函数，如果该函数对每一项返回true,则最后返回true。否则返回false；
let arrObjTow = [
{ id: 1, name: '邓紫棋', age: 18 },
{ id: 2, name: '高圆圆', age: 19 },
{ id: 3, name: '周芷若', age: 16 },
]
let isEvery = arrObjTow.every((item,index,arr)=>{
return item.age>18
})
console.log('every，age是否全部大于18:',isEvery)//false
some
- some()方法，循环遍历数组，返回一个布尔值；
- 对数组中的每一项运行给定函数，如果该函数中任一项返回true，则最后返回true；
let isSome = arrObjTow.some((item,index,arr)=>{
return item.age>18
})
console.log('some(),age有大于18的吗:',isSome)//true
for…in
- for…in;是用于遍历包含键值对(key-value)的对象，对数组并不是那么友好;
- 通过arr[key]获取当前元素,key：下标;
let arrObjTow = [
{ id: 1, name: '邓紫棋', age: 18 },
{ id: 2, name: '高圆圆', age: 19 },
{ id: 3, name: '周芷若', age: 16 },
]
for(let key in arrObjTow){
console.log('for...in:',arrObjTow[key])//{id:*,name:*,age:*}
}
for...of
- for...of;是ES6定义的新的遍历数组的方法,直接获取值
let arrObjTow = [
{ id: 1, name: '邓紫棋', age: 18 },
{ id: 2, name: '高圆圆', age: 19 },
{ id: 3, name: '周芷若', age: 16 },
]
for(let val of arrObjTow){
console.log('for...of：',val)//{id:*,name:*,age:*}
}
ES6遍历对象
for...in
- for...in;循环遍历对象自身的和继承的可枚举属性;
- 通过obj[key]获取值，key：属性名称;
let obj = {id: 1, name: '邓紫棋', age: 18}
for(let key in obj){
console.log(key+'--'+obj[key])//id--1 name--邓紫棋 age--18
}
Object.keys(obj)
- Object.keys(obj);获取对象中的key,组成一个数组
Object.keys(obj).forEach(key=>console.log(key+'--'+obj[key]))
import和export
导入第三方库、插件
- import引入一个依赖包，不需要相对路径
import vue from 'vue'
import axios from 'axios'
- import引入css、less、sass
import './index.css'
import './a.less'
export{}
- 使用export{}抛出的变量,一个文件里可以多个export；
- 可以导出多个变量, 当使用导出变量时, 需要了解导出变量原来的命名；
A.js导出
const name = '邓紫棋'
function fn() {}
function getName() {
return name
}
export { name, getName }
//给fn另起个名字 as后面的值就是新名字
export { fn as fnn }
B.js导入
// 导入1 B.js导入，用{}分别接收每个变量和方法
import {name,fnn,getName} from 'A.js'
console.log(name)
console.log(fn())
//导入2 B.js导入，一次性导入整个类
import * as utils from 'A.js'
console.log(utils.name)
console.log(utils.getName())
export default{}
- 使用export default{}抛出,一个文件里只能有一个export default；
- 默认无法同时导出多个变量；
- 导出变量的方式非常优雅, 当使用导出变量时, 无需了解导出变量原来的命名；
// A.js导出
function getAge(){return 18}
export default{ getAge }
// B.js接收导入 接收export导出的数据需要用{}接收，接收export default导出的数据不需要用{}接收并且接收名字可以更改
import getAge from 'A.js'
export 和 export default的区别
1.export
import {getCurrTime} from './util'; //需要加花括号 可以一次导入一个也可以一次导入多个，但都要加括号
如果是两个方法，import {getCurrTime,post} from './util';
2.export default
import utils from './util'; //不需要加花括号 只能一个一个导入
export default有单次限制，只能使用export default向外暴露一次
