JavaScript ES6新特性

这篇笔记讲了 ES6 新增的声明变量的方法，箭头函数，剩余参数扩展运算符(…args)，和ES6中新增的数组字符串方法，和 Set 数据结构

声明变量方法

let 关键字

let 声明的变量只在块级作用域有效
- 块级作用域：两个大括号之间
原来的作用域是一个函数，用 let 的话作用域变成了 {} 之间
let 可以防止循环变量变成全局变量

for(let i = 0;i < 2;i++) {}
console.log(i);
// 报错，i 变量未定义

let 没有变量提升 (也就是不能先使用后定义)
暂时性死区：外部同名变量无法穿透大括号作用域

// 暂时性死区
var num = 10;
if(true) {let num = 20;console.log(num);
}
// 输出结果 20

const 关键字

const：声明常量，也就是内存地址不能改变的量
const 声明的常量有块级作用域 (只能在两个大括号之间使用)
const 定义的常量时必须赋初始值

下面一段代码：

const PI = 3.14;
PI = 100;
// 报错：TypeError: Assignment to constant variable.const arr = [100,200];
arr[0] = 'a';
arr[1] = 'b';
console.log(arr);
// 输出：['a','b']
arr = ['a','b'];
// 报错

这里普通函数修改数据内容的时候会报错，但是复杂数据类型修改数据内容的时候就没有报错，这是为什么呢
这里我参考了JS 使用const声明常量的本质（很多人都有误解）里的内容

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

三种声明方法的区别

var	let	const
函数级作用域	块级作用域	块级作用域
存在变量提升	不存在变量提升	不存在变量提升
值可更改	值可更改	值不可更改

const 关键字不需要实时监听变量的变化，所以效率要比 var，let 高

解构赋值

解构赋值可以把对象或者数组里面的属性/值从里面取出，赋给其他的变量
例如：

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

里面不止可以使用 let 来定义，还可以使用 var
假如变量名比数组里面的内容多，则未分配到内容的变量值为 undefined
对象结构同理：

let person = { name: '菜鸟小铭', age: 10 }
let { name, age } = person;
console.log(name);
console.log(age);
// 输出：菜鸟小铭 10// 可以使用键值对的形式来获取变量
let {name: myname,age: myage} = person;
// 冒号左侧仅用于匹配，冒号右侧的变量用来赋值
console.log(myname);
console.log(myage);
// 输出：菜鸟小铭 10

变量名必须和属性名相同才能取到这个变量的值
更多解构赋值的应用可以看MDN的解构

箭头函数

箭头函数：() => {} 小括号放形参，大括号放函数体
通常把箭头函数赋值给一个变量来调用

const fn = () => {console.log('菜鸟小铭');
}

如果函数中只有一句代码，且执行结果就是返回值，可以省略大括号
如果形参只有一个，可以省略小括号

function sum(num1,num2) {return num1 + num2;
}
// 上下两个函数等价
const sum = (num1,num2) => num1 + num2;

注意：箭头函数里的 this 指向定义位置的 this

剩余参数

当形参大于实参个数时，可以将剩下的参数表示为一个数组
和 arguments 很像，但是像箭头函数中没有 arguments，所以用箭头函数举例
使用时参数前面加三个点 ...args 代表接收所有参数

const sum = (...args) => {let total = 0;args.forEach(item => total += item);
}
sum(10, 20, 30);

剩余参数还可以用在数组中接受多余的参数 (例如返回的是一个数组的函数可以使用这个特性)
例如：

let arr = [1, 2, 3];
let [num, ...num2] = arr;
console.log(num); // 1
console.log(num2); // [2, 3]

扩展运算符

扩展运算符 ...arr 把数组或者对象转为参数序列

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

扩展运算符合并数组：

let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [...arr1, ...arr2];
// 也可以使用 push 方法合并数组
arr1.push(...arr2);

这个方法和 apply(this, [arr]) 方法有点像，apply也可以把数组作为参数去调用，只不过他多了一个改变 this 指向的方法

伪数组转换为真正的数组

数组与伪数组区别：(参考资料：JS-数组与伪数组)
方法1：使用扩展运算符

var divs = document.getElementsByTagName('div');
const ary = [...divs];

变成真正的数组以后可以使用数组的方法 (例如 push)
方法2：使用 Array.from 方法

// divs 是一个伪数组
var arr = Array.from(divs);

from 方法还有第二个参数，是一个函数，数组中有多少个元素这个函数就被调用多少次
例如给数组中每个元素乘以 2

var arr = Array.from(divs, item => item * 2);

数组，字符串的扩展方法

Array 扩展方法

find 方法，查找数组中第一个满足条件的值，没有找到返回 undefined
之前的 forEach 方法

let arr = [{id: 1,name: '菜鸟小铭'
}];
let target = arr.find((item, index) => item.id == 1);
// 输出 arr里的对象

findIndex 方法找出第一个复合条件的数组索引，没有找到返回 -1

