JavaScript基础入门05

目录

• JavaScript 基础入门05
  • 严格模式
    • 严格模式的设计目的
    • 如何开启使用严格模式
    • 显式报错
  • 字符串
    • 字符串的创建
    • 字符串实例方法之常用API

JavaScript 基础入门05

严格模式

运行js代码的过程中，除了正常的代码运行模式以外，还存在严格模式（strict mode）。意义在于让代码采用更加严格的JavaScript语法。

需要注意的是，相同的代码，在不同的模式下可能会有不同的结果。很多时候在正常模式下能够运行的代码在严格模式下未必能够运行。

严格模式的设计目的

早期的 JavaScript 语言有很多设计不合理的地方，但是为了兼容以前的代码，又不能改变老的语法，只能不断添加新的语法，引导程序员使用新语法。

严格模式是从 ES5 进入标准的，主要目的有以下几个。

• 明确禁止一些不合理、不严谨的语法，减少 JavaScript 语言的一些怪异行为。
• 增加更多报错的场合，消除代码运行的一些不安全之处，保证代码运行的安全。
• 提高编译器效率，增加运行速度。
• 为未来新版本的 JavaScript 语法做好铺垫。

总之，严格模式体现了 JavaScript 更合理、更安全、更严谨的发展方向。

如何开启使用严格模式

在js代码中想要开启严格模式，需要通过一行字符串来开启：

'use strict';

需要注意的是，老版本的引擎会把它当作一行普普通通的字符串，并且忽略。而新版本的浏览器引擎可以很好的支持严格模式。

严格模式即可以用于当前的整个脚本，也可以用于单个函数。

1、严格模式应用于整个脚本文件

use strict放在脚本文件的第一行，整个脚本都将以严格模式运行。如果这行语句不在第一行就无效，整个脚本会以正常模式运行。(严格地说，只要前面不是产生实际运行结果的语句，use strict可以不在第一行，比如直接跟在一个空的分号后面，或者跟在注释后面。)

<script>
  'use strict';
  console.log('这是严格模式');
</script>

<script>
  console.log('这是正常模式');
</script>

在上面的代码中，一个网页文件中有两段JavaScript代码。前面的script标签里面开启了严格模式，后面的script标签里面则没有开启严格模式。

如果use strict写成下面这样，则不起作用，严格模式必须从代码一开始就生效。

<script>
  console.log('这是正常模式');
  'use strict';
</script>

2、严格模式应用在单个函数

use strict放在函数当中的第一行，则整个函数以严格模式来运行。

function strict() {
  'use strict';
  return '这是严格模式';
}

function strict2() {
  'use strict';
  function f() {
    return '这也是严格模式';
  }
  return f();
}

function notStrict() {
  return '这是正常模式';
}

有时，需要把不同的脚本合并在一个文件里面。如果一个脚本是严格模式，另一个脚本不是，它们的合并就可能出错。严格模式的脚本在前，则合并后的脚本都是严格模式；如果正常模式的脚本在前，则合并后的脚本都是正常模式。这两种情况下，合并后的结果都是不正确的。这时可以考虑把整个脚本文件放在一个立即执行的匿名函数之中。

(function () {
  'use strict';
  // some code here
})();

显式报错

严格模式使得js的语法变得更加的严格。更多的操作都会显式的报错。在这其中，有一些操作，在正常模式下只会默默的失败，但是不会报错。

1、只读属性不可写

严格模式下，设置字符串的length属性，会报错。

'use strict';
'abc'.length = 5;
// TypeError: Cannot assign to read only property 'length' of string 'abc'

上面代码报错，因为length是只读属性，严格模式下不可写。正常模式下，改变length属性是无效的，但不会报错。

严格模式下，对只读属性赋值，或者删除不可配置（non-configurable）属性都会报错。

// 对只读属性赋值会报错
'use strict';
Object.defineProperty({}, 'a', {
  value: 37,
  writable: false
});
obj.a = 123;
// TypeError: Cannot assign to read only property 'a' of object #<Object>

