JavaScript高级 ES6篇

前面的内容主要讲的是JavaScript基础内容,想要更加了解前端的小朋友们,需要再继续努力,我们开始向JavaScript高级内容出发了呦,不要掉队啦!

一、变量与常量的声明

1.1 var 关键字声明变量

语法:

javascript 复制代码
var 变量 = 值;

var 声明的变量没有块级作用域(ES5中的作用域:全局和局部)

1、可以先使用,后声明

2、可以重复定义同一个变量,逻辑错误,第二次应该是修改变量,而不是定义

3、var用在for循环条件中,造成for 循环的污染的问题

4、var 声明的变量没有块级作用域(ES5中的作用域:全局和局部)

1.2 let 关键字声明声明变量

语法:

javascript 复制代码
let 变量 = 值;

ES6中为了统一并提高代码的安全性,引入了let关键字来代替var声明变量

特点:

1、let声明的变量没有预解析,不会有变量提升

2、同一作用域let不可以重复定义同一个变量

3、let用在for循环条件中,不会造成for 循环的污染的问题

4、let声明的变量有块级作用域(ES6中的作用域:全局和局部还有块级作用域)

1.3 块级作用域

块指的是代码块,一对 { } 之间就是一个代码块。变量的有效范围只在这对 大括号 之间,就是块级作用域。

var 和 let都可以用来声明变量,当然,它们会有不同点:

var的声明

javascript 复制代码
var btns = document.querySelectorAll('button')
for(var i = 0; i < btns.length; i++){
  btns[i].onclick = function(){
    console.log(i)
  }
}
console.log(i)  //btns.length
  • var声明的变量可以重复定义
  • var声明的变量有预解析
  • var声明的变量没有块级作用域

let声明

javascript 复制代码
let btns = document.querySelectorAll('button')
for(let i = 0; i < btns.length; i++){
  btns[i].onclick = function(){
    console.log(i)
  }
}
console.log(i) //undefined
  • let声明的变量不可以重复定义
  • let声明的变量没有预解析
  • let声明的变量有块级作用域
  • let声明的变量暂时性死区

1.4 const关键字

ES6中,const关键字来声明一个只读的常量

常量具备以下特点:

  • 一旦声明就必须赋值
  • 一旦赋值就不能修改
  • 常量的作用域和let声明的变量作用域一样 块级作用域
  • 没有预解析
  • 引用类型的值可以修改

语法:

javascript 复制代码
const 常量名 = 值;

二、模板字符串

语法:

javascript 复制代码
`固定字符${变量或者表达式}`

例如:

javascript 复制代码
let name = '狗蛋',age = 12,gender = '男'
// 字符串拼接
let str = "大家好,我叫" + name + ",今年" + age + "岁了,我是一个" + gender + "孩子"
// 模板字符串
let str2 = `大家好,我叫${name},今年 ${age}岁了,我是一个${gender}孩子`

特点:

在模板字符串中,可以解析 ${ } 之间的变量或者表达式

在整个字符串中允许换行

三、解构语法

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。

3.1 对象解构

javascript 复制代码
let obj = {
    name: "luowowo",
    age:11,
    email:"luowowo@163.com"
};

// 取出所有属性并赋值:
// let name  = obj.name;
// let age  = obj.age;
// let email  = obj.email;

// 现在只需要(等效于上面的写法):
// 等号左边的变量要和对象里面的属性同名,否则没法解构出来
// let {name, email, age} = obj;  //{ }中的变量名和obj的属性名一致   完全解构

// 部分解构
// let {name} = obj;     // 部分解构

//解构之后重命名   
let {name:itsName} = obj;     解构之后重命名为itsName

//将现有对象的方法,赋值到某个变量
let {random}=Math;
console.log(random)//[Function: random]

在ES6中,对象的写法发生了些改变,对象也可以简写

javascript 复制代码
let name = '小龙女',age = 12,gender = '男'

obj的属性名和变量是同样的,可以在es6中简化为:
let obj = {name,age,gender}

如果一个对象的属性名和外面的一个变量名同名,可以直接将变量名作为属性名,并会自动地把变量的值作为属性的值

3.2 数组解构

javascript 复制代码
let arr1 = [10, 20, 30];

let [a, b, c , d] = arr1;

// 完全解构
console.log(a);  //10
console.log(b);  //20
console.log(c);  //30
// 若解构不成功,变量的值就等于 undefined
console.log(d);  //undefined

// 部分解构
let [e] = arr1;
console.log(e);  //10

let [ , ,f] = arr1;
console.log(f);  //30


// 复合解构
let arr2 = [1, 2, [10, 20, 30]];
let [ j, k, [x, y, z]] = arr2;
console.log(j);  //1
console.log(k);  //2
console.log(x);  //10
console.log(y);  //20
console.log(z);  //30

3.3 字符串解构

javascript 复制代码
let string1 = "xyz";

