ES6的几个新特性-JavaScript

ES6新特性

ECMAScript 6

严格模式

如果写在全局，则全局都是严格模式，如果写在函数内，则函数内是严格模式

"use strict"一定要写在第一行，全局第一行或函数中的第一行

1. 必须使用变量修饰符，否则报错
2. this不再指向window
3. 不能使用arguments.callee

"use strict"
//1.必须使用变量修饰符，否则报错
x='123';//报错

//2.this不再指向window
function play(){
    console.log(this);//this不再指向window
}
play();//结果为undefined

//3.不能使用arguments.callee
var obj = {
        sub() {
         //不能使用arguments.callee
           console.log(arguments.callee);
         }
      }
   obj.sub();
//'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

模板字符串（``）

解决2个问题：

1. 变量和字符串连接问题，不需要再使用加号拼接
2. 多组字符串拼接，不需要再使用引号和+号拼接

        var name = 111;
        var str = `${name}12345678912345678913456789
        987654321987654321987654321
        147${name}
        258258258258258258258
        369369369369369`
        document.write(str);

可以将变量直接加进去拼接

扩展运算符（…）

扩展运算符在函数中作为可变参数使用

//不论传多少个参数，都会被添加到这个数组中
function sum (name,...arr){
    console.log(name);
    console.log(arr);
}
sum(1,2,3,4,5);
sum("jack",1,2,3);
//第一条输出结果为：1  [2,3,4,5]
//第二条输出结果为：Jack [1,2,3]

注意：扩展运算符要写在形参的最后

默认参数

如果传参，则使用传进来的参数，如果不传参，则使用默认参数

//默认参数
function play(x=1,y=2){
    return x*y;
}
console.log(play());//2
console.log(play(2,3))//6

解构赋值

//1.字符串"how are you doing?"将每个单词放在一个单独变量里
var str = "how are you doing?";
[one,two,three,four]=str.split(" ");
console.log(one);//how
console.log(two);//are
console.log(three);//you
console.log(four);//doing

//2.可以在对应位置留空来跳过被解构数组中的某些元素
[,world,,] = str.split(" ");
console.log(world);//are

//3.结合“扩展运算符”来捕获数组中的所有尾随元素
[x,...y] = str.split(" ");
console.log(x); //how
console.log(y); //["are","you","doing?"]

//4.不用第三变量交换a和b的值
var a = "123aaa";
var b = "456bbb";
[a,b] = [b,a]
console.log(a);//456bbb
console.log(b);//123aaa

//5.对象的解构
var animal = {
    name:'xh',
    age:3,
    owner:'hh',
    sex:'m'
}
let {name,sex} = animal;
console.log(name);//xh
console.log(sex);//m

//6.对象当参数的解构
function play({owner}){
    console.log(owner);
}
play();//hh

typeof只能检测出来：string,number,boolean,function,undefined,object（null属于object）
instanceof可以用来检测类型,返回true或者false
console.log(y instanceof Date);//false
console.log(new Date() instanceof Date);//true

set集合

一种无序的、值必须唯一的数据集合

1. 创建set

const myset = new Set();

2. 给set添加值

myset.add("jack");

3. 判断某个值是否存在，存在返回true，不存在返回false。

console.log(myset.has("jack"));

4. 删除某个值

myset.delete("jack");

5. myset.keys()和myset.values()会返回所有的数据集合

6. 清空set

myset.clear();

7. 遍历

for(let i of myset){
    console.log(i);
}

for-of遍历：遍历的不是下标，而是值

for(let i of ['22','33','44']){
    console.log(i);
}
//22
//33
//44

面试题：数组去重

var list = ['11','22','33'];
//将数组转换为set集合，去掉重复值
var myset = new Set(list);
//将set集合转换为数组输出
console.log(Array.from(myset));

Array.from()可以将伪数组、set转换为普通数组。

Map集合

map集合是以key-value键值对的形式存储的，key不能重复

1. 创建

var m = new Map();

2. 给map添加数据

m.set("name","jack");
m.set("100",1000)

3. 根据key获取value

m.get("name");

4. 删除

m.delete("name");

5. 根据key来判断是否存在

console.log(m.has("name"));

6. 返回map中的所有key

console.log(m.keys());

7. 返回map中的所有value

console.log(m.values());

8. 返回map中的所有键值对

console.log(m.entries());
//{"name" => "jackie", 100 => 10000}

9. 遍历

m.forEach(function(value,key){
    console.log(key,value);
})
//name jack
//100 1000

10. 遍历返回数组

for(let i of m){
    console.log(i);
}
//["name","jack"]
//[100,1000]

11. 清空

m.clear();

---

set、map和数组的区别

set集合是无序的，值唯一。
map是有序的，索引为key，key唯一，value可以不唯一。
数组是有序的，索引为数组下标，下标唯一，数组的值可以不唯一。