ES6新特性

ES6特性

ES6(ECMAScript2015)也就是ECMAScript6。因为2015年发行第六版，所以有两个名字ES6或者ECMAScript。ES6之后，ECMA每年都会准时更新，之前不会准时更新

获取div对象

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

let items = document.getElementsByClassName("item"); //将class为item的元素放在items，形成一个list items是一个里面放div的块对象数组

// 遍历这个list
for(let i=0;i<items.length.i++){
    items[i].onclick = function(){
        items[i].style.background = "pink";
    }
}

let和const的相同点

• 都是只在声明的块级作用域内有用

let和const的不同点:

• let声明的变量可以改变，而且是类型和值都可以改变！，const声明的常量不能改变，必须一旦声明就立即初始化。

  let x = 3;
  x = 4;
  ===============
  const x = 4; // 之后就不能在变了

ES6中的let和const取代了ES5中的var，让代码更安全。

const特性

const修饰的常量不能做修改，But,const修饰的数组和对象却是可以修改...

const NAME = 'fenn';
NAME = 'jiaying';  // 错误

const NAMES = ['wei','fenn','jiaying'];
NAME.push('wang')  

数组和对象的解构

// 数组的解构
const F4 = ['刘备','关羽','张飞'];
let [L,G,Z] = F4; // 完成解构，L变量存储的是刘备

// 对象的解构
const zhao = {
    name:'刘备',
    age:23,
    work:function(){
        console.log('三顾茅庐');
    }
}
const {name,age,work} = zhao; 
console.log(name);
work(); // 函数执行;

// 函数和对象解构的结合
function connect({host="99.11.6.106",username,password,port}){ //形参也能赋默认值
    console.log(host);
    console.log(username);
    console.log(password);
    console.log(port);
}

connect({
    host:"localhost",
    username:"root",
    password:"root",
    port:3306,
});

模板字符串``

也是一种字符串.这种字符串中可以存在换行符

let str = `<ul>
            <li>刘备</li>
            <li>关羽</li>
            <li>张飞</li>
            </ul>`;

另外，可以更方便的进行字符串拼接

let str1 = '刘备';
let str2 = '蜀中${str1}' // str2 蜀中刘备

对象简化写法

可以直接将变量和函数写入对象中

let name = '刘备';
let change = function(){
    console.log('Hello,chengdu')
}

const Liu = {
    name,
    change,
    f(){   // 这样也是一种简化，写全应该是f:function()
        ...
    }
}

箭头函数

箭头函数相比普通函数。它的this是静态的，不会因为call、apply方法的改动而变，箭头函数里面的this永远指向的是函数所处的对象

window.name = '刘备'
const WEI = {
    name:'曹操';
}
let getName = () => {
    console.log(this.name);
}

function getName2(){
    console.log(this.name);
}

// 直接调用
getName();
getName2();         // 一样的都是输出 刘备

// call改变指向 调用
getName.call(WEI);  // 由于getName是箭头函数 不会被改变指向
getName2.call(WEI); // 由于是普通函数，call指向WEI对象，getName2中的this就会变成WEI

这里也可以更好地理解call、apply、bind的作用.

箭头函数不能作为构造函数实例化对象。也就是说，实例化对象使用的函数仍然用的是普通函数

let Person = (name,age) =>{   //当函数被用作构造的时候，还是只能使用function型函数
    this.name = name;
    this.age = age;
}
function Person(name,age){
    this.name = name;
    this.age = age;
}

let me = new Person('刘备',23);

不能使用arguments形参

箭头函数最常用的用处还是this

// 这个例子来体会this指向
const obj1 =  {
    name:'刘备',
    getName:function(){
        this.name; // 普通函数 this指的是obj1
    }
}

const obj2 =  {
    name:'刘备',
    getName:() => {
        this.name; // 箭头函数 this指向的是window，不是obj2
    }
}

filter()函数

1. filter函数会返回一个新的数组，不会修改原来函数
2. 参数是一个函数
3. 参数里的匿名函数中的item会依次执行这个函数,匿名函数返回true，则会保留在新的数组里

let nums = [1,2,3,4,5,6,7,8,9,10];
let nums2 = nums.filter((item) => {
    if(item %2 === 0){
        return true;
    }else{
        return false;
    }
})

形参设置默认值

这个特性很多语言也有。

function add(a,b,c=10){
    return a+b+c;
}
console.log(add(1,1)) // 输出12

rest参数和arguments参数

与arguments参数比较类似，功能也相似

function fn(){
    console.log(arguments); // arguments参数不用主动定义，可以直接用;输出的是对象
}
fn("w","n","z");

function fn1(...args){
    console.log(args); // 输出的是一个数组
}

fn("王菲","那英");

function fn2(x,y,...args){
    console.log(args); // 输出的是数组[3,4,5,6,7]
}
fn2(1,2,3,4,5,6,7)

关于arguments参数的理解和使用，可以看这篇博客arguments参数的理解和使用

扩展运算符

作用:将一个数组中内容，展开成多个变量。简单来说就是扔掉数组标记[]

const tfboys = ["王俊凯","易烊千玺","王源"];

function chunwan(){
    console.log(arguments);
}
chunwan(tfboys); // 控制台输出arguments个数只有一个,但是一个数组
chunwan(...tfboys)// 使用扩展运算符后,arguments.length是3 分别是 "王俊凯","易烊千玺","王源"

数组合并:

const list1 = ["a","b"];
const list2 = ["c","d"];
const list12 = [...list1,...list2];

数组对象转成数组:

<div></div>
<div></div>
<div></div>

const divs = document.querySelectorAll("div"); // 这是一个数组对象
const divArray = [...divs] // 这时候才转成数组

数组拷贝:

const A = ["e","g","m"];
const B = [...A] //又得到一个一模一样的数组B

数据类型symbol

Symbol是JS特有的数据类型

let s = symbol("symbol"); // 独一无二的一种数据类型

1. 经常给对象添加属性和方法
2. Symbol函数接受一个可选的字符串，是为了增加对Symbol的描述
3. 用Object.getOwnPropertyNames(),Object.keys()或者for ... in 方法遍历对象，无法遍历到symbol属性
4. 用Object.getOwnPropertySymbols)()则可以返回所有symbol属性
5. symbol属性不能new
6. symbol.for()创建共享symbol，如果已存在，直接返回第一个symbol

emperor = {}
const bastard1 = Symbol.for("如花");
emperor[bastard1] = "如花的儿子";
const bastard2 = Symbol.for("如花");
emperor[bastard2] = "如花的儿子";
const bastard3 = Symbol.for("似水");
emperor[bastard3] = "似水的儿子"
console.log(emperor); // 只会输出两个symbol  symbol["如花"]="如花的儿子" symbol["似水"]="似水的儿子"

console.log(bastard1 === bastard2) // 因为使用symbol.for创建，所以===成立 true
console.log(symbol() === symbol()) // false 因为symbol创建的唯一性

iterator

可以用原生附带迭代器的数据类型有

Array、arguments 、set、map、string。

不确定有没有itrator的话，可以输出对象，在对象中寻找有没有symbol.iterator属性,有的话就可以使用迭代器

const xiyou = ["唐僧","孙悟空","猪八戒","沙僧"];

for(let v of xiyou){ // for in的话输出的会是数组下标
    console.log(v);
}

迭代器symbol.iterator自己也是一个对象，可以打印输出。里面有一个方法next()。我觉得理解最重要的就是要知道iterator是一个对象，而不是一个普通的指针。以前的理解有偏差

生成器函数

略

Ajax