首页 > 编程语言 >JavaScript

JavaScript

时间:2023-07-05 14:45:09浏览次数:42  
标签:10 const log JavaScript fruits console true

JS

变量

// var let const
var: 很少使用,全局作用域
let: 值可以被修改
const: 值不能被修改,而且需要在声明时初始化数值


console.log('hello world')		// 这是我的第一个js代码;

let bbb         // 声明
bbb = 30        // 赋值
bbb = 31        // 修改
console.log(bbb)        // 调用

const aaa = 50      // aaa 定义为50,因为是常量后面不允许修改
console.log(aaa)    // 调用

// 输出
hello world
31
50

数据类型

  • 值类型:String、Number、Boolean、Null、Undefined、Symbol
  • 引用类型:对象、数组、函数、另外两个特殊的对象:正则和日期
// String, Number, Boolean, null, undefined
String: 字符串
Number:数字,不区分小数点与整数
Boolean: 布尔
null:定义为空
undefined: 没定义,当不赋值也是没定义


const username = "tcy";
const age = 30;
const rate = 4.5;
const isCool = true;
const x = null;
const y = undefined;
let z;

console.log(typeof rate)            // 查询值的类型

String

// string 字符串拼接的两种方式
console.log("我是:" + username)
console.log(`我是:${username}`)

// 内置属性与方法,不带括号为属性,带括号为方法
const s = 'hello world'
console.log(s.length)           // 获取变量s所对应值的长度
console.log(s.toUpperCase())    // 将变量s所对应值转换为大写
console.log(s.toLowerCase())    // 将变量s所对应值转换为小写
console.log(s.substring(0,5))   // 将变量s对应值进行切割,只取前5个字符串
console.log(s.substring(0,5).toUpperCase())     // 使用方法下的方法
console.log(s.split(''))        // 将每个字符都进行分割

数组

  • 数组为可变类型
  • 更多方法可以查询JavaScript官网
const fruits = ["apples","orages","pears",10,true]      // 定义数组
console.log(fruits)         // 调用数组,显示全部
console.log(fruits[1])      // 显示第二个元素
fruits[1] = "apples"        // 将第二个元素进行修改
console.log(fruits[1])      // apples
fruits.push("mangos")       // 将数组后添加一位元素
console.log(fruits)         // [ 'apples', 'apples', 'pears', 10, true, 'mangos' ]
fruits.unshift("strawberries")  // 在数组头部添加元素
console.log(fruits)            // [ 'strawberries', 'apples', 'apples', 'pears', 10, true, 'mangos' ]
fruits.pop()                // 删除数组最后一位元素
console.log(fruits)         // [ 'strawberries', 'apples', 'apples', 'pears', 10, true ]
console.log(Array.isArray(fruits))  // 判断是否为数组,结果为true
console.log(fruits.indexOf("apples"))   // 查找元素索引位置,结果为1

对象

  • 类似于Go的字典,可以对象中保存对象
  • JavaScript 变量均为对象。当声明一个变量时,就创建了一个新的对象。
// 定义对象
const person = {
    firstName: "tang",
    lastName: "meinv",
    age:30,
    hobbies: ["music","movies","sports"],
    address: {
        street: "50 main st",
        city: "Boston",
        state: "MA",
    },
}
console.log(person)
console.log(person.firstName)           // 对象.属性名的方法 访问任何一个属性
console.log(person.hobbies[1])
console.log(person.address.state)

// 输出
{
  firstName: 'tang',
  lastName: 'meinv',
  age: 30,
  hobbies: [ 'music', 'movies', 'sports' ],
  address: { street: '50 main st', city: 'Boston', state: 'MA' }
}
tang
movies
MA

  • 结构
const {firstName,lastName} = person      // 使用同名变量将值从person抽离
console.log(firstName)      			// tang
const {address: {city}} = person    	// 将对象中的对象进行抽离
console.log(city)                   	// Boston
person.email = "json"               	// 添加新的属性

对象数组

const todos = [
    {
        id: 1,
        test: "Take out trash",
        isCompleted: true,
    },
    {
        id: 2,
        test: "Metting with boss",
        isCompleted: true,
    },
    {
        id: 1,
        test: "Dentist appt",
        isCompleted: false,
    },
]


console.log(todos)

// 输出
[
  { id: 1, test: 'Take out trash', isCompleted: true },
  { id: 2, test: 'Metting with boss', isCompleted: true },
  { id: 1, test: 'Dentist appt', isCompleted: false }
]
  • 对象数组转变为json
  • 场景:将对象数组传输给服务器,需要转换为json格式
const todos = [
    {
        id: 1,
        test: "Take out trash",
        isCompleted: true,
    },
    {
        id: 2,
        test: "Metting with boss",
        isCompleted: true,
    },
    {
        id: 1,
        test: "Dentist appt",
        isCompleted: false,
    },
]


const todoJSON = JSON.stringify(todos)
console.log(todoJSON)

if 判断

const x = 10
if (x == "10") {                      // 判断值是否一致
    console.log("x is 10")            // 输出结果
}

if (x === "10") {                      // 判断值与类型是否一致
    console.log("x is 10")             // 结果不输出,因为仅值一致,类型并不相同
} else if (x > 10) {
    console.log("x is greater than 10") 
}else {
    console.log("x is not 10")         // x is not 10
}

const a = 10
const b = 20
if (a > 8 || b < 19) {                  // 多条件判断,两者其一满足均可触发
    console.log("a is more than 10 or b is more than 19")
}

