学习记录(day02-Es6模板字符串、解构赋值、箭头函数、数据结构、for..of遍历、rest参数、扩展运算符))
2019-10-18 18:09
1811 查看
Day02(Es6模板字符串、解构赋值、箭头函数、数据结构、for..of遍历、rest参数、扩展运算符)
[TOC]
1.1.1 模板字符串
- 模板字符串,用于简化字符串拼凑
//声明 var str = ``; //嵌入变量 var str = `${变量}`; // username + "___" + password // `${username} ---- ${password}`
- 在模板字符串中,可以通过${变量}获取变量的值。
var username = 'jack'; var age = 18; console.info(`你的姓名是${username} , 你的年龄是${age}`);
1.1.2 解构赋值
- ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)
- ES5获得对象数据的语法,如下:
const people = { name: 'lux', age: 20 } const name = people.name; //ES5写法 const age = people.age; console.log(name + ' ‐‐‐ ' + age)
- 对象解构赋值:从一个对象一次性解析出多个属性给不同变量
let {变量1,变量2,...} = 对象; //例如: {} = {}
- 解构的变量名,必须与属性名保持一致。
let student = { name : "张三", age : 21, course : { en : 100, math : 99 } }; let {name,age} = student; console.info(name + "_" + age); let {course : {en , math }} = student; console.info(en + "_" + math );
- 数组解构赋值:按照数组排序依次赋值
let [变量1,变量2,...] = 数组; //例如: [] = []
let arr = ['安徽','滁州']; let [province,city] = arr; //arr[0]赋值给province,arr[1]赋值给city console.info(province); console.info(city); let [pro,cit,cou = '全椒'] = arr; //arr[3]如果不存在,就使用默认值’全椒’ console.info(province); console.info(city); console.info(province); console.info(cou);
- 常见应用:交换变量
[x, y] = [y, x];
- 常见应用:遍历Map
var map = new Map(); map.set('first', 'hello'); map.set('second', 'world'); for (let [key, value] of map) { console.log(key + " is " + value); } // first is hello // second is world
- 常见应用:模块内容的提取
const { SourceMapConsumer, SourceNode } = require("source-map");
1.1.3 函数参数名默认值
- 默认值和解构
function 函数名(参数名 = 默认值){ }
function fun1({x = "x1" , y } = {y : "y2"}){ return [x , y] ; } console.info( fun1() ); //[ 'x1', 'y2' ] console.info( fun1({}) ); //[ 'x1', undefined ] , //{} 覆盖 {y:"y2"} ,解构默认值,x=x1,y=undefined
- 默认值应用:参数必填
function fun2(args = new Error("参数必须填写")){ console.info(args); } fun2(); fun2("abc");
-
对象简写
//属性名和属性值(变量)相同时,可以简写成一个。注意:不能使用双引号 //匿名函数,可以省略function关键字 var user = { username, // "username" : username password, show () { } }
1.1.4 箭头函数
- 箭头函数:用于定义匿名函数的一种简洁写法。(与Java中Lambda表达式极其相似)
- 基本格式:
(参数1, ….) => { //语句 return 返回值; }
- 实例:
var fn = function(a,b){ //ES5定义匿名函数的方式 return a+b; } var fn2 = (a,b) =>{ //ES6箭头函数匿名函数 return a + b; }
- 如果只有一个参数,小括号可以省略
var fn2_1 = () => { console.info("没有参数"); } var fn2_2 = (a) => { console.info("一个参数"); } var fn2_1 = (a,b) => { console.info("多个参数"); } var fn2_3 = a => { //省略写法 console.info("一个参数"); }
- 如果函数体只有一条语句,大括号可以省略。如果此语句时return语句,return必须省略。
var fn3_1 = (a,b) => {//普通语句 console.info("普通语句"); } var fn3_2 = (a,b) => { return a+b;//return语句 } var fn3_3 = (a,b) => console.info("普通语句"); //普通语句的省略写法 var fn3_4 = (a,b) => a+b; //return语句的省略写法,必须省略return
- this对象:
- 箭头函数没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候所在的对象就是它的this
- (浏览器的环境下)也就是说,箭头函数的this看外层的是否有函数,如果有,外层函数的this就是内部箭头函数的this,如果没有,则this是window。
var name = "rose"; var person = { name : 'jack', show : function(){ console.info( this.name ); }, show2 : () => { console.info( this.name ); } }; person.show(); //输出jack person.show2(); //输出undefined,在Node.js中没有window对象,无法获得对应值 //如果希望获得jack,必须通过person.name方式获得
1.2.1 Map数据结构(Map集合)
- JavaScript的对象(Object),本质上是键值对的集合(Hash结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
- ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串。
创建 new Map(); 设置数据 map.set(k,v); 获得数据 let v = map.get(k) 是否存在 let b = map.has(k) 删除数据 map.delete(k)
1.2.2 Set数据结构(Set集合)
- ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是<u>唯一</u>的,没有重复的值。
//Set集合:存储唯一数据 创建 new Set() 添加数据 set.add(val)
- 过滤数组中重复的数据
var arr = [2, 3, 5, 4, 5, 2, 2]; //方式1 var set2 = new Set(); // 1) 遍历数组,将数据添加到set arr.map( s => set2.add(s) ); // 2) 遍历set集合,添加到新数组 var arr2 = []; set2.forEach( v => arr2.push(v) ); console.info( arr2 ); //[ 2, 3, 5, 4 ] //方式2 var arr3 = [ ... new Set(arr) ] console.info( arr3 ); //[ 2, 3, 5, 4 ]
1.3.1 for...of遍历
//遍历数组 for(let a of arr4){ console.info(a); } //遍历Map,for…of与解构结合遍历Map for(let [k,v] of map4){ console.info(`输出的数据键是${k}值是${v}`); } //遍历Set for(let s of set4){ console.info(s); } //自定义对象不能遍历,需要借助keys转换成“键数组” for(let key of Object.keys(obj4)){ console.info(`对象的键是${key},值是${obj4[key]}`); } //也可以借助entries转换成“键值对” for(let [k,v] of Object.entries(obj4)){ console.info(`entries : 对象的键是${k},值是${v}`); }
JS中已有的遍历
遍历方式 | 描述 | 实例 |
---|---|---|
for循环遍历 | 普通循环,常用于处理数组 | for (let i = 0;i < array.length;i++){ |
map() | 数组链式操作函数 | array.map( fn ).xxx() |
forEach() | 简化数组、Map、Set的遍历 | xxx.forEach( fn ) |
for…in | 任意顺序遍历一个对象的可枚举属性 | for(let xx in obj) {} |
for…of | 不同的数据结构提供统一的访问机制 | for(let xx of obj) {} |
1.4.1rest参数(形参...)
- rest参数,就是JS的可变参数。在形参列表的最后一位变量前,使用“...”
函数名(参数1, 参数2, …可变) function add(...num){ //可变参数num,就是一个数组,运行时存放了所有的实参 var sum = 0 ; num.forEach( i => sum += i); return sum; } console.info( add(1,2,3) ); function count(args,...other){ console.info(arguments.length); //虽有参数的个数,伪数组,不能使用forEach进行遍历 console.info(other.length); //可变参数的个数,真数组,可以使用forEach进行遍历 } count(1,2,3);
1.4.2 扩展运算符(实参…)
-
扩展运算符(spread)是三个点(...)。它好比rest参数的逆运算,
-
操作数据是数组,将一个数组转为用逗号分隔的参数序列。
-
操作数据是对象,取出参数对象的所有可遍历属性,拷贝到当前对象之中
-
扩展运算符
//将对象或数组完全拆分 ...数组 --> 多个元素 ...对象 --> 多个属性对 var arr = ['a','b','c']; function fun3(x,y,z){ console.info( [x,y,z] ); } fun3( arr ); //[ [ 'a', 'b', 'c' ], undefined, undefined ] fun3( ...arr ); //[ 'a', 'b', 'c' ] let z = { a: 3, b: 4 }; let n = { ...z }; // { a: 3, b: 4 }
- 应用:合并数组
var arr1 = ['a', 'b']; var arr2 = ['c']; var arr3 = ['d', 'e']; //通过 concat函数合并 console.info( arr1.concat(arr2 ,arr3 ) ); //通过扩展运算符合并 console.info( [...arr1 ,...arr2 ,...arr3] );
- 应用:字符串拆分
//通过split拆分字符串 console.info( "abc".split("") ); //通过扩展运算符拆分 console.info( [..."abc"] );
日常学习的总结,主要是为了自己以后看,当然大家有什么好的建议,欢迎评论留言。
相关文章推荐
- es6中的解构赋值、扩展运算符和rest参数使用详解
- ES6学习总结之函数变化(函数默认参数,扩展运算符,箭头函数)
- Python3学习(一)-基础、数据类型、变量、字符串和编码、list&tuple、if、for、while、dict、set、函数与参数
- ECMAScript6(ES6)标准之函数扩展特性箭头函数、Rest参数及展开操作符
- ES6(六: 函数扩展)(默认值,rest参数,扩展运算符)
- JavaScript学习记录day6-函数变量作用域、解构赋值与方法
- ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator
- 10、函数的扩展 为函数参数指定默认值、函数的 rest 参数、箭头函数—ES6学习笔记
- 【es6】【变量的解构赋值】【字符串,数值和布尔值解构】【函数参数的解构赋值】【用途】
- ES6——Day3(字符串的解构赋值+函数参数解构赋值)
- Lua学习笔记3. 函数可变参数和运算符、转义字符串、数组
- JavaScript学习记录day6-函数变量作用域、解构赋值与方法
- es6扩展运算符,rest运算符,箭头函数,
- ES6中的解构、扩展运算符(...)、rest参数(...)的使用
- ES6学习笔记(六)--set,map数据结构和for...of遍历
- C语言学习5:数组定义,数组名的含义,数组作为函数参数,数组赋值,数组左右移动,最大最小,反向遍历,冒泡排序,sizeof 和strlen区别,gets和puts,strcpy,strcat,strcmp,strchr,strstr,strlen
- 【JavaScript学习笔记】5:有关函数,typeof,参数过多/不足,arguments,rest
- es6中箭头函数学习的一个记录
- ES6学习(三)(for ...of循环,箭头函数)
- es6 函数参数的默认值与解构赋值的默认值结合使用理解