1.配置node:
- 去网上找到node安装包进行安装
- 安装后需要在dos输入命令检查是否安装成功:npm - v &node - v
2.配置webpack:(HBuilder X)
- 在git下载es6-webpack配置文件
- 导入webpack:文件 - 打开目录 - 选择对应的包导入
- 打开 HBuilder X 的终端(没有的需要先安装终端,如果内置终端无法使用,则需要在dos下对应文件夹下进行操作)
- 输入指令:
- npm install – 本地安装,会根据package.json中的依赖去外国的服务器上下载所需的包 (如下载出现问题(error)可通过cnpm下载)
- npm install webpack -g --全局安装
- npm install webpack -server -g
- npm start --启动项目 (如跳出浏览器页面则成功安装)
3.es6参数及操作
-
前端js文件可以建立多个,然后用导入的方式配置在主页面js文件下,用法如下:
import 导入名 from ‘文件路径’
用此方法可以在主页面js下使用导入的js中的函数/方法
-
let 和 var 的区别:
let是遵循作用域的,属于局部变量,而var是全局变量
-
const:
es3 - es5 设置常量的方式,将当前变量挂载到window对象下面,通过writable:false禁止写入来实现常量
const是es6用来设置常量的方式,语法示例:const PI = 3.14
4.解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
-
es6中的结构赋值 如果赋值不正确,会出现undefined
let [xiaoming, [xiaohong, xiaogang]] = ["小明", ["小红", "小刚"]]
-
将变量变成一个数组,如果多变量同时赋值时,数组必须放在最后赋值
let [xiaomi, huawei, ...apple] = ["小米10", "荣耀10", "iphoneX", "iphone11", "iphone11 pro"];
-
赋值规则按照对应的位置赋值,一个萝卜一个坑
let [, , a1] = [12,32,43] //此时a1 = 43
-
function* fids() { let a = 1; let b = 2; while (true) { console.log("前") console.log("前",b) yield b; console.log("后"); [a, b] = [a, a+b]; console.log("后",b) } } let [c,d,e,f] = fids();
此例子中,除了第一个遍历的参数是正常循环,后面的参数都是从yield后面开始循环,属于Generator 函数
-
默认值
-
当不能正常赋值时,可以提供默认选项(右边括号没有值,a = true,有值,a = 当前值)
如果在给定默认值的情况下,赋值为undefined 将不再进行赋值let [a = true , b = 2] = [1,undefined];
-
元素默认值是函数时的赋值方法
function fun(){ console.log("这是一个方法") return 121; } let [a = fun()] = [undefined];
-
//在赋值的先后顺序也会影响结果
let [x = y , y = 1] = [] //此时x = undefined
-
5.对象的解构赋值
-
对象的解构赋值是根据名字来赋值,而不是顺序
可以用这种方法获取json数据的值,非常方便let{a,b,c} = {c:1,b:2,a:3};
-
将对象中的方法和变量中的名字进行匹配,如果匹配成功,就可以直接通过变量名来调用指定的方法
let {log , cos , sin} = Math; console.log(sin(30)) const {log} = console; log('hello');
-
解决变量名和属性名不一致的情况
let {foo:baz} = {foo:'aaa',bar:'bbb'} //此时baz = ‘aaa’ foo在这里作为了一个中转站
-
嵌套对象解构赋值
let obj = { p:[ "hello", {y:"world"} ] } let{p,p:[a,{y:b}]} = obj; b = "world"
-
注意,对象的解构赋值可以取到继承的属性。
const obj1 = {}; const obj2 = { foo: 'bar' }; //通过设置obj1的原型,使obj1可以使用obj2的内容 Object.setPrototypeOf(obj1, obj2); const { foo } = obj1; foo // "bar"
-
对象的解构也可以指定默认值
对象解构中的默认值 var {a = 2,b:test} = {b:3}; console.log(a);//2 console.log(test);//3
6.字符串的解构赋值
-
可将字符串进行分解,赋值给每一个变量
let [a , b ,c , d,e] = "hello"; console.log(a);//h console.log(b);//e console.log(c);//l console.log(d);//l console.log(e);//o
-
数组中的length属性可以直接赋值
let {length:len} = "hello"; console.log(len);//5
-
对于String的扩展
在es6中为字符串增加了遍历的方法,可以直接进行字符串的遍历for(let codePoint of "good afrernoon"){ console.log(codePoint); }
7.数值和布尔类型的解构赋值
-
判断赋值内容是不是一个数字
let {toString:s} = "123"; console.log(s === Number.prototype.toString)
-
判断指定的对象是不是一个数组
let a = "test"; let {toString:s} = a; console.log(s === Array.prototype.toS tring); console.log(typeof a);
8.关于函数的解构赋值
-
函数的参数也可以使用解构赋值。
function add([x, y]){ return x + y; } add([1, 2]); // 3
-
map 遍历的一个方法,遍历集合 map(每次遍历的具体操作)
//=> 箭头函数 console.log([[1,2],[3,4]].map(([a,b]) => a+b)) //代码原理同上
-
对参数进行解构分析,如果能解析成功就赋值,如果不能就赋默认值
function move({x = 0,y = 0}){ return[x,y]; } console.log(move({x:1,y:2}))
-
如果在参数中使用解构赋值,当调用方法传参的时候会覆盖解构赋值等号右边的内容
建议在实际开发过程中将默认值写在等号左边
function move({x,y} = {x:1,y:2}){
return[x,y];
}
console.log(move({x:3}))//3,undefined
-
参数的解构赋值,undefined就会触发函数参数的默认值。
[1, undefined, 3].map((x = 'yes') => x); // [ 1, 'yes', 3 ]
-
一下返回多个值的情况
function fun(){ return [1,2,32,5,34,5,3] } //通过解构赋值就可以更快速的去把返回值处理掉 let [a,b,c,d,e,f] = fun(); console.log(a);
-
获取json数据实例
let jsonData = { id:'1', userName:'admin', data:{ success:'true' } } let {id,userName,data,data:{success}} = jsonData; console.log(data);//true
-
创建一个map对象 通过一个键值对的方式来存储数据
let map = new Map(); map.set("firstName","Tom"); map.set("lastName","jerry"); //通过键的方式来获取指定的值 // var firstName = map.get("firstName") // console.log(firstName); //遍历输出map集合中的内容 for([key,value] of map){ console.log(key+"+"+value) }
9.对于函数的扩展
-
设定默认值
//es3-es5判断默认值方法 function fun(x,y){ if(x === undefined){ x = 'hello' } if(y === undefined){ y = 'world' } console.log("x",x); console.log("y",y); } fun("good","morning");//x,good y,afternoon //es6允许在方法中直接给参数设定默认值 function fun(x,y = 'world'){ console.log(x+'---'+y) } fun("hello");//hello---world
-
参数变量是默认声明的,所以不能用
let
或const
再次声明。function foo(x = 5) { let x = 1; // 报错 const x = 2; // 报错 }
-
在方法传参的时候,绝对不能去传相同名字的参数
function fun(x,x,y){ console.log(x); } fun(1,2,3);//报错
-
在函数的默认值中,可以写一个表达式,并且这个表达式会在每次参数为undefined的时候去执行一次
//惰性求值 let x = 99; function fun(p = x+1){ console.log(p) } fun(12); x+=1; fun();
-
默认参数的位置 建议所有的函数才有默认值的参数全部往后放
如果在看别人的函数时,发现参数中有默认值,即可忽略function fun(y,x = 1){ console.log(x,y) } fun(2); //函数.length,可以返回当前没有赋默认值的参数的个数,默认值要往后靠,放第一个后面就都是0了 var length = (function fun(x,y,z=1){}).length console.log(length);//2
-
设置抛出异常的方法
//实例 用户没有按照规定给参数赋值怎么办? function checkSomething(){ //js中的抛出异常的方法 throw new Error('参数是必填的,你少传了一个参数') } //当x = undefined时,会将报错的方法赋值给x并执行 function fun(x = checkSomething()){ console.log(x); } fun();
-
遍历数组
function add(...num){ let sum = 0; //遍历数组,类似于java中的foreach for(var val of num){ sum += val; } return sum; } var result = add(1,2,3,4,5,677,322) console.log(result);
-
rest参数 接收数组并排序
//es5 function test1(){ //将传入的参数转成数组并进行排序,通过argument可以获得到传进方法的参数 return Array.prototype.slice.call(arguments).sort(); } console.log(test1(1,2,3,4,5,677,322)); //es6 function soutTest(a,b){ return a-b } function fun(...num){ return num.sort(); } var fun = (...num) => num.sort(soutTest);//webpack语法问题,直接在sort括号内写会报错 console.log(fun(1,2,3,4,5,67,32,12));
-
rest参数
//es5接收数组并排序 function test1(){ //将传入的参数转成数组并进行排序,通过argument可以获得到传进方法的参数 return Array.prototype.slice.call(arguments).sort(); } console.log(test1(1,2,3,4,5,677,322));
-
严格模式
//从 ES5 开始,函数内部可以设定为严格模式。 function doSomething(a, b) { 'use strict'; // code } //es6 做了一点修改,规定只要函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显式设定为严格模式,否则会报错。 function doSomething(a, b = a) { 'use strict'; // code } doSomething();// 报错 //在严格模式下使用八进制 var num = Number.parseInt("070",8); console.log(num);
-
name属性
//es6函数的name属性 ,可通过name属性来获取到函数的名字 function fun(){ } console.log(fun.name); //新建一个函数会得到一个匿名的名字 console.log((new Function).name);
-
箭头函数
//当箭头函数没有参数或者有多个参数的时候,用()来表示参数的位置 var v = v => v; console.log(v(1)); var v = () => 5; console.log(v()); //箭头函数会默认添加return 关键字 var sum = (num1,num2) => num1 + num2; console.log(sum(1,3)); //当箭头函数代码块多余一行的时候要用大括号括起来 var sum = (num1 ,num2) => {console.log(num1);return num1+num2} console.log(sum(1,3)); //如果箭头函数要返回对象,使用圆括号来将大括号括起来,避免解释器误判 var returnObj = ({id,name}) => ({id:id,name:name}); console.log(returnObj({id:1,name:'admin'})) //判断参数是否是偶数 const isEvent = (i) => i%2 === 0; console.log(isEvent(2)); var sum = [1,2,3].map(x => x*x); console.log(sum) //箭头函数的实际用法 var newArray = [1,2,43,454,2,34,6].sort((a,b) => a-b); console.log(newArray); //在箭头函数中的箭头指向问题 在箭头函数中,this的指向是固定的,指的就是当前函数中内容 function foo(){ setTimeout(() => { console.log('id',this.id); },100) } var id = 42; foo.call({id:43}); function foo1(){ console.log(this) } foo1.call({id:10}); var obj = { userName : 'admin', fn:function(){ console.log(this.userName); } } //函数中的this执行的是当前函数的调用方 obj.fn();