JavaScript学习_20220630

1. 前端三要素

• HTML（结构）：超文本标记语言，决定网页的结构和内容
• CSS（表现）：层叠样式表，设定网页的表现样式
• JavaScript（行为）：弱类型脚本语言，用于控制网页的行为

2. 基础知识

（1）console.log(score) 在浏览器的控制台打印变量！（System.out.println()）

（2）比较运算符：

• ==等于（类型不一样，值一样，会判断为true）
• ===绝对等于（类型一样，值一样，才会判断为true）
• NaN===NaN，这个NaN与所有的数值都不相等，包括自己，只能通过isNaN(NaN)来判断这个数是否是NaN
• 尽量避免使用浮点数进行运算，存在精度问题，Java中一般都采用java.math.BigDecimal类来进行精确计算。JavaScript使用Math.abs(x-y)<0.0000001来判断。

（3）字符串和数组操作

'use strict';     ：   严格检查模式，预防JavaScript的随意性导致产生的问题，必须写在JavaScript的第一行。

多行字符串编写

<script>
    'use strict'
    var msg = `
    hello
    world!
    `;
    alert(msg);
</script>

 模板字符串

<script>
    'use strict';
   let name = "张三";
   let age = 9;
   let msg =`你好呀！${name},你今年有${age}岁！ `
    alert(msg);
</script>

 字符串操作

var st = "qwertyui"
console.log(st.length) // 8
st[0]=1 //1
console.log(st)//qwertyui  字符串的不可变性
console.log(st.toLocaleUpperCase()) //QWERTYUI   方法不是属性
console.log(st[5]) // y
console.log(st.substring(3))//rtyui 从第4个字符截取到最后一个字符组成的字符串
console.log(st.substring(3,6))//rty [3,6)

 数组

var arr = [1,2,3,4,5,6]
console.log(arr)//(6) [1, 2, 3, 4, 5, 6]
arr[1]=1
console.log(arr)//(6) [1, 1, 3, 4, 5, 6]
arr.length=10
console.log(arr)// (10) [1, 1, 3, 4, 5, 6, empty × 4]
arr.length=3
console.log(arr)// (3) [1, 1, 3]
//数组可变，长度也可变，增加的元素为空，如果赋值过小，元素会丢失
arr.slice(1,5)//(4) [2, 3, 4, 5]  和字符串的substring作用一致

push()：在尾部压入

pop()：弹出尾部的一个元素

arr.push("a","b")
arr//(8) [1, 2, 3, 4, 5, 6, 'a', 'b']在尾部加入
arr.pop()
arr//(7) [1, 2, 3, 4, 5, 6, 'a']

unshift()：在头部压入

shift()：弹出头部的一个元素

sort()：元素排序

reverse()：元素反转

concat()：不修改数组，会返回一个新的数组

join()：打印拼接数组，使用特定的字符串连接

多维数组

var a=[[1,2],[3,4],["A","B"]]

数组：存储数组（如何存，如何取）

（4）对象

若干个键值对：

var 对象名={
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}

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

对象使用大括号，数组是中括号

<script>
    var person={
        name:"张三",
        age:3,
        tags:['js','java','web','...']
    }
</script>

person.name //'张三' 获取值
person.age = 19 //赋值
person.hh //undefined  使用一个不存在的对象属性，不会报错
delete person.tags //true  通过delete动态删减属性
person //{name: '张三', age: 19}
person.email = "123456"  //通过赋值增加对象属性
person //{name: '张三', age: 19, email: '123456'}
person['age'] //19  取值
    
'age' in person  //true  判断属性值是否在这个对象中
'toString' in person //true  判断方法是否在这个对象中
    
 person.hasOwnProperty('email')//true  判断一个属性是否是这个对象自身拥有的
person.hasOwnProperty('toString')//false

 （5）流程控制

var s=[1,2,3,12,34,56,76,85,453];
// for(var index in object)
for(var x in s){
    console.log(s[x]);
}
 for(var x of s){
    console.log(x);
}

（6）Map和Set

Map

var map = new Map([['Jack','songer'],['Ethan','giter']]);
map.set("Tom","cat"); //新增及修改
var name = map.get('Jack');//获得key中的值
console.log(name);
console.log(map);
map.delete('Ethan');

Set：无序不重复的集合

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

（7）iterator

 遍历数组

var arr = [3,2,6];
for(let x of arr){
    console.log(x); //3 2 6
}

遍历Map

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

遍历Set

var set = new Set([5,8,90]);
for (var x of set){
    console.log(x);  //5  8  90
}