// 删除不可配置的属性会报错
'use strict';
var obj = Object.defineProperty({}, 'p', {
  value: 1,
  configurable: false
});
delete obj.p
// TypeError: Cannot delete property 'p' of #<Object>

2、禁止扩展的对象不可扩展。

严格模式下，对禁止扩展的对象添加新属性，会报错。

'use strict';
var obj = {};
Object.preventExtensions(obj);
obj.v = 1;
// Uncaught TypeError: Cannot add property v, object is not extensible

上面代码中，obj对象禁止扩展，添加属性就会报错。

3、eval 、 arguments不可作为标识名

严格模式下，使用eval或者arguments作为标识名，将会报错。下面的语句都会报错。

'use strict';
var eval = 17;
var arguments = 17;
var obj = { set p(arguments) { } };
try { } catch (arguments) { }
function x(eval) { }
function arguments() { }
var y = function eval() { };
var f = new Function('arguments', "'use strict'; return 17;");
// SyntaxError: Unexpected eval or arguments in strict mode

4、函数不能存在重名的参数

正常模式下，如果函数有多个重名的参数，可以用arguments[i]读取。严格模式下，这属于语法错误。

function f(a, a, b) {
  'use strict';
  return a + b;
}
// Uncaught SyntaxError: Duplicate parameter name not allowed in this context

5、进制八进制的前缀0表示法

正常模式下，整数的第一位如果是0,表示是八进制数，比如0100等于十进制的64。

在严格模式下则进制使用这种表示法，整数第一位是0，将会报错。

'use strict';
var n = 0100;
// Uncaught SyntaxError: Octal literals are not allowed in strict mode.

6、 全局变量显式的声明

正常模式当中，如果一个变量没有声明就赋值，默认是全局变量。严格模式下禁止使用这种语法，全局变量必须显式的声明。

'use strict';

v = 1; // 报错，v未声明

for (i = 0; i < 2; i++) { // 报错，i 未声明
  // ...
}

function f() {
  x = 123;
}
f() // 报错，未声明就创建一个全局变量

因此，严格模式下，变量都必须先声明，然后再使用。

7、严格模式下禁止this关键字指向全局对象

正常模式下，函数内部的this可能会指向全局对象，严格模式禁止这种用法，避免无意间创造全局变量。

// 正常模式
function f() {
  console.log(this === window);
}
f() // true

// 严格模式
function f() {
  'use strict';
  console.log(this === undefined);
}
f() // true

上面代码中，严格模式的函数体内部this是undefined。

这种限制对于构造函数尤其有用。使用构造函数时，有时忘了加new，这时this不再指向全局对象，而是报错。

function f() {
  'use strict';
  this.a = 1;
};

f();// 报错，this 未定义

严格模式下，函数直接调用时（不使用new调用），函数内部的this表示undefined（未定义），因此可以用call、apply和bind方法，将任意值绑定在this上面。正常模式下，this指向全局对象，如果绑定的值是非对象，将被自动转为对象再绑定上去，而null和undefined这两个无法转成对象的值，将被忽略。

// 正常模式
function fun() {
  return this;
}

fun() // window
fun.call(2) // Number {2}
fun.call(true) // Boolean {true}
fun.call(null) // window
fun.call(undefined) // window

// 严格模式
'use strict';
function fun() {
  return this;
}

fun() //undefined
fun.call(2) // 2
fun.call(true) // true
fun.call(null) // null
fun.call(undefined) // undefined

上面代码中，可以把任意类型的值，绑定在this上面。

8、严格模式下禁止使用fn.callee、fn.caller

在严格模式下，函数体内禁止使用fn.caller、fn.arguments，否则会报错。

这意味着在函数体内不能调用栈了。

function f1() {
  'use strict';
  f1.caller;    // 报错
  f1.arguments; // 报错
}

f1();

9、禁止删除变量

