ECMAscript6学习

在这里插入图片描述

ECMAscript6介绍

ECMA是一个浏览器脚本标准制定的公司,Netscape 创造了 JavaScript 由于商标原因,
后面ECMA公司取名ECMAscript 1 发布,JavaScript 也就是 ECMAscript.到现在最新的版本是6,简称es6.

新增let 与const

let 与const 除了都是快作用域 { } const不同的是声明必须赋值且不能更改。

模版字符串``

       var a="AAAAAA";
	   var str=`<div>${a}${a}</div>`;
	   document.querySelector("#div_1").innerHTML=str;

扩展运算符 …keys,接收参数

function fun1(obj,...keys){
  alert(keys[0]);//a
}
fun1({"name":"php"},"a","b","c")

//数组扩展运算法
var arrs=[1,5,4,9,5,3];
//找出数组中最大值
alert(Math.max(...arrs));

箭头函数

var fun1=(a)=>a*10;
var fun2=(a,b)=>a*b;
var fun3=(a,b)=>{return a*b};
alert(fun3(10,30))
document.querySelector("#div_1").innerHTML=fun1(10);

数组的扩展

Array.from();
1.将方法的参数转为数组

function aa(...keys){   console.log(Array.from(keys))} aa(1,2,"qqq")  //[1,2,"qqq"]

2.对数组进行遍历处理

console.log(Array.from([1, 2, 3], (x) => x + x));
// Expected output: Array [2, 4, 6]

3.将字符串转为数组

console.log(Array.from('foo'));
// Expected output: Array ["f", "o", "o"]

4.操作DOM

let ps = document.querySelectorAll('p');//获取所有P元素
Array.from(ps).filter(p => {//转成数组后,查找>100的元素
  return p.textContent.length > 100;
});

Array.of() 生成一个新数组,不考虑里面的类型

let a=Array.of('丽丽','北京',123);
console.log(a);//["丽丽", "北京", 123]

object.assign() 将多个对象合并为一个对象

Object.assign({"name":"php"},{"age":20})//{name: 'php', age: 20}

object.is()严格比较 === 比较值还比较类型

Object.is(1,1)//true
Object.is(1,"1")//false
Object.is(NaN,NaN)//true, ===就为false

Set()与Map() 两种新的数据结构

Set() 不能有重复值

var set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
// 去除数组的重复成员
[...new Set(array)]

Map()键值对的数组,key可以是任意类型

var m = new Map();
var o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o) // "content"

symbol 新增的数据类型

 表示独一无二的值,内部的指针地址,不一样
var s1 = Symbol('foo'); var s2 = Symbol('foo');    s1==s2 //false