1.变量声明及命名规范
2.基本数据类型
3.字符串
4.对象
5.数值
6.数组

1. 变量及命名规范

在javascript中有三种声明变量的方式:var、let、const

JS中作用域有:全局作用域、函数作用域,但没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域。块作用域由 { } 包括,if语句和for语句里面的{ }也属于块作用域。

  1. 声明变量

js在创建变量或对象时,一定要声明其数据类型,否者会默认设置为全局变量,这是我们导入其它js等文件时就会造成污染数据

  1. var

var 声明全局变量,换个角度理解:声明在for循环中的变量,跳出for循环同样可以使用,var在ES5,ES6中也同样适用。var 定义的变量可以修改,如果不初始化会输出undefined,不会报错

1
2
3
4
5
6
7
8
9
var a = 1;
// var a; //不会报错
console.log('函数外var定义a:' + a);//可以输出a=1
function change(){
a = 4;
console.log('函数内var定义a:' + a);//可以输出a=4
}
change();
console.log('函数调用后var定义a为函数内部修改值:' + a);//可以输出a=4
  1. let
  • 必须先定义再使用,否则会报错
  • 循环体中可以用let,let声明的变量只在let命令所在的代码块内有效
  • 不能定义同名变量,否则会报错
  • let是块级作用域,函数内部使用let定义后,对函数外部无影响
1
2
3
4
5
6
7
8
let c = 3;
console.log('函数外let定义c:' + c);//输出c=3
function change(){
let c = 6;
console.log('函数内let定义c:' + c);//输出c=6
}
change();
console.log('函数调用后let定义c不受函数内部定义影响:' + c);//输出c=3
  1. const

const 声明一个只读的常量,一旦声明,常量的值就不能改变,而且必须初始化

  1. 命名规范

一般很多代码语言的命名规则都是类似的,例如:

  • 变量和函数为小驼峰法标识, 即除第一个单词之外,其他单词首字母大写( lowerCamelCase)
  • 全局变量为大写 (UPPERCASE )
  • 常量 (如 PI) 为大写 (UPPERCASE )
  • 构造函数名与class名均使用大驼峰标识

2. 基本数据类型

在 JavaScript 中有 6 种不同的数据类型:

  • string
  • number
  • boolean
  • object
  • function
  • symbol

3 种对象类型:

  • Object
  • Date
  • Array

2 个不包含任何值的数据类型:

  • null
  • undefined

typeof无法判断数组,null和对象,因为他会把这些都判断为Object,其余都可以正常判断
最理想的检测数组类型的方法

1
2
3
4
5
function isArrayFn (o) {
return Object.prototype.toString.call(o) === '[object Array]';
}
let arr = [1,2,3,1];
alert(isArrayFn(arr));// true
实例 测试结果
[1,2,3,1] [object Array]
{a:”chenhaodong”,age:18} [object Object]
function a(){return null} [object Function]
“hello world” [object String]
null [object Null]

3. 字符串

3.1 js字符串长度

易混点:
JavaScript字符串长度:str.length
php的字符串长度:count(string)
Java的字符串的长度:str.length()
python的字符串长度:len(string)
jQuery中的length:表示query对象中元素个数 $(“div”).siblings().length=>表示div标签的兄弟节点元素个数

3.2 使用 \ 转义字符

转义字符是字符的一种间接表示方式。在特殊语境中,无法直接使用字符自身。例如,在字符串中包含说话内容,由于js已经赋予了双引号为字符串直接量的标识符,如果在字符串中包含双引号,就必须使用转义字符表示。

1
2
"子曰:"学而不思则罔,思而不学则殆。""
"子曰:\"学而不思则罔,思而不学则殆。\""

列举常见的JavaScript转义字符:

序列 代表字符
\0 Null字符(\u0000)
\b 退格符(\u0008)
\t 水平制表符(\u0009)
\n 换行符(\u000A)
\v 垂直制表符(\u000B)
\f 换页符(\u000C)
\r 回车符(\u000D)
\“ 双引号(\u0022)
\‘ 撇号或单引号(\u0027)
\\ 反斜杠(\u005C)
\xXX 由 2 位十六进制数值 XX 指定的 Latin-1 字符
\uXXXX 由 4 位十六进制数值 XXXX 指定的 Unicode 字符

