JavaScript 基础入门

@

目录

• 学习总结
  • 数组的定义方式
  • 数组中的常用属性和方法
  • 数组的遍历方式
  • Date
  • String
  • 构造函数(类)定义
  • 创建对象和操作成员
  • 函数语法
  • 函数的调用
  • 编写位置
  • 基本语法
  • 变量
  • 打印变量
  • 数据类型
  • 运算符
  • 1. 什么是 JavaScript
  • 2. JavaScript 的特点
  • 3. JS的使用
  • 3. 函数的定义
  • 4.面向对象
  • 5.内置对象
  • 6.数组
• 总结

学习总结

1. 什么是 JavaScript

JavaScript（简称"JS"）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

2. JavaScript 的特点

1）是一种解释性脚本语言（代码不进行预编译）；
2）主要用来向 HTML（标准通用标记语言下的一个应用）；
3）可以直接嵌入 HTML 页面，但写成单独的js文件有利于结构和行为的分离；

3. JS的使用

编写位置

1）直接编写在HTML的 script 标签中（推荐写在 head 标签里面）；
2）编写在JS文件中，单独写一个文件（*.js）来存放JavaScript代码，需要时直接引入该js文件，方便代码的维护和重用性；
注意：script 标签不能同时引入 js 文件和编写其他 js 代码
注意：HTML中js的所有代码等候室顺序执行，出错则不再往下执行。

基本语法

• JavaScript 中的标识符（不能以数字开头，不能是 js中 保留字或关键字）
  1）合法标识符举例：indentifier、username、user_name、_userName、$username；
  1）非法标识符举例：int、8.3、Hello World；

• JavaScript 严格区分大小写
  1）username 和 userName 是完全不同的符号；

• JavaScript 程序的注释
  1）/.../ 中可以嵌套 "/" 注释，但不能嵌套；
  2）/**..文档注释.*/；

• JS中的重要关键字和保留字
  1）typeof、var、delete、function

变量

• 作用
  1）程序可以通过变量名来指定具体的对象内存，并通过变量名来获取对应的对象；

• 声明：JS是弱类型语言，为严格区分数据类型
  1）使用 var，例如 var username = "熊大"；
  2）若变量没哟UC胡世华，默认是 undefined；
  3）变量的类型也可以由值来决定，只是什么类型，则变量为什么类型，例：username=18；username为int类型；
  注意：事先不声明变量而直接使用会报错；

打印变量

