前端入门-ES6必会语法

解构赋值

数组解构

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

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

ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];

解构默认值

let [a = 0, b, c] = [1, 2, 3];

对象解构

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

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

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

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

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

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

字符串

模版字符串

传统的 JavaScript 语言，拼接字符串如下：

let str = "大家好， 我叫" + name + ",今年" + age + "岁了, 是" + sex + "生"

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

let str = "大家好， 我叫${name}, 今年${age}岁了， 是${sex}生";

字符串模版的优点

• 允许换行
• 可以使用插值 ${}

字符串方法

• 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));

对象

简写

1- 在对象中，如果属性名和变量名相同的话，可以省略一个 2- 在对象中，方法也可以简写， 不写function

    let name = 'zs'
    let age = 18 

    // 在对象中，如果属性名和变量名相同的话，可以省略一个
    // 在对象中，方法也可以简写

    let obj = {
      name: name,
      age: age
    }

    let obj = {
      gender: '男',
      name,
      age
    }
    
    // 在对象中的方法可以简写
    // 不写function
    let obj = {
      // say: function () {}
      say(n1) {
        console.log(n1)
      }
    }
    
	//调用
    obj.say(1)

展开运算符

展开运算符（spread operator）允许一个表达式在某处展开。展开运算符在多个参数（用于函数调用）或多个元素（用于数组字面量）或者多个变量（用于解构赋值）的地方可以使用

1-展开数组

2-展开数组

      // 展开运算符:  ...
      const arr = [1, 2, 3]
      console.log(...arr)

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


      // const result = Math.max(...arr)
      // console.log(result)

      // ...还可以展开一个对象
      const obj = {
        name: 'zs',
        age: 18,
        gender: '男'
      }

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

      const obj2 = {
        ...obj,
        ...obj1,
        sayHi() {
          console.log('哈哈')
        }
      }
      console.log(obj2)

Set数据类型

Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用 ,　ES6提供了新的数据类型Set**，**Set对象不是数组， 可以用来保存对象或者基本类型， 所有保存的值都是唯一的

let set = new Set([1,2,3,4,4,4,4,4]);
console.log(set) // Set(4)  {1, 2, 3, 4} -->对象
console.log([...set]); //输出：[ 1, 2, 3, 4 ]  --> 数组