1. 什么是ES6?

ES的全称是ECMAScript ,它是由ECMA国际标准化组织,制定的一项脚本语言的标准化规范。其中的6代表这个规范的版本。

js ES6 版本 怎么设置_字符串

ES6实际上是一个泛指，泛指ES2015及后续的版本。

1.1 let关键字

  • let声明的变量只在所处于的块级有效(所谓的块级作用域就是指的是一个大括号内的区域)
if (true) {
      let a = 10;
    }
    console.log(a);// a is not defined.
for (let i = 0; i < 100; i++) {// 括号1
      if (true) {// 括号2
        console.log(i);// 在这个大括号内部可以方位 i 因为 这里的输出语句仍在 括号1 里面
      }
    }
这个特性可以放在循环变量变为全局变量
  • let关键字声明的变量不存在变量提升
console.log(a);
    let a = 100; // Cannot access 'a' before initialization
这个特性表明let关键字声明的变量必须先声明再去使用
  • let关键字声明的变量具有暂时性死区的特点
var a = 10;
    if (true) {
      /* 因为下面用let定义了a 所以这个这里不能直接输出上面的 a
        而是转向下面去寻找a 这个特点被称为暂时性死区*/
      console.log(a);// Cannot access 'a' before initialization
      let a = 100;
    }
  • let关键字经典面试题
    下面这段代码的输出是什么：
var arr = [];
    for (var i = 0; i < 2; i++) {// 这里是i用var关键字声明
      arr[i] = function () {
        console.log(i);
      };
    }
    arr[0]();// 2
    arr[1]();// 2

js ES6 版本 怎么设置_js ES6 版本 怎么设置_02


请看下面这段代码的输出又是什么：

var arr = [];// 这里是i用let关键字声明
    for (let i = 0; i < 2; i++) {
      arr[i] = function () {
        console.log(i);
      };
    }
    arr[0]();
    arr[1]();

js ES6 版本 怎么设置_字符串_03

2. const关键字

作用:声明常量，常量就是值(内存地址)不能变化的量。

  • const关键字声明的常量具有块级作用域
if (true) {
      const a = 100;
    }
    console.log(a);// a is not defined

请思考下列代码依次输出什么值？

if (true) {
      const a = 100;
      if (true) {
        const a = 10;
        console.log(a);// 10
      }
      console.log(a);// 100
    }
    console.log(a);// a is not defined
  • const关键字声明的常量必须赋予初始值
const a;
      console.log(a);// Missing initializer in const declaration
  • const关键字声明的常量值不能更改
    1.普通数据类型的值，值不能更改
const PI = 3.1415926;
    PI = 100;
    console.log(PI);// Assignment to constant variable

引用数据类型的值，内存地址不能更改

const ary = [100, 200];
    ary[0] = "a ";
    ary[1] = "b ";
    console.log(ary);
    // 这里更改了数组在内存里面的地址
    ary = ["a ", "b "]; // Assignment to constant variable.

3. let，var，const关键字的区别

  • 1.使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
  • 2.使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
  • 3.使用const声明的是常量，在后面出现的代码中不能再修改该常量的值,常用来声明函数等。

4. 解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值。
对象也可以实现解构。
如果解构不成功,变量的值为undefined(即没有对应的数据给解构的数据赋值)
  • 数组解构
//数组解构允许我们按照一一对应的关系从数组中提取值然后将值赋值给变量
    var arr = [1, 2, 3];
    var [a, b, c, d] = arr;
    console.log(a);// 1
    console.log(b);// 2
    console.log(c);// 3
    console.log(d);// undefined
  • 对象解构
//对象解构允许我们使用变量的名字匹配对象的属性
    //匹配成功将对象属性的值赋值给变量
    let person = { name: "zhangsan", age: 18 };
    // 注意这里的name,age是和对象的属性名一致的
    let { name, age } = person;
    console.log(name);// zhangsan
    console.log(age);// 18
  • 起别名的操作
let person = { name: "zhangsan", age: 18 };
    //myName,myAge分别是name和age的别名
    let { name: myName, age: myAge } = person;
    console.log(myName); // zhangsan
    console.log(myAge); // 18

5. 箭头函数

ES6中新增的定义函数的方式。
() => {}const fn = () => {}

5.1 箭头函数的特点

  • 1.函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
var a=10;
    const add = (num1, num2) => num1 + num2;
    console.log(add(1, 2));// 3
  • 2.如果形参只有一个，可以省略小括号
const returnA = a => {
      alert(a);
    };
    returnA(10);// 弹窗 10
  • 3.箭头函数不绑定this箭头函数没有自己的this关键字如果在箭头函数中使用this,this关键字将指向箭头函数定义位置中的this
var obj = { name: "张三", age: "十八" };
    function fn() {
      //this关键字将指向箭头函数定义位置中的this
      return ()=>{
        console.log(this);
      }
    }
    fn.call(obj);// call函数的第一个参数的意思是 将这个函数内部的this指向obj对象
    var result=fn.call(obj);
    result();// obj

5.2 箭头函数经典面试题

// 这个age是定义在全局作用域window对象下面的
    var age = 100;
    var obj = {
      age: 10,
      // 箭头函数的this指向定义区域的this,因为定义在obj对象里面,但是
      // 对象不可以产生作用域,所以这里的this指向的是全局作用域下的age
      sayAge: () => {
        console.log(this.age);
      },
    };
    obj.sayAge();//100

