关于es6:ES6新增语法

4次阅读

共计 5505 个字符，预计需要花费 14 分钟才能阅读完成。

let 定义变量，变量不能够再次定义，但能够扭转其值

代码举栗：

let name = 'zhangsan';
name = 'lisi';
console.log(name); // lisi
let name = 'wangwu'; // 再次定义，报错：Identifier 'name' has already been declared

具备块级作用域。（即大括号）

代码举栗：

{
    let age = 18;
    console.log(age); // 18
}
console.log(age); // 报错，此作用域中没有 age 的定义

for (let i = 0; i < 10; i++) {// i 只能在此范畴内应用，因为有块级作用域}
console.log(i);  // 报错，此作用域中没有 i 的定义

没有变量晋升，必须先定义再应用

代码举栗：

console.log(gender); // 报错，此时还没有定义 gender
let gender = '男';

let 申明的变量不会压到 window 对象中，是独立的

代码举栗：

let hobby = '吃饭';
console.log(window.hobby); // undefined

如果应用 var 申明了变量，也不能再次用 let 申明了，反之也是不行的。起因也是这个变量曾经被申明过了。

应用 const 关键字定义常量
常量是不可变的，一旦定义，则不能批改其值

代码举栗：

// 1. 应用 const 关键字定义常量，常量名个别大写
// 2. 常量是不可变的，一旦定义，则不能批改其值
const PI = 3.1415926；PI = 3.14; // 报错，罕用一旦被初始化，则不能被批改

初始化常量时，必须给初始值

代码举栗：

const PI; 
// 报错，Missing initializer in const declaration

具备块级作用域
没有变量晋升，必须先定义再应用
常量也是独立的，定义后不会压入到 window 对象中

image.png

// 状况 1，变量和值一一对应
let arr = [5, 9, 10];
let [a, b, c] = arr;
console.log(a, b, c); // 输入 5 9 10

// 状况 2，变量多，值少
let arr = [5, 9, 10];
let [a, b, c, d] = arr;
console.log(a, b, c, d); // 输入 5 9 10 undefined

// 状况 3，变量少，值多
let arr = [5, 9, 10, 8, 3, 2];
let [a, b] = arr;
console.log(a, b); // 5, 9

// 状况 4，按需取值
let arr = [5, 9, 10, 8, 3, 2];
let [, , a, , b] = arr; // 不须要用变量接管的值，用空位占位
console.log(a, b); // 10, 3 

// 状况 5，残余值
let arr = [5, 9, 10, 8, 3, 2];
let [a, b, ...c] = arr; // ...c 接管残余的其余值，失去的 c 是一个数组
console.log(a, b, c); 
// 后果：// a = 5, 
// b = 9, 
// c = [10, 8, 3, 2]

// 状况 6，简单的状况，只有合乎模式，即可解构
let arr = ['zhangsan', 18, ['175cm', '65kg']];
let [, , [a, b]] = arr;
console.log(a, b); // 175cm 65kg

// 状况 1，默认要求变量名和属性名一样
let {foo, bar} = {foo: 'aaa', bar: 'bbb'};
console.log(foo, bar); // aaa, bbb
let {a, c} = {a: 'hello', b: 'world'};
console.log(a, c); // hello, undefined

// 状况 2，能够通过: 为变量改名
let {a, b:c} = {a: 'hello', b: 'world'};
console.log(a, c); // hello, world

// 状况 3，变量名和属性名统一即可获取到值，不肯定要一一对应
let {b} = {a: 'hello', b: 'world'};
console.log(b); // world
// 此时，没有定义变量 a，所以应用 a 会报错

// 状况 4，残余值
let obj = {name:'zs', age:20, gender:'男'};
let {name, ...a} = obj;
console.log(name, a);
// 后果：// name = zs
// a = {age: 20, gender: "男"};

// 状况 5，简单的状况，只有合乎模式，即可解构
let obj = {
    name: 'zhangsan',
    age: 22,
    dog: {
        name: '毛毛',
        age: 3
    }
};
let {dog: {name, age}} = obj;
console.log(name, age); // 毛毛 3

应用箭头定义函数 => goes to，目标是 简化函数的定义 并且外面的 this 也比拟非凡。

根本定义：

// 非箭头函数
let fn = function (x) {return x * 2;}
// 箭头函数，等同于下面的函数
let fn = (x) => {return x * 2;}

形参只有一个能够省略小括号

let fn = (x) => {return x * 2;}
// 等同于
let fn = x => {return x * 2;}

函数体只有一句话，能够省略大括号，并且示意返回函数体的内容

let fn = (x, y) => {return x + y;}
// 等同于
let fn = (x, y) => x + y;

箭头函数外部没有 arguments

let fn = () => {console.log(arguments); // 报错，arguments is not defined
};

箭头函数外部的 this 指向内部作用域中的 this，或者能够认为箭头函数没有本人的 this

 // 这里必须用 var，因为用 let 申明的变量不能应用 window 调用
    var name = 'lisi';
    let obj = {
        name: 'zhangsan',
        fn: () => {console.log(this); // window 对象
            console.log(this.name); // lisi
        }
    };
    obj.fn();

箭头函数不能作为构造函数

let Person = () => {};
let obj = new Person(); // 报错，Person is not a constructor
// 箭头函数中都没有本人的 this，不能解决成员，所以不能当构造函数

ES6 中能够给函数的参数设置默认值

function fn(x, y = 'world') {console.log(x, y);
}
fn(2)
fn(2,3)
// 打印后果
//2“world”//2 3

残余参数，以 …润饰最初一个参数，把多余的参数都放到一个数组中。能够代替 arguments 的应用。
rest 参数只能是最初一个参数。

代码举栗：

// 参数很多，不确定多少个，能够应用残余参数
function fn(...values) {console.log(values); // [6, 1, 100, 9, 10]
}
// 调用
console.log(fn(6, 1, 100, 9, 10)); //undefined

function fn(a, b, ...values) {console.log(a); // 6
    console.log(b); // 1
    console.log(values); // [100, 9, 10]
}
// 调用
console.log(fn(6, 1, 100, 9, 10)); //undefined

...能够把数组中的每一项开展

代码举栗：

// 合并两个数组
let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4]
// 把数组开展作为参数，能够代替 apply
// 求数组的最大值
let arr = [6, 99, 10, 1];
let max = Math.max(...arr); // 等同于 Math.max(6, 99, 10, 1);