1）alert(变量名)；直接在浏览器中弹出对话框（需要点击确定，麻烦，不利于语法实践操作和测试）；
2）console.log(变量名)；(info、log、debug、warn、error）：在浏览器控制台打印内容；

数据类型

1）简单类型：String(''/"")、Number(100/11.2/4E3/3e2)、Boolean(true/false)、Null、undefined
2）对象类型：Object、Array、Function
注意1：js 中只有 "var 变量名=值"，不存在 "变量类型 变量名=值"；
注意2：变量名不能使用 name，name 是自带的一个成员变量，类型无法修改，所以结果一直未 String；

运算符

• 比较运算符
  1）= 赋值运算符：用于把一个常量/变量的值赋值给另一个变量；
  2）== 比较运算符：用于比较两个数据的值是否相等，不回去判断类型；
  3）=== 比较运算符：先判断数据类型是否相等，然后再去判断值是否相等；
• 逻辑运算符
  1）在逻辑运算中 0、""、false、NaN、undefined、null 表示为 false，其他类型数据都表示true；
  2）a && b：将 a，b 先转换为 Boolean类型，在执行逻辑与，若 a 为 false，则返回 a，否则返回 b；
  3）a || b：将 a，b 先转换为 Boolean类型，在执行逻辑或，若 a 为 true，则返回 a，否则返回 b；
• && 和 || 运算符的区别
  1）&& 操作：&& 找 false，找到则返回对应的值，直到最后一个如果没有找到，则返回最后一个值；
  2）|| 操作：|| 找 true，找到则返回对应的值，直到最后一个如果没有找到，返回最后一个值；

3. 函数的定义

函数语法

• 普通函数语法
  1）参数和返回值都是可选，如果没有返回值，则默认返回 undefined；

function 函数名([参数名称1，参数名称2，...，参数名称N]) {
  // 程序代码
  return 值;
}

• 匿名函数语法

var 变量名 = function ([参数名称1，参数名称2，...，参数名称N]) {
  // 程序代码
  return 值;
}

• 箭头函数
  1）箭头函数类似匿名函数，把匿名函数 function 去除，在参数右边加 => 即可，简介但可读性差。

 console.log("箭头函数");
        a();
        // 上面等价于下面
        function f() {
            console.log("箭头函数");
        }

        // 无参多行函数体的箭头函数
        var b = ()=> {
            console.log("箭头函数一");
            console.log("箭头函数二");
        };
        b();
        // 多个参数多行箭头函数
        var c = (username, password)=> {
            console.log(username);
            console.log(password);
        };
        c("小肥羊", "admin");
        // 一个形参的箭头函数
        var d = user => console.log(user);" _ue_custom_node_="true">

函数的调用

• 语法

var 变量 = 函数名(实参1, 实参2, 实参3, ...);

• 返回值
  1）如果方法有返回值，那么变量接收到的结果为返回值，如果没有返回值，那么变量接收到的值为 undefined。

// 把匿名函数赋值给一个变量
var add = function (x, y) {
    return x+y;
};
// 把add变量当做参数使用
function printAdd(f) {
    console.log(f);
}
// 调用 printAdd() 函数
printAdd(3, 5);  // 输出结果为 8

• 参数
  1）调用函数时, 实参和定义函数的形参可以不一致

add(); // add 函数被调用，但是参数都为
undefined add(1,3,5,6); // 只会只有前两个，后面的自动忽略

2）查看函数被调用时带了哪些参数：arguments

function doWork3(){ 
  console.log(arguments); // 每个函数都内置了一个arguments属 性，用于存放调用时带入的实际参数值 
}
doWork3(1,2,3);
doWork3();
doWork3("小狼","小码",18);

4.面向对象

构造函数(类)定义

//如何使用JS来定义一个类(构造函数) 
function Person(name, age){
  //添加属性 
  this.name = name;
  this.age = age; 
  //添加方法
  this.sleep = function(){
     console.log("困了,睡一觉"); 
  } 
}

创建对象和操作成员

// 1、使用构造函数来创建对象 
var p = new Person("小狼", 10); 
console.log(p); 
// 访问对象中的成员 
console.log(p.name); 
console.log(p.age); 
// 访问对象中的方法 
p.sleep(); 
// JS中,可以单独为某一个对象添加成员 
p.xxx = "ooo"; 
console.log(p);

• 创建对象的快捷方式

var obj = {user_name:"小狼",age:"18"};
console.log(obj.username); 
console.log(obj.age);

注意：属性名如果有特殊字符需要加引号括起来。

5.内置对象

Date

1）Date() 返回当前日期和事件
2）getFullYear() 获取Date对象中四位数字的年份
3）getMonth() 获取Date对象中的月份(0~11)
4）getDate() 获取Date对象中的天(1~31)
5）getHours() 获取Date对象中的小时
6）getMinutes() 获取Date对象中的分钟
7）getSeconds() 获取Date对象中的秒

var d = new Date();
var time = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();

String

* 属性:
length 字符个数
* 方法
1）charAt(index) 返回指定位置的字符
2）concat(string1,string2,string3,....) 拼接字符串
3）fromCharCode(num) 可接受一个指定的 Unicode 值，然后返回一个字符串
4）subString(start,stop) 提取字符串中两个指定的索引号之间的字符。

6.数组

数组的定义方式

• 创建数组对象
  1）var arr = new Array();

• 类似数组中的静态初始化
  1）var arr2 = new Array("西施","王昭君","貂蝉","杨贵妃");
  2）var arr2 = new Array(1, 2, 3, 4);

• 类似数组的动态初始化
  1）var arr3 = new Array(4); //这里的4是数组的长度,而不是元素

• 简写
  1）var arr4 = ["西施", "王昭君", "貂蝉", "杨贵妃"];
  注意：对于 js 中的数组不会出现数组越界的异常，也不是定长的。

数组中的常用属性和方法

• 属性
  1）length 属性，获取数组长度。
• 方法
  1）concat(array1, array2, ......, arrayX)：连接两个或更多的数组，并返回结果。
  2）join(separator)：把数组的所有元素放入一个字符串。元素通过指定的
  分隔符进行分隔。
  3）reverse()：颠倒数组中元素的顺序（该方法会改变原来的数组，而不
  会创建新的数组）。
  4）slice(start[, end])：从某个已有的数组返回选定的元素（返回的是一个新数组）。
  5）pop()：删除并返回数组的最后一个元素。
  6）shift()：删除并返回数组的第一个元素。
  7）push(newelement1, newelement2, ...., newelementX)：向数组的末尾添加一个或更多元素，并返回新的长度。
  8）unshift(newelement1, newelement2, ...., newelementX)：向数组的开头添加一个或更多元素，并返回新的长度。
  9）splice(index, howmany, element1, ....., elementX)：用于插入、删除或替换数组的元素。

数组的遍历方式

• for
  1）最简单的一种循环遍历方法，也是使用频率最高的一种，通过索引的方式遍历数组；

arr = [1, 2, 3, "a"];
for(let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

• forEach
  1）数组里的元素个数有几个，该方法里的回调函数就会执行几次；
  2）参数：
  　　1>　第一个参数是数组里的元素；
  　　2>　第二个参数为数组里元素的索引；
  　　3>　第三个参数则是遍历的数组本身；
  3）数组自带的遍历方法，虽然使用频率略高，但是性能仍然比普通循环略低；

arr = [1, 2, 3, "a"];
arr.forEach(function (item, index, array) {
    console.log(item);
    console.log(index);
    console.log(array);
});

• map
  1)遍历数组中的每个元素,将回调函数中的返回值存到一个新的数组中,并返回,参数和上面相同，只不过返回的是一个新数组；

var arr = ["A","B","C","D"]; 
var newArr = arr.map(function(item,index,array){ 
    return item+index; 
}); 
//newArr中的数据:["A1","B2","C3","D4"]

• for-in
  1）可以遍历数组（获取数组的索引）；也可以遍历对象（获取对象的属性名）；

//如果是遍历数组,i对应的是数组的索引
let arr = ["A", "B", "C", "D"];
for (let i in arr) {
    console.log(i); //索引
    console.log(arr[i]); //元素
}

//如果是遍历对象,name对应的是属性名
let obj = new Object();
// 给 obj 对象增加属性
obj.username = "小狼";
obj.age = 18;
for (let index in obj) {
    console.log(index);
    //属性名
    console.log(obj[index]);
}

• for-of
  1）遍历的是数组中的元素

arr = [1, 2, 3, "a"];
for (let item of arr) {
    console.log(item);
}

总结

以上就是对 JavaScript 入门的总结了，代码仅供参考，欢迎讨论交流。