【Javascript】基础知识

最新推荐文章于 2024-03-10 10:14:03 发布
最新推荐文章于 2024-03-10 10:14:03 发布
阅读量651 收藏
点赞数
分类专栏： Html+css+javascript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57858263/article/details/129738241
版权

文章目录

01 变量的声明

02 数据类型

复习:

声明

​ 声明变量关键词

​ let

​ const

​ 变量名 =>变量命名规范

​ 英文 数字 _ $不要以数字开头

​ 见名知意

​ 不能使用关键字 保留字

​ = 赋值 先看右侧 右侧运算完毕才把结果返回给 变量存储

​ let 声明变量的情况

​ 常规:

​ 1.声明变量且赋值
2.声明但不赋值
3、声明变量 右侧运算完毕再赋值
4、重复声明，会报错
6、一次性声明多个变量

let abc=1+2,
b=‘1’
c=‘2’
d='3‘

7.不带声明声明关键词 直接赋值的操作
8.不声明直接使用 报错
const 声明变量的情况
1.声明但不赋值 报错
2.重复赋值 后面的值 会覆盖前面的值 报错

数字 ==>数值型 Number
1、 基础数字类型 7种

  • Number 数值型
  • String 字符串型
  • Boolean 布尔类型
  • Undefined 未定义
  • Null 空对象
  • Symbol 符号 es6补充
  • Bigint 大整数 es11补充

2、复杂数据类型 1种

  • Object 对象
    typeof 大致准确的判断 会有点bug

1.数值字面量（一眼就能看到值 叫法 123 一个字面量）
2.属于数值类型的数据
整数 1 2 3
小数 1.1 1.3
二进制 0b11=3
八进制 0o70
十六进制 0xA
特殊的数值 NAN=>坏掉的数值 NaN无法和其他 NaN相等
3.浮点数 运算 精度丢失的问题（超大整数 也有精度丢失的问题）
由于双精度存储的问题 占用的内存更大 丢失精度 =>运算 不准确
4.表示数字的范围
表示数字的最大2^1023 到2^1024之间 无限接近2……1024
超过这个范围 Infinity 无穷大 也有有-无穷大 -2^1024
最大整数的范围 2^53 在这个范围内 整数运算才准确

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num1 = 123;
        let num2 = 0b11;
        let num3 = 0o70;
        let num4 = 0xA;
        let num5 = 0/0;
        let num6 = 0/0;
        console.log( typeof 1)
        console.log(num1)
        console.log(num2)
        console.log(num3)
        console.log(num4)
        console.log(num5)
        console.log(num5==num6)
        //  浮点精度丢失
        console.log(0.1+0.2)
        // 解决方法
        console.log((0.1 * 10 + 0.2 * 10) / 10); 
        // 无限大
        console.log(2**1024)
        console.log(2**53)
    </script>
</body>
</html>

在这里插入图片描述

字符串型

字符串的字面量 ’ ’ " " unicode(存放多国语言文字 和 符号)
es6模板字符串 ` `
区分： 普通字符串 ’ ’ " " 字符不能换行
模板字符串 可以换行

字符串内引号的使用

  • '‘内部使用”“ 如果说非要’'进行转义 \ ’ 反斜杠 js识别为普通字符
  • “” 内部使用 ‘’
  • ``里面 单双引号都可以正常使用

转义符

  • ’ ， \n换行 ,\ \ 普通反斜杠 \ t制表符

在字符串内使用变量

  • 普通字符串内使用变量
    • ’ ': ’ +变量+'打包放入对应的需要放变量的位置（原理是字符串的拼接）
    • " ": "+变量+”
  • 模板字符串内
    • ${变量} 放入对应需要放变量的位置 ${}

字符串.length 表示 字符串属性 字符长度（不常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    let str='093345 \\\'haon';
    console.log(str)
    let str1=1111
    console.log(str1)
    let str2="我爱你"
    console.log(str2)
    let str3=`
    '' 你好
    <div>
        </div>
    
    `
    console.log(str3)
    let str4='<div>'+ str2+'<div>'
    console.log(str4)
    let str5=`<div>${str1}${str4}</div>`
    console.log(str5)
    console.log(str.length)
</script>
</html>

在这里插入图片描述

boolean类型

布尔类型 用于判断
Boolean :true false 类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    let bool=true
    let bool1=false
    let bool2=Boolean(true)
    console.log(typeof bool2)
    console.log(bool2)
</script>
</html>

在这里插入图片描述

undefined null类型

  • undefined 类型里 就一个值 undefined
    • 未赋值的变量初始值 undefined
    • 函数 默认值返回undefined
  • null类型 就一个值null 空对象
    • 为赋值的变量 未来赋值给一个复杂型数据类型时 初始的时候 可以赋值给Null
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    let  a;
    console.log(a);
    function fn(){
        console.log(1);
    }
    console.log(fn());
</script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    let  a = null;
    let b ;
</script>
</html>

在这里插入图片描述

symbol类型

