您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

JS:定义变量的var、let有何操作?

时间:2020-07-09 11:43:55  来源:  作者:

最近话不多,直接看代码和结果好伐?

一、var

定义:

//一般情况
var word = "Hello World";
console.log(word);
//输出:Hello World

//变量提升?
console.log(word);
var word = "Hello World";
//输出:undefined

//变量提升!
word = "哈哈哈";
console.log(word);
var word = "Hello World";
//输出:哈哈哈

//所谓的全局变量,已经在window对象上了
var word = "Hello World";
console.log(window.word);
//输出:Hello World

//不写var
word = "Hello World";
console.log(word);
console.log(window.word);
//输出:
//Hello World
//Hello World

函数:

//一般情况
var word = "Hello World";
function PLAYFULHD() {
  console.log(word);
}
PLAYFULHD();
//输出:Hello World

//变量提升?
PLAYFULHD();
var word = "Hello World";
function PLAYFULHD() {
  console.log(word);
}
//输出:undefined

//变量提升?
PLAYFULHD();
function PLAYFULHD() {
  console.log(word);
}
var word = "Hello World";
//输出:undefined

//变量提升!
word = "嘿嘿嘿";
PLAYFULHD();
function PLAYFULHD() {
  console.log(word);
}
var word = "Hello World";
//输出:嘿嘿嘿

//不写var
word = "Hello World";
function PLAYFULHD() {
    var word = "嘿嘿嘿";
    console.log(word);
}
PLAYFULHD();
console.log(word);
//输出:
//嘿嘿嘿
//Hello World

重复定义:

//重复定义1
var word = "Hello World";
console.log(word);
var word = "哦吼吼";
console.log(word);
//输出:
//Hello World
//哦吼吼

//重复定义2
var word = "Hello World";
console.log(word);
function PLAYFULHD() {
    var word = "哦吼吼";
    //let word = "哦吼吼"; //效果一样
    console.log(word);
}
PLAYFULHD();
console.log(word);
//输出:
//Hello World
//哦吼吼
//Hello World

总结:

  • 全局变量:指变量在函数外定义, 网页中所有脚本和函数均可使用;当页面关闭后销毁
  • 局部变量:指变量在函数内定义,重复定义了相同的变量并不改变全局变量的值;当函数执行结束后销毁;
  • 变量提升?只要存在赋值的操作,就能直接使用,其实可以理解为默许了没有var就可以定义变量;
  • 一般在定义全局变量时,放在script标签下的最前面,且局部变量的命名不和全局变量重复;
  • 对于数组和对象,和原始类型的情况不一样,下面是执行代码:(数组和对象的情况类似)
//正常情况
arr = ["HHHH"];
console.log(arr);
var arr = ["哈哈哈", "嘿嘿嘿", "哦吼吼"];
//输出:["HHHH"]

//直接报错
arr[0] = "HHHH";
console.log(arr);
var arr = ["哈哈哈", "嘿嘿嘿", "哦吼吼"];
//输出:Uncaught TypeError: Cannot set property '0' of undefined

二、let

必须先定义,再使用;其它情况同var

//直接报错
word = "哈哈哈";
console.log(word);
let word = "Hello World";
//输出:Uncaught ReferenceError: Cannot access 'word' before initialization

//不绑定到window
let word = "Hello World";
console.log(word);
console.log(window.word);
//Hello World
//undefined

三、总结

  • var是全局变量,在window对象上可以访问到
  • var:定义时可以不加,直接进行赋值操作
  • let:定义的语句必须先声明,否则报错;不在window对象上
  • 局部定义的变量,即函数内,在执行完毕后就销毁,注意匿名函数也是如此
  • const与let相似,定义的语句必须先声明


Tags:JS   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
前言几乎所有.NET序列化程序的实现基础都是反射。下列代码是Newtonsoft.Json的实现:protectedvirtualJsonPropertyCreateProperty(MemberInfomember,MemberSerializationmemb...【详细内容】
2021-12-28  Tags: JS  点击:(2)  评论:(0)  加入收藏
前言JDBC访问Postgresql的jsonb类型字段当然可以使用Postgresql jdbc驱动中提供的PGobject,但是这样在需要兼容多种数据库的系统开发中显得不那么通用,需要特殊处理。本文介绍...【详细内容】
2021-12-23  Tags: JS  点击:(13)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  Tags: JS  点击:(23)  评论:(0)  加入收藏
前言前几天有粉丝在群里问了一个json文件处理的问题。看上去他只需要follower和ddate这两个字段下的对应的值。我们知道json是一种常见的数据传输形式,所以对于爬取数据的数...【详细内容】
2021-12-07  Tags: JS  点击:(40)  评论:(0)  加入收藏
作者:前端进阶者来源:前端进阶学习交流一、前言 我们经常在网页上 ,游戏界面加载时会看到加载进度条的效果,我们往往会以为这些加载进度条的效果,很难实现。今天教大家JS+CSS结合...【详细内容】
2021-11-05  Tags: JS  点击:(45)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  Tags: JS  点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  Tags: JS  点击:(58)  评论:(0)  加入收藏
利用JS的CryptoJS 3.x和PHP的openssl_encrypt,openssl_decrypt实现AES对称加密解密,由于需要两种语言对同一字符串的操作,而CryptoJS 的默认加密方式为“aes-256-cbc”,PHP端也...【详细内容】
2021-09-16  Tags: JS  点击:(79)  评论:(0)  加入收藏
作者:JShaman.com:w2sft内容预告:本文将实例讲解以下JS代码混淆加密技术:方法名转义和转码、成员表达式转IIFE、函数标准化、数值混淆、布尔型常量值混淆、二进制表达式转为调用...【详细内容】
2021-09-03  Tags: JS  点击:(82)  评论:(0)  加入收藏
Web 浏览器日益强大,网站和 Web 应用程序的复杂性也在增加。几十年前需要超级计算机的操作现在可以在智能手机上运行,其中之一就是人脸检测。检测和分析人脸的能力非常有用,因...【详细内容】
2021-08-20  Tags: JS  点击:(105)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === 'a') { b = true} else { b = false}// goodb = a === 'a'2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(6)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(35)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(36)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(40)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== '') { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(51)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条