1.数据结构
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width='device-width', initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 数组声明
let array = ['胡雅菜','小老鼠','爱坤','小黑子']
// 数组取值
console.log(array);
console.log(array[3]);
// 数组长度
console.log(array.length);
// 数组遍历
for(let i = 0; i < array.length;i++){
console.log(array[i]);
}
</script>
</body>
</html>
效果图:
2.数据的增删改查
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 声明数组
let arry = [1,2,3,4]
// 在数组末尾增加元素
arry.push(5);
console.log(arry);
// 在数组的开头增加元素
arry.unshift('cccc');
console.log(arry);
// 删除最后一个元素
arry.pop()
console.log(arry);
// 删除第一个元素
arry.shift()
console.log(arry);
arry[0] ='护牙菜'
console.log(arry);
arry[3] ='小老鼠'
console.log(arry);
</script>
</body>
</html>
效果图:
3. 拓展运算符
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let person = {
name:'护牙菜',
age:19,
sex:'男'
}
let student = {
score:88,
girlfriend:'代码'
}
let monitor = {
...person,//相当于遍历person的属性名和属性值,赋值给对象。
...student,
hoppy:'学习'
}
console.log(monitor);
</script>
</body>
</html>
效果如下:
4. 数组中使用拓展运算符
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 连接两个数组
let arr1 = [1,2,3]
let arr2 = [4,5,6]
// es5 concat:连接数组
let arr3 = arr1.concat(arr2)
console.log(arr3);
// es5
let arr4 = [...arr1,...arr2]
console.log(arr4);
let arr = [11,22,333,55]
let max1 = Math.max.apply(Math,arr);
console.log(max1);
let max = Math.max(...arr)
console.log(max);
</script>
</body>
</html>
效果如下:
5.箭头函数的基本用法
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 无参数返回值
// es5
let fn = function(){
console.log('111');
}
fn()
// es6
let fn1 = () =>{
console.log('222');
}
fn1()
// 有参有返回值
// es5
let add = function(a,b){
return a + b
}
console.log(add(10,20));
// es6
let add1 = (a,b) => {
return a+ b
}
console.log(add1(100,200));
</script>
</body>
</html>
效果如下: