JavaScript——前端基础3-优快云博客

 //String Number Boolean null underfined
 const username="John";
 const year=2025;
 const rate=4.5;
 const isCool=true;
 const x=null;
 const y=undefined;
 let z;
 console.log(typeof username);//输出数据类型

模板字符串

连接字符串

 //连接(老方法)
 console.log("My name is "+username+" and I am "+age);
 //模板字符串
 console.log(`My name is ${username} and I am ${age}`);

字符串的内置方法

 const s="Hello World";
 console.log(s.length);//字符串长度
 console.log(s.toUpperCase());//全部大写
 console.log(s.toLowerCase());//全部小写
 console.log(s.substring(0,5));//分割字符，起始和终止，左闭右开
 console.log(s.substring(0,5).toUpperCase());//方法结合
 console.log(s.split());//字符串转换成数组
 console.log(s.split(''));//最小分割
 const m='technology, computers,it, code';
 console.log(m.split(','));//逗号分割

数组

 //数组,两种申明方式
 const Number=new Array(1,2,3,4,5);
 const fruits=['apple','pear','banana'];
 console.log(Number);
 console.log(fruits[1]);//pear
 fruits[2]="orange";//const申明的数组可以被改变内部
 fruits.push("mango");//数组末尾增加元素用push
 fruits.unshift('strawberries');//数组头部添加元素strawberries
 console.log(fruits);
 fruits.pop(fruits);//删除数组末尾的元素
 console.log(fruits);
 console.log(Array.isArray(fruits));//判断是否是数组
 console.log(fruits.indexOf("orange"));//得到特定元素的索引

对象

 //对象：拥有属性和方法的数据，表示为键值对的组合
 //申明一个person变量，{}包含对象，键值对申明属性
 const person={
     firstName:"John",
     lastName:"Doe",
     age:30,
     hobbies:['music','movies','sports'],
     address:{
         street:"50 main st",
         city:"Boston",
         state:"MA",
     },
 };
 person.email="john@gmail.com";//增加属性
 console.log(person);
 console.log(person.firstName,person.lastName);//访问选中的属性
 //结构，更高级的操作
 //用同名的变量将值从person中抽取出来
 const {
     firstName,
     lastName,
     address:{city},
 }=person;
 console.log(city);

对象数组和JSON

网站：freeformatter.com 将对象数组复制粘贴-formatted json-会给我们自动生成json格式的数据

 [
     {
         id:1,
         text:"Take out trash",
         isCompleted:true,
     },
     {
         id:2,
         text:"Meeting with boss",
         isCompleted:true,
     },
     {
         id:3,
         text:"Dentist appt",
         isCompleted:false,
     },
 ]

//对象数组
const tools=[
    {
        id:1,
        text:"Take out trash",
        isCompleted:true,
    },
    {
        id:2,
        text:"Meeting with boss",
        isCompleted:true,
    },
    {
        id:3,
        text:"Dentist appt",
        isCompleted:false,
    },
];
console.log(tools);
console.log(tools[1].text);
//Json是一种数据格式，常被用在api和服务器与客户端的数据传输过程中
//Json和对象数组类似
//将JS转化为json格式
const todoJSON=JSON.stringify(tools)
console.log(todoJSON);

if条件语句

//if条件语句
//===三等号会考虑数据类型(更常用)
//==双等号不会考虑：10 '10'一样
//||或，&&与
const n=10;
const b=4;
if(n===10||b===4){
    console.log("n is 10 and b is 4");
}else if(n>10){
    console.log("n is greater than 10");
}else{
    console.log("n is less than 10");
}
if(n=='10'&&b==4){
    console.log("n is 10 and b is 4");
}

三目运算符

//三目运算符(前为真 后为假。?:)
const c=10;
const color=x>10?'red':'blue';
console.log(color);

switch条件语句

//switch语句，一种条件语句
switch(color){
    case 'red':
        console.log("color is red");
        break;
    case 'blue':
        console.log("color is blue");
        break;
    default:
        console.log("color is not red or blue");
}

for和while循环

//For
 for(let i=0;i<10;i++){
     console.log(i);
     console.log(`For Loop Number:${i}`);
 }
 console.log("");
 for(let i=0;i<tools.length;i++){
     console.log(tools[i].text);
 }
 console.log("");
 //另一种for的写法
 for(let todo of tools){
     console.log(todo.text);
 }
 console.log("");
 //while
 let i=0;
 while(i<10){
     console.log(`For Loop Number:${i}`);
     i++;
 }