前面的内容主要讲的是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:
- 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);
})