symbol 对象 若干的属性 想对这个对象进行拓展–>新增一些属性 属性名 重复了 导致bug 独一无二的属性 属性---->挂载在对象身上（要对已经存在的对象 扩展属性的时候 为了避免和已有属性名发生冲突 使用symbol产出的独一无二的值 作为属性名）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>


    let a = Symbol('1'); //独一无二的symbol值
    let sym1 = Symbol('1');//独一无二的symbol值
    console.log(a);
    Number.a = 1 //挂载了一个普通a属性名 = 1
    Number[a] = 2 //率先识别为变量
    console.dir(Number)
</script>
</html>

在这里插入图片描述

超大整数 bigint

解决 2的53次方 运算是有问题的

字面量

  • let numB=1n
  • numB1=BigInt(123)
    注意：bigint数据类型 可以和bigint的数值进行运算 （不可以和数值进行运算）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
 

    let maxNum=Number.MAX_SAFE_INTEGER;
    console.log(maxNum)
    let numB=1
      console.log(numB == 1)
    let numB1=9007199254740992n
      console.log(numB1)
    let numB2=BigInt(123);
    console.log(numB2)
</script>
</html>

在这里插入图片描述

数组类型

Object : 数组 ，普通对象 ，函数 ，内置对象 ，Data ，Math…

  • 数组 Array 存储多个数据 -----> 对象 任意数据类型 都可以接收
    let arr = [“a”,“b”,‘c’,‘d’]
    let arr1 = Array([“a”,“b”]) Array() 接收arr1里面的数据 ==> [[“a”,“b”]]
    let arr2 = Array(“a”,“b”) [“a”,“b”] ( 一般不会通过这种方式去进行创建 )
  • 如何把数组内的数据 拿出来 使用
    • 通过序号（索引值）取值 arr[序号数字] 序号 （索引值）第一个数据开始算 0开始 （取到arr里 没有的值===>undefined）
  • 多维数组
    let arr1 = [ //二维
    [“商品1”,“商品1.1”[[]],],
    [“商品2”,“商品2.1”],
    [“商品3”,“商品3.1”]
    ]
  • 属性 arr,length 重要 返回数组数据的个数
    arr 对象有很多可以用于操作数据的好用的方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
</body>
<script>
    let arr = ["a","b",'c','d']

// 添加
arr[4] = 'e'
arr[5] = 'f'

//修改
arr[0] = "g"  

arr[1] = 'h' 

console.log(arr);



// let arr1 = [
//   ["商品1","商品1.1"],
//   ["商品2","商品2.1",["商品4"]],
//   ["商品3","商品3.1"]
// ]   


// console.log(arr.length);  

// console.log(arr[arr.length - 1]); 

// console.log(arr.length - 1);
// console.log(arr1[1][2][0]); 

// console.log(window);

</script>
</html>

普通对象

属性名： 属性值 键值对的形式 去进行多个数据的存储
eg：div 介绍歌手–> 歌手名字,代表作 ，详细介绍
属性名： 不需要进行声明 name====>“name” 所有的属性名 都是字符串型
== 取值== console.log(obj.name) ; .取值 是大部分情况用的
特殊情况1 属性名 不可以在obj后 .数字 字符串（可能会造成语法问题的属性名）来操作的 就要用[ ]代替.操作值
特殊情况2 使用变量取值 ·

  1. 对象.obj obj会识别为 对象的属性名 而不会识别为变量
  2. 对象[obj] obj 会识别为变量 而不是属性名

== 修改和添加 ==

obj.str=‘我是重新赋的值’
obj.age=3
obj.sex=‘女’(添加)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    let str='hobby'
    let obj={
        name:'忸怩',
        age:23,
        1:'abc',
        "b d c":"123",
        str:"我是obj里面的str的数据",
        arr:[],
        obj1:{}
    }
     obj.str='我是重新赋的值'
    obj.age=3
    obj.sex='女'
    console.log(obj)
      // let sym = Symbol('1')

    // obj[sym] = '美女'      
    console.log(obj);



    console.log(obj["1"]);

    console.log(obj["b b c"]);

    //通过str变量 取 '睡觉'这个数据

    console.log(obj.str);

    console.log(obj[str]); 
    //obj[str] ==> obj["hobby"]

    console.log(obj['str']);
    let arr = []
    let arr1 = []
    console.log(typeof arr); //object
    console.log(typeof obj); //object

    console.log(typeof null);//object typeof 的bug之一  


    console.log([] === []); 
</script>
</html>

在这里插入图片描述