严格模式下无法删除变量，如果使用delete命令删除一个变量，会报错。只有对象的属性，且属性的描述对象的configurable属性设置为true，才能被delete命令删除。

'use strict';
var x;
delete x; // 语法错误

var obj = Object.create(null, {
  x: {
    value: 1,
    configurable: true
  }
});
delete obj.x; // 删除成功

10、静态绑定

JavaScript 语言的一个特点，就是允许“动态绑定”，即某些属性和方法到底属于哪一个对象，不是在编译时确定的，而是在运行时（runtime）确定的。

严格模式对动态绑定做了一些限制。某些情况下，只允许静态绑定。也就是说，属性和方法到底归属哪个对象，必须在编译阶段就确定。这样做有利于编译效率的提高，也使得代码更容易阅读，更少出现意外。

在严格模式下是禁止使用with语句的。

在正常的模式下，JavaScript语言有两种变量作用域(scope):全局作用域和函数作用域。

在严格模式下多出了第三种作用域:eval作用域。

在正常模式下，eval语句的作用域，取决于它处于全局作用域，还是函数作用域。严格模式下，eval语句本身就是一个作用域，不能够在其所运行的作用域创建新的变量了，简单的说，eval所生成的变量只能用于eval内部。

(function () {
  'use strict';
  var x = 2;
  console.log(eval('var x = 5; x')) // 5
  console.log(x) // 2
})()

上面代码中，由于eval语句内部是一个独立作用域，所以内部的变量x不会泄露到外部。

注意，如果希望eval语句也使用严格模式，有两种方式。

// 方式一
function f1(str){
  'use strict';
  return eval(str);
}
f1('undeclared_variable = 1'); // 报错

// 方式二
function f2(str){
  return eval(str);
}
f2('"use strict";undeclared_variable = 1')  // 报错

上面两种写法，eval内部使用的都是严格模式。

11、arguments不再追踪参数的变化

变量arguments代表函数的参数。严格模式下，函数内部改变参数与arguments的联系被切断了，两者不再存在联动关系。

function f(a) {
  a = 2;
  return [a, arguments[0]];
}
f(1); // 正常模式为[2, 2]

function f(a) {
  'use strict';
  a = 2;
  return [a, arguments[0]];
}
f(1); // 严格模式为[2, 1]

上面代码中，改变函数的参数，不会反应到arguments对象上来。

12、严格模式表示向下一个版本过渡

JavaScript 语言的下一个版本是 ECMAScript 6，为了平稳过渡，严格模式引入了一些 ES6 语法。

ES6 会引入块级作用域。为了与新版本接轨，ES5 的严格模式只允许在全局作用域或函数作用域声明函数。也就是说，不允许在非函数的代码块内声明函数。

'use strict';
if (true) {
  function f1() { } // 语法错误
}

for (var i = 0; i < 5; i++) {
  function f2() { } // 语法错误
}

上面代码在if代码块和for代码块中声明了函数，ES5 环境会报错。

注意，如果是 ES6 环境，上面的代码不会报错，因为 ES6 允许在代码块之中声明函数。

13、保留字

为了向将来 JavaScript 的新版本过渡，严格模式新增了一些保留字（implements、interface、let、package、private、protected、public、static、yield等）。使用这些词作为变量名将会报错。

function package(protected) { // 语法错误
  'use strict';
  var implements; // 语法错误
}

字符串

字符串的创建

字符串(String)对象是JavaScript原生三大包装对象之一，用来生成字符串对象。

var s1 = 'abc';
var s2 = new String('abc');

typeof s1 // "string"
typeof s2 // "object"

s2.valueOf() // "abc"

在上面的代码中，变量s1是字符串，s2是对象。由于s2是字符串对象s2.valueOf方法返回的就是它所对应的原始字符串。

字符串对象是一个类似数组的对象（很像数组，但不是数组）。

new String('abc')
// String {0: "a", 1: "b", 2: "c", length: 3}

(new String('abc'))[1] // "b"

