JavaScript ES6语法
- ES6新增语法
-
- let
-
- let语法
- let经典面试题
- 小结
- const
- var、let、const区别
- 解构赋值
- 箭头函数
-
- 箭头函数经典面试题
- 剩余函数
- ES6的内置对象拓展
-
- Array的拓展方法
-
- 拓展运算符
- Array.from()
- 实例方法find()
- 实例方法findIndex()
- 实例方法includes()
- string的拓展方法
-
- 模板字符串
- 实例方法 startsWith()和endsWith()
- 实例方法 repeat()
- set数据结构
-
- 实例方法
- 遍历
ES6新增语法
let
let语法
let声明的变量只在所处于的块级有效
let经典面试题
//题1
var arr = [];
for (var i = 0; i < 2; i++) {
arr[i] = function () {
console.log(i);
}
}
//因为执行arr[0]这个函数时，i==2 i是全局变量了
arr[0](); //输出2
arr[1](); //输出2
//题2
let arr = [];
for (let i = 0; i < 2; i++) {
arr[i] = function () {
console.log(i);
}
}
arr[0](); //输出0
arr[1](); //输出1
//因为let声明i，每次循环都会新增一块 块级作用域，i指向是当前块级作用域，所以输出的是自己上一级（循环产生的块级作用域）作用域下的i值
小结
- let用来声明变量
- let关键字声明的变量具有块级作用域
- 在大括号中，用let声明的变量具有块级作用域，而var是没有的
- 防止循环变量变成全局变量
- let声明的变量没有变量提升
- let声明的变量存在暂时性死区
//存在暂时性死区
var str = '111';
if(true){
str = 'aaa'; //虽然str是全局变量，但是if块级作用域中，let声明str，即使赋值操作在let声明变量前，也无法赋值成功
let str = 'a1';
}
const
const声明常量，常量就是值（内存地址）不能改变的量
//1.具有块级作用域
if(true){
const a = 1;
}
console.log(a); //报错
//2.声明常量必须赋值
const a = 1; //正常
const b; //报错
//3.声明常量的值不能被更改
const c = 'ccc';
c = 'ddd'; //报错Assignment to constant variable
//3.1 声明的数组可以修改数组中的值
const arr = ['a1','a2'];
arr[0] = '修改了';
console.log(arr); //输出['修改了','a2'];
//但是这种情况是不允许的
arr = ['第二次修改了','a2']; //报错Assignment to constant variable
//因为第二次修改属于重新赋值，会改变内存地址，是不给允许的
//但是第一次修改，只是修改内存地址指向的
var、let、const区别
- 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
- 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
- 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值
解构赋值
//解构赋值 数组
var [a,b,c] = [1,2,3];
console.log(a); //输出1
console.log(b); //输出2
console.log(c); //输出3
//解构赋值 对象
var obj = {
name:'zhangsan',
age:18,
scale:100
}
var {name,age,scale} = obj;
console.log(name); //输出zhangsan
console.log(age); //输出18
console.log(scale); //输出100
//解构赋值 对象 使用别名
//name指向对象的属性名name aa是给name起的别名
// aa -> name -> obj中的name值
var {name:aa,age:bb,scale:cc} = obj;
console.log(aa); //输出zhangsan
console.log(bb); //输出18
console.log(cc); //输出100
箭头函数
新增的一种定义函数的方法
//箭头函数
var fn = ()=>{
console.log('箭头函数');
}
fn(); //输出 箭头函数
//
function sum(a,b){
console.log(a+b);
}
sum(1,2);
//上述函数等价于下列函数
var sum = (a,b)=>{console.log(a+b)};
sum(1,3);
//当形参只有一个时，可以省略括号，{}中只有一条执行语句时，可以省略{}
function fn(a){
return a;
}
var a = fn(5);
console.log(a); //输出5
var b = a => a;
console.log(b(10)); //输出10
//箭头函数的this指向
const obj = { name: '张三'}
function fn () {
console.log(this);//this 指向 是obj对象
return () => {
console.log(this);//this 指向 的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是的obj对象，所以这个this也指向是obj对象
}
}
const resFn = fn.call(obj);
resFn();
箭头函数经典面试题
var age = 100;
var obj = {
age: 20,
say: () => {
alert(this.age); //此处的this指向的是window变量
}
}
obj.say();//箭头函数this指向的是被声明的作用域里面，而对象没有作用域的，所以箭头函数虽然在对象中被定义，但是this指向的是全局作用域
//假设使用
obj.say.call(obj);//通过call方法将this指向绑定为obj，则能弹出obj.age
剩余函数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组，不定参数定义方式，这种方式很方便的去声明不知道参数情况下的一个函数
function fn(a,...arg){
console.log(a);
console.log(arg); //arg为剩余函数 接受剩下的参数 打包成一个数组
}
fn(1,2,3,4,5);
剩余参数和解构配合使用
let students = ['wangwu', 'zhangsan', 'lisi'];
let [s1, ...s2] = students;
console.log(s1); // 'wangwu'
console.log(s2); // ['zhangsan', 'lisi']
ES6的内置对象拓展
Array的拓展方法
拓展运算符
let arr = ['a','b','c'];
console.log(...arr); //输出abc
// 等同于这句
console.log('a','b','c');
可以用来合并数组
let arr = ['a','b','c'];
let arr1 = [1,2,3];
let arr2 = [...arr,...arr1];
console.log(arr2); //["a", "b", "c", 1, 2, 3]
Array.from()
将伪数组遍历转换为真正的数组
let obj = {
'0' : 'a',
"1" : 'b',
'2' : 'c',
'length' : 3
}
var res = Array.from(obj);
console.log(res);
let obj = {
'0':2,
"1":4,
'length':2
}
var res = Array.from(obj,item => item*2);
console.log(res); //[4, 8]
实例方法find()
用于找出第一个符合条件的数组成员，如果没有找到返回undefined
let arr = [5,10,15,28,30];
let res1 = arr.find(item => item>12);
let res2 = arr.find(item => item>40);
console.log(res1); //输出第一个条件匹配的值 15
console.log(res2); //全部不符合条件，输出underfined
实例方法findIndex()
用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1
let obj = [{
id:1,
name:'zs'
},{
id:2,
name:'ls'
},{
id:3,
name:'ww'
},
];
let res3 = obj.findIndex(item=>item.id==2);
let res4 = obj.findIndex(item=>item.id==4);
console.log(res3); //返回条件匹配的索引号 条件都不匹配返回-1
console.log(res4); //返回条件匹配的索引号 条件都不匹配返回-1
实例方法includes()
判断某个数组是否包含给定的值，返回布尔值
let arr = [5,10,15,28,30];
console.log(arr.includes(4)); //arr不包含4这个值，返回false
string的拓展方法
模板字符串
模板字符串支持换行
${}支持调用函数
//支持调用变量
let bl = '这是变量'
var str = `这是一个字符串${bl}`;
console.log(str);
//支持调用函数
let obj = {
name:'zs',
say: ()=>{
return '我是zs哈哈哈哈'
}
}
let str1 = `${obj.name}哈哈哈哈哈${obj.say()}`;
console.log(str1);
实例方法 startsWith()和endsWith()
startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值
let str = 'Hello world!';
str.startsWith('Hello') // true
str.endsWith('!') // true
str.endsWith('。') // false
实例方法 repeat()
将一个值重复几次
let str = 'a';
let res = str.repeat(5);
console.log(res); //输出aaaaa
set数据结构
实例方法
set是一个构造函数，用于生成Set数据结构，不允许有重复值，可以用来电商平台存储用户搜索关键词历史记录
const set1 = new Set();
console.log(set1); // Set(0) {}
console.log(set1.size); // 0
const set2 = new Set([1,23,45,67]);
console.log(set2); // Set(4) {1, 23, 45, 67}
console.log(set2.size); // 4
//实例方法 添加
set1.add(5).add(10); //支持链式调用
console.log(set1); // Set(2) {5,10}
//实例方法 删除
set2.delete(45);
console.log(set2); // Set(3) {1, 23, 67}
//实例方法 清空
set2.clear();
console.log(set2); // Set(0) {}
//实例方法 has
var res1 = set1.has(10);
var res2 = set1.has(7);
console.log(res1); //返回一个布尔值，表示该值是否为 Set 的成员 true
console.log(res2); // false
遍历
const set = new Set(['a','b','v','z']);
set.forEach(value => console.log(value));
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)