2、JavaScript快速入门

秃头酱酱

已于 2023-01-14 13:40:14 修改

阅读量415

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2023-01-13 13:21:22 首次发布

本文链接：https://blog.csdn.net/weixin_59806308/article/details/128672728

版权

JavaScript 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文介绍了JavaScript的基础知识，包括如何引入JS代码、基本语法如变量和数据类型（如number、字符串、布尔值），以及数组的使用。深入讲解了对象的创建和操作，严格检查模式的作用，和流程控制结构如if判断、循环。最后，文章探讨了ES6新特性Map和Set的用法，以及迭代器的概念。

摘要由CSDN通过智能技术生成

2.1 引入JavaScript

内部标签

<!-- 在script标签内写JavaScript(简称js)代码，代码块可以放在head中，也可以放在body中-->
<script>
        // alert:弹窗
        alert('Hello,world!');  //注意以分号结尾
</script>

外部引入

hello.js

alert('Hello,world!');

hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 外部引入 -->
    <!-- 注意：script标签必须成对出现 -->
    <script src="js/qj.js" type="text/javascript"></script>
</head>
<body>
    <h1>我是标题</h1>
</body>
</html>

2.2 基本语法入门

<!--JavaScript中也要严格区分大小写-->
 <script>
     //定义变量
     var score="88";
     //弹窗
     alert(score);
     //在浏览器的控制台打印变量 相当于sout
     console.log(score);
 </script>

2.3 变量和数据类型

变量

//定义变量 变量类型 变量名 = 变量值;
var name = "jiangjiang";
let age = 18;

number JavaScript中不区分整数和小数

1         //整数1
1.1       //浮点数1.1
1.123e3   //科学计数法
-99       //复数
NaN       //not a number
Infinity  //无限大

字符串

正常的字符串我们使用单引号或者双引号包裹 —— ‘a’ “abc”

注意转义字符

\'      字符串
\n      换行
\t      tab
\u4e2d  Unicode字符
\x41    Ascll字符

多行字符串编写

//tab键上面的 `` 飘
var s = `hello
         world
         你好呀`;

模板字符串

let name = "jinagjiang";
let age = 18;
let  s2 = `你好呀，${age}岁的${name}`;
console.log(s2);

字符串长度

var s3 = "student";
    console.log(s3.length);
> 7

字符串的可变性不可变

//通过字符串中的字符，获取其对应的下标
console.log(s3.indexOf('s'));
//通过字符串的下标，获取其对应的字符
console.log(s3[0]);
> s
s3[0]= 1;
> 1
console.log(s3);
> student

大小写转换

//注意：这里是方法，不是属性了
    console.log(s3.toUpperCase());
    console.log(s3.toLowerCase());

字符串截取

//截取字符串 
//从下标0对应的字符截取到最后一个字符
console.log(s3.substring(0));
> student   
//从下标0对应的字符截取到下标2对应的字符
//[) 左闭右开 包含前面，不包含后面
console.log(s3.substring(0,2));
> st

布尔值

true false

逻辑运算

与(&&) 或(||) 非(！)

比较运算符（重要）

符号	含义	注意
=	赋值
==	等于（类型不一样，值一样，也会判断为true）	这是一个js的缺陷，坚持不要使用 == 比较
===	绝对等于（类型一样，值一样，才会判断为true）	NaN问题： NaN与所有的值都不相等，包括自己本身 - NaN === NaN 结果为false - isNaN(NaN) 结果为true 浮点数问题： console.log((1/3) === (1-2/3)) 结果为false 尽量避免使用浮点数进行运算，存在精度问题

null 和 underfined

null 空
underfined 未定义

数组

Java中的数组必须是一系列相同类型的对象，JavaScript中数组可以包含任意的数据类型

//定义数组：为了代码的可读性，尽量使用 [] 这种形式
var arr = [1,2,3,'hello',null,true];
new Array(1,2,3,'hello',null,true);

数组下标越界，会报 underfined（未定义的）

数组长度

console.log(arr.length);
/**注意：
 * 假如给 arr.length 赋值，数组大小就会发生变化
 * 如果赋值过小，数组中的元素就会丢失
 */

常用方法数组：存储数据（如何存，如何取，方法都可以自己实现）

