ES6 变量与常量的申明
var、let、const
-
var 申明变量作用域,根据申明时所在的区域相关;
-
let 申明的变量只在它所在的代码块有效。
-
const 用来声明一个常量 (值类似值不能改变,引用类型地址不能改变)
{ let a = 10; var b = 1; } console.log(b) // 1 console.log(a) // ReferenceError: a is not defined.
const PI = 3.1415; console.log(PI) // 3.1415 PI = 3; // Uncaught TypeError: Assignment to constant variable.
ES6 箭头函数使用
ES6 可使用“箭头”(=>)定义函数。
-
函数无参数或多个参数,可使用圆括号进行参数传递;当执行语句只有一句,可直接写在箭头函数后面。(此时的圆括号可加可不加)
var a = () => 5; // 等同于 var a = function () { return 5 }; var sum = (num1, num2) => ( num1 + num2 ); //此时的圆括号可加可不加 // 等同于 var sum = function(num1, num2) { return num1 + num2; };
-
箭头函数的代码块部分语句过多,需使用大括号括起来,并使用return返回。
let a = 3, b = 5; let getSum = (a,b) => { let sum = a+b; return sum; };//此处的花括号不能再用圆括号包起来,否则会报错 console.log(getSum (a,b)); //8
-
花括号被解释为代码块,若箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。
var id = 10; var getReturn = (id) => ( { id: id, name: "Temp" } ); //此处的花括号为对象,即一个独立的代码块,须加上圆括号 console.log(getReturn(id)); //{id: 10, name: "Temp"}
ES6 函数参数使用
-
单独传参数,一一对应,并且函数的参数名称不能相同
function argfun(x, y) { //此处的参数名字不能相同 ,即 function argfun(x,x,y){...} //此时会报错 y = y || 'World'; console.log(x, y); } argfun('Hello') // Hello World argfun('Hello', 'China') // Hello China argfun('Hello', '') // Hello World
-
函数中参数带有默认值,放置在参数最后;
// 例一 function f(x = 1, y) { return [x, y]; } f() // [1, undefined] f(2) // [2, undefined]) f(, 1) // 报错 f(undefined, 1) // [1, 1] // 例二 function f(x, y = 5, z) { return [x, y, z]; } f() // [undefined, 5, undefined] f(1) // [1, 5, undefined] f(1, ,2) // 报错 f(1, undefined, 2) // [1, 5, 2]
-
ES6 中 Rest 参数传递使用
3.1. 只有一个 rest 参数使用function add(...values) { //只有一个rest参数 let sum = 0; for (var val of values) { sum += val; } return sum; } add(2, 5, 3) // 10
3.2. 多个参数,同时使用 rest 参数,此时须把 rest 参数放置在参数最后;
function f(a,b,c, ...items) { items.forEach(function(item) { a.push(item); console.log(item); }); } var a = []; f(a, 1, 2, 3,4,5,6); //此处会依次打印出 3 4 5 6 console.log(a); //[3, 4, 5, 6]
ES6 for in 和 for of 的用法
for in 用法
-
for in 声明用于对数组或者对象的属性进行循环/迭代操作。
对于数组 ,迭代出来的是数组元 素,对于对象 ,迭代出来的是对象的属性;//数组操作 var myStudents = ['zhanghuan','liuzhiqiang','chenzhihua','zengshangshu']; for( let i in myStudents){ console.log('myStudents '+ i +' : '+myStudents[i]); } //打印出结果: myStudents 0 : zhanghuan myStudents 1 : liuzhiqiang myStudents 2 : chenzhihua myStudents 3 : zengshangshu
//对象操作 var myStudent = { name: 'zhanghuan', sex: '1', age: 26, hobbies: 'study , play the basketball' }; for(let key in myStudent){ console.log('myStudent '+key+' : '+myStudent[key]); } //打印出结果: myStudent name : zhanghuan myStudent sex : 1 myStudent age : 26 myStudent hobbies : study , play the basketball
-
判断对象是否为数组/对象的元素/属性:
格式:(变量 in 对象)…
当“对象”为数组时,“变量”指的是数组的“索引”;
当“对象”为对象是,“变量”指的是对象的“属性”。//数组示例: var arr = ["a","b","2","3","str"]; var result = ("b" in arr); var result1 = (4 in arr); document.write(result+"<br>"); //false document.write(result1+"<br>"); //true
var obj={ w:"wen", j:"jian", b:"bao" }; var result=(2 in obj); var result1=("j" in obj); document.write(result)+"<br/>"; //false document.write(result1)+"<br/>"; //true
for of 用法
-
for…of 循环适用于数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、Generator 对象,以及字符串。
const arr = ['red', 'green', 'blue']; for(let v of arr) { console.log(v); // red green blue }
关于 for of 使用可参考 下面网址:
http://es6.ruanyifeng.com/#docs/iterator#for---of-循环
ES6 解构
定义:ES6 中允许按照一定模式,从数组和对象中提取值,对变量进行赋值;
作用:将数据结构分解为更小的部分的过程,从而达到简化提取信息的目的。
一、对象解构
-
同名变量解构赋值
let node = { type : 'identifier', name : 'foo' }; let {type,name} = node; console.log(type);//'identifier' console.log(name);//'foo'
-
不同变量解构赋值
let node = { type : 'identifier', name : 'foo' }; let {type:localType,name:localName} = node; console.log(localType);//identifier console.log(localName);//foo
-
默认值:当使用解构赋值语句时,如果指定的本地变量没有同名属性,那么该变量会被赋值为undefined,可以对其进行指定默认值
let node = { type : 'identifier', name : 'foo' }; let {type,name,val} = node; console.log(val);//undefined ({type,name,val = '234'} = node) console.log(val);//'234'
-
嵌套的对象解构:使用类似于对象字面量的语法,可以深入到嵌套的对象结构中去提取你想要的数据
let node = { type: "Identifier", name: "foo", loc: { start: { line: 1, column: 1 }, end: { line: 1, column: 4 } } }; let { loc: { start }} = node; console.log(start.line); // 1 console.log(start.column); // 1
注意:
- 使用var、let、const对对象进行解构时,必须提供初始化容器(即等号右边的值)
- 不使用var、let、const赋值时,需要将解构语句使用()进行包裹;如下:
({type,name} = node);//{}在js中作为代码块,单独使用加等号会报错会报错
- 下面语句中并没有任何变量被绑定:
let { loc: {} } = node;
二、数组解构
-
数组解构的语法看起来与对象解构非常相似,只是将对象字面量替换成了数组字面量。数组解构时,解构作用在数组内部的位置上,而不是作用在对象的具名属性上;
let colors = [ "red", "green", "blue" ]; let [ firstColor, secondColor ] = colors; console.log(firstColor); // "red" console.log(secondColor); // "green"
对于数组解构,最主要在于位置的固定,当然,如果不想赋值某些值,可以直接略过,如:
var s = [1,2,3,4,5]; let [,,T] = s; console.log(T);//3
-
注意:
使用var、let、const对对象进行解构时,必须提供初始化容器(即等号右边的值)
不使用var、let、const赋值时,需要将解构语句使用()进行包裹,因为数组的[],与{}是不同的
对互换两个变量的值很有用,如排序算法中使用的,可以直接用let a = 3; let b = 4; [b,a] = [a,b]; console.log(a);//4 console.log(b);//3
-
默认值:数组解构赋值同样允许在数组任意位置指定默认值。当指定位置的项不存在、或其值为undefined ,那么该默认值就会被使用
let colors = [ "red" ]; let [ firstColor, secondColor = "green" ] = colors; console.log(firstColor); // "red" console.log(secondColor); // "green"
-
嵌套的数组结构:与对象类似,只是仍使用的是数组字面量
let colors = [ "red", [ "green", "lightgreen" ], "blue" ]; let [ firstColor, secondColor ] = colors; console.log(secondColor); // ["green", "lightgreen"]
-
数组中剩余值的解构,即使用 “…” 方式解构;
let colors = [ "red", "green", "blue","yellow" ]; let [ firstColor, ...restColors ] = colors; console.log(firstColor); // "red" console.log(restColors.length); // 3 console.log(restColors[0]); // "green" console.log(restColors[1]); // "blue"
三、混合解构
-
既有函数的解构,也有数组的解构,也只需要对象的创建出字面量来赋值即可,如:
let node = { type: "Identifier", loc: { start: { line: 1, column: 1 } }, range: [0, 3] }; let { loc: { start }, range: [ startIndex ] } = node; console.log(start.line); // 1 console.log(start.column); // 1 console.log(startIndex); // 0
以上为 es6 基本用法 ,对于入门的你能给以很好的帮助!
流水漫漫,时光匆匆,任重道远,永不止步!!!