if (a > 9 && b > 10) {                  // 多条件判断,两者都需要满足才能触发
    console.log("a is more than 10 or b is more than 19")
}

三目运算符

const d = 10;
const color = d > 5 ? "red" : "blue"    // ?为 表示条件为真,:为else
console.log(color)                  // red

Switch

const d = 10;
const color = d > 5 ? "red" : "blue"    // ?为 表示条件为真,:为else
console.log(color)                  // red


switch (color) {					  // 将color变量填入
    case "red":						  // 判断值是否为red
        console.log("color is red");
        break
    case "blue":
        console.log("color is blue");
        break
    default:						  // 当都不满足触发default执行
        console.log("color is Not red or blue");
}

for & While

for (let i = 0;i < 10; i++) {           // let 声明变量,定义条件,并实现循环后递增
    console.log(i)
}

for (let i = 0;i <= 10; i++) {           // let 声明变量,定义条件,并实现循环后递增
    console.log(i)
}


const todos = [
    {
        id: 1,
        test: "Take out trash",
        isCompleted: true,
    },
    {
        id: 2,
        test: "Metting with boss",
        isCompleted: true,
    },
    {
        id: 1,
        test: "Dentist appt",
        isCompleted: false,
    },
]

for (let i = 0;i < todos.length;i++) {			// 方式一:遍历数组元素中的test属性
    console.log(todos[i].test)
}

for (let todo of todos) {					  // 方式二:遍历数组元素中的test属性
    console.log(todo.test)
}

let i = 0;							 // while需要在循环体外定义变量
while (i < 10) {					  // 触发条件
    console.log(`While Loop Number: ${i}`);	
    i++								 
}

标签:10,const,log,JavaScript,fruits,console,true
From: https://www.cnblogs.com/tcy1/p/17528461.html

相关文章

  • 单线程JavaScript为何如此高效
    原文合集地址如下,有需要的朋友可以关注本文地址合集地址什么是js执行机制JavaScript的执行机制指的是JavaScript代码在运行时的工作方式和顺序。它涉及以下几个关键概念:单线程:JavaScript是一门单线程的编程语言,意味着它只有一个主线程用于执行代码。这意味着JavaScrip......
  • JavaScript发展历史(JS)
    JavaScript发展历史1994年,网景公司(Netscape)发布了Navigator浏览器0.9版,这是世界上第一款比较成熟的网络浏览器,轰动一时。但是这是一款名副其实的浏览器--只能浏览页面,浏览器无法与用户互动,当时解决这个问题有两个办法,一个是采用现有的语言,许他们直接嵌入网页。另一个是发明一......
  • 常用的前端JavaScript方法封装
     1、输入一个值,返回其数据类型**functiontype(para){returnObject.prototype.toString.call(para)} 2、数组去重functionunique1(arr){return[...newSet(arr)]}functionunique2(arr){varobj={};returnarr.filter(ele=>{if......
  • 【10.0】前端基础之JavaScript进阶
    【10.0】前端基础之JavaScript进阶【一】自定义对象可以看成Python中的字典,但是在JS中的自定义对象要比Python里面的字典操作起来更方便【1】创建自定义对象方式一vard={"键":"值",};操作方法vardict={"name":"dream","age":18};vardict={"name":"dream&......
  • JavaScript 数组的 reduce 方法有哪些应用
    JavaScript数组的reduce方法有哪些应用JavaScript中的reduce()方法可以用于将数组元素汇总为单个值,它接受一个回调函数作为参数,并在每个数组元素上调用该函数,以便将其累加到一个累加器变量中。下面是一些实际应用:数组求和:使用reduce()方法将数组元素相加,从而计算数组的总......
  • 【8.0】前端基础之JavaScript引入
    【8.0】前端基础之JavaScript引入【一】什么是JavaScriptjs也是一门编程语言,他可以写后端代码JavaScript想一统天下,前后端都写于是node.js支持JS代码跑在后端服务器上但是并不能完美的实现JavaScript和Java一毛钱关系都没有,纯粹是为了蹭Java的热度【二】JavaScrip......
  • 【9.0】前端基础之JavaScript初识
    【9.0】前端基础之JavaScript初识js也是一门面向对象的编程语言,一切皆对象【一】变量命名规范变量名只能是数字/字母/下划线/$变量名命名规范(js中推荐驼峰式命名法)变量民不能用关键字作为变量名【二】JS代码的书写位置可以单独开设JS文件书写还可以直接在浏览......
  • javascript现代编程系列教程之X——javascript人工智能
    JavaScript在人工智能(AI)领域的应用主要体现在以下几个方面:浏览器端的机器学习:TensorFlow.js是一个在浏览器中运行的JavaScript机器学习库,它允许开发者训练和部署机器学习模型。这使得开发者可以在浏览器端进行实时的机器学习任务,无需将数据传输到服务器端,从而提高了用户的隐......
  • 【四】JavaScript之类型转换
    【四】JavaScript之类型转换【1】类型转换javascript是弱类型的编程语言所以本身不仅提供了数据类型的转换甚至在数据使用运算符的时候,javascript的解释器也会出现默认隐式转换数据类型的情况。【2】字符串字符串转换成布尔值除了空字符串("")被转为false,其他的任......
  • 【三】JavaScript之数据类型
    【三】JavaScript之数据类型【0】数据类型展示javascript中变量的值有不同的作用或者功能。按不同的功能,值也可以区分不同的类型。类型名称描述Number数值型整数,浮点数。。。。String字符串文本,一般使用"双引号",'单引号'或者反引号圈起来的都是文本。Bo......