ES6
-----------------------2020.12.20开始 为啥换老师了呢呜呜----------------------------------
什么是ES6
其实就是一个版本,泛指,是ES5的延续
为什么使用ES6呢?
变量提升特性增加了程序运行时的不可预测性;
语法过于松散,实现相同的功能不同的人会写不同的代码,为了代码规范化;
ES6新增语法
let关键字
- let声明变量只在所处的块级({}里面的内容)有效
- 防止循坏变量变成全局变量
- let声明的变量不存在变量提升
- 暂时性死区,声明的变量和块级域绑定在一起
var tmp = 123;
if (true) {
console.log(tmp); //也会报错暂时性死区
let tmp = 'abc';
}
例子
<script>
var arr = [];
for (var i = 0; i < 2; i++) {
//给arr[i]一个函数但是并没有执行这个函数
arr[i] = function() {
console.log(i);
}
};
//调用数组中的函数,下面函数执行时,循坏已经结束,i又是全局作用域所以是2
arr[0](); //2
arr[1](); //2
</script>
const 声明常量
- 具有块级作用域
- const声明常量必须赋值
const PI = 3.14;
- 常量复制后,值不能修改;但是复杂类型里面的值可以更改;
const ary = [100, 200];
ary[0] = 123; //允许
ary = [1, 2]; //不允许
console.log(ary);
let const var 区别
- var 作用域为该语句所在的函数内,存在变量提升;
- let 作用域为该语句所在的代码块内,不存在变量提升
- const 不能修改该常量的值,但是复杂数据类型可以更改内部的值;
什么时候使用这三个关键字 const效率比let高
解构赋值
- 数组解构
let ary = [1, 2, 3];
let [a, b, c, d, e] = ary;
console.log(a); //1
console.log(b); //2
console.log(c); //3
console.log(d); //undefined
console.log(e); //undefined
- 对象解构
<script>
//对象解构允许使用变量的名字匹配对象的属性
let person = {
name: 'zhangsan',
age: 12,
sex: '男'
};
let {
name,
age,
sex
} = person;
console.log(name); //zhangsan
console.log(age); //12
console.log(sex); //男
</script>
下面代码里面的myName才是变量名
let {
name: myName
} = person;
console.log(name);
console.log(myName);
箭头函数
- 箭头函数用来简化函数定义语法的
const fn = () => {
console.log(123);
}
fn(); //123
- 函数体中只有一句代码,且代码执行结果就是返回值,可以省略大括号
const sum = (num1, num2) => num1 + num2;
const result = sum(1, 3);
console.log(result);
- 形参只有一个,可以省略小括号
const fn = (v) => {
alert(v);
};
fn(22);
以上代码可以替换为:
const fn = v => alert(v);
fn(22);
- 箭头函数中的this,指向的是函数定义位置的上下文的this
function fn() {
console.log(this);
return () => {
console.log(this); //箭头函数this指向定义这个函数的位置(fn函数里面)的this
}
};
const obj = {
name: 'zhangsan'
};
const resFn = fn.call(obj);
resFn(); //输出两个obj
- 但是需要注意的是obj对象不能产生作用域,所以在对象里面的箭头函数的this指向的是全局作用域的this,window?
var age = 100;
var obj = {
age: 20,
say: () => {
alert(this.age); //弹出的是window对象下面的age,因为obj不能产生作用域
}
}
obj.say();
剩余参数
函数实参数量大于形参数量,会将不定数量的参数表示为一个数组,比如形参个数为2,实参个数为3,则会把实参后两个当作数组看;
const sum = (...args) => {
//args表示数组?
let total = 0;
args.forEach((item) => {
total += item;
})
return total;
};
console.log(sum(2, 3));
// sum(10, 20, 30);
console.log(sum(1, 2, 3));
// sum(10, 20);
上面的代码里面的args.forEach可以更改为:
剩余参数配合解构
加…就能实现多个参数组合数组?
let ary1 = ['张三', '李四', '王五'];
let [s1, ...s2] = ary1;
console.log(s1); //张三
console.log(s2); //["李四","王五"]
Aarry扩展方法
扩展运算符,也是加…可以把数组元素单个输出代码如下:
<script>
let ary = ["a", "b", "c"];
console.log(...ary); //a b c
console.log(ary); //输出的是一个数组不是单个的字符
console.log("a", "b", "c"); // a b c
</script>
- 扩展运算符可以用于合并数组;
let ary3 = [...ary1, ...ary2];
可以将ary1 ary2两个数组合并 - 用push和解构结合的方法合并数组
ary1.push(...ary2);
,将ary2数组和ary1数组合并
将类数组或可遍历对象转换为真正的数组
var oDivs = document.getElementsByTagName('div');
console.log(oDivs);
var ary = [...oDivs]; //将伪数组转换为真正的数组
构造函数方法:Array.from();
var arrayLike = {
"0": "张三",
"1": "李四",
"2": "王五",
"length": 3
}
var ary = Array.from(arrayLike);
console.log(ary); //输出的数组["张三","李四","王五"]
实例方法:find()
找到第一个符合条件的数组成员,如果没有找到返回undefined
var ary = [{
id: 1,
name: '张三'
}, {
id: 2,
name: '李四'
}];
//查找数组中id=2的对象 数组中元素是对象
let target = ary.find((item) => item.id == 2);
console.log(target);
实例方法:findIndex()
找到第一个符合条件的数组成员的位置,没有找到就返回-1
let ary = [1, 5, 10, 15];
let index = ary.findIndex((value) => value > 10);//找到数组中值大于10的元素的位置
console.log(index);
实例方法:includes();
某个数组是否包含给定的值,返回布尔值;
let ary = [2, 3, 6, 7];
let result = ary.includes(2);
console.log(result);
String扩展方法
模板字符串:
let name = `张三`;
console.log(name);
let sayHello = `hello my name is ${name}`; //`而不是'
console.log(sayHello);
模板字符串可以换行:可以调用函数;
const fn = () => {
return '我是fn函数'
}
let html = `我是模板字符串${fn()}`;
console.log(html); //我是模板字符串我是fn函数
实例方法:startsWith() endsWith()
startsWith();表示参数字符串是否在原字符串头部,返回布尔值 let r1 = str.startsWith('Hello');
判断字符串是否以Hello
开头
endsWith():表示参数字符串是否在原字符串尾部,返回布尔值let r2 = str.endsWith(2018);
判断字符串是否以2018
结尾
实例方法:repeat()
将原来的字符串重复n次,返回新的字符串
let str1 = 'x'.repeat(3);
console.log(str1); //xxx
Set数据结构
ES6提供了新的数据结构Set,类似于数组,但是成员的值都是唯一的,没有重复的值;
可以用于搜索历史关键字;
Set本身是一个构造函数,用来生成Set数据结构;set会自动把重复的去掉,所以可以用来数据去重
const s3 = new Set(["a", "b", "c", "c"]);
console.log(s3.size); //3 set会自动把重复的去掉,所以可以用来数据去重
数据去重:
const s3 = new Set(["a", "b", "c", "c"]);
console.log(s3.size); //3 set会自动把重复的去掉,所以可以用来数据去重
const ary = [...s3];
console.log(ary); //["a","b","c"]
实例方法
add(value)
:添加某个值,返回Set结构本身;
delete(value)
:删除某个值,返回一个布尔值,表示删除是否成功
has(value)
:返回布尔值,表示该值是否为Set成员
clear()
:清除所有成员,没有返回值
const s4 = new Set();
//向set结构中添加值 add
let newS = s4.add('a').add('b');
console.log(newS);
console.log(s4.size);
//从set结构中删除值,delete 删除不存在的值会返回false
const r1 = s4.delete('c');
console.log(s4.size);
console.log(r1);
const r2 = s4.has('a');
console.log(r2);
//清空set
s4.clear();
console.log(s4.size);
const s5 = new Set(['a', 'b', 'c']);
s5.forEach(value => {
console.log(value);
})
-----------------------------------2020.12.20JavaScript 高级之day05ES6结束--------------------------------