网站建设 维护购销合同,网站自动推广软件,精准客源推广引流,安徽合肥建筑公司前面的内容主要讲的是JavaScript基础内容#xff0c;想要更加了解前端的小朋友们#xff0c;需要再继续努力#xff0c;我们开始向JavaScript高级内容出发了呦#xff0c;不要掉队啦#xff01;
一、变量与常量的声明
1.1 var 关键字声明变量
语法#xff1a;
var 变…前面的内容主要讲的是JavaScript基础内容想要更加了解前端的小朋友们需要再继续努力我们开始向JavaScript高级内容出发了呦不要掉队啦
一、变量与常量的声明
1.1 var 关键字声明变量
语法
var 变量 值;
var 声明的变量没有块级作用域ES5中的作用域全局和局部
1、可以先使用后声明
2、可以重复定义同一个变量逻辑错误第二次应该是修改变量而不是定义
3、var用在for循环条件中造成for 循环的污染的问题
4、var 声明的变量没有块级作用域ES5中的作用域全局和局部
1.2 let 关键字声明声明变量
语法
let 变量 值;
ES6中为了统一并提高代码的安全性引入了let关键字来代替var声明变量
特点
1、let声明的变量没有预解析不会有变量提升
2、同一作用域let不可以重复定义同一个变量
3、let用在for循环条件中不会造成for 循环的污染的问题
4、let声明的变量有块级作用域ES6中的作用域全局和局部还有块级作用域
1.3 块级作用域
块指的是代码块一对 { } 之间就是一个代码块。变量的有效范围只在这对 大括号 之间就是块级作用域。
var 和 let都可以用来声明变量当然它们会有不同点
var的声明
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声明
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声明的变量作用域一样 块级作用域没有预解析引用类型的值可以修改
语法
const 常量名 值;
二、模板字符串
语法
固定字符${变量或者表达式}
例如
let name 狗蛋,age 12,gender 男
// 字符串拼接
let str 大家好我叫 name 今年 age 岁了我是一个 gender 孩子
// 模板字符串
let str2 大家好我叫${name}今年 ${age}岁了我是一个${gender}孩子
特点 在模板字符串中可以解析 ${ } 之间的变量或者表达式 在整个字符串中允许换行
三、解构语法
ES6 允许按照一定模式从数组和对象中提取值对变量进行赋值这被称为解构。
3.1 对象解构
let obj {name: luowowo,age:11,email:luowowo163.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中对象的写法发生了些改变对象也可以简写
let name 小龙女,age 12,gender 男obj的属性名和变量是同样的可以在es6中简化为
let obj {name,age,gender}如果一个对象的属性名和外面的一个变量名同名可以直接将变量名作为属性名并会自动地把变量的值作为属性的值
3.2 数组解构
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); //10let [ , ,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); //303.3 字符串解构
let string1 xyz;let [a,b,c] string1;
console.log(a); //x
console.log(b); //y
console.log(c); //zstring1[1] Y;
console.log(string1); // xyz 无法修改
console.log(string1[1]); // y3.4 函数参数默认值和参数解构
函数参数可以给默认值
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(a0,b0,c0,d0){return a b c d;
}函数参数的解构 // 参数是一组有次序的值
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});函数解构赋值指定参数的默认值
function func2({name, age} {}){ //防止不传实参时候的报错console.log(name, age);
}
func2(); //undefined undefined
// func2(); //相当于传了一个null {name, age}null 就会报错
// func2({}); //不会报错输出undefined undefinedfunction func2({nameluowowo, age11} {}){ //指定默认值console.log(name, age);
}
func2(); //luowowo 11四、剩余运算符和展开运算符
4.1 剩余运算符
用于赋值号左边或函数形参
ES5的方法
arguments 对象function fn(){console.log(arguments);// 伪数组
}fn(10, 20, 30, 50, 60);ES6的方法function func( a, b ,...args){ // 把剩余的参数都交给argsconsole.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 展开运算符
用于函数实参或者赋值号右边
// 快速将一个数组拆开成一个一个的元素
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)// 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:chenglong163.com,
};
let newObj {...obj1,...obj2}; // 等效于{ name: luowowo, age: 18, email: chenglong163.com }
console.log(newObj); //{ name: chenglong, age: 18, email: chenglong163.com }// 4、es6中另一个合并对象的方法
let newObj2 Object.assign({},obj1,obj2); // 把第二个及第二个以上的参数都合并到第1个上面去。
console.log(newObj2); //{ name: chenglong, age: 18, email: chenglong163.com }五、箭头函数
5.1 基本使用
基本语法
ES6 允许使用 “箭头”简化函数的定义。
(参数) { 函数体 }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)使用场景回调函数
// 定时器中的回调函数
setInterval(() {console.log(我用了箭头函数);
}, 1000);// forEach中的回调函数
var arr [22, 32, 11, 3, 5, 7, 88];
arr.forEach(item console.log(item));箭头函数常用的省略
// 当只有一条return语句{}和return可以一起省略
const getSum (x, y) {return x y
}// 可以写为
const getSum (x, y) x yconsole.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方法
var arrylike {0:张三,1:李四,2:王五,length:3
}
console.log(arrylike);//{0: 张三, 1: 李四, 2: 王五, length: 3}
var ary Array.from(arrylike);
console.log(ary);//[张三, 李四, 王五]
方法还可以接受第二个参数作用类似于数组的map方法用来对每个元素进行处理将处理后的值放入返回的数组。
var arraylike {0:1,1:2,length:2
}
var ary Array.from(arraylike,itemitem*2) // 2 4
console.log(ary);
6.2 Array实例方法find方法
用于找出第一符合条件的数组成员如果没有找到返回undefined
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
let ary [10,20,50];
let index ary.findIndex(item item 15);
console.log(index);//1
6.4 Array实例方法includes
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 数据结构。
const s new Set;
Set函数可以接受一个数组作为参数用来初始化。
const set new Set([1, 2 ,3 ,4 , 5]);
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(): 清除所有成员没有返回值
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方法用于对每个成员执行某种操作没有返回值
const s5 new Set ([a,b,c,d,e]);
s5.forEach((value){console.log(value);
})