上面代码中，字符串abc对应的字符串对象，有数值键（0、1、2）和length属性，所以可以像数组那样取值。

除了用作构造函数，String对象还可以当作工具方法使用，将任意类型的值转为字符串。

String(true) // "true"
String(5) // "5"

上面代码将布尔值true和数值5，分别转换为字符串。

字符串实例方法之常用API

1、 String.prototype.charAt()

charAt方法返回指定位置的字符，参数是从0开始编号的位置。

var str = "hello,world";

console.log(str.charAt(1)); // e

这个方法我们可以使用数组下标来代替。

var str = "hello,world";
console.log(str[1]);//e

需要注意的是，如果参数为负数，或者大于等于字符串的长度，charAt返回空字符串。

2、String.prototype.slice()

slice方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（不含该位置）。

'JavaScript'.slice(0, 4) // "Java"

如果省略第二个参数，则表示子字符串一直到原字符串结束。

'JavaScript'.slice(4) // "Script"

如果参数是负值，表示从结尾开始倒数计算的位置，即该负值加上字符串长度。

'JavaScript'.slice(-6) // "Script"
'JavaScript'.slice(0, -6) // "Java"
'JavaScript'.slice(-2, -1) // "p"

如果第一个参数大于第二个参数，slice方法返回一个空字符串。

'JavaScript'.slice(2, 1) // ""

3、String.prototype.substring()

substring方法用于从原字符串取出子字符串并返回，不改变原字符串，跟slice方法很相像。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含该位置）。

'JavaScript'.substring(0, 4) // "Java"

如果省略第二个参数，则表示子字符串一直到原字符串的结束。

'JavaScript'.substring(4) // "Script"

如果第一个参数大于第二个参数，substring方法会自动更换两个参数的位置。

'JavaScript'.substring(10, 4) // "Script"
// 等同于
'JavaScript'.substring(4, 10) // "Script"

上面代码中，调换substring方法的两个参数，都得到同样的结果。

如果参数是负数，substring方法会自动将负数转为0。

'JavaScript'.substring(-3) // "JavaScript"
'JavaScript'.substring(4, -3) // "Java"

上面代码中，第二个例子的参数-3会自动变成0，等同于'JavaScript'.substring(4, 0)。由于第二个参数小于第一个参数，会自动互换位置，所以返回Java。

由于这些规则违反直觉，因此不建议使用substring方法，应该优先使用slice。

4、String.prototype.indexOf() ,String.prototype.lastIndexOf()

indexOf方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回的结果是匹配开始的位置。如果返回-1，就表示不匹配。

'hello world'.indexOf('o') // 4
'JavaScript'.indexOf('script') // -1

indexOf方法还可以接受第二个参数，表示从该位置开始向后匹配。

'hello world'.indexOf('o', 6) // 7

lastIndexOf方法的用法跟indexOf方法一致，主要的区别是lastIndexOf从尾部开始匹配，indexOf则是从头部开始匹配。

'hello world'.lastIndexOf('o') // 7

另外，lastIndexOf的第二个参数表示从该位置起向前匹配。

'hello world'.lastIndexOf('o', 6) // 4

5、String.prototype.search(),String.prototype.replace()

search方法的用法基本等于match,但是返回值为匹配的第一个位置。如果没有找到匹配，则返回-1。

'cat, bat, sat, fat'.search('at') // 1

search方法还可以使用正则表达式作为参数。

replace方法用于替换匹配的子字符串，一般情况下只替换第一个匹配（除非使用带有g修饰符的正则表达式）。

'aaa'.replace('a', 'b') // "baa"

replace方法还可以使用正则表达式作为参数.

6、String.prototype.split()

split方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。

'a|b|c'.split('|') // ["a", "b", "c"]

如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。

'a|b|c'.split('') // ["a", "|", "b", "|", "c"]

如果省略参数，则返回数组的唯一成员就是原字符串。

'a|b|c'.split() // ["a|b|c"]