把伪数组转成数组

伪数组必须有 length 属性，如果没有将返回一个空数组
转换后的数组长度，是依据伪数组的 length 决定的

代码举栗：

let fakeArr = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};
let arr = Array.from(fakeArr);
console.log(arr); // ['a', 'b', 'c']
// 转数组的对象必须有 length 值，因为失去的数组的成员个数是 length 指定的个数
// 上例中，如果 length 为 2，则失去的数组为 ['a', 'b']

find()：用于查找数组中的值
findIndex()：用于查找数组的下标，用法与 find 一样

代码举栗：

 let value = [3, 5, -1, -4, 6].find((item, index, arr) => {console.log(item); // 示意数组的每个值
        console.log(index); // 示意数组的每个下标
        console.log(arr); // 示意整个数组
        // 如果须要查找，要用到 return 条件；return item < 0; //find 办法会返回第一个满足条件的值，-1
        // 如果是 findIndex 办法，会返回第一个满足条件的值的下标，2
    });
    console.log(value);

find 找到数组中第一个满足条件的成员并 返回该成员，如果找不到返回undefined。
findIndex 找到数组中第一个满足条件的成员并 返回该成员的索引，如果找不到返回 -1。

判断数组是否蕴含某个值，返回 true / false
参数 1，必须，示意查找的内容
参数 2，可选，示意开始查找的地位，0 示意结尾的地位

代码举栗：

let arr = [1, 4, 3, 9];
console.log(arr.includes(4)); // true
console.log(arr.includes(4, 2)); // false，从 2 的地位开始查，所以没有找到 4
console.log(arr.includes(5)); // false

includes(str, [position]) 返回布尔值，示意是否找到了参数字符串
startsWidth(str, [position]) 返回布尔值，示意参数字符串是否在原字符串的头部或指定地位
endsWith(str, [position]) 返回布尔值，示意参数字符串是否在原字符串的尾部或指定地位。

console.log('hello world'.includes('e', 2)); // false 从地位 2 开始查找 e，没有找到
console.log('hello world'.includes('e')); // true
console.log('hello world'.startsWith('h')); // 未指定地位，看结尾是否是 h，返回 true
console.log('hello world'.startsWith('l', 2)); // 指定地位的字符是 l，返回 true
console.log('hello world'.endsWith('d')); // 未指定地位，结尾是 d，返回 true
console.log('hello world'.endsWith('r', 9)); // 指定地位的字符是 r，返回 true

repeat办法返回一个新字符串，示意将原字符串反复 n 次。

let html = '<li>itheima</li>';
html = html.repeat(10);

数据结构 Set。它相似于数组，然而成员的值都是惟一的，没有反复的值。
Set自身是一个构造函数，用来生成 Set 数据结构。
Set 的特点就是该对象外面的成员不会有反复。

1. 根本应用：
let set = new Set(); 失去一个空的 Set 对象。

2.Set 的成员

size：属性，获取 set 中成员的个数，相当于数组中的 length
add(value)：增加某个值，返回 Set 构造自身。
delete(value)：删除某个值，返回一个布尔值，示意删除是否胜利。
has(value)：返回一个布尔值，示意该值是否为 Set 的成员。
clear()：革除所有成员，没有返回值。

 let set = new Set();
    // 调用 set 对象内置的 add 办法，想 set 中增加数据。set.add(3);
    set.add(8);
    set.add(9);
    set.add(3); // 增加失败但不报错，set 中的成员不能反复
    console.log(set); // {3,8,9}
    console.log(set.size); //3

初始化 Set 的时候，也能够为其传入数组或字符串，失去的 Set 对象中的成员不会有反复。依据这个特点能够实现数组或字符串去重。

 let set = new Set([4, 8, 9, 5, 4, 8, 4, 2]);
    console.log(set); //Set(5) {4,8,9,5,2}
    let arr = [...set]; // 将 set 中的每个值开展，而后放到数组中
    console.log(arr); //(5) [4, 8, 9, 5, 2]
    let str = new Set('abcdacbdcbac'); 
    console.log(str); //Set(4) {"a", "b", "c", "d"}

正文完

es6

发表至： es6

2020-12-06

0

关于前端:一文彻底搞懂前端监控

关于es6:ES6新增语法

（一）let 和 const

1.let

2.const

3. 总结

（二）解构赋值

1. 数组解构

2. 对象解构

（三）函数和参数

1. 箭头函数

2. 参数的默认值

3.rest 参数

（四）内置函数的扩大

1. 扩大运算符：…

2.Array.from()

3.find()办法和 findIndex()办法

4.includes()办法

5.includes(), startsWith(), endsWith()

6.repeat()办法

（五）新增对象 Set

站内搜索