菜鸡也会飞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript在一行上定义变量
alibeibei的博客
01-07 731
时常看到在些定义变量的“非常规”方法，特别是在一行上定义变量赋值的操作，有时看的很懵，所以特此去研究了一下此类定义。 var a = b = 3; 以前理解是: var b = 3; var a =b; 其实这是一个错误的理解，真正的意义是： b = 3; var a = b; a其实是一个全局变量，b则不然，有可能是全局，也有可能是局部的变量，关键看它是在哪里声明的。 下面代码则可以解...
JavaScript变量
chonger_feifei的博客
02-21 212
JavaScript变量
JS变量的学习
shmilynn_的博客
01-20 548
JS变量的学习
【JavaScript】JavaScript 变量 ② ( JavaScript 变量语法扩展 | 同时声明多个变量 | 只声明变量不赋值 | 不声明变量不赋值 | 不声明变量直接进行赋值 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-10 1085
一、JavaScript 变量语法扩展 1、同时声明多个变量 2、只声明变量不赋值 3、不声明变量不赋值 4、不声明变量直接进行赋值
JS的变量
夏大大的博客
04-14 161
变量的声明与赋值 变量是用来存储数据的容器 可以存储数字、字符串、对象、数组、函数等多种类型的数据 // 我们使用var关键字来声明变量 var carName; // 赋值用 = 号 carName = 'lanbojini'; // 声明同时赋值 var carName = 'lanbojini'; 注意：在代码开始，最好对需要的变量进行统一的声明 一条语句 多个变量 可以...
let变量声明以及声明特性
weixin_55017780的博客
09-19 359
let的作用是声明变量，而声明变量有什么特性呢？
JavaScript基础知识
最新发布
06-03
JS的引入 let的声明 数据类型
javascript基础知识
10-22
本文主要介绍javascript一些基础知识，比较实用，希望能给大家做一个参考。
javascript基础知识整理
10-29
JavaScript是Web开发中不可或缺的一部分，尤其对于初学者来说，掌握其基础知识至关重要。下面将详细讲解JavaScript的基础知识，包括创建脚本、隐藏脚本、处理浏览器兼容性问题、链接外部脚本、注释、输出到浏览器、...
JavaScript基础知识学习笔记
10-25
以上只是JavaScript基础知识的一部分，深入学习JavaScript还需要理解更多高级概念，如模块系统、Promise和async/await、模板字符串、ES6及后续版本的新特性等。对于初学者来说，逐步掌握这些知识，结合实践操作，将...
05.JavaScript变量——let、var、变量创建、命名、常量、命名规范
魏大大
04-17 750
变量 变量是数据的“容器”，为了计算方便，我们在编程过程中通常会将数据、信息存放在一个具有特定意义名称的容器中。 我认为一个更加容易理解的概念就是“代数”，就像我们在初高中经常使用的x、y、z、a、b、c，以及一些奇怪的希腊字符。 变量创建 在严格模式（"use strict"）下，使用变量之前，需要先创建变量，这里就涉及到了一个新的关键字：let。 下面的语句就定义、声明、创建了一个名为"perimeter"的变量： let perimeter; 创建变量后，可以使用赋值运算符=为变量赋值： let p
JavaScript变量定义（笔记）
qq_64970126的博客
01-28 3156
JavaScript变量定义、变量的使用、变量命名规范、调用变量案例
js变量和数据类型
weixin_52142992的博客
08-30 700
js变量和数据类型
JS中let用法
chenmo2001的博客
06-07 2万+
let
js中let和var定义变量的区别
热门推荐
nfer_cn的专栏
09-28 18万+
本文对比了js中let和var关键字在声明变量时的异同之处。
JS中let与var定义变量的不同
来呀，快活呀
03-26 314
let比var要严格。 1.声明后未赋值，表现相同。 2.使用未声明的变量，表现不同。 var：输出undefined； let:直接报错； 3.重复声明一个变量时，表现不同 var :输出内容； let：直接报错； 4.变量作用范围，表现不同（使用{}重复声明） var： 输出{}内部声明的变量； let：输出{}外部声明的变量； （let声明的{}内部变量与外部声明的变量并不是同一个） 注： ...
ES6块级作用域及新变量声明（let）
weixin_34023863的博客
05-10 193
很多语言中都有块级作用域，但JS没有，它使用var声明变量，以function来划分作用域，大括号“{}” 却限定不了var的作用域。用var声明的变量具有变量提升（declaration hoisting）的效果。 ES6里增加了一个let，可以在{}， if， for里声明。用法同var，但作用域限定在块级，let声明的变量不存在变量提升。   示例1: 块级作用域 if func...
ES6-let变量声明
sixteen_cicle的博客
06-12 669
var 声明的变量在window上     用let或者const去声明变量，这个变量不会被放到window上     array.forEach(function(currentValue, index, arr), thisValue)     如果浏览器对let已经支持了，其实绝大部分情况下var都可以被替换成let，以后尽量用let，不要用var let s1 = 1;
JS中的let变量
u011045817的专栏
09-19 3368
js中let和var定义变量的区别，主要体现在作用于的不同。 var定义的变量是全局变量或者函数变量。 let定义的变量是块级的变量。 例如： while(1){ let let1 = 2; var var1 = 2; } alert(let1); //不可访问 alert(var1); //可以访问 也就是说，let只对它所在的最内侧块内有效，而va
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值