JavaScript(02)

JavaScript(02)

1.引入JavaScript

1.1内部标签

<script>
	//.......
</script>

1.2外部引入

abc.js

//......

test.html

<script src="abc.js"></script>

2.基本语法

console.log()：命令行输出

3.数据类型

数值、文本、图形、音频、视频…

number：js不区分小数和整数，Number

字符串：

布尔值：

逻辑运算：&&、||

比较运算符：

=
== 等于（类型不一样值一样，true）
=== 绝对等于（类型一样，值一样，true）

尽量避免使用浮点数进行运算，存在精度问题

null和undefined

数组：Java的数组必须要一系列相同类型的对象，js中不需要

var arr = [1,2,3,4,null,”hello”,true]

取数组下标如果越界，就会undefined

对象：对象是大括号，数组是中括号

var person = {
    name:"qingling",
    age:12
}

每个属性之间用逗号隔开，最后一个不用

去对象的值person.name

3.1字符串

1、正常字符串我们使用单引号，或者双引号包裹

2、注意转义字符\

\`
\n
\t
\u4e2d  \u#### unicode字符
\x41  Ascll字符

3、多行字符串编写

4、模板字符串

let name = "sc";
let age = 3;
let msg = "你好啊，$(name)";

5、字符串长度

str.length

6、字符串的可变性，不变性

7、大小写转换

//注意这是方法，不是属性
str.toUpperCase()
str.toLowerCase()

8、获取下标

str.indexOf(‘t’)

9、substring

str.substring(1)//从第一个字符串截取到最后一个字符串
str.substring(1,3)

3.2数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6]
arr[0]
arr[0] = 1

1、长度

arr.length

注意：加入给arr.length赋值，数值大小就会发生变化，如果赋值过小，元素就会丢失

2、indexOf,通过元素获得下标索引

arr.indexOf(2)
1

3、slice()

截取Arrey的一部分，返回一个新数组，类似于String中的substring

4、push、pop

push:压入到尾部
pop:弹出尾部的一个元素

5、unshift()、shift()头部

unshift:压入到头部
shift:弹出头部的一个元素

6、排序sort()

(3)['b','c','a']
arr.sort()
(3)['a','b','c']

7、元素反转

arr.reverse()

8、拼接concat()

(3)['b','c','a']
arr.concat([1,2,3])
(6)['a','b','c',1,2,3]
arr
(3)['a','b','c']

注意：concat()并没有修改数组，只是会返回一个全新的数组

9、连接符join

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

(3)['c','b','a']
arr.join('-')
'c-b-a'

10、多维数组

arr = [[1,2],[3,4],[5,6]]
arr[1][1]
4

3.3对象

若干个键值对

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

js中对象，{…}表示一个对象，键值对描述属性XXXX：XXXX，多个属性之间使用逗号隔开，最后一个属性不加逗号

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

1.对象赋值

person.name = 'qingjiang'

2.使用一个不存在的对象属性，不会报错！undefinded

person.haha
undefinded

3.动态的删减属性，通过delete删除对象的属性

delete person.name
true
person

4.动态的添加，直接给新的属性添加值即可

person.haha = 'haha'

5.判断属性值是否在对象中！ xxx in xxx

'age' in person
true
//继承
'toString' in person
true

6.判断一个属性是否是这个对象自身拥有的hasOwnProperty()

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

3.4流程控制

if判断

var age = 3;
if(age>3){
    aleret("haha");
}else if(age<5){
    alert("kuwa");
}else{
    alert("kuwa");
}

while循环，一定要避免死循环

var age = 3;
while(age<100){
    age = age+1;
    console.log(age);
}

do{
    age = age+1;
    console.log(age);
}while(age<100)

for循环

for(let i = 0; i<100; i++){
    console.log(i);
}

forEach循环

var age = [1,2,3,4,5,6,7,8,9];
age.forEach(function(value)){
            console.log(value);
            }

数组循环

var age = [1,2,3,4,5,6,7,8,9];
//for(var index in object){}
for (var num in age){
    if(age.hasOwnProperty(num)){
        console.log("存在");
        console.log(age[num])
    }
}

3.5Map和Set

ES6的新特性

Map:

//ES6 Map
//学生的成绩，学生的名字
//var names = ['tom','jack','haha'];
//var scores = [100,90,80];

var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom');//通过key获取value
map.set('admin',123456);//增加

Set；无序不重复的集合

var set = new Set([3,1,1,1]);//set可以去重
set.add(2);
set.delete(2);//set也有
console.log(set.has(3));//是否包含某个元素

3.6 iterator迭代器

//遍历数组
//通过for of,for in的话是通过下标
var arr = [3,4,5]

for (var x of arr){
    console.log(x)
}
for (let x in arr){
    console.log(x)
}
//遍历map
var map = new Map([["tom",100],["jack",90],["haha",80]]);
for (var x of map){
    console.log(x)
}
//遍历set
var set = new Set([5,6,7]);
for(let x of set){
    console.log(x)
}

4.严格检查模式

use strict:严格检查模式，放在JavaScript的第一行

局部变量用llet，全局用var