let arr = [1, 5, 10, 15];
let index = arr.findIndex((value, index) => value > 9);
console.log(index); // 2

includes 方法，数组是否包含给定的值，返回布尔值

let arr = [1, 2, 3];
arr.includes(2);
// true

String 扩展方法

模板字符串

模板字符串用反引号定义：

let name = `菜鸟小铭`;

模板字符串可以解析变量 (就像 innerHTML 可以解析标签一样)

let name = '菜鸟小铭';
let sayHello = `hello,${name}`;
// 输出 hello,菜鸟小铭

模板字符串内部可以换行

let name = `菜鸟小铭`;
console.log(name);
// 菜
// 鸟
// 小
// 铭

在模板字符串里可以调用函数，显示函数的返回值

const name = () => {return '菜鸟小铭';
};
let sayHello = `${name()} hello`;
// 菜鸟小铭 hello

ES6 新增方法

判断字符串是否以某字符串开头或结尾，返回布尔值

let str = 'noobming';
str.startsWith('noob');
// true
str.endsWith('ming');
// true

将原字符串重复 n 次，返回重复后的字符串

'noobming'.repeat(2);
// "noobmingnoobming"

set 数据结构

set 结构类似于数组，但是成员的值都是唯一的，没有重复的值
set 是使用构造函数生成 set 数据结构的
创建的时候可以传递数组进去，会自动转换为 set 数据结构(不能像数组一样直接在构造函数中写值，需要把他包裹成一个数组传进去)
set 数据结构里面有 size 属性，表示里面有多少种类的值

const s = new Set(['1', '2', '3']);
console.log(s.size);
// 数组作为参数
const s1 = new Set([1, 2, 2]);
console.log(s1.size);
// 输出 2

set 和 array 的互化 (可以利用 set 为数组去重)

const s = new Set([1, 2, 2]);
// 转化为数组
const arr = [...s];

set 常用方法：
- add(value)：添加个值，返回 Set 结构本身
- delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
- has(value)：返回一个布尔值，表示该值是否为 Set 的成员
- clear()：清除所有成员，没有返回值
set 遍历：同样也用 forEach() 方法

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

JavaScript ES6新特性相关推荐

javascript脚本语言_10分钟快速掌握Javascript核心特性
JavaScript的历史版本其中ES5个人认为是使用时间最长也是最稳定的版本.基于该版本衍生出来的很多经典框架诸如ext,propertype.js,jquery,easyUI都是这个时代的杰作. ...
javascript ES6 新特性之扩展运算符三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
ES6新特性之了解ES6以及其发展历史
ES6 新特性现在使用主流的前端框架中,如ReactJS.Vue.js.angularjs等,都会使用到ES6的新特性,作为一名高级工程师而言,ES6也就成为了必修课,所以本套课程先以ES6的新特性 ...
ECMAScript 6新特性简介
文章目录简介 ECMAScript和JavaScript的关系 let和const 解构赋值数组的扩展函数的扩展简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript ...
html5 跳转参数不显示_HTML5、CSS3、ES6新特性总结
前言:HTML5.CSS3.ES6新特性,可以说是基础前端的面试的必考题了,以下是关于新特性的基本总结. HTML5: 语义化的区块和段落元素:<section>,<article& ...
随笔二——JavaScript脚本语言
模块三 JavaScript脚本语言 JavaScript(简称"JS")由Netscape公司的Brendan Eich在网景导航者浏览器上首次设计实现而成.为了确保不同的浏览器 ...
尚硅谷es6新特性笔记
尚硅谷es6新特性笔记一.let与const let的变量声明以及声明特性 const的变量声明以及声明特性 const.let.var 三者之间的区别二.变量解构赋值三.模板字符串四.对象的 ...
lsdyna如何设置set中的node_list_如何快速掌握es6+新特性及核心语法？
国庆刚刚结束,我们开始一波新的学习进程吧. ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.作为前端必备技能,我们来快速开始吧接 ...
ECMAScript 6-11新特性(笔记)
目录一.ES6 新特性 1.1 let 关键字 1.2 const 关键字 1.3 变量的解构赋值 1.4 模板字符串 1.5 简化对象写法 1.6 箭头函数 1.7 rest 参数 1.8 s ...
Longstick的学习周记——ES6新特性
Longstick的学习周记--ES6新特性前言 ES6新特性 1. let 和 const let关键字 const 关键字 2. 模块字符串\` \` 3. 解构 4. 函数的参数默认值 5. ...

JavaScript ES6新特性

JavaScript ES6新特性

声明变量方法

let 关键字

const 关键字

三种声明方法的区别

解构赋值

箭头函数

剩余参数

扩展运算符

伪数组转换为真正的数组

数组，字符串的扩展方法

Array 扩展方法

String 扩展方法

模板字符串

ES6 新增方法

set 数据结构

JavaScript ES6新特性相关推荐

最新文章

热门文章