如果满足分割规则的两个部分紧邻着（即两个分割符中间没有其他字符），则返回数组之中会有一个空字符串。

'a||c'.split('|') // ['a', '', 'c']

如果满足分割规则的部分处于字符串的开头或结尾（即它的前面或后面没有其他字符），则返回数组的第一个或最后一个成员是一个空字符串。

'|b|c'.split('|') // ["", "b", "c"]
'a|b|'.split('|') // ["a", "b", ""]

split方法还可以接受第二个参数，限定返回数组的最大成员数。

'a|b|c'.split('|', 0) // []
'a|b|c'.split('|', 1) // ["a"]
'a|b|c'.split('|', 2) // ["a", "b"]
'a|b|c'.split('|', 3) // ["a", "b", "c"]
'a|b|c'.split('|', 4) // ["a", "b", "c"]

上面代码中，split方法的第二个参数，决定了返回数组的成员数。

split方法还可以使用正则表达式作为参数.

7、String.prototype.charCodeAt()

charCodeAt方法返回字符串指定位置的 Unicode 码点（十进制表示），相当于String.fromCharCode()的逆操作。

'abc'.charCodeAt(1) // 98

上面代码中，abc的1号位置的字符是b，它的 Unicode 码点是98。

如果没有任何参数，charCodeAt返回首字符的 Unicode 码点。

'abc'.charCodeAt() // 97

如果参数为负数，或大于等于字符串的长度，charCodeAt返回NaN。

'abc'.charCodeAt(-1) // NaN
'abc'.charCodeAt(4) // NaN

注意，charCodeAt方法返回的 Unicode 码点不会大于65536（0xFFFF），也就是说，只返回两个字节的字符的码点。如果遇到码点大于 65536 的字符（四个字节的字符），必需连续使用两次charCodeAt，不仅读入charCodeAt(i)，还要读入charCodeAt(i+1)，将两个值放在一起，才能得到准确的字符。

8、String.prototype.concat()

concat方法用于连接两个字符串，返回一个新字符串，不改变原字符串。

var s1 = 'abc';
var s2 = 'def';

s1.concat(s2) // "abcdef"
s1 // "abc"

该方法可以接受多个参数。

'a'.concat('b', 'c') // "abc"

如果参数不是字符串，concat方法会将其先转为字符串，然后再连接。

var one = 1;
var two = 2;
var three = '3';

''.concat(one, two, three) // "123"
one + two + three // "33"

上面代码中，concat方法将参数先转成字符串再连接，所以返回的是一个三个字符的字符串。作为对比，加号运算符在两个运算数都是数值时，不会转换类型，所以返回的是一个两个字符的字符串。

9、String.prototype.trim()

trim方法用于去除字符串两端的空格，返回一个新字符串，不改变原字符串。

'  hello world  '.trim()
// "hello world"

该方法去除的不仅是空格，还包括制表符（\t、\v）、换行符（\n）和回车符（\r）。

'\r\nabc \t'.trim() // 'abc'

10、String.prototype.toLowerCase()，String.prototype.toUpperCase()

toLowerCase方法用于将一个字符串全部转为小写，toUpperCase则是全部转为大写。它们都返回一个新字符串，不改变原字符串。

'Hello World'.toLowerCase()
// "hello world"

'Hello World'.toUpperCase()
// "HELLO WORLD"

11、String.prototype.match()

match方法用于确定原字符串是否匹配某个子字符串，返回一个数组，成员为匹配的第一个字符串。如果没有找到匹配，则返回null。

'cat, bat, sat, fat'.match('at') // ["at"]
'cat, bat, sat, fat'.match('xt') // null

返回的数组还有index属性和input属性，分别表示匹配字符串开始的位置和原始字符串。

var matches = 'cat, bat, sat, fat'.match('at');
matches.index // 1
matches.input // "cat, bat, sat, fat"

小练习:

