文章目录

  • 一、ES6简介:
  • 1. 什么是ES6：
  • 2. 为什么要使用ES6:
  • 二、ES6的新增语法：
  • 1. let关键字：
  • 2. const关键字：
  • 3. let,const,var的区别:
  • 4. 解构赋值:
  • 4.1 什么是解构赋值:
  • 4.2 数组的解构:
  • 4.3 对象结构:
  • 4.4 对象解构赋值:
  • 5. 箭头函数:
  • 5.1 什么是箭头函数:
  • 5.2 箭头函数的this:
  • 6. 剩余参数:
  • 6.1 剩余参数:
  • 6.2 剩余参数与解构:
  • 三、ES6的内置对象扩展:
  • 1. Array的扩展方法:
  • 1.1 扩展运算符(展开语法):
  • 1.2 扩展运算符合并数组:
  • 1.3 将类数组或可遍历对象转换成真正的数组:
  • 1.4 构造函数方法: Array.from()
  • 1.5 实例方法: find()
  • 1.6 实例方法: findIndex()
  • 1.7 实例方法: includes()
  • 2. string的扩展方法:
  • 2.1 模板字符串:
  • 2.2 实例方法: startsWith() 和 endsWith()
  • 2.3 实例方法: repeat()
  • 3. Set数据结构:
  • 3.1 set对象:
  • 3.2 Set的常用实例方法:
  • 3.3 Set遍历:


一、ES6简介:

1. 什么是ES6：

ES全称是ECMAScript， 它是由ECMA国际标准组织制定的一项脚本语言的标准化规范

年份

版本

2015年6月

ES2015

2016年6月

ES2016

2017年6月

ES2017

2018年6月

ES2018

…

…

2. 为什么要使用ES6:

每一次标准的诞生都意味着语言的完善, 功能的加强. javascript语言本身也有一些令人不满意的地方.

  • 变量提升特性增加了程序运行时的不确定性;
  • 语法过于松散, 实现相同的功能, 不同的人可能会写出不同的代码;

二、ES6的新增语法：

1. let关键字：

ES6中新增的用于声明变量的关键字；

  • let声明的变量只在所处于的块级有效；
  • 防止循环变量变成全局变量；
  • 使用let关键字声明的变量不存在变量提升；
  • 使用let关键字声明的变量存在暂时性死区；

2. const关键字：

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

  • 具有块级作用域;
  • 必须赋初始值;
  • 常量赋值(内存地址)后, 值不能修改;

3. let,const,var的区别:

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

var

let

const

函数级作用域

块级作用域

块级作用域

变量提升

不存在变量提升

不存在变量提升

值可更改

值可更改

值不可更改

4. 解构赋值:

4.1 什么是解构赋值:

ES6中允许从数组中提取值, 按照对应位置, 对变量赋值. 对象也可以实现解构;

4.2 数组的解构:

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

注意:

  • 结构失败的变量,将会被赋值undefined;

4.3 对象结构:

对象结构允许使用变量的名字匹配对象的属性, 匹配成功,将对象属性值赋值给变量;

let person = {name: '张三', age: 20};
let {name, age} = person;

console.log(name);	// 张三
console.log(age);	// 20

4.4 对象解构赋值:

let { name: myNmae, age: myAge } = person;	// 别名
console.log(myNmae);
console.log(myAge);

5. 箭头函数:

5.1 什么是箭头函数:

ES6中新增的定义函数的方式
箭头函数是用来简化函数定义语法的

() => {}
const fn = () => {}
  • 函数体只有一句代码, 且代码的执行结果就是返回值, 可以省略大括号;
const sum = (a, b) => a + b;
  • 如果形参只有一个, 可以省略小括号;

5.2 箭头函数的this:

箭头函数不绑定this关键字, 箭头函数中的this, 指向的是函数定义位置的上下文this

const obj = {name: "张三", age: 20};
function fn() {
    console.log(this);
    return () => {
        console.log(this);
    }
}

const resFn = fn.call(obj);
resFn();

es6项目中 如何使用jquery js中es6_数组

6. 剩余参数:

6.1 剩余参数:

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

function sum(a, ...args) {
}


