JavaScript的基础语法和数据类型详解

目录
  • 引入JavaScript
    • 1.内部标签
    • 2.外部引入
  • 基础语法
  • 数据类型
    • number
    • 字符串
    • 布尔值
    • 逻辑运算
    • 比较运算符
    • 数组
    • 对象
    • 流程控制
    • Map和Set
    • iterator
  • 总结

引入JavaScript

1.内部标签

<script>
	alert("hello world");
</script>

2.外部引入

<script src="js/abc.js"></script>

基础语法

定义变量

<script>
    var num = 1;
    alert(num);
</script>

条件控制

if (2>1)
{
    alert("true");
}
<script>
    var score = 65;
    // alert(num);
    if (score>60&&score<70)
    {
        alert("60-70")
    }
    else if (score>70&&score<80)
    {
        alert(70-80)
    }
    else
    {
        alert("other")
    }
</script>

console.log("hello world");在浏览器控制台输出

数据类型

number

js不区分整数和小数

123  //整数123
123.1   //浮点数123.1
1.122e3   //科学计数法
NaN  //not a number
Infinity  //无限大

字符串

'a' "abc"

正常时使用单引号或者双引号包裹,注意转义符号\

\'
\n   //换行
\t   //空格
\u4e2d   //unicode编码
\x41    //ascii

多行字符串的编写,使用反引号

var str = `haha
        nihao
        666`

模版字符串

let name='xay';
let words=`你好,${name}`;

字符串长度

word.length

字符串的特性,不可变

大小写转换

word.toUpperCase()
word.toLowerCase()

substring()是字符串截取函数

substring(1)  //从第一个字符串截取到最后一个
substring(1,3)  //[1,3)

布尔值

true false

逻辑运算

&& //与
|  //或
!  //非

比较运算符

=
==  //类型不一样,值一样也是真
===  //绝对等于,类型和值都必须一样

NaN===NaN返回的是false,只能通过isNaN(NaN)来判断

数组

<script>
    var arr = [1,2,3,4,5,'hello']
</script>

取数组下标时,如果越界了,会输出undefined

在给arr.length赋值后,数组长度也会发生变化,如果赋值过小,数组中的元素会丢失

indexOf可以通过元素获得其下标索引

slice() 可以截取数组的一部分,相当于字符串中的substring

push() pop()分别是向尾部压入和弹出元素

unshift() shift()分别是向头部压入和弹出元素

sort() 按照ascii排序

reverse() 反转

concat() 拼接数组

join() 用指定符号将数组拼接起来

对象

js中{…}表示一个对象,键值对描述属性xxxxx:xxxxx,多个属性之间使用逗号隔开,最后一个属性不加逗号

var person = {
    name: 'xay',
    age: 18,
    tags: ['js','java','python']
}

对象赋值

动态的删减属性delete person.name

对象属性的添加,直接赋值即可

判断属性是否在对象中

流程控制

if判断

if (2>1)
{
    alert("true");
}
<script>
    var score = 65;
    // alert(num);
    if (score>60&&score<70)
    {
        alert("60-70")
    }
    else if (score>70&&score<80)
    {
        alert(70-80)
    }
    else
    {
        alert("other")
    }
</script>

while循环

age=0;
while (age<100)
{
    age+=1;
    console.log(age);
}

for循环

for (let i = 0; i < 5; i++) {
    console.log(i);
}

for循环遍历数组

var arr=[1,2,3,4,5,6,7,8,9,10];
for (var num in arr)
{
    console.log(num)
}

Map和Set

Map

var map=new Map([['tom',100],['jack',90],['haha',80]]);
var name=map.get('tom');  //通过key获得value
console.log(name)

类似python中的字典,set()向Map中添加数据

map.set('admin',10);
map.delete('tom')  //map中的删除

Set

Set可以去重

var set=new Set([3,1,1,1,1]);

set.add(2)  //添加
set.delete(1)  //删除
console.log(set.has(3));  //是否存在3

