ES6初步学习

ES6

var let const 声明变量

let count = 10;
count = 20;
console.log(count)
const key="chen";
// key="gp"  -->会报错

//引用类型可以改变对象值
const person={
    name:'chen',
    age:18
}
//使用Object.freeze 禁止改变对象值
const cgp=Object.freeze(person)

var 函数作用域

let const 块级作用域

for (let i = 0; i < 10; i++) {
    setTimeout(() => {
        //使用var声明 i 会输出10个10
        //使用let声明 i 会输出1到10					
        console.log(`i:${i}`)
    }, 1000)
}

ES6 临时性死区(Temporal Dead Zone)

//let 和 const 也有变量提升
//但在声明之前引用会报 ReferenceError
console.log(color);//Uncaught ReferenceError: color is not defined
let color='red';

平时怎样使用 var let const

• 默认情况下使用const
• 当变量需要重新改变时使用let
• 尽量不使用var

ES6 箭头函数

const nums = [5, 6, 7];
const double = nums.map(function(num) {
    return num * 2;
}) //[10, 12, 14]

//箭头函数跟Java的Lambda语法很像
const double2 = nums.map(num => {
    return num * 2;
}) //[10, 12, 14]

//简写
const double3 = nums.map(num => num * 2) //[10, 12, 14]

const double4 = nums.map((num, i) => `${i}:${num * 2}`) //["0:10", "1:12", "2:14"]

const map = nums.map(() => "hello") // ["hello", "hello", "hello"]

function greet(name) {
    alert(`Hello ${name}`)
}
//匿名函数需要先赋值
const greet2 = name => {
    alert(`Hello ${name}`)
}

greet2("chen")

ES6 快速给函数参数赋默认值

function multiply(a = 5, b = 3) {
    return a * b;
}

控制台调用输出

multiply()
15
multiply(3)
9
multiply(undefined,2)
10
multiply(5,6)
30

ES6 模板字符串

const person = 'Chen';
const age = 5;
const sentence = `${person} is ${age*5} years old.`

const template = `

hello

`

ES6 中的 for-of 循环

const friuts = ['Apple', 'Banana', 'Orange', 'Mango'];
for (var i = 0; i < friuts.length; i++) {
    console.log(friuts[i])
}

friuts.forEach(friut => {
    //不能使用 break  continue
    if (friut === 'Banana') {
        //	break;
        //  continue;
    }
    console.log(friut);
})

for (let index in friuts) {
    console.log(friuts[index])
}

//for-of 循环不支持对象
for (let friut of friuts) {
    //可以使用 break  continue
    if (friut === 'Banana') {
        break;
    }
    console.log(friut);
}

for (let friut of friuts.entries()) {
    console.log(friut);//同时打印索引和内容 [0, "Apple"] ...
}

for (let [index,friut] of friuts.entries()) {
    console.log(friut);//只打印名称
}

ES6 数组的新方法

*类似于 Java8 中的 Stream 流

const fruits = [
    {
    name: 'apples',
    quantity: 2
	},
    {
        name: 'bananas',
        quantity: 4
    },
    {
        name: 'cherries',
        quantity: 0
    }
]

//.find()
const bananas = fruits.find(fruit => fruit.name = 'bananas');
console.log(bananas)

//.findIndex()
const bananasIndex = fruits.findIndex(fruit => fruit.name = 'bananas');
console.log(bananasIndex)

//some()
const isEnough = fruits.some(fruit => fruit.quantity > 0);
console.log(isEnough)

//every()
const isAllEnough = fruits.every(fruit => fruit.quantity > 0);
console.log(isAllEnough)

ES6 扩展运算符

const arr = [...'Manaphy'];
console.log(arr) //["M", "a", "n", "a", "p", "h", "y"]

const arr1 = ['a', 'b', 'c'];
const arr2 = ['e', 'f', 'g'];
const arr3 = [...arr1, 'd', ...arr2]
console.log(arr3) //["a", "b", "c", "d", "e", "f", "g"]
const arr4 = arr3;
console.log(arr3 === arr4) //true
const arr5 = [...arr3]
console.log(arr3 === arr5) //false

ES6 对象字面量的扩展

const name = 'chen';
const age = 18;
const height = 1.88;

const person = {
    //属性简写
    name,
    age,
    height,
    //方法简写
    greet() {
        alert(`Hello ${this.name}`)
    }
}

let id = 0;
//计算属性
const userIds = {
    [`user-${++id}`]: id,
    [`user-${++id}`]: id,
    [`user-${++id}`]: id,
}
console.log(userIds) //{user-1: 1, user-2: 2, user-3: 3}

const keys = ['name', 'age', 'height']
const values = ['chen', 18, 1.88]
const chen = {
    [keys.shift()]: values.shift(),
    [keys.shift()]: values.shift(),
    [keys.shift()]: values.shift(),
}
console.log(chen) //{name: "chen", age: 18, height: 1.88}