ES6 第一弹

Author Avatar
芝士君 3月 28, 2017
  • 在其它设备中阅读本文章

前言

其实之前有稍微得了解到ES6,但是自己ES5都写的不好,所以将它放了一段时间
之后写JS就都使用ES6的语法了,毕竟好用
完整的ES6语法可以看阮一峰老师的ECMAScript 6 入门
我就码下一些觉得比较有用的小知识点

let 和 const

let定义变量,const定义常量
让ES6增加了块级作用域

  • let

    {
     var a = 5;
     let b = 5;
    }
    a  // ReferenceError: a is not defined.
    b  // 5
    

    let 不能重复声明
    并且let定义的值拥有块级作用域,不会污染到全局变量

  • const

    const a = 5;
    const cheesekun = { name: cheesekun, sex: man};
    
    a = 6;  // Assignment to constant variable
    cheesekun.name = "kuncheese";  //"kuncheese"
    

    const 定义的常量不能修改,但是定义的对象的属性值可以修改

解构赋值

从数组和对象(或者其他可便利对象,如字符串)中提取值,对变量进行赋值

// 给变量赋值
let [a, b, c] = [1, 2, 3]; 
let [x,y,z] = "kun";
let {age, name} = {name:"cheesekun", age: 19};
a  //1
x  //"k"
name //"cheesekun"

//数值交换
let [i,j] = [1, 5];
[i,j] = [j, i];
i  //5

//函数传参
function f([x, y, z]) { ... }
f([1, 2, 3]);

//快速获取JSON数据
let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]

模板字符串

用反引号 ` 标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
我们以前写大段的innerHTML都是使用 + 号连接,
现在有模板字符串,无须 + ,并且可以回车排版

const name = "cheessekun"
console.log(`
  我是${name},
  我居然可以换行 
`)             //cons出来的也是有换行的

//大段innerHTML
let a = document.createElement("a");
a.innerHTML = `
  <strong>我是${name},</strong>
  <i>我居然可以换行</i> 
`
a.setAttribute("href","cheesekun.top")

// 调用函数
function fn () {
  return 'llo Wor'
}
console.log(`He${fn()}ld.`) // Hello World

Number的变化

之前许多全局的方法都移植到了原生 Number 对象方法,不使用全局变量

// 原有写法,还是可以使用,但要避免使用
parseInt('12.34') // 12
parseFloat('123.45#') // 123.45
isFinite(25) // true
isNaN(NaN) // true

// ES6 的写法
Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45
Number.isFinite(25) // true
Number.isNaN(NaN) // true

Math.sign()方法。判断一个数是正数,负数,还是0;

 Math.sign(-5) // -1
 Math.sign(5) // +1
 Math.sign(0) // +0
 Math.sign(-0) // -0
 Math.sign('foo'); // NaN

Array的拓展

from()

把类数组对象(有length属性)/可遍历对象转化为数组

find()和findIndex()

找出第一个符合条件的数组成员, 和下标,参数是一个回调函数

includes()

返回一个布尔值,表示某个数组是否包含给定的值,和字符串的includes()方法类似

//Array.from()
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

//Array.find()  参数有[值],[下标],[数组]
[1, 4, -5, 10].find((n) => n < 0);  // -5

//Array.findIndex()
[1, 5, 10, 15].findIndex((value, index, arr) => {
  return value > 9;
})   // 2

//Array.includes()
[1,2,3].includes(2)  //true

for-of

Array, Map, Set, String, TypedArray,arguments 对象等等
不能遍历普通对象
for-in遍历所有可枚举的属性, 不推荐用来遍历数组,防止迭代次序出错
for-of遍历可迭代对象的属性值

let a = [1,2,5,9,2];
a.name = "Array";
for(let i in a){console.log(i)}  //0,1,2,3,4,name
for(let i of a){console.log(i)}  //1,2,5,9,2
let b = {name:"whs",age:18};
for(let i in b){console.log(i)}  //name,age  
for(let i of b){console.log(i)}  //Uncaught TypeError

//遍历NodeList对象
let nodeList= document.querySelectorAll("article > p");

for (let node of nodeList) {
  node.className = "read";
}

结语

第一弹结束。更重要的箭头函数,class留下一弹吧