3.3 字符串的截取

  • str.slice(start,end)方法:提取字符串的某个部分并在新字符串中返回被提取的部分(起始索引值为0,且满足左闭右开)。该方法设置两个参数:起始索引(开始位置),终止索引(结束位置)。

  • str.substring()方法:类似于 slice(),不同之处在于 substring() 无法接受负的索引

  • str.substr(start,length):start表示起始的索引值,默认为0。第二个参数规定被提取部分的长度,如果省略第二个参数,则该 substr() 将裁剪字符串的剩余部分。

1
2
3
4
5
6
7
8
9
let name = "this girl that i fall in love with her sister is about 18 years old";

console.log(typeof(name)); // 判断数据类型:"string"
name.length; // 判断字符长度:67
name.slice(0,4); // 满足左闭右开,索引值默认从0开始:"this"
name.slice(-3,-1); // 从右至左,索引值默认为-1开始:"ol"
name.substring(-8,2); // 不接受负索引值:"th"
name.substring(-8,-2); // ""
name.substr(2,5); // "is gi"

3.4 字符串的替换

  1. 简单替换:str.replace(a,b) 在字符串str中用b替换a,但只会替换字符串中第一次出现的目标
1
2
3
let str = "dog is our friends, dog is cute!";
let str2 = str.replace("dog","cat");
console.log(str2); // cat is our friends, dog is cute!
  1. js中是没有replaceAll方法的(其实也有,不过要版本很高的浏览器),那么如何实现替换所有匹配的字符串呢
  • 使用具有全局标志g的正则表达式:
1
2
3
let str = "dog and cat are cute, we all love dog and cat!";
let str2 = str.replace(/dog|cat/g,"pig");
console.log(str2); // pig and pig are cute, we all love pig and pig!
  • 使用另一种具有全局标志g的正则表达式的定义方法
1
2
3
var str = "dogdogdog";
var str2 = str.replace(new RegExp("dog","gm"),"cat");
console.log(str2);

这里g表示执行全局匹配,m表示执行多次匹配

  • 给string对象添加原型方法replaceAll()
1
2
3
4
5
6
7
8
String.prototype.replaceAll = function(s1, s2) {
return this.replace(new RegExp(s1, "gm"), s2);
};

// 调用
var str = "dogdogdog";
var str2 = str.replaceAll("dog", "cat");
console.log(str2);

3.5 转换为大小写

str.toUpperCase()
str.toLowerCase()

3.6 str.trim()

str.trim() 方法仅能删除字符串两端的空白符,并不能删除指定的字符

1
2
let name = " i love you";
name.trim("you") // 返回结果"i love you"去除了首位的空格

3.7 str.split():切割字符串,返回数组的形式

这里有一个小知识点,

  • 当split()里面什么都不加时,会把整个字符串当作一个数组
  • 当写法为split("")时,表示将原字符串的每一个字符进行切割
  • 当写法为split("指定字符串")时,将原字符串按照指定字符串进行切割

举例说明:

1
2
3
4
5
6
7
8
let quote = "i love you because of you";
console.log(quote.split()); // ["i love you because of you"]
console.log(quote.split(""));
/*
["i", " ", "l", "o", "v", "e", " ", "y", "o", "u", " ", "b", "e",
"c", "a", "u", "s", "e", " ", "o", "f", " ", "y", "o", "u"]
*/
console.log(quote.split("you")); //["i love ", " because of ", ""]

3.8 转换为字符串

  • Numbers.toFixed(number):保留小数点位数,并将数值型转换为字符串型
  • Numbers.toString():将数值型转换为字符串型
  • String(Number):将数值型转换为字符串类型

3.9 查询目标字符串索引

indexOf() 方法:可以检索目标字符串在源字符串中首次出现的位置。如果没有在源字符串中检索到指定字符或者子字符串,则返回 -1 。

字符串与数组类似,字符位置是从 0 开始计算。特别说明:此方法对大小写敏感。

1
2
3
let a = "hello world";
console.log(a.indexOf("h")); // 0
console.log(a.indexOf("cg")); // -1

拓展:查找字符串中是否包含指定的字符串, includes()方法区分大小写
string.includes(search_value):用于判断字符串是否包含指定的字符串,如果找到匹配的字符串则返回 true,否则返回 false。

3.10 字符串判断开头或结尾是否是指定的字符

  • str.startsWith(""):判定一个字符串是否以另一个字符串开头
  • str.endsWith(""):判定一个字符串是否以另一个字符串结尾