6. 剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。 

const add = (...args) => {
      var sum = 0;
      for (let i = 0; i < args.length; i++) {
        sum += args[i];
      }
      return sum;
    };
    console.log(add(1, 2, 3, 4, 5, 6)); // 21

6.1 剩余参数可以和解构配合使用

let arr = ["漳卅", "李斯", "长安"];
    let [s1, ...s2 ] = arr;
    console.log(s1);// 漳卅
    console.log(s2);// 李斯, 长安

7. Array 的扩展方法

扩展运算符（展开语法)
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。

let arr = [1, 2, 3, 4, 5, 6, 7, 8];
    console.log(...arr);//1 2 3 4 5 6 7 8
    // 这里没有输出逗号是因为逗号是log方法的参数分割符

7.1扩展运算符可以运用在合并数组上

方法一:
let arr1 = [1, 2, 3];
    let arr2 = [4, 5, 6];
    let arr = [...arr1, ...arr2];// [1, 2, 3, 4, 5 ,6]
方法二:
let arr1 = [1, 2, 3];
    let arr2 = [4, 5, 6];
    arr1.push(...arr2); // [1, 2, 3, 4, 5 ,6]

7.2 拓展运算符可以将类数组或可遍历对象转换为真正的数组

var divs = document.getElementsByTagName("div");// 这里获取的div的集合
    console.log(divs);
    var arrDiv = [...divs];
    console.log(arrDiv);//[div, div, div, div, div, div]

构造函数方法:Array.from()
将类数组或可遍历对象转换为真正的数组

var arrayLike = {
      // 必须对应数组的下标 0, 1, 2...
      0: "1",
      1: "2",
      //必须有length这个属性
      length: 2,
    };
    // 第一个参数为要转换的类数组或者对象,第二个参数为要对这里面的每一个元素进行的操作
    var ary = Array.from(arrayLike, (item) => item * 2);
    console.log(ary);// [2, 4]

实例方法: find()
用于找出第一个符合条件的数组成员，如果没有找到返回undefined

let ary = [
    {
      id: 1,
      name: "张三",
    },
    {
      id: 2,
      name: "李四",
    },
  ];
  let target = ary.find((item, index) => { return item.id == 2 }
  );
  console.log(target);//     id: 2, name: "李四"

实例方法:findIndex()
用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

let ary = [
    {
      id: 1,
      name: "张三",
    },
    {
      id: 2,
      name: "李四",
    },
  ];
  let target = ary.findIndex(item => { return item.id == 2 }
  );
  console.log(target);// 1

实例方法:includes()
表示某个数组是否包含给定的值，返回布尔值。

let arr = [1, 2, 3, 4, 5, 6];
  console.log(arr.includes(2));// true

8. 模板字符串

模板字符串可以解析变量

// 模板字符串是反引号定义的
  var name = 'zhangsan';
  console.log(`我的名字是${name}`);// 我的名字是zhangsan

模板字符串可以换行显示

let result = {
    name: "zhangsan", age: 20
  };
  let html =
`<div>
  <span>${result.name}</span>
  <span>${result.age}</span>
</div>`;
console.log(html);
/* <div>
  <span>zhangsan</span>
  <span>20</span>
</div> */

模板字符串中是可以调用函数的

const sayHello = () => {
    return '我就是这么强大';
  }
  console.log(`${sayHello()}哈哈哈哈哈哈哈`);// 我就是这么强大哈哈哈哈哈哈哈

9. String 的扩展方法

实例方法: startsWith()和endsWith()

  • startsWith):表示参数字符串是否在原字符串的头部，返回布尔值
  • endsWith():表示参数字符串是否在原字符串的尾部，返回布尔值
let str='Hello World';
console.log(str.startsWith('Hello'));// true
console.log(str.endsWith('World'));// true

实例方法:repeat()
repeat方法表示将原字符串重复n次，返回一个新字符串。

let str = 'wWw';
  console.log(str.repeat(5));// wWwwWwwWwwWwwWw

10. Set数据结构

ES6提供了新的数据结构Set。它类似于数组，
但是成员的值都是唯一的，没有重复的值.
Set本身是一个构造函数，用来生成 Set 数据结构。
let s1 = new Set();
  console.log(s1);// Set(0) {}
  let s2 = new Set(["a", "b"]);
  console.log(s2);// Set(2) {"a" , "b" }
Set数据结构可以做数组去重
let s1 = new Set(["a", "a", "b", "b"]);
  let S1 = [...s1];
  console.log(S1);// ["a","b"]

实例方法

  • add(value):添加某个值，返回Set结构本身
  • delete(value):删除某个值，返回一个布尔值，表示删除是否成功
  • has(value):返回一个布尔值，表示该值是否为Set的成员
  • clear():清除所有成员，没有返回值
const s = new set();
  s.add(1).add(2).add(3); //向set结构中添加值
  s.delete(2)//删除set结构中的2值
  s.has(1);//表示set结构中是否有1这个值返回布尔值
  s.clear()//清除set结构中的所有值

遍历
Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

let s1 = new Set([1, 2, 3, 4, 5, 6]);
  s1.forEach(item => console.log(item))// 1,2,3,4,5,6