方法名	用法
a.indexof()	通过元素获得下标索引
a.slice()	类似于字符串的substring()，截取数组的一部分，并返回一个新的数组 console.log(a.slice(0)); //从下标0对应的字符截取到最后一个字符
a.push()	向原数组的尾部添加元素
a.pop()	弹出原数组尾部的一个元素
a.unshift()	向原数组的头部添加元素
a.shift()	弹出原数组头部的一个元素
a.sort()	给数组排序
a.reverse()	将数组元素反转
a.concat()	将元素与原数组拼接，并返回一个新的数组（并没有修改原数组）
a.join(‘-’)	修改数组元素之间的连接符 var a = [“A”,“B”,“C”] →→→ “A-B-C”

多维数组

对象

对象是大括号 {}，数组是中括号[]

若干个键值对，JavaScript中的所有的键都是字符串，值是任意对象！

var 对象名 = {
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值
}
/**Js中对象 {...}表示一个对象，
  * 键值对描述属性 xxx:xxx，
  * 多个属性之间使用逗号隔开，最后一个不需要
  */
//定义了一个person对象，它有四个属性
var person = {
      name:"jiangjiang",
      age:18,
      lesson:"java"
    }

对象赋值和取值

person.name = "jiang" 
> 'jiang'
person.name
> 'jiang'
person.age     
> 18

使用一个不存在的对象属性，不会报错 undefined
```
person.sex
> undefined
```

动态的删减和添加属性

删减 —— 通过 delete 删除对象的属性

delete person.name
> true
person
> {age: 18, lesson: 'java'}

添加 —— 直接给新的属性添加值即可

person.name = "jiangjiang"
> 'jiangjiang'
person
> {age: 18, lesson: 'java', name: 'jiangjiang'}

判断属性值是否在这个对象中 xxx in xxx

'name' in person
> true
'sex' in person
> false
//继承父类的
'toString' in person
> true
//判断一个属性是否是这个对象自身所拥有的 hasOwnProperty
person.hasOwnProperty('toString')
> false

2.4 严格检查模式

<script>
      'use strict';
      /** 'use strict'; 严格检查模式
       * 前提：IDEA需要设置支持ES6语法
       * 预防JavaScript的随意性导致产生的一些问题
       * 必须写在JavaScript的第一行才能起作用
      */
      //全局变量 若不在严格检查模式下，可以这么定义
      i = 1;
      //在严格检查模式下，局部变量建议都使用 let 去定义
      let j = 2;
</script>

2.5 流程控制

if 判断

if (score>60 && score<70){
   alert("60~70"); 
}else if (score>70 && score<80){
   alert("70~80")
}else if (score>80 && score<90){
   alert("80~90")
}else {
   alert("other")
}

while 循环

while(score>85){
    score = score-1;
    console.log(score)
}

do{
    score = score-1;
    console.log(score)
}while(score>85)

for 循环

for (let score = 88; score < 100; score++) {
   console.log(score);
}

forEach循环 ES5.1

var num = [5,1,2,3,4];
num.forEach(function (value){
    console.log(value);
})

for…in 循环

/** Java中
  * for(Type str:el){}
  */
var num = [5,1,2,3,4];
/** JavaScript中
  *  for(var index in object){}
  */
for(var n in num){
   console.log(num[n]);
}

2.6 Map和Set

ES6 的新特性~

Map：

//学生的名字，学生的成绩
//var names = ["tom","jack","jiang"];
//var scores = [100,90,80];
//ES6 Map集合(将以上两个数组变成集合)
    var map = new Map([["tom",100],["jack",90],["jiang",80]]);
    var s = map.get("tom"); //通过key获得value
    console.log(s);
> 100
//新增或修改元素
    map.set("karry",921);
    console.log(map);
> Map(4) {'tom' => 100, 'jack' => 90, 'jiang' => 80, 'karry' => 921}
//删除元素
    map.delete("jiang");
    console.log(map);
> Map(4) {'tom' => 100, 'jack' => 90, 'karry' => 921}

Set：无序不重复的集合

var set = new Set([3,1,1,1,1]); 
console.log(set); //Set可以去重：Set(2) {3, 1}
set.add(2);       //添加：Set(3) {3, 1, 2}
set.delete(1);    //删除：Set(2) {3,2}
console.log(set.has(3));  //是否包含某个元素：true

2.7 iterator

ES6 的新特性~

遍历数组

var arr = [3,4,5];
//通过 for..in实现：打印数组下标
    for (let x in arr){
       console.log(x);
    } 
//通过 for..of实现：打印数组中对应的值
    for (let x of arr){
       console.log(x);
    }

遍历Map

var map = new Map([["tom",100],["jack",90],["jiang",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);
}

秃头酱酱

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2、JavaScript快速入门

JavaScript快速入门
复制链接

扫一扫

专栏目录