iterator

遍历Map

var map=new Map([['tom',100],['jack',90],['haha',80]]);
for (let x of map)
{
    console.log(x);
}

遍历Set

var set=new Set([3,1,1,1,1]);
for (let x of set)
{
    console.log(x);
}

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

(0)

相关推荐

  • 超详细的JavaScript基本语法规则

    目录 01 JavaScript (简称:js) js分三个部分: JavaScript是什么? js的代码可以分三个地方写: 02 操作符 操作符:一些符号-----用来计算 关系运算符: 关系运算表达式: 逻辑运算符: 逻辑运算表达式: 03 JS变量 变量名的注意问题-变量名的命名: 04 JS变量作用 05 JS变量的交换 使用第三方的变量进行交换 第二种方式交换:一般适用于数字的交换 06 注释 注释的方式: 07 JS的数据类型 值类型(基本类型): 引用数据类型: 08 JS的数字

  • Javascript中的解构赋值语法详解

    前言 首先在 ES6中引入的"解构赋值语法"允许把数组和对象中的值插入到不同的变量中.虽然看上去可能很难,但实际上很容易学习和使用. 解构赋值语法是一种 JS表达式.ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量. 在ES6解构赋值出现之前,我们需要为变量赋值的时候,只能直接指定值. 比如: let a = 1; let b = 2; let c = 3; let d = 4; let e

  • js基础语法与maven项目配置教程案例

    目录 一,js的语句 二,js的数组 三,js的函数 四,Maven 五.总结 一,js的语句 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 js的语句</title> <!-- 在HTML里嵌入js代码 --> <script> // 2. 循环结构 //练习3:在控制台输出结果,输出1亿每天花一半能花多少天,

  • JS中可能会常用到的一些数据处理方法

    目录 DOM处理 数组 方法 总结 DOM处理 DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范.DOM就是由节点组成的. 检查一个元素是否被聚焦 const hasFocus = ele => (ele === document.activeElement); 检查用户是否滚动到页面底部 const isAtBottom = () => document.documentElement.clientHeight +

  • js实现数据双向绑定(访问器监听)

    本文实例为大家分享了js实现数据双向绑定的具体代码,供大家参考,具体内容如下 双向绑定: 双向绑定基于MVVM模型:model-view-viewModel model: 模型层,负责业务逻辑以及与数据库的交互 view:视图层,负责将数据模型与UI结合,展示到页面中 viewModel:视图模型层,作为model和view的通信桥梁 双向绑定的含义:当model数据发生变化的时候,会通知到view层,当用户修改了view层的数据的时候,会反映到模型层. 而双向数据绑定的好处在于:只关注于数据操

  • js实现瀑布流触底动态加载数据

    本文实例为大家分享了js实现瀑布流触底动态加载数据的具体代码,供大家参考,具体内容如下 // onScrollEvent 滚动条事件 <div class="box" ref="box" @mousewheel="onScrollEvent"> //每一个方块内的内容start <div class="boxItemStyle" v-for="(userTag, i) in dataSource&q

  • JavaScript的基础语法和数据类型详解

    目录 引入JavaScript 1.内部标签 2.外部引入 基础语法 数据类型 number 字符串 布尔值 逻辑运算 比较运算符 数组 对象 流程控制 Map和Set iterator 总结 引入JavaScript 1.内部标签 <script> alert("hello world"); </script> 2.外部引入 <script src="js/abc.js"></script> 基础语法 定义变量 &l

  • Python基础语法之容器详解

    目录 Python基础语法-容器 1.列表(list) 1.1 列表基本概念 1.2 获取元素 1.3 增.删.改 1.3.1 增 - -增加元素 1.3.2 删 - 删除元素 1.3.3 改-改变列表中的元素 总结 Python基础语法-容器 容器型数据类型是指可以包含多个多种数据类型数据的数据类型. 1.列表(list) 1.1 列表基本概念 列表是Python自带的容器型数据类型,将"[]"作为容器的标志,里面多的元素用逗号隔开:[元素1, 元素2, 元素3,-] 特点: 1.元

  • Javascript中的五种数据类型详解

    Undefined 未定义.只有一个值undefined Null 只有一个值,null Boolean 在javascript中,只要逻辑表达式不返回undefined不返回null,就都是真的. 复制代码 代码如下: if(3) true if(null) false if(undefined) false Number String javascript中不存在char类型. 字符串定义可以用单引号,也可以用双引号. 复制代码 代码如下: <html> <head> <

  • Python基础语法之变量与数据类型详解

    目录 一. 输出函数print 1.1 可以输出数字 1.2 可以输出字符串 1.3 可以输出表达式 1.4 可以输出至文件中 二. 变量与数据类型 2.1 整型 2.2 浮点型 2.3 字符串型 2.4 布尔型 3. 数据类型转换 3.1 int() 3.2 float() 3.3 str() 一. 输出函数print 在python中,print()是可以直接使用的输出函数,将数据输出到控制台上. 1. print函数的使用 1.1 可以输出数字 只要是数字都可以输出 # author: 爪

  • JavaScript中 ES6 generator数据类型详解

    1. generator简介 generator 是ES6引入的新的数据类型, 看上去像一个函数,除了使用return返回, yield可以返回多次. generator 由function* 定义, (注意*号), 2. 示例 函数无法保存状态, 有时需要全局变量来保存数字: 2.1 'use strict'; function next_id(){ var id = 1; while(id<100){ yield id; id++; } return id; } // 测试: var x,

  • JavaScript基础语法与数据类型介绍

    目录 一.JavaScript语法 1.区分大小写 2.标识符 3.注释 4.变量 二.JavaScript的数据类型 1.Undefined类型 2.Null类型 3.Boolean类型 4.Number 5.String类型 6.Object类型 三.typeof操作符 一.JavaScript语法 1.区分大小写 ECMAScript中的一切,包括变量.函数名和操作符都是区分大小写的.例如:text和Text表示两种不同的变量. 2.标识符 所谓标识符,就是指变量.函数.属性的名字,或者函

  • javascript中的糖衣语法Promise对象详解

    目录 一.Promise的诞生 1.回调地狱 二.Promise的行为 1.Promise的语法 2.Promise的方法 (1)Promise.prototype.then() (2)Promise.prototype.catch() (3)Promise.prototype.finally() (4)Promise.resolve() (5)Promise.reject() (6)Promise.all() (7)Promise.race() 三.Promise的场景 1.Ajax请求 2.

  • python基础知识(一)变量与简单数据类型详解

    1.1变量 变量的命名规则: 1.只能包含字母.数字.下划线,且不能用数字开头 2.不能使用python关键字 3.简短且具有描述性 1.2字符串 python中用引号引起来的都是字符串,单引号双引号都可以 a.字符串的索引 s = 'ABCDEF' #索引 s1 = s[0] s2 = s[-1] s3 = s[0:4] print(s1) #A print(s2) #F print(s3) #ABC,左闭右开 #打印全部 s4 = s[:] #s[0:] print(s4) s5 = s[0

  • Python基础之数据类型详解

    一.整数 python2中整形可以分为一般整形和长整形,但是在python3中,两者以及合二为一了,只有整形.python中的整形是具有无限精度的(只有内存能放下),可以表示任意位数的数字.例如: >>> 1111_2222_3333_4444_5555_6666_7777_8888_9999_0000 1111222233334444555566667777888899990000 python人性化的地方在于,上面的代码中,我每四位做了一个分割,让数字看起来很清晰.外国人可能更喜欢每

  • 关于JavaScript和jQuery的类型判断详解

    对于类型的判断,JavaScript用typeof来进行. 栗子: console.log(typeof null); //object console.log(typeof []); //object console.log(typeof {}); //object console.log(typeof new Date()); //object console.log(typeof new Object); //object console.log(typeof function(){});

随机推荐