学习记录(day02-Es6模板字符串、解构赋值、箭头函数、数据结构、for..of遍历、rest参数、扩展运算符))...

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。它类似于数组,但是成员的值都是唯一的,没有重复的值。
//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"] );

日常学习的总结,主要是为了自己以后看,当然大家有什么好的建议,欢迎评论留言。

你可能感兴趣的:(学习记录,js,数据结构,python,java,stream)