导语
温故而知新，可以为师矣。及时地复习和总结我们学过的知识，不仅有利于知识的体系化，还有利于知识的深入理解。笔者也是一个前端技术迷，并且之前也系统的学习ES6一段时间，并对此有一些心得感悟。以下，我将深入浅出地与大家谈谈ES6，希望各位不吝点评。
1.let/const
- let
js中作用域分为：全局作用域、局部作用域、块级作用域 es6中的六种变量声明方法：var function let const import class.其声明的变量不会被提升;let不能重复声明；
-
console.log(a);
//not define
-
console.log(b);
//undefine
-
let a=
110 ;
//不能重复声明，不然会报错
-
var b=
220;
-
复制代码
let声明的变量的作用域都是块级的,通常以｛｝来化分块级作用域;
-
if(
true){
-
let =
10;
-
}
-
console.log(a);
//not define
-
复制代码
- const
const声明的变量的作用域是块级的，声明的变量需赋初始值，且不可改变,也不能提升。
-
if(ture){
-
console.log(PI);
//not define
-
const PI=
3.14;
-
PI=
888;
-
console.log(PI);
-
}
-
console.log(PI);
-
复制代码
2.箭头函数
- 普通的函数
-
function f(x,y){
-
returen x*y;
-
}
-
console.log(f(
2,
3));
//6
-
复制代码
- 箭头函数
-
var f=
(x,y)=>{
-
return x*y;
-
}
-
console.log(f(
2,
3));
//6
-
复制代码
如果箭头函数中只有一个形参，那么（）可省略；如果函数体中只有一条语句(非return语句)，｛｝也可省略；如果有return,而且只有一条语句，return和｛｝可省略。如下：
- 满足条件后，最简形式下的箭头函数
-
var f=
x=> x*x;
-
console.log(f(
3));
//9
-
复制代码
3.js中形参可以拥有默认值
-
function f(x,y=10){
-
console.log(x,y);
//1 10
-
return x+y
-
}
-
console.log(f(
1));
//11
-
复制代码
-
function f(x=10,y){
-
console.log(x,y);
//1 undefine
-
return x*y;
-
}
-
console.log(f(
1);
//NaN
-
复制代码
4.变量的结构赋值
结构：从数组或对象中提取值，对变量进行赋值.如果左右结构不一样，具体对应细节看如下代码中所阐述的。
-
let [a,b,c,,d,e,f=
12,g,[h]]=[
1,
2,
3,
4,
5,
6,[
7],[
8]]
-
console.log(a);
//1
-
console.log(b);
//2
-
console.log(c);
//3
-
console.log(d);
//5
-
console.log(e);
//undefine
-
console.log(f);
//6
-
console.log(g);
//[7]
-
console.log(h);
//8
-
-
复制代码
-
let [a,b,c,,d,e,f=
12]=[]
-
console.log(a);
//undefine
-
console.log(b);
//undefine
-
console.log(c);
//undefine
-
console.log(d);
//undefine
-
console.log(e);
//undefine
-
console.log(f);
//undefine
-
console.log(g);
//12
-
复制代码
5.数组扩展
- Array.from()可以将伪数组转化为真正的数组：类似数组和可遍历的对（包括ES6新增的数据结构Set和Map）,是该构造器的静态方法。 Array.from(类数组对象) or Array.from(类数组对象，function(item,index){return})
-
var lis=
document.getElementsByTagName(
"li");
-
var rs=
Array.from(lis);
-
console.log(
Array.isArray(rs));
//true;
-
复制代码
- Array.of()将一组值转换为数组,弥补构造器 Array（）的不足
-
var arr1=
Array.of(
3);
-
var arr2=
Array.of(
"3");
-
console.log(arr1,arr2);
//[3] ['3']
-
复制代码
- Array.find():用于找出第一个符合条件的数组元素,找不到则是undefined。格式：Array.find(function(item,index){return 条件;})
-
let arr=[{
name:
"zs1",
score:
90},
-
{
name:
"zs2",
score:
80},
-
{
name:
"zs3",
score:
100}
-
];
-
let rs1=arr.find(
item=>item.name==
"zs1");
-
let rs2=arr.find(
item=>item.name==
"zs4");
-
let rs3=arr.findIndex(
item=>item.name==
"zs3");
-
let rs4=arr.findIndex(
item=>item.name==
"zs4");
-
console.log(rs1,rs2);
//{name:"zs1",score:90} undefined
-
console.log(rs3,rs4);
//2 -1
-
复制代码
- Array.findIndex()第一个符合条件的数组元素的索引。找不到则是-1
- Array.includes()判断元素是否在数组中存在,返回值是 true|false
-
let a=[
1,
2,
3];
-
a.includes(
1);
//true
-
a.includes(
"a");
//false
-
复制代码
- Array.fill()给数组填充指定值. Array.fill(值) ;Arr.fill(值，起点，终点),填充时不包含终点。
-
let arr=
new
Array(
5);
-
arr.fill(
"*");
-
let arr1=[
1,
2,
4,
5,
7]
-
arr1.fill(
"hello",
0,
4)
-
console.log(arr);
//['*','*','*','*','*']
-
console.log(arr1);
//["hello", "hello", "hello", "hello", 7]
-
复制代码
- 数组的扩展运算符
-
var arr=[
1,
2,
3];
-
var str=
"hello";
-
var arr2=[...str]
-
var arr1=[...arr]
-
console.log(arr1);
//[1,2,3]
-
console.log(arr2);
//["h", "e", "l", "l", "o"]
-
复制代码
6.字符串扩展
-
- 模版字符串
-
var age=
10;
-
var name=
"Rose";
-
console.log(
`${name} is my friend ,she is ${age} years old.`)
//Rose is my friend ,she is 10 years old.
-
复制代码
-
- trim() 左右空格都是去掉 ;trimLeft 左空格去掉;trimRight 右空格去掉
-
- repeat(次数)重复字符串
-
- includes()是否包含某个元素，返回值为true or false
-
- startWith() 、endWith()分别为以哪些开始和结束,返回值为true or false
-
var str=
" I am a student. ";
-
console.log(str.trim());
//I am a student.
-
console.log(str.trimLeft());
//I am a student.
-
console.log(str.trimRight());
//I am a student.
-
console.log(str.repeat(
5));
// I am a student. I am a student. I am a student. I am a student. I am a student.
-
console.log(str.includes(
"am"));
//true
-
console.log(str.startsWith(
""),str.endsWith(
""));
//true true
-
console.log(str.padStart(
20,
2),str.padEnd(
20,
2));
//222 I am a student. I am a student. 222
-
复制代码
7.set和map的数据结构
- set
- set类似于对象的数组，但是成员的值都是唯一的，没有重复的值;
- set构造方法可以接收数组为参数，也可以转化为数组，可用于去除数组中重复值;
- 用foreach遍历set数组,for of也可对其遍历。
- 删除数组中的元素用Set.delete()。
-
var s1=
new
Set([
1,
2,
3,
"true"]);
-
console.log(s1);
// {1, 2, 3, "true"}
-
s1.add(
5);
-
console.log(s1);
//{1, 2, 3, "true", 5}
-
s1.add(
3);
-
console.log(s1);
//{1, 2, 3, "true", 5}
-
s1.forEach(
item=>
console.log(item));
//1 2 3 true 5
-
for(
var p
of s1){
-
console.log(p);
-
}
1 2 3 true 5
-
console.log(
Array.isArray(s1));
//false
-
console.log(
Array.isArray(
Array.from(s1)));
//true
-
s1.delete(
"true");
-
console.log(s1);
//{1, 2, 3, 5}
-
//数组去重
-
var arr1=[
1,
1,
2,
4,
5,
6,
6,
8];
-
arr2=[...(
new
Set(arr))];
-
console.log(arr2);
//[1, 2, 4, 5, 6, 8]
-
-
-
复制代码
- map
- Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
- 可以使用set方法添加元素。
- 通过get(键)获取键值,然而当键时引用数据类型时，要比较栈区中的地址
- 重复的键会覆盖
-
//创建Map
-
var m=
new
Map([
-
[
"a",
"hello"],
-
[
1,
123],
-
[[
1,
2,
3],
123]
-
]
-
);
-
//添加元素
-
m.set(
"false",
false);
-
m.set(
"know",{
true:
"true"});
-
console.log(m);
//{"a" => "hello", 1 => 123, Array(3) => 123, "false" => false, "know" => {…}}
-
//get()获取键值 然而当键时引用数据类型时
-
console.log(m.get(
"know"),m.get([
1,
2,
3]));
//{true: "true"} undefined
-
let a=[
1,
2,
3];
-
m.set(a,{
name:
"wangcai"});
-
console.log(m.get(a));
//{name: "wangcai"}
-
当键名重复时，会覆盖。
-
m.set(
"a",
000);
-
console.log(m);
//{"a" => 0, 1 => 123, Array(3) => 123, "false" => false, "know" => {…}, …}
-
复制代码
8.Class类
- 格式：class 类名｛constructor(参数)｛ this.属性=参数；｝ method(){//对象中方法的简写，省略了function.} ｝
- 书写注意事项：class 是关键字，后面紧跟类名，类名首字母大写，采取的是大驼峰命名法则：类名之后是{}；在{}中，不能直接写语句，只能写方法，方法不需要使用关键字，方法和方法之间没有逗号。不是键值对。
- 直接通过类名来访问的方法就是静态方法。如：Math.abs();这里的 abs()是静态方法。Array.isArray();isArray()是静态方法. 在方法名前加 static
-
class people{
-
constructor(name,age,height){
-
this.name=name;
-
this.age=age;
-
this.height=height;
-
}
-
static jump(){
-
console.log(
"我能跳100米");
-
}
-
say(){
-
console.log(
`我是${this.name},年龄${this.age}岁,身高为${this.height}cm`);
-
}
-
}
-
var person=
new people(
"Jack",
40,
180);
-
people.jump();
//我能跳100米 【类的静态方法】
-
console.log(person.say());
-
复制代码
10.严格模式
-
- 严格模式的目的：规则，提高编译效率。
-
- 严格模式和非严格模式区别
-
- 在严格模式下不能使用没有var的变量
-
- 在严格模式下不能8进制的数字
-
- 在严格模式下不能把函数定义在if语句中
-
- 在严格模式下函数不能有重名的形参
-
- 在严格模式下不能arguments不再跟踪形参的变化
-
- 在严格模式下function中的this不指window,调用函数为undefined
-
- 在整个代码段中启动严格模式，还可以在一个函数中启动严格模式：
-
"use strict"
-
function f(a,b){
-
console.log(a,b);
//66 666
-
console.log(
arguments[
0],
arguments[
1]);
//66 666
-
arguments[
0]=
1111;
-
arguments[
1]=
2222;
-
console.log(a,b);
//66 666
-
console.log(
arguments[
0],
arguments[
1]);
//1111 2222
-
}
-
f(
66,
666);
-
-
-
复制代码
1183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