const sum = (...args) => {
    let res = 0;
    args.forEach( item => res += item );
    return res;
}
console.log(sum(1,2,3,4,5,6));

6.2 剩余参数与解构:

let stus = ["张三", "李四", "王五"];
let [zs, ...others] = stus;
 console.log(zs);	// 张三
 console.log(others);	// ["李四", "王五"]

三、ES6的内置对象扩展:

1. Array的扩展方法:

1.1 扩展运算符(展开语法):

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列;

let arr = [1, 2, 3];
// ...arr 1,2,3
console.log(...arr);	// 1 2 3.
// 等价于
console.log(1, 2, 3);	// 1 2 3

1.2 扩展运算符合并数组:

let arr1 = [1, 2, 3];
let arr2 = [5, 6, 7];
// 方式一:
let arr3 = [...arr1, ...arr2]; // [1, 2, 3, 5, 6, 7]

// 方式二:
arr1.push(...arr2);
console.log(arr1); // [1, 2, 3, 5, 6, 7]

1.3 将类数组或可遍历对象转换成真正的数组:

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        let divs = document.querySelectorAll('div');
        console.log(divs);
        let oDivs = [...divs];
        console.log(oDivs);
    </script>
</body>

es6项目中 如何使用jquery js中es6_字符串_02

1.4 构造函数方法: Array.from()

Array.from(): 将类数组或可遍历对象转换成真正的数组;
方法还可以接受第二个参数, 作用类似于数组的map方法, 用来对每个元素进行处理, 将处理后的值放入返回的数组

let arrayLike = {
   '0': 'a',
   '1': 'b',
   '2': 'c',
   length: 3
}
let arr2 = Array.from(arrayLike);
console.log(arr2);	// ["a", "b", "c"]

let arr3 = Array.from(arrayLike, item => item+'111');
console.log(arr3);	// ["a111", "b111", "c111"]

1.5 实例方法: find()

用于找出第一个符合条件的数组成员, 如果没有找到,返回undefined

let arr = [
    { id: 1, name: 'zhangsan' },
    { id: 2, name: 'lisi' }
];
let tar = arr.find((item, index) => item.id === 2)
console.log(tar);	// {id: 2, name: "lisi"}

1.6 实例方法: findIndex()

用于找出第一个符合条件的数组成员的索引, 如果没有找到,返回-1

let arr = [
    { id: 1, name: 'zhangsan' },
    { id: 2, name: 'lisi' }
];
let index = arr.findIndex((item, index) => item.id === 2)
console.log(index);	// 1

1.7 实例方法: includes()

表示某个数组是否包含给定的值, 返回布尔值

console.log([1,2,3].includes(3));	// true
console.log([1,2,3].includes(4));	// false

2. string的扩展方法:

2.1 模板字符串:

ES6新增的创建字符串的方式, 使用反引号

let name = `张三`;
  • 模板字符串中可以解析变量:
let name = "张三";
let sayHello = `hello, my name is ${name}`;	// hello my name is 张三
  • 模板字符串可以换行;
  • 在模板字符串中可以调用函数,调用函数的位置,将会显示函数的执行结果;

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

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

2.3 实例方法: repeat()

repeat方法表示将原字符串重复n次, 返回一个新的字符串

3. Set数据结构:

3.1 set对象:

ES6提供了新的数据结构Set. 它类似于数组, 但是成员的值都是唯一的, 没有重复值;
Set本身是一歌构造函数, 用来生成Set数据结构;

const s = new Set();	// 一个空的set

const ss = new Set([1,2,2,3,4,5]); 	// 接收一个数组作为参数, 来初始化
// Set(5) {1, 2, 3, 4, 5}
console.log(ss.size);	// 5
  • set可以做数组去重;
let arr = [1,2,2,3,4,5,6,5];
let ss = new Set(arr);
arr = [...ss];
console.log(arr);	// [1,2,3,4,5,6]

3.2 Set的常用实例方法:

  • add(val): 添加某个值, 返回Set结构本身;
  • delete(val): 深处某个值, 返回一个布尔值, 表示删除是否成功;
  • has(val): 返回一个布尔值, 表示该值是否为Set成员;
  • clear(): 清楚所有成员, 没有返回值;

3.3 Set遍历:

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

s.forEach(item => console.log(item));