let声明变量
//1.let声明变量,与var不同的是let声明的变量不能重复声明
let a;
a=100;
let a=200;
//2.let块儿级作用域,在大括号中的变量再括号外不能被访问,var可以
{var girl = "123"}
console.log(girl);
//3.let不存在变量提升,不允许在变量声明前使用
console.log(song);
let song="张三";
//4.不影响作用域链效果,let声明的变量在块儿级作用域中使用还是可以被访问到,和var一样
{
var s="张三";
function fn(){
console.log(s);
}
fn();
}
//5.let声明的循环在各个区域块不关联,点击各个盒子有用,但var声明的变量在点击时i的值已经超过了items的长度,此时点击会报错
let items=document.getElementsByClassName('item');
for(let i=0;i<items.length;i++){
items[i].onclick=function(){
items[i].style.background="pink";
}
}
const 声明常量
//1.必须赋初值2.一般常量大写3.常量的值不能被修改4.块儿级作用域5.对数组和对象的元素修改,不算对常量的修改,不会报错
const TEAM = ['XIAO','LI','WANG'];
TEAM.push('zhang');//正确
TEAM = ['ZHANG'];//错误
对象的解构
//一般对象的引用方法
const zhao = {
name:'red',
age:'13',
xiaopin:function(){
console.log("123");
}
}
console.log(zhao.name);
zhao.xiaopin();
//使用解构方法,可以从对象中提取属性或者方法并绑定到变量身上
const zhao ={
name:'red',
age:'13',
xiaopin:function(){
console.log("123");
}
}
// 定义变量name,age,xiaopin获取zhao对象的属性
let {name,age,xiaopin}=zhao;
console.log(name);
xiaopin();
模板字符串 ` `
//1.内容中可以直接出现换行
let str = `1313
156`;
console.log(str);
//2.变量拼接
let a=`123`;
let b=`${a}456`;
console.log(b);
在大括号里面直接写入变量和函数,作为对象的属性和方法
let name='zhang';
let color = function (){
console.log('red');
}
const ming = {
name,
color,
import(){
console.log("今天提升年期");
}
}
console.log(ming.name);
箭头函数
1.//箭头函数this指向定义该函数时所在的作用域指向的对象,作用域是指函数内部,并不是对象内部
let a = () =>{
console.log("123");
}
//this是静态的,this始终指向函数声明时所在作用域下this的值
function getName(){
console.log(this.name);
}
let getName2 = ()=>{
console.log(this.name);
}
window.name='尚硅谷';
const school = {
name:'guigu'
}
//普通函数调用时的this永远是window
//call()是函数对象的方法,需要通过函数来调用,在call里面的第一个参数传入一个对象,此时会改变this的指向
//call()与apply()用法几乎相同,不同的是,call传实参的时候要一个个的传,而apply要将一个数组整体传入
getName(); //window
getName.call(school); //school
getName2.call(school); //window
//用箭头函数声明的对象this的值是不可以改变的
//2.不能构造实例化对象
//报错
let Person = (name,age)=>{
this.name=name;
this.age=age;
}
let me = new Person('zhangsan',20);
console.log(me);
//通过普通函数创建
let Person = function(name,age){
this.name = name;
this.age = age;
}
let me = new Person('zhangsan',20);
//3.不能使用 arguments变量,arguments是一个类数组对象,调用函数时,传递的实参都在arguments中保存
//报错
let fn = () =>{
console.log(arguments);
}
fn(1,2,3);
//注意:1.arguments对象和Function是分不开的。2.arguments这个对象不能显式创建。3.arguments对象只有函数开始时才可用。
let fn = function(){
console.log(arguments);
console.log(arguments[0]);
}
fn(1,2,3);
//4.箭头函数的简写
//1)省略小括号,当形参有且只有一个的时候
let add = n =>{
return n + n;
}
console.log(add(9));
//2)省略花括号,当代码只有一条语句的时候,此时return 必须省略,而且执行结果就是函数的返回值
let pow = (n) =>n*n;
console.log(pow(9));
[...]扩展运算符能将[数组]转换为逗号分隔的[参数序列]
const tfboys=['w','l','y'];
//这样传递给arguments的是一个数组,并且赋给arguments[0]
const tfboys=['w','l','y'];
function chumwan(){
console.log(arguments);
}
chumwan(tfboys);
//这样得到arguments下标的值依次为w l y
function chumwan(){
console.log(arguments);
}
chumwan(...tfboys);
//扩展运算符的应用
//1.数组合并
const kuaizi = ['xia','wang'];
const feiji = ['cheng','ming'];
const hebing = [...kuaizi,...feiji];
console.log(hebing);
//2.数组的克隆
const sanzhihua=['E','G','M'];
const sanyecao=[...sanzhihua];
console.log(sanyecao);
//3.将伪数组转为真正的数组,将获取到的所有div标签的元素转换为数组
const divs=document.querySelectorAll('div');
const divsArr = [...divs];
数组遍历 for...of
const xiyou = ['猪八戒','孙悟空','唐僧'];
for(let v of xiyou){
console.log(v);
}
Class类
class Phone{
//在类中创建函数不需要使用function,并且函数之间不用加逗号分隔
//接收传递过来的参数,并且返回给实例化对象,当new出一个对象时,constructor函数会自动调用
constructor(brand,price){
this.brand = brand;
this.price = price;
}
//创建对象方法
call(){
console.log('我可以打电话');
}
}
let iphone = new Phone('iphone13',5999);
console.log(iphone.brand,iphone.price);
iphone.call();
//继承
class Father{
constructor(){
}
money(){
console.log('这是父亲挣的钱');
}
}
class Son extends Father{
}
let son = new Son();
son.money();
//子类可以得到父类的属性和方法,但是子类内部的属性值父类是访问不到的
//因为子类创建的实例化对象的this与父类的this不是一个
class Father{
constructor(x,y){
this.x=x;
this.y=y;
}
sum(){
console.log(this.x+this.y);
}
}
class Son extends Father{
constructor(x,y){
//调用父类中的构造函数,将子类的x,y传给父类,可以通过super来调用父类中的方法和属性,注意:super调用必须要在子类的this之前
super(x,y);
}
}
let son = new Son(1,2);
son.sum();
Es7新特性
//inclues 判断数组是否包含某元素,返回boolen类型
const mingzhu = ['西游记','红楼梦','三国演义','水浒传'];
console.log(mingzhu.includes('西游记'));
**
//** 平方
console.log(2 ** 10);