1
2
3
4
5
6
let str = "hello world";
let result = str.startsWith("he");
console.log(result); //true
//当为两个参数时,第二个表示开始位数。
result = str.startsWith("he",1);
console.log(result); //false

3.11 返回指定位置的字符

  • str.charAt(index) 返回在指定index位置的字符,且起始索引为0
  • str.charCodeAt(index) 返回在指定index位置字符的Unicode编码,且起始索引为0
1
2
"HELLO WORLD!".charAt(0);   // H
"HELLO WORLD!".charCodeAt(0); // 72 (a:65 A:97)

3.12 复制字符串指定次数,并将它们连接在一起返回

string.repeat(count) => “woman”.repeat(2);

3.13 fromCharCode生成字符串

可接受一个或多个指定的 Unicode 值,然后返回其字符串组合
语法:String.fromCharCode(numX,numX,…,numX)

1
console.log(String.fromCharCode(72,69,76,76,79));   // HELLO

4. 对象

对象的值以名称:值对的方式来书写(名称和值由冒号分隔)

1
2
3
4
5
6
7
8
9
10
11
12
let person = {  //这里的person称为对象
firstName:"Bill", // 这是属性
lastName:"Gates",
age:62,
eyeColor:"blue",
fullName : function() { // 这就是方法
return this.firstName + " " + this.lastName;
}
};
// 对person对象中进行新增实例
person.sex = "man";
person.fullName();

JavaScript中的this关键词

1
2
3
4
5
在函数定义中,this 引用该函数的“拥有者”。

在上面的例子中,this 指的是“拥有” fullName 函数的 person 对象。

换言之,this.firstName 的意思是 this 对象的 firstName 属性。

对象的访问方式

对象名.属性名 或者
对象名["属性名"]

遍历js对象

obj.hasOwnProperty(key):判断对象中是否含有目标属性名

  • for…in循环
  • Object.keys() 是 ES5 新增的一个对象方法,该方法返回对象自身属性名组成的数组
  • Object.getOwnPropertyNames() 是 ES5 新增的一个对象方法,该方法返回对象自身属性名组成的数组
1
2
3
4
5
6
7
8
9
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(obj[key]);
}
}

Object.keys(obj).forEach((key) => {
console.log(obj[key]) // foo
})

5. 数值

number.toString():将数值型转化为字符串型

1
2
3
var n = 15;
console.log(typeof(n)); // 为字数值类型number
a = n.toString(); // a为字符串类型

toFixed(number) 将数值保留为指定的小数位数,并再转化为String类型

1
2
3
4
5
6
var x = 9.656;
x.toFixed(0); // 返回 10
x.toFixed(2); // 返回 9.66
x.toFixed(4); // 返回 9.6560
x.toFixed(6); // 返回 9.656000
console.log(typeof(x.toFixed(2))) // 返回"String"

把变量转换为数值

这三种 JavaScript 方法可用于将变量转换为数字:

  • Number()方法
  • parseFloat(string)方法:指定字符串的首个字符是否是数字。如果首字符为数字,则对其进行解析直到完整取出第一个数值,并返回首个数值,如果首字符不是数字则直接返回NaN
  • parseInt(string,radix)方法:指定字符串的首个字符是否是数字。如果首字符为数字,将字符串取出首个完整数值,并转化为指定radix进制,如果首字符不是数字,就直接返回NaN
1
2
3
4
5
6
7
8
9
10
11
parseInt("10.008");      // 返回 10
parseInt("10 20 30"); // 返回 10
parseInt("10 years"); // 返回 10
parseInt("years 10"); // 返回 NaN
parseInt("30",8); // 返回24,将30转化为8进制

parseFloat("10"); // 返回 10
parseFloat("10.33"); // 返回 10.33
parseFloat("10 20 30"); // 返回 10
parseFloat("10 years"); // 返回 10
parseFloat("years 10"); // 返回 NaN

6. 数组

创建方式

1
2
3
4
5
6
7
8
9
// 第一种(推荐)
let A=[12,78,78,78,89];
console.log(A);

// 第二种
let B=new Array();
B[0]=12;
B[1]=34;
console.log(B);

数组访问与修改

访问数组元素:通过索引(从0开始)来引用某个数组元素

var name=car[0] 访问数组值
var car[0] = “Benz” 修改数组值,即新数组为[“Benz”,”Volvo”,”BMW”]

