es6学习笔记

解构

1. 解构数组

function food(){
  return ['apple','milk','orange']
}
let [apple,milk,orange]=food();
console.log(apple,milk,orange);//apple milk orange

2. 解构对象

function food(){
  return {apple:'🍎',milk:'🥛',orange:'🍊'}
}
let {apple:apple,milk:milk,orange:orange}=food();
console.log(apple,milk,orange);//🍎 🥛 🍊

模板字符串

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

字符串中插入变量和表达式：

变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。

let name = "Mike";
let age = 27;
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info);
// My Name is Mike,I am 28 years old next year.

字符串中调用函数：

function f(){
  return "have fun!";
}
let string2= `Game start,${f()}`;
console.log(string2);  // Game start,have fun!

注意：模板字符串中的换行和空格都是会被保留的

标签模板：

标签模板，是一个函数的调用，其中调用的参数是模板字符串。

alert`Hello`
//等价于
alert('hello')

当模板字符串中带有变量，会将模板字符串参数处理成多个参数。

function f(stringArr,...values){
 let result = "";
 for(let i=0;i<stringArr.length;i++){
  result += stringArr[i];
  if(values[i]){
   result += values[i];
        }
    }
 return result;
}
let name = 'Mike';
let age = 27;
console.log(f`My Name is ${name},I am ${age+1} years old next year.`);
// "My Name is Mike,I am 28 years old next year."

对象

属性的简洁表示法

ES6允许对象的属性直接写变量，这时，属性名就是变量名，属性值就是变量值。

const name='mike';
const age=27;
const person={name,age}
console.log(person)//{name: "mike", age: 27}
//等价于
const person={name:name,age:age}

方法名也可以简写

say(){
 console.log("Hello")
}
//等价于
say:function(){
  console.log("Hello")
}

属性名表达式

let food={}
food.fruit="🍌"
food.hot drink="🥛"//SyntaxError: Unexpected token 
//正常情况下，属性名不能有空格
food['hot drink']="🥛"
//或使用变量名
let drink="hot drink"
food[drink]="🥛"

注意：属性的简洁表示法和属性名表达式不能同时使用，否则会报错。

//错误
const hello = "Hello";
const obj = {
 [hello]
};
console.log(obj)  //SyntaxError: Unexpected token }
//正确
const hello = "Hello";
const obj = {
 [hello]:"world"
};
console.log(obj)  //{Hello: "world"}

对象的拓展运算符

拓展运算符（...）用于取出参数对象所有可遍历属性，然后拷贝到当前对象

let person={name:"Mike",age:27};
let someone={...person}
console.log(someone)//{name:"Mike",age:27}

迭代方式

let m=new Array(1,2,3,{a:1,b:2})

for 创建一个循环

for(let i=0;i<m.length;i++){
  console.log(m[i])
}//1 2 3 {a:1,b:2}

for in

• 遍历对象可枚举属性

m.name="jack"
for(let item in m){
  console.log(item)
}//0 1 2 3 name

for of 

• 遍历可迭代对象定义要迭代的数据

m.name="jack"
for(let item of m){
  console.log(item)
}//1 2 3 {a:1,b:2}

forEach

• 不可以由break、throw、continue或return终止

m.forEach((item,val)=>console.log(item,val))
/*
 1 0
 2 1
 3 2
 {a: 1, b: 2} 3
*/

Symbol

ES6新推出的数据类型

• 解决对象命名冲突。每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据类型仅有的目的。

• 在对象中查找 Symbol 属性的方法Object.getOwnPropertySymbols(),返回一个symbol类型的数组

const student={
 [Symbol("Lily")]:{gender:"female",score:86},
 [Symbol("Jack")]:{gender:"male",score:70},
 [Symbol("Jack")]:{gender:"male",score:80}
}
let sym=Object.getOwnPropertySymbols(student);

console.log(sym)

console.log(sym.map(item=>student[item]))

Set对象

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

let m=new Set(["red",5,"8"]);
console.log(m)

• Array相关

var myArray = ["value1", "value2", "value3"];

// 用Set构造器将Array转换为Set
var mySet = new Set(myArray);
mySet.has("value1"); // returns true

// 用...(展开操作符)操作符将Set转换为Array
console.log([...mySet]); // 与myArray完全一致

• 数组去重

let m=new Array(1,2,3,4,4,4)
let s=new Set(m)
console.log(m)//[1,2,3,4,4,4]
console.log(s)//[1,2,3,4]

Map对象

Map 对象保存键值对。

let m=new Map([["apple",6],["orange",8]])

// 添加键
m.set("milk",12);
m.size; // 3
 
// 读取值
m.get(“milk”)//12

//删除相应元素
m.delete("milk")//true

//删除所有键/值
m.clear()

//Map实例是否包含键对应的值
m.has("milk")//true

Array.from()

Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。

• 伪数组对象（拥有一个 length 属性和若干索引属性的任意对象）
• 可迭代对象（可以获取对象中的元素,如 Map和 Set 等）

Array.from() 方法有一个可选参数 mapFn，让你可以在最后生成的数组上再执行一次 map 方法后再返回。也就是说 Array.from(obj, mapFn, thisArg) 就相当于 Array.from(obj).map(mapFn, thisArg)

Array from a String

Array.from('foo');
//["f","o","o"]

Array from a Set

let s=new Set([‘foo’,window]);
Array.from(s);
//["foo",window]

Array from a Map

let m=new Map([[1,2],[2,4],[4,8]]);
Array.from(m);
//[[1,2],[2,4],[4,8]]

Array from an Array-like object(argument)

function f(){
  return Array.from(arguments);
}
f(1,2,3);
//[1,2,3]

arguments:拥有length属性的对象

在Array.from 中使用箭头函数

 

Array.from([1,2,3],x=>x+x);
//[2,4,6]

 

Array.of()

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

 Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。

Array(3)// [empty × 3]
Array.of(3)//[3]