前言
本篇主要是讲述ES6的新增语法和相关运用
一、ES6
ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。
泛指2015年6月之后发布的版本
为什么使用ES6
-
语言更加完善
-
功能更加强大
-
变量提升特性增加了程序运行时的不确定性
-
语法过于松散,实现相同的功能不同的人可能会写出不同的代码
二、let和const
let
-
具有块级作用域(一对大括号产生的作用域),var 不具备此特性
-
防止循环变量变成全局变量
-
let 声明的变量没有变量提升,必须先声明再使用
-
暂时性死区,就是不能在初始化之前,使用变量 num
var num = 123;
if(true) {
// num 变量和块级整体进行了绑定
console.log(num);
let num = 20;
}
const
常量就是值(内存地址)不能变化的量
-
具有块级作用域
-
必须给初始值
-
常量赋值后,基本数据类型的值不能改
-
常量赋值后,复杂数据类型的地址不能改
三、解构赋值
数组解构赋值
从数组中提取值,按照对应位置,对变量进行赋值
对象解构赋值
var {name, age} = {name: 'xx', age: 18};
使用别名
var {name: myName, age: myAge} = {name: 'xx', age: 18};
console.log(myName);
四、箭头函数
基本写法
const fn = () => {};
返回值
// 函数体中只有一句代码,则代码的执行结果就是返回值,可以省略大括号
const fn = (num1, num2) => num1 + num2;
console.log(fn(3, 2));
箭头函数中的this问题
箭头函数不绑定this,箭头函数中的this,指向的是函数定义位置的上下文this
const obj = {
name: 'xxx'
};
function fn() {
console.log(this);
return () => {
console.log(this);
}
}
const resFn = fn.call(obj);
resFn();
五、剩余参数
可以将一个不定数量的参数表示为一个数组
注意箭头函数当中是使用不了arguments的
function sum(first, ...args) {
console.log(first);
console.log(args);
}
sum(10, 20, 30);
六、扩展运算符
可以将数组或者对象转为用逗号分割的参数序列
- 应用于合并数组
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
console.log([...arr1, ...arr2]);
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr1.push(...arr2);
console.log(arr1);
- 将类数组或可遍历对象转化为真数组
var aDivs = document.getElementsByTagName("div");
aDivs = [...aDivs];
七、数组扩展
Array.from
将类数组和可遍历对象转换为真数组
let arrLike = {
"0": "a",
"1": "b",
"2": "c",
length: 3
};
let arr = Array.from(arrLike);
console.log(arr);
// 第二个参数对每个元素进行遍历,将处理后的值返回到数组
let arr = Array.from(arrLike, item => item+"*");
console.log(arr);
Array.prototype.find
// 找出第一个符合条件的成员,没有就返回undefined
let arr = [{
id: 1,
name: 'a'
}, {
id: 2,
name: 'b'
}];
let target = arr.find((item, index) => item.id === 2);
console.log(target);
Array.prototype.findIndex
// 找出第一个符合条件成员的位置,没有就返回 -1
let arr = [1, 5, 10, 16];
let index = arr.findIndex((val, index) => val > 9);
console.log(index);// 2
Array.prototype.includes
数组中是否包含某个值,返回布尔值
八、模板字符串
-
模板字符串中可以换行,阅读性好
-
在模板字符串中可以调用函数
const sayHello = function() {
return '哈哈哈';
};
let greet = `${sayHello()} ~~~`;
console.log(greet);
九、Set数据结构
ES6 提供的新的数据结构,类似于数组,但是成员的值都是唯一的,没有重复的值
Set 本身是一个构造函数,用来生成 Set 数据结构
接收一个数组作为参数
去重
const s = new Set([1, 1, 2, 2, 3]);
console.log([...s]); // [1,2,3]
实例方法
const s = new Set();
// 添加
s.add('a').add('b').add('c');
// 删除
s.delete('b');
// 是否有 a 这个值
console.log(s.has('a')); // true
console.log(s.has('b')); // false
// 清除所有值
s.clear();
遍历Set
const s = new Set();
// 添加
s.add('a').add('b').add('c');
s.forEach(val => console.log(val));
十、数组新增方法
forEach
var arr = ['a', 'b', 'c'];
arr.forEach(function(currentValue, index, arr) {
console.log(currentValue); // a、b、c
});
filter
var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
// 返回一个新数组
const result = words.filter(word => word.length > 6);
console.log(result)
map
var array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
find
// 返回数组中符合条件的第一个元素
let array1 = [5, 12, 8, 130, 44];
let found = array1.find(function (element) {
return element > 10;
});
console.log(found); // 12
有不明白的或者有其他问题的可以评论区留言噢
私信回复JS思维导图可获取完整知识导图~
今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步,成为更好的自己!
标签:arr,console,log,JavaScript,JS,let,数组,讲述,const From: https://blog.csdn.net/m0_60623820/article/details/141958404