留言过滤:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>留言过滤</h1>
  <textarea  id="txt1" cols="30" rows="10"></textarea>
  <br>
  <input type="button" id="btn1" value="点击过滤"> <br>
  <textarea  id="txt2" cols="30" rows="10"></textarea>
</body>
<script>
// 获取元素
var oTxt1 = document.getElementById("txt1");
var oTxt2 = document.getElementById("txt2");
var btn = document.getElementById("btn1");

btn.onclick = function () {
  // alert(123)
  var re = /DDS|fuck|FUCK|DSD/g;
  oTxt2.value = oTxt1.value.replace(re,"***");
};

</script>
</html>

简单的注册验证：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>简易版注册</h1>
  <hr>
  <form action="" name="myform">
    <table>
      <tr>
        <td>用户名:</td>
        <td><input type="text" name="username" onblur="checkUser()"></td>
        <td id="username_info"></td>
      </tr>

      <tr>
        <td>邮箱:</td>
        <td><input type="email" name="email" onblur="checkEmail()"></td>
        <td id="email_info"></td>
      </tr>

      <tr>
        <td>密码:</td>
        <td><input type="password" name="pwd" onblur="checkPwd()"></td>
        <td id="pwd_info"></td>
      </tr>

      <tr>
        <td>确认密码:</td>
        <td><input type="password" name="repwd" onblur="checkRePwd()"></td>
        <td id="repwd_info"></td>
      </tr>

      <tr>
        <td></td>
        <td><input type="submit" value="提交数据"></td>
        <td></td>
      </tr>
    </table>
  </form>
</body>
<script>
  // 验证用户名
  function checkUser() {
    // 获取用户输入
    var value = document.myform.username.value;
    // 获取id
    var td = document.getElementById('username_info');

    // 使用正则进行验证
    if(value.search(/^\w{6,12}$/) === -1){
      td.innerHTML = "用户名必须是6-12位数字、字母、下划线";
      td.style.color = "red";
    }else {
      td.innerHTML = "用户名可用";
      td.style.color = "green";
    }

  }

  // 验证邮箱
  function checkEmail() {
    // 获取用户输入
    var value = document.myform.email.value;
    // 获取id
    var td = document.getElementById('email_info');

    // 使用正则进行验证
    if(value.search(/^\w+@\w+(\.\w+){1,3}$/) === -1){
      td.innerHTML = "邮箱格式不正确";
      td.style.color = "red";
    }else {
      td.innerHTML = "邮箱可用";
      td.style.color = "green";
    }

  }

  // 验证密码
  function checkPwd() {
    // 获取用户输入
    var pwd = document.myform.pwd.value;
    // 获取id
    var td = document.getElementById('pwd_info');

    // 使用正则进行验证
    if(pwd.length < 6 || pwd.length > 18){
      td.innerHTML = "密码长度必须是6-18位";
      td.style.color = "red";
    }else {
      td.innerHTML = "密码可用";
      td.style.color = "green";
    }

  }

  // 验证第二次输入的密码
  function checkRePwd() {
    // 获取用户输入
    var pwd = document.myform.pwd.value;
    var repwd = document.myform.repwd.value;
    // 获取id
    var td = document.getElementById('repwd_info');

    if(pwd !== repwd){
      td.innerHTML = "两次密码不一致";
      td.style.color = "red";
    }else{
      td.innerHTML = "输入正确";
      td.style.color = "green";
    }
  }
</script>
</html>

统计字符串中每个字符出现的次数

// 创建一个字符串和一个对象
var str = "adminhelloworldadn",obj = {};

// 开启循环进行处理
for(var i=0;i<str.length;i++){
  obj[str[i]] = (obj[str[i]] + 1) || 1;
}
console.log(obj); // 打印出来是一个对象的形式
// 为了便于阅读，转换成json
var json = JSON.stringify(obj);
console.log(json); // {"a":2,"d":3,"m":1,"i":1,"n":2,"h":1,"e":1,"l":3,"o":2,"w":1,"r":1}