数组属性和方法

  1. length:返回数组元素的数目

  2. 遍历数组元素:最安全是使用for循环

    1
    2
    3
    4
    5
    6
    let fruits;
    fruits = ["Banana", "Orange", "Apple", "Mango"];

    for (i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
    }
  3. push()和pop()

  • push(): 把里面的内容添加到数组末尾,并返回修改后的长度
  • pop(): 移除数组最后一个元素,并返回该值
1
2
3
let fruits = ["Banana"];
fruits.push("Lemon");
console.log(fruits) // ["Banana", "Lemon"]
  1. shift()和unshift()
  • shift(): 移除数组第一个元素,并返回该值
  • unshift(): 把里面的内容添加到数组开头,并返回修改后的长度
  1. join()
    格式:数组.join(“指定拼接符”) 将所有数组元素结合为一个字符串

    1
    2
    3
    var fruits = ["Banana", "Orange","Apple", "Mango"];
    console.log(fruits.join(" * "));
    // Banana * Orange * Apple * Mango
  2. reverse()反转数组中的元素

    1
    2
    3
    let fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.sort(); // 对 fruits 中的元素进行排序
    fruits.reverse(); // 对数组元素进行反转
  3. isNaN()全局函数来判断一个值是否是NaN值
    isNaN(1000/“apple”) true
    isNaN(1000) false

  4. slice()截取数组,返回从原数组中指定开始下标到结束下标之间的项组成的新数组、不改变原数组、支持负索引(负索引加上数组长度就是正索引)、满足区间左闭右开原则

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    let arr = [1,3,5,7,9,11];
    let arrCopy = arr.slice(1);
    let arrCopy2 = arr.slice(1,4);
    let arrCopy3 = arr.slice(1,-2);
    let arrCopy4 = arr.slice(-4,-1);
    console.log(arr);    //[1, 3, 5, 7, 9, 11](原数组没变)
    console.log(arrCopy); //[3, 5, 7, 9, 11]
    console.log(arrCopy2); //[3, 5, 7]
    console.log(arrCopy3); //[3, 5, 7]
    console.log(arrCopy4); //[5, 7, 9]
  5. sort(fun)方法以字母或数值对数组进行排序
    语法:array.sort(fun);参数fun可选,规定排序顺序,必须是函数。

  • 如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照ascii编码顺序进行排序
  • 如果想按照其他规则进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,比较函数两个参数a和b,返回a-b 升序,返回b-a 降序
  • 数组中的对象也可按照某个属性值进行排列
  • 原数组会发生改变

不传参数,将不会按照数值大小排序,按照字符编码的顺序进行排序

1
2
3
4
5
6
7
let arr = ['General','Tom','Bob','John','Army'];
let resArr = arr.sort();
console.log(resArr); //输出 ["Army", "Bob", "General", "John", "Tom"]

let arr2 = [30,10,111,35,1899,50,45];
let resArr2 = arr2.sort();
console.log(resArr2); //输出 [10, 111, 1899, 30, 35, 45, 50]

传入参数,实现升序,降序

1
2
3
4
5
6
7
8
9
10
11
12
13
// 实现升序
let arr3 = [30,10,111,35,1899,50,45];
arr3.sort(function(a,b){
return a - b;
});
console.log(arr3);//输出 [10, 30, 35, 45, 50, 111, 1899]

// 实现降序
let arr4 = [30,10,111,35,1899,50,45];
arr4.sort((a,b) => {
return b - a;
});
console.log(arr4);//输出 [1899, 111, 50, 45, 35, 30, 10]

根据数组中的对象的某个属性值排序

1
2
3
4
5
6
let arr5 = [{id:10},{id:5},{id:6},{id:9},{id:2},{id:3}];
arr5.sort(function(a,b){
return a.id - b.id
});
console.log(arr5);
// 输出新的排序 [{id: 2},{id: 3},...,{id: 10}]

根据数组中的对象的某个属性值排序(字符串类型):localeCompare

场景:localeCompare()方法实现中文排序、sort方法实现数字英文混合排序

1
2
3
4
5
let arr6 = [{id: "General"},{id:"Tom"},{id:"Alice"},{id:"Bob"},{id:"Ahri"},{id:"Kiko"}];
arr6.sort(function(a,b){
return a.id.localeCompare(b.id);
});
console.log(arr6);

参考文章


 评论

联系我 | Contact with me

Copyright © 2019-2020 谁知你知我,我知你知深。此恨经年深,比情度日久

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议