ES6中新增的常用语法

变量

ES6中提供了两个声明变量的关键字：const和let

let的使用

ES6 新增了let命令，用来声明变量。它的用法类似于var。

• let声明的变量只有在当前作用域有效

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

 

• 不存在变量提升

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

• 不允许重复声明

let a = 10;
let a = 1;//报错 Identifier 'a' has already been declared

const的使用

const声明一个只读的常量。常量：值不可以改变的量

• const声明的量不可以改变

const PI = 3.1415;
PI = 3; //报错

• const声明的变量必须赋值

const num; // 报错

• 如果const声明了一个对象，仅仅保证地址不变

const obj = {name:'zs'};
obj.age = 18;//正确
obj = {};//报错

• 其他用法和let一样

1. 只能在当前代码块中使用
2. 不会提升
3. 不能重复

let与const的使用场景

1. 如果声明的变量不需要改变，那么使用const
2. 如果声明的变量需要改变，那么用let
3. 学了const和let之后，尽量别用var

解构赋值

数组解构

以前，为变量赋值，只能直接指定值。

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

解构默认值

let [a = 5, b, c] = [1, 2, 3]; // 如果a没有被赋值，那么a的值为默认值5

对象解构

解构不仅可以用于数组，还可以用于对象。

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
console.log(foo) // "aaa"
console.log(bar) // "bbb"

如果变量名与属性名不一致(取别名)，必须写成下面这样。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
console.log(baz) // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
console.log(f) // 'hello'
console.log(l) // 'world'

函数的参数也可以使用解构赋值。

function add([x, y]){ // 相当于 let [x, y] = [1, 2]
  return x + y; 
}
let arr = [1, 2]
add(arr); // 3


function sayHi({ name, age, hobby }) { // 相当于 let { name, age, hobby } = person
        console.log(
          '大家好，我是' + name + ',我今年' + age + '我的爱好是' + hobby
        )
      }
let person = {
        name: 'hcc',
        age: 18,
        hobby: '敲代码'
}
sayHi(person)

函数参数的默认值

function fn(a = 1, b = 1){ // 如果函数调用的时候没有给实参，那么就会使用它的默认值
  console.log(a) // 1
}
fn()

字符串

模版字符串

传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

字符串模版的优点

• 允许换行

• 可以使用插值 ${}

字符串方法

 

• includes()：返回布尔值，表示是否找到了参数字符串。

• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。

• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

数组

find

find是ES6新增的语法

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

// 获取第一个大于10的数
var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 10;
});
console.log(found);

 

findexIndex

findIndex是ES6新增的语法

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

// 获取第一个大于10的下标
var array1 = [5, 12, 8, 130, 44];

function findFirstLargeNumber(element) {
  return element > 13;
}

console.log(array1.findIndex(findFirstLargeNumber));

rest参数

es6中新增了一个 rest参数， 剩余参数

剩余参数必须是最后一个参数

 rest参数 剩余参数

 arguments: 没有定义参数， 别人用的时候不知道传什么参数

const add = function(num, ...colors) {
  // colors会接收除第一个参数外剩余的所有的参数
  console.log(arguments) // 1 2 3 4
  console.log(num) // 1
  console.log(colors) // 2 3 4
}
add(1, 2, 3, 4)

展开运算符: ...

展开一个数组

const arr = [1, 2, 3]
console.log(...arr) // 1 2 3

const arr = [1, 2]
const arr2 = [4, 5]
const newArr = [...arr, ...arr2, 6, 7, ...arr]
console.log(newArr) // 1 2 4 5 6 7 1 2

const arr = [1, 2, 3, 5, 4, 7, 6]
// 求最大值
const result = Math.max(...arr)
console.log(result) / 7

展开一个对象

      const obj = {
        name: 'zs',
        age: 18,
        gender: '男'
      }

      const obj1 = {
        money: 100,
        house: '房子'
      }

      // vuex  vue
      const obj2 = {
        ...obj,
        ...obj1,
        sayHi() {
          console.log('哈哈')
        }
      }
    console.log(obj2)
    //     {
    //      name: 'zs',
    //      age: 18,
    //      gender: '男',
    //      money: 100,
    //      house: '房子',
    //      sayHi() {
    //        console.log('哈哈')
    //      }
    // }

set集合

ES6中新增了一种数据类型 Set

Set类型和数组非常的像， set中的数据不允许重复

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
let newSet = new Set(arr)
arr = [...newSet]
console.log(arr) // 1 2 3 4 5