let [a,b,c] = string1;
console.log(a);  //x
console.log(b);  //y
console.log(c);  //z


string1[1] = "Y";
console.log(string1);  // xyz    无法修改
console.log(string1[1]);  // y

3.4 函数参数默认值和参数解构

函数参数可以给默认值

javascript 复制代码
ES5的方法:
function add(a,b,c,d){
  a = a || 0;
  b = b || 0;
  c = c || 0;
  d = d || 0;
  return a + b + c + d;
}

ES6的方法:

funciton 函数名(参数=默认值){ // 注意当 参数 为 undefined 时 参数 赋值为 默认值
}

function add(a=0,b=0,c=0,d=0){
  return a + b + c + d;
}

函数参数的解构

javascript 复制代码
 // 参数是一组有次序的值
function f([x, y, z]) { 
    console.log(x, y, z);
}
f([1, 2, 3]);
// 参数是一组无次序的值
function fn({x, y, z}) { // {x, y, z} = obj 解构
    console.log(x, y, z);
}
fn({z: 4, x: 5, y: 6});

函数解构赋值指定参数的默认值

javascript 复制代码
function func2({name, age} = {}){   //防止不传实参时候的报错
    console.log(name, age);
}
func2();   //undefined undefined
// func2(); //相当于传了一个null   {name, age}=null 就会报错
// func2({});  //不会报错,输出:undefined undefined

function func2({name="luowowo", age=11} = {}){    //指定默认值
    console.log(name, age);
}
func2();  //luowowo 11

四、剩余运算符和展开运算符

4.1 剩余运算符

用于赋值号左边或函数形参

javascript 复制代码
ES5的方法:
arguments 对象:

function fn(){
    console.log(arguments);// 伪数组
}

fn(10, 20, 30, 50, 60);
javascript 复制代码
ES6的方法:

function func( a, b ,...args){  // 把剩余的参数都交给args
    console.log(rest);
}

func(10, 20, 30, 50, 60);

function func2(...args){   //args接收所有参数作为一个数组
    rest.forEach(function (item) {
        console.log(item);
    });
}
func2(60, 70, 80, 90);

// 报错
function f(a, ...b, c) {
  // ...
}

4.2 展开运算符

用于函数实参或者赋值号右边

javascript 复制代码
// 快速将一个数组拆开成一个一个的元素
let arr = [1, 2, 3, 4]
console.log(...arr)
// 快速将一个对象里面的数据复制一份到一个新的对象里面
let obj = { name: '狗蛋', age: 12, gender: '男' }
console.log({id:1,birthday:'2020-02-02', ...obj})
// 将一个字符串拆开成为多个单独的字符
let str = 'abc'
console.log(...str)
javascript 复制代码
// 1、数组中的值作为函数参数使用
let arr1 = [10, 20, 30];

function func(a, b, c){
    console.log(a,b,c)
}

func(...arr1);  //等效于:func(10,20,30);     输出结果10 20 30

// 2、合并数组
let arr2 = [40, 50, 60];
let newArr = [...arr1,...arr2];  // 等效于 [ 10, 20, 30, 40, 50, 60 ]
console.log(newArr);    //[ 10, 20, 30, 40, 50, 60 ]

// 3、合并对象
let obj1 = {
    name:"chenglong",
    age:"18",
};
let obj2 = {
    email:"chenglong@163.com",
};
let newObj = {...obj1,...obj2}; // 等效于{ name: 'luowowo', age: '18', email: 'chenglong@163.com' }
console.log(newObj);    //{ name: 'chenglong', age: '18', email: 'chenglong@163.com' }

// 4、es6中另一个合并对象的方法
let newObj2 = Object.assign({},obj1,obj2);  // 把第二个及第二个以上的参数都合并到第1个上面去。
console.log(newObj2);   //{ name: 'chenglong', age: '18', email: 'chenglong@163.com' }

五、箭头函数

5.1 基本使用

基本语法

ES6 允许使用 "箭头"(=>)简化函数的定义。

javascript 复制代码
(参数) => { 函数体 }

1. 形参个数如果为1个,可以省略小括号不写;
        // 3、有一个参数    (函数只有一个函数,可以省略()不写
        // let fn3 = (a) =>{console.log(a);}
        let fn3 = a => console.log(a);
        fn3(6)

2. 如果函数体里面只有一个语句,可以省略大括号不写, 并且他会默认返回 => 符号后面的数据。
        // let fn1 =() =>{console.log("无参数无返回值");}
        let fn1 = () => console.log("无参数无返回值");
        fn1();
        
        // 2、无参数有返回值   (函数体只有一句话(并且要返回),{}和return都可以不写
        // let fn2 = ()=>{return "无参数有返回值"}
        let fn2 = () => "无参数有返回值"
        console.log(fn2());

