1.新增数据类型Symbol。【Number、Boolean、Symbol、Null、Undefined、Object】
Symbol类型的值通过Symbol函数生成，相同的Symbol函数返回的值 是唯一的
Symbol函数可以接收字符串作为参数，但是即使相同参数返回的值 也是唯一的，即Symbol('a') != Symbol('a')
代码实例
/* * Symbol * 传入相同的值，但他内部存储的值不相同 */ var s1=Symbol(); var s2=Symbol(); // console.log(typeof s1) console.log(s1, s2) var s3=Symbol('miaov'); var s4=Symbol('miaov'); console.log(s3, s4) console.log(s3==s4) // false /************************************************************/ var Preson =(function () { let _gender = Symbol('gender'); //属性私有化 function P(name,gender) { this.name = name; this[_gender]=gender; } P.prototype.say = function () { console.log(this[_gender]) // } return P; })() var p1 = new Preson('张三','男'); console.log(p1); // {name: "张三", Symbol(gender): "男"} // console.log(p1[Symbol('gender')]) //undefined
2.let与const
let:
不支持变量声明预解析（先声明后使用）
支持块作用域
不允许重复声明
const:
不支持变量声明预解析（先声明后使用）
支持块作用域
不允许重复声明
常量（值一旦确定，不允许修改，所以必须初始化）
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
button.ac{
background-color: #00a0e9;
}
p{
display: none;
}
p.ac{
display: block;
}
</style>
</head>
<body>
<button class="ac">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<p class="ac">内容1</p>
<p>内容2</p>
<p>内容3</p>
<script>
var buttons = document.querySelectorAll('button');
var ps = document.querySelectorAll('p');
//
// for(var i=0;i<buttons.length;i++){
// buttons[i].index=i
// buttons[i].onclick=function () {
// for (var i=0;i<buttons.length;i++){
// buttons[i].className=''
// ps[i].className=''
// }
// this.className='ac'
// ps[this.index].className='ac'
// }
// }
for(let i=0;i<buttons.length;i++){
buttons[i].onclick=function () {
for(let i=0;i<buttons.length;i++){
buttons[i].className=''
ps[i].className=''
}
this.className='ac'
ps[i].className='ac'
}
}
</script>
</body>
</html>
3.解构赋值与扩展运算符
允许按照一定的模式，从数组和对象中提取值，并对变量进行赋值，这被称为解构赋值
数组解构
let [a,b,c] = [1,2,3]
-顺序对应
对象解构
let {for,bar}={foo:"aaa",bar:"bbb"}
- key值对应.
若key值 被占用可以使用别名
let {left:L,top:T}={left:100,top:200}
let {foo:[a,b]}={foo:[10,20],bar:"bbb"}
4.扩展运算符 ...
...
把数组/对象转成参数序列（使用逗号分隔的序列）
['a','b','c']=>'a','b','c'
[left:100,top:200] => left:100,top:200
例：数组对象合并
var arr = [1,2,3,4,6,8,9] console.log(Math.max(...arr)) //求最大值 var arr1 = [1,2,3,4,6,8,9] var arr2 = ['a','b','c'] console.log(...arr1,...arr2) //合并 console.log(...arr1,'a',...arr2) //合并中还可以插入其他元素
5.字符串扩展
unicode表示法
console.log('u4e01')
console.log('u{1F602}') //{}就是扩展
模版表示法 ``
`` 反引号，保持字符串内容
变量表达式解析：`${表达式}`
var str = ` <ul> <li></li> </ul> <h1>${1+1}</h1> <h1>${Math.random()}</h1> ` console.log(str)
6.数值扩展
var a=0b10 //二进制 2 var b=010 //八进制 8 var c=10 //十进制 10 var d=0x10 //十六进制 16
7.属性名表示式
var x = 'aaa'
var obj1 ={
[a] :1
}
// obj[x] = 1
8.迭代
迭代协议 ：规定了迭代与实现的逻辑
迭代器：具体的迭代实现逻辑
迭代对象：可被迭代的对象 - [Symbol.iterator]方法
迭代语句：
for...in ：以原始插入的顺序迭代对象的可枚举属性 【打印的是key值 var arr = ['a','b','c'] for(var attr in arr){console.log(attr)} //0,1,2】
for...of：根据迭代对象的迭代器具体实现迭代对象数据 【打印的是值，且必须是一个可迭代对象 var arr = ['a','b','c'] for(var attr of arr){console.log(attr)} //a,b,c】
对象冻结
const arr = Object.freeze([1,2,3]) //freeze冻结
arr.push(4)//无法操作
9.函数扩展
函数参数默认值 .
function fn4(obj={x:1,y:2}){ console.log(obj) } fn4({x:10,y:20})
rest 剩余参数
//老写法 //function arrayPush(arr,x,y,z){ function arrayPush(){ //不定参 var arr = arguments[0] for(var i=1;i<arguments.length;i++){ arr.push(arguments[i]) } } var arr1 = [1,2,3] arrayPush(arr1,'a','b','c') console.log(arr1) //es6写法 function arrayPush6(arr,...newData){ //从第二个参数开始，后面的数据全部赋值给newData这个参数 //注意：剩余参数只能写在形参列表的最后面 for(var i=0;i<newData.length;i++){ arr.push(newData[i]) } } arr1=[1,2,3] arrayPush6(arr1,'a','b','c') console.log(arr1)
10.箭头函数
()=>{}
let fn4 = x => x + 100 ,只有一个参数里，小括号()可以省掉，方法体{}也可以省掉
箭头函数注意事项：
a.内部this对象指向创建期上下文对象 【普通函数的this指向是在函数的执行期绑定的(确定的)】
b.不能作为构造函数
c.没有arguments
d.不能作为生成器函数
function fn6(){ console.log(this) } fn6(); //指向window var obj ={} obj.f = fn6; obj.f(); //指向obj document.onclick =fn6; 指向触发该事件的对象document //箭头函数的this在函数创建期间就绑定好了，箭头函数的this指向创建该箭头函数所在的作用域对象(this) let fn7 =()=>{ console.log(this) }
fn7();
document.onclick = fn7; //fn7内部的this永远都是fn7函数声明的时候所在的this对象
11.新增内置对象 【https://developer.mozilla.org】API文档
String 、Number 、Array 、Object 、Set 、WeakSet 、Map 、WeakMap
String
startWith()
endWith()
includes() //判断 字符串是否包含某个字符
repeat() //复制字符串，若有参数则为执行次数
Number
isFinite()
isNaN()
parseInt()
parseFloat()
Array
includes() //判断数组中是否包含某个值
every()
some()
filter()
map()
reduce()
var arr1 = ['a','b','c']; arr1.forEach(function(v,k,s){ console.log(v,k,s) console.log(this) },arr1) //写一个方法实现上面的迭代功能 function forEach(data,callback,context){ for(var i=0;i<data.length;i++){ callback.call(context,data[i],i,data) } } forEach(arr1,function(v,k,s){ console.log(v,k,s) console.log(this) },1) //every() let arr2 = [1,6,3,5,8,10] //可以做全选功能 let rs = arr2.every(v=>{ //取出数组中每一个组与5对比，都大于5返回ture,只要有一个小于5,则返回false return v>5; }) console.log(re) //some()与every()相反 //filter() //过滤，从原数组中过滤后把结果组成一个新数组，新数组的值是源数组中的一个，但是长度可能不一致 let arr3 = arr2.filter(v=>{ return v>5; }) console.log(arr3) //map() //一一映射，新数组的值可以和源数组不一致，但是长度是一致的 let arr4 = arr2.filter(v=>{ return v * 10; }) console.log(arr4) //reduce() //拆分步骤 可用在购物车累加商品价格 let arr5 = arr2.reduce(function(prev,current){ return prev + current; ),0) //0表示初始值 console.log(arr5)
Object
Object.assign() //浅拷贝
Object.create() //创建对象原型
Object.freeze() //冻结
Object.defineProperty()
Set //类似数组，但是值 是无序的，无重复值
//集合：它类似于数组，但成员都是唯一的，没有重复的值，并且是无序的
Set是一个构造函数，可以传入一个可迭代对象初始化默认值
//利用不可重复特性，可以实现去重 let arr1 = ['a','b','c','a'] arr1=[..new Set(arr1)]