前端基础（二）

最新推荐文章于 2022-03-29 12:50:23 发布

公子清

最新推荐文章于 2022-03-29 12:50:23 发布

阅读量181

点赞数

分类专栏： HTML系列 js系列文章标签： javascript html

本文链接：https://blog.csdn.net/Josiah_Yuan/article/details/114318008

版权

js系列同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

HTML系列

12 篇文章 0 订阅

订阅专栏

JS中的数据类型

基础数据类型
- 数字 number
- 字符串 string
- 布尔 boolean
- 空对象指针 null
- 未定义 undefined
- es6新增的唯一值类型 symbol
引用数据类型
- 对象数据类型 object
  - 普通对象 {}
  - 数组对象 []
  - 正则对象 /^$/
  - 日期对象 new Date
  - 数学函数对象 Math
- 函数数据类型 function

实践：1.基本类型

   //number数字类型
   let n = 10;
   n = 10.5;
   n = -10;
   n = 0;
   n = NaN //=>NaN: not a number 非有效数字
   n = Infinity //=> 正、负无穷大 

   //字符串：基于单引号，双引号，反引号（TAB上的点）包起来的都是字符串
   let str = '';
   str = "前端";
   str = '[object,object]'；
  //boolean布尔：true / false
  let boo = true;
  boo = false;

  //空 null
  let nu = null;
  nu = undefined;
  let nu; //=>默认undefined
 
  // Symbol: 每一个Symbol()都是一个唯一值
  let x = Symbol('前端');
  let y = Symbol('前端');
  console.log(x == y); //=>false 结果不相等

2.引用类型

  //object普通对象：大括号包起来，里面有0到多组属性名和属性值（键值对），属性名可以描述当前对象的特征
  let obj = {
     name = '前端',
     age = 10,
  };
  //Array数组对象：中括号包起来，逗号分隔分组中的每一项的值，（每一项的值可以是任意类型）
  let arr = [10, '字符串', ture, null];
  //RegExp正则对象，两个斜杠包起来一大堆符号
  let reg = /$[+-]?(\d|([0-9]\d+))(\.\d+)?^/;

  //function函数
  function func (){
    let total = x + y ;
    return total;
 };

 //ES6中的Arrow Function箭头函数
 let fn = () => {

  };

JS中常用输出方式

console 控制台输出
- console.log() 控制台输出日志
- console.dir() 控制台详细输出
- console.table() 把数据以表格的形式输出控制台
- console.time() / console.timeEnd() 计算某一个程序消耗时间
- console.warn() 输出警告信息
window提示框
- alert() 提示框
- confirm() 确定取消提示框
- prompt() 在confirm的基础上多加一个原因
向页面指定容器插入内容
- document.write() 向页面中输入内容
- innerHTML / innerText 向页面中插入内容
- value 向页面表单元素中插入内容

    //输出任意类型的数据，控制台展示的也是对应的数据类型
   console.log(1);
   console.log('aa');
   cnsole.log({
     name : '前端'
   });
   //=> console.dir输出一个对象或者一个值的详细信息；console.dir可以一次性输出很多值
   function func() {};
   console.log(func);
   console.dir(func);
   //警告的方式输出
   console.warn ('当前操作不规范');

 let arr = [{
  id : 1,
  name :'前端'
  },{
  id : 2,
  name : "社会" 
  }];
  console.log(arr); =>(2) [{…}, {…}]
0: {id: 1, name: "前端"}
1: {id: 2, name: "社会"}
length: 2
__proto__: Array(0)
  console.table(arr);
  =>
index    id    name
  0	     1	  "前端"
  1      2    "社会"
 
 //计算time、timeEnd中间所有程序执行所消耗的时间（预估时间：受到当前电脑性能影响）
`console.time('AA');
for(let i=0; i<9999999;i++){};
console.timeEnd('AA');
 => 14.222900390625 ms`
 
 //alert是在浏览器窗口中弹出一个提示框，提示框中输出指定的信息
 //+ 需要等到alert弹出框，点击确定关闭后，后面的代码才会执行（alert会组织主线程的渲染）
 alert("今天大家都很棒！");
 console.log(100);

alert([10,20,30])
=>数组转换为字符串的结果 “10,20,30”
alert({name : '前端'});
=> 普通对象转换为字符串的结果“ [object Object] "
alert(1);  => '1' 字符串1 ，默认省略引号

//创建一个变量，用户接受选择的结果 true点击的确定，false是取消
let flag = confirm('你吃饭了吗？') ;
console.log(flag);
=>你吃饭了吗？给用户提供确定、取消按钮

let reason = prompt('确定删除此信息吗？');
console.log(reason);

//在prompt在confirm的基础上给用户提供书写操作的原因等信息
+ 点击取消，返回null，点击确定，会把用户输入的原因信息返回
+ 
> console.dir
> alert
//把内容写入到页面中，和alert一样，写入的内容最后都会转换为字符串，然后写入
> document.write("输出内容") 
```javascripr
document.write('AA');
document.write(10);
document.write({name:'前端'});
=>AA 10  [object Object]

箭头函数与普通函数的相互转换（e）=> {x+y} ,就相当于是 function (e){ return (x+y) } 例如：function func(){ return }; let func= () =>{}

想要操作谁就需要先获取谁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      #box {
            width:500px;
            height:300px;
            background:blue;
            border: 1px solid red; 
      }
    </style>
</head>
<body>
    <div id="box">
    <h1>哈哈</h1>
</div> 
<input type="text" id="userName">
<script>
    //1.想要操作哪个就先获取那个元素，根据元素的ID获取这个元素对象
    //document.getElementById, document 限定在整个文档中（上下文） get获取 Element元素 By通过（在整个文档中，基于元素的ID获取到这个元素） let box; 定义了一个变量box指向document.getElementById('box')中的 box元素
    let box = document.getElementById('box');

    //2.innerHTML/innerText : 向指定容器插入内容（变成字符串在插入）
    // box.innerHTML = '前端开发';   //=>覆盖原始内容
    // box.innerText = "培训";
    // box.innerHTML += '前端开发';      //=> 在原始内容上累加
    // box.innerText += "培训";
    //box.innerText="<strong>重点内容</strong>";
    box.innerHTML="<strong>重点内容</strong>";

    //3.给页面文本框赋值
    let userName = document.getElementById('userName');
    userName.value = "在js中插入内容" ;
</script>
</body>
</html>

公子清

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端基础（二）

JS中的数据类型基础数据类型数字 number字符串 string布尔 boolean空对象指针 null未定义 undefinedes6新增的唯一值类型 symbol引用数据类型对象数据类型 object普通对象 {}数组对象 []正则对象 /^$/日期对象 new Date数学函数对象 Math函数数据类型 function实践：1.基本类型 //number数字类型 let n = 10; n = 10.5; n =
复制链接

扫一扫