3. 如果函数体有多个语句,则不能省略大括号。
4. 如果函数体只有一个语句,且返回一个对象,建议是,不要写简写的方式。
5. 箭头函数不可以使用 arguments 获取参数列表,可以使用 rest 参数代替。
        let fn6 = (...a) =>{
            console.log(a); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
        }
        fn6(1,2,3,4,5,6,7,8,9)

使用场景(回调函数)

javascript 复制代码
// 定时器中的回调函数
setInterval(() => {
    console.log("我用了箭头函数");
}, 1000);

// forEach中的回调函数
var arr = [22, 32, 11, 3, 5, 7, 88];
arr.forEach(item => console.log(item));

箭头函数常用的省略

javascript 复制代码
// 当只有一条return语句,{}和return可以一起省略
const getSum = (x, y) => {
    return x + y
}

// 可以写为
const getSum = (x, y) => x + y

console.log(getSum(3, 4))

// 当只有一条return语句 并且返回的是一个对象,把这个对象用()包裹起来
const fn = () => ({
    a: 1,
})
console.log(fn()) 

// 形参只有一个,小括号可以省略,其余情况全部要加()
const f2 = (x) => x * 2    // (x)=> {return x *2}
console.log(f2(6))

5.2 this指向问题

普通函数中的this:

  1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj

2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (约定俗成)

3.在严格模式下,没有直接调用者的函数中的this是 undefined

4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象

箭头函数中的this:

1.箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),此处指父级作用域,而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this

2.箭头函数中,this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。

六、数组(Array)拓展方法

6.1 Array扩展方法:Array.from方法

javascript 复制代码
var arrylike = {
    "0":"张三",
    "1":"李四",
    "2":"王五",
    "length":3
}
console.log(arrylike);//{0: '张三', 1: '李四', 2: '王五', length: 3}
var ary = Array.from(arrylike);
console.log(ary);//['张三', '李四', '王五']

方法还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

javascript 复制代码
var arraylike = {
    "0":"1",
    "1":"2",
    "length":2
}
var ary = Array.from(arraylike,item=>item*2) // 2 4
console.log(ary);

6.2 Array实例方法:find方法

用于找出第一符合条件的数组成员,如果没有找到返回undefined

javascript 复制代码
let ary = [{
    id: 1,
    name: '张三' 
},{
    id: 2,
    name: '李四'
}];
let target = ary.find((item, index) => item.id == 2);
console.log(target);//{id: 2, name: '张三'}

6.3 Array实例方法:findIndex方法

用于找出第一个符合条件的数组成员的位置,如果没有找到返回-1

javascript 复制代码
let  ary = [10,20,50];
let index = ary.findIndex(item => item> 15);
console.log(index);//1

6.4 Array实例方法:includes

javascript 复制代码
let ary = ["a","b","c"];
let result = ary.includes('a');
console.log(result);//true
result = ary.includes('e');
console.log(result);//false

七、set

ES6 提供了新的数据结构 Set 它类似于数组 但是成员的值都是唯一的 没有重复的值

Set本身是一个构造函数,用来生成 Set 数据结构。

javascript 复制代码
const s = new Set;

Set函数可以接受一个数组作为参数,用来初始化。

javascript 复制代码
const set = new Set([1, 2 ,3 ,4 , 5]);
javascript 复制代码
const s1 = new Set();
console.log(s1.size);// 0
const s2 = new Set(["a","b"]);
console.log(s2.size);// 2
const s3 = new Set(["a","a","b","b"]);
console.log(s3.size);// 2
const ary = [...s3];
console.log(ary);//['a', 'b']

实例方法:

  • add(value): 添加某个值,返回Set结构本身
  • delete(value): 删除某个值,返回一个布尔值,表示删除是否成功
  • has(value): 返回一个布尔值,表示该值是否为Set的成员
  • clear(): 清除所有成员,没有返回值
javascript 复制代码
const s4 = new Set();
//向set结构中添加值 使用add方法
s4.add('a').add('b');
console.log(s4.size);//2
//从set结构中删除值,用到的方法是delete
const r1 = s4.delete('a');
console.log(s4.size);//1
console.log(r1);//true
//判断某一个值是否是set数据中的成员 使用has
const r2 = s4.has('b');
console.log(r2);//true
//清空set数据结构中的值 使用clear方法
s4.clear();
console.log(s4.size);//0

遍历set

Set 结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值

javascript 复制代码
const s5 = new Set (['a','b','c','d','e']);
s5.forEach((value)=>{
    console.log(value);
})
相关推荐
半开半落2 分钟前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
百事老饼干10 分钟前
Java[面试题]-真实面试
java·开发语言·面试
理想不理想v30 分钟前
vue经典前端面试题
前端·javascript·vue.js
小阮的学习笔记44 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜1 小时前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=1 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
杨荧1 小时前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka
白子寰1 小时前
【C++打怪之路Lv14】- “多态“篇
开发语言·c++
王俊山IT1 小时前
C++学习笔记----10、模块、头文件及各种主题(一)---- 模块(5)
开发语言·c++·笔记·学习