DAY07-ES5-String

第一节

严格模式[理解]

概念

2011年ECMAscript5发布

除了正常运行模式，ECMAscript5添加了第二种运行模式：“严格模式”（strict mode）。顾名思义，这种模式是的Javascript在更严格的条件下运行。

严格模式的作用：

1.消除了JS语法的一些不合理、不严谨之处，减少一些怪异行为；2.消除代码运行的一些不安全之处，保证代码运行的安全；3.提高编译器效率，增加运行速度；4.为未来新版本的JS做好铺垫严格模式体现了JS更合理，更安全，更严谨的发展方向，包括IE10在内的主流浏览器都已经支持它了注意：同样的代码，在“严格模式”中，可能会有不一样的运行结果，一些在“正常模式”下可以正常运行的语句，在“严格模式”下将不能运行，掌握这些内容，有助于更细致深入的理解JS，让你编程一个更好的程序员

严格模式的调用

进入严格模式:  "use strict" ;注意:老的浏览器会直接忽略.

严格模式作用范围

整个脚本文件

    将 "use strict" 放在脚本文件的第一行，则整个脚本文件都将以“严格模式”运行，如果这行语句不在第一行，则无效，整个脚本以“正常模式”运行。如果不同模式的代码文件合并成一个文件，这一点需要特别注意!

1全局变量声明时，必须加关键字(var)

例:在非严格和严格模式下输出未使用var声明的变量a

非严格: a = 10;console.log(a);严格:  "use strict";a = 10;console.log(a);

函数内不允许出现重名参数

例: 声明函数,三个形参(a,b,b),对比严格和非严格模式

     "use strict";function fn(a,b,b){console.log(a);console.log(b);}fn(2,3,4)

3 arguments对象不允许被动态改变

例:函数内部修改形参的值,a=20,对比严格和非严格模式的输出

     function fn(a,b){a = 20;console.log(a);console.log(b);console.log(arguments);}fn(2,3)

4 this无法指向全局对象

例:在函数的内部输出this,查看结果

 function fn(){console.log(this);}fn();

5.新增的保留字：implements，interface，let，package，private，protected，public，static，yield

针对单个函数：

将 “use strict” 放在函数的第一行，则整个函数以“严格模式”运行。

 // 使用范围分为全局和局部两种// 全局:整个js都有效// 局部:只在函数中//  "use strict";// 全局有效b = 299;alert(b);// 函数内有效function fn(){"use strict";a  =100;alert(a);}fn();

数组常见方法[掌握]

indexOf

语法: arr.indexOf(item,start);

方法可返回数组中某个指定的元素位置,索引位置从0开始,如果在数组中没找到指定元素则返回 -1。

参数	描述
item	必须。查找的元素。
start	可选的整数参数。规定在数组中开始检索的位置

例: 从数组 arr = [“a”,“b”,“c”,“d”,“e”];找出a的位置 .

   var arr = ["a","b","c","d","e"];arr.indexOf("a");        //0arr.indexOf("g");

forEach

方法用于调用数组的每个元素，并将元素传递给回调函数。没有任何返回值.

语法: array.forEach(function(value, index, arr));

function(currentValue, index, arr) 是回调函数必须得.

值	含义
value	必需。当前元素.
index	可选。当前元素的索引值。
arr	可选。当前元素所属的数组对象。

例:遍历数组 arr =[“a”,“b”,255,512,“hello”]

        var arr = ["a","b",255,512,"hello"];var a = arr.forEach(function(value,index){console.log(value);console.log(index);})console.log(a);

map

语法: array.map(function(value,index,arr))

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

   方法按照原始数组元素顺序依次处理元素。

function(currentValue, index, arr) 是回调函数必须得.

值	含义
value	必需。当前元素.
index	可选。当前元素的索引值。
arr	可选。当前元素所属的数组对象。

注意： map() 不会对空数组进行检测,map() 不会改变原始数组。

例:将arr2 = [4,5,6,7,8]乘以1.3后返回

     var arr2 = [4,5,6,7,8]var b = arr2.map(function(value,index){
//          console.log(value)
//          console.log(index)return value+value*0.3;})console.log(arr2)console.log(b)

filter

语法:array.filter(function(currentValue,index,arr))

filter() 方法创建一个新的数组，是将函数执行一遍，只有在布尔值为true的时候才会返回该数据

function(value, index, arr) 是回调函数必须得.

值	含义
value	必需。当前元素.
index	可选。当前元素的索引值。
arr	可选。当前元素所属的数组对象。

注意： filter() 不会对空数组进行检测, 不会改变原始数组。

例1: 返回 arr2 = [4,5,6,7,8]大于5的数据

     var c = arr2.filter(function(value,index){console.log(value)console.log(index)return value <= 5})console.log(c)

例2: 把一个Array中的空字符串删掉，可以这么写：

var arr = ['A', '', 'B', null, undefined, 'C', '  '];var r = arr.filter(function (s) {return s && s.trim(); // 注意：IE9以下的版本没有trim()方法});console.log(r);

find和findIndex(断言函数)

find 找到满足条件的元素后,直接返回,且停止循环.如果没有满足条件的则返回undefined.

findIndex 则返回第一个匹配元素的索引

1 获取数组中年龄大于 18 的第一个元素

    var ages = [3, 20, 10, 18];// var res6 = ages.find(function (v) {//   console.log(v);//   return v > 18;// });// console.log(res6);var res7 = ages.findIndex(function (v) {return v > 18;});console.log(res7);

some

用于检测数组中的元素是否满足指定条件,有一个满足则返回true,没有满足的返回false

1 检测数组中是否有元素大于 18:

    var ages = [3, 10, 18, 20];var res8 = ages.some(function (v) {return v > 118;});console.log(res8);

reduce

array.reduce(function(total, currentValue), initialValue)
total  计算结束后的返回值
currentValue  当前元素
initialValue 初始值,传给函数的初始值

接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值

1 统计数组的的和

    var ages = [3, 10, 18, 20];var sum = ages.reduce((x, y) => {return x + y}, 0)console.log(sum);

是否包含

indexOf() 返回元素第一次出现的位置,找不到返回-1

lastIndexOf() 返回元素最后一次出现的位置,找不到返回-1

includes() 元素存在返回true,不存在返回false

    var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];console.log(numbers.includes(31));console.log(numbers.indexOf(2));console.log(numbers.lastIndexOf(3));

字符串常见API

indexOf(data,start);

用于返回某个数组或者字符串中规定字符或者字符串的位置；

例1:找出str = "abcdefg”中a的位置

  var str = "abcdefg”;str.indexOf("a");    //0 返回当前查询字符所在的位置的下标，如无，返回-1，start表示从第几位开始查询。

charAt(index);

//返回指定位置的字符,index为下标

例1:找出str = "abcdefg”中下标为3的字符

var str = "abcdefg";console.log(str.charAt(2));

substring(start,end);

//返回从指定位置，到结束位置（不含）的字符串，如果不指定结束位置，则从开始位置到结尾

例:截取一个字符串

    var str = "abcdefg";console.log(str.substring(1,3));

slice(n,m);

同substring，需要注意和数组中方法slice()的相似

例:分割str = “hoeololoworlodo”;字符串

  var str = "hoeololoworlodo";console.log(str.slice(1,3));

split(“-”);

通过指定字符分割字符串，返回一个数组 ‘-’ 表示分割符号.是任意的

例1:将字符串str = “hoeololoworlodo”;转化为数组

   // split()  将字符串转化为数组var str = "hoeololoworlodo";// 以o为分隔符var arr = str.split('o');// console.log(arr);var str1 = 'I want to betifule girl';// 以空格为分隔符,返回一个数组var arr1 = str1.split(' ');console.log(arr1);

将2:全班人的姓名字符串 str = “小崔,老王,东东,琪琪,亚楠” 通过’,'进行分割;

 var str = "小崔,老王,东东,琪琪,亚楠";var arr2 = str2.split(',');console.log(arr2);

replace()

replace(“需要替换的字符串”,“替换之后的字符串”) //将字符串中的一些字符替换为另外一些字符。最好配合正则使用,默认只替换一次

例1:用’哈’替换str = “hoeololoworlodo”;中的o

var str = "hoeololoworlodo";
// 使用'哈'替换o
var str1 = str.replace('o','哈');
console.log(str1);

多学一招:其他字符串相关的方法

lastIndexOf（）：返回字符串最后出现的位置
toLowerCase()：转成小写
toUpperCase()：转成大写去除字符串的头尾空格:var str = "       Runoob        ";
alert(str.trim());

应用与练习

1.敏感词过滤【去你大爷的=====>*****】

// var str1 = '中午休息不,去你大爷的哈哈';
// var str2 = str1.replace('去你大爷','*****');

2.用户名格式要求

    1.不允许为空，有提示2.不允许以数字开头3.长度必须在6~20之间function checkUser(name){// 判断不能为空if(!name){alert('不能为空!');return;}// 不允许以数字开头// isNaN()的转化原理和Number// parseInt(name) 如果数字开头,返回数字,非数字开头返回NaN// isNaN(数字) false   isNaN(NaN)  true// !false true   !true false// console.log(isNaN(parseInt(name)))// if(!isNaN(parseInt(name))){ // isNaN为真表示非数字开头//   alert('不能以数字开头');//    return;//   }// 数字转化为true,NaN转化为falseif(parseInt(name)){alert('不能以数字开头');return;}// 长度必须在6~20之间  // length可以返回字符串长度// console.log(name.length)if(name.length>20 || name.length<6){alert('长度不符合要求');return;}}//  checkUser('abc1245');// 以数字开头的checkUser('1245abc'); // true

京东列表页的实现

实现效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rhb7CgvH-1662125260035)(/1560484207716.png)]

前后台交互流程

js的重要作用之一－－－－交互－－－－人机交互（事件）－－－－服务器交互（ajax).

服务器交互，从服务器获取数据，数据的处理方式，将json－－－－转换成字符串操作.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l9yEmPPb-1662125260037)(/1577170701548.png)]

准备:字符串的拼接

        // 使用+ 实现字符串的拼接var name = "admin"var agr = 18var sex  = 1var str = "我叫"+ name +"，我今年"+ agr +"岁，我的性别是"+sexvar str = "我叫"+ name +"，我今年"+ agr +"岁，我的性别是"+sexconsole.log(str);// 获取节点(html元素)var ocont = document.getElementById("cont");// 使用innerHTML向页面中追加内容ocont.innerHTML = ocont.innerHTML + "hello"ocont.innerHTML = ocont.innerHTML + "hello"

使用json使用jd的列表页

<html><head><title></title><meta charset="utf-8"/><style type="text/css">*{margin: 0;padding: 0;}#cont{width: 1000px;overflow: hidden;border: solid 1px black;margin: 30px auto;}.box{width: 250px;border: solid 1px black;box-sizing: border-box;text-align: center;float: left;}.box img{width: 90%;display: block;margin: 10px auto;}.box span{display: block;color: red;}.box p{height: 52px;overflow: hidden;font-size: 18px;line-height: 26px;}</style></head><body><div id="cont"></div></body></html>
<script>// 1 构造json数据,每一个json中就是一个商品
var json=[{"src":"http://img12.360buyimg.com/n7/jfs/t1/4136/40/6201/250287/5ba1f333E745fc8b9/b34c5ccc4c4fd548.jpg","price":1099,"name":"小米8青春版 镜面渐变AI双摄 6GB+64GB 深空灰 全网通4G"},{"src":"https://img11.360buyimg.com/n7/jfs/t2278/69/129833021/96430/df8863b1/55f0e861Nf585867f.jpg","price":3599.00,"name":"Apple iPhone 6s Plus (A1699) 128G 银色 移动联通电信4G手机"},{"src":"https://img10.360buyimg.com/n7/jfs/t3985/131/486256904/433682/1d9fc4d0/584fcc81N1a31a2c5.jpg","price":3059.00,"name":"华为 Mate 9 Pro 6GB+128GB版 银钻灰 移动联通电信4G手机 双卡双待"},{"src":"https://img10.360buyimg.com/n7/jfs/t10729/149/1744838942/273871/5b00d30c/59e5bd89Ndc046ccd.jpg","price":1099.00,"name":"荣耀 畅玩7X 4GB+32GB 全网通4G全面屏手机 标配版 幻夜黑"},{"src":"https://img10.360buyimg.com/n7/jfs/t3985/131/486256904/433682/1d9fc4d0/584fcc81N1a31a2c5.jpg","price":3059.00,"name":"华为 Mate 9 Pro 6GB+128GB版 银钻灰 移动联通电信4G手机 双卡双待"},{"src":"https://img10.360buyimg.com/n7/jfs/t10729/149/1744838942/273871/5b00d30c/59e5bd89Ndc046ccd.jpg","price":1099.00,"name":"荣耀 畅玩7X 4GB+32GB 全网通4G全面屏手机 标配版 幻夜黑"},{"src":"https://img10.360buyimg.com/n7/jfs/t3985/131/486256904/433682/1d9fc4d0/584fcc81N1a31a2c5.jpg","price":3059.00,"name":"华为 Mate 9 Pro 6GB+128GB版 银钻灰 移动联通电信4G手机 双卡双待"},{"src":"https://img10.360buyimg.com/n7/jfs/t10729/149/1744838942/273871/5b00d30c/59e5bd89Ndc046ccd.jpg","price":1099.00,"name":"荣耀 畅玩7X 4GB+32GB 全网通4G全面屏手机 标配版 幻夜黑"}];// 2 循环输出每一件商品// 声明变量,保存拼接的html标签var str = '';for(var i=0;i<json.length;i++){var src = json[i].src;var name = json[i].name;var price = json[i].price;// console.log(json[i].src);// console.log(json[i].name);// console.log(json[i].price);// 3 将商品的图片,价格,名字拼接// str =str+'<div class="box"><img src="'+src+'" alt=""><span>'+price+'</span><p>'+name+'</p></div>';// 拼接方式2,使用反引号拼接str +=`<div class="box"><img src="${src}" alt=""><span>${price}</span><p>${name}</p></div>`;}console.log(str);// 4 追加到页面中
//    console.log(json);// 获取节点var divObj = document.getElementById('cont');// 追加html到页面中divObj.innerHTML = str;
</script>

ASCII码和字符集

现象比对:

var a='你好';
var b='你坏';
console.log(a<b));

ASCII：American Standard Code for Information Interchange，美国信息交换标准代码。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rrx5B34d-1662125260037)(/1560491628694.png)]

汉字ASSIC的转化 http://www.ip138.com/ascii/

字符集:

var a='你好';
var b='你坏';
console.log(a)

乱码:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ak4II9RX-1662125260038)(/1560491747779.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SPTIDgMq-1662125260039)(/1560491769572.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GNosBxiw-1662125260040)(/1560491825323.png)]

网页中使用utf8,最后保存用gbk,乱码.

GBK编码：

GBK全称《汉字内码扩展规范》（GBK即“国标”、“扩展”汉语拼音的第一个字母，英文名称：Chinese Internal Code Specification）。GBK 向下与GB2312编码兼容，向上支持 ISO 10646.1国际标准，是前者向后者过渡过程中的一个承上启下的产物。UTF-8编码：
UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，又称万国码。 UTF-8用1到4个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）

字符串常见API(了解)

1.myStr.charCodeAt(num)

方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。

字符串中第一个字符的下标是 0。如果 index 是负数，或大于等于字符串的长度，则 charCodeAt() 返回 NaN

例1:在字符串 ‘小姐姐’ 中，我们将返回位置 1 的字符的 Unicode 编码

<script type="text/javascript">var str="小姐姐"
document.write(str.charCodeAt(1))</script>

2.String.fromCharCode()

String的意思就是不能用自己定义的字符串名字来调用，只能用String来定义调用。

接受一个或多个指定的Unicode值，然后返回一个或多个字符串。(把unicode编码转换为字符串)。

例1:根据 Unicode 来输出 “HELLO” 和 “ABC”

<script type="text/javascript">// Avar n = String.fromCharCode(65); console.log(n);//Hellovar n = String.fromCharCode(72, 69, 76, 76, 79);console.log(n);// A-Z   65-90
</script>

作业1:

1.统计字符串中字符的个数？

hello world.

hello javaScript

str= 'hello world';
console.log(str.length);

2 aabccd统计每个字符出现的次数，结果显示a 2，b 1，c 2，d 1，去掉重复的字符，使结果显示abcd

使用.

     var str = "ertyudfghjrtyufghrtyfg";
//      var str = ["a","a","b","b","c","c","a"];var obj = {};
//      统计数量for(var i=0;i<str.length;i++){if(obj[str[i]]){obj[str[i]]++}else{obj[str[i]] = 1}}console.log(obj)//       去重var noreplaceStr = "";for(var i in obj){noreplaceStr += i;}console.log(noreplaceStr)

扩展

值引用和址引用

简单数据类型引入变量存储的时候,存的是值本身 =====>值类型

复杂数据类型,引入变量存的时候,存的是引用、地址 =====>引用类型

场景1:基本变量的值引用

 var num = 11;var num1 = num;num = 20;console.log(num);console.log(num1);

场景2:对象的址引用

var obj = {name:"zs",age:18
}var obj1 = obj;
obj1.name = "ls";
console.log(obj.name);
console.log(obj1.name);

场景3:函数中的局部变量


function fn(x, y) {// 函数的参数 其实就是函数内部的局部变量x = x + 1;y = y + 1;console.log(x);console.log(y);
}var x = 10;
var y = 20;
fn(x, y);
console.log(x);
console.log(y);

场景4:函数中使用对象进行址传递

var p = {name:"zs",age:18
}
function fn(person) {person.name = 'ls';console.log(person.name);
}
fn(p);
console.log(p.name);

去除字符串重复

        var arr=[1,3,1,2,3,5,2,3,4,6];var arr1=[];for(var `=0;i<arr.length;i++){if(arr1.indexOf(arr[i])===-1){arr1.push(arr[i]);}}

map的使用

不改变原数组，完成一个新数组，里面有num和总价

     var arr=[{id:1001,name:"电视",price:4500},{id:1002,name:"电脑",price:6500},{id:1003,name:"冰箱",price:2000},{id:1004,name:"洗衣机",price:1000},{id:1005,name:"手机",price:5500}];var arr1=arr.map(function(item){var o={};for(var prop in item){o[prop]=item[prop];}o.num=parseInt(Math.random()*9+1);o.total=o.price*o.num;return o;})console.log(arr1,arr)

.name);

### 去除字符串重复

    var arr=[1,3,1,2,3,5,2,3,4,6];var arr1=[];for(var `=0;i<arr.length;i++){if(arr1.indexOf(arr[i])===-1){arr1.push(arr[i]);}}

### map的使用不改变原数组，完成一个新数组，里面有num和总价

 var arr=[{id:1001,name:"电视",price:4500},{id:1002,name:"电脑",price:6500},{id:1003,name:"冰箱",price:2000},{id:1004,name:"洗衣机",price:1000},{id:1005,name:"手机",price:5500}];var arr1=arr.map(function(item){var o={};for(var prop in item){o[prop]=item[prop];}o.num=parseInt(Math.random()*9+1);o.total=o.price*o.num;return o;})console.log(arr1,arr)

DAY07-ES5-String相关推荐

session 的工作原理以及使用细节和url编码
/**********************************************模拟页面************************************************* ...
ES6 极简教程（ES6 Tutorial）文 / 东海陈光剑
ES6 极简教程(ES6 Tutorial) 文 / 东海陈光剑 ECMAScript简介 JavaScript是ECMAScript的实现和扩展,由ECMA(一个类似W3C的标准组织)参与进行标准化 ...
JS笔记(前端小灰狼)
目录 JavaScript基础语法序言 JavaScript发展历史(JS) JavaScript能干什么 JavaScript的组成 JavaScript代码的书写位置行内式 JS 代码(不推荐 ...
超火js库: Lodash API例子
lodash.js是一款超火的js库,在npm上平均周下载量达到了惊人的12,374,096,github start36K!大量框架都用到了lodash,包括拥有123kstart的vue 本文对比 ...
Java知识——精华总结
Java知识--精华总结一.java概述与基础知识 1.何为编程? 编程就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 为了使计算机能够理解人的意图,人类就必须 ...
Day07 - Ruby比一比：Symbol符号与String字串
前情提要: 第六天我们透过Ruby代码练习public,protected和privatemethod时,发现冒号在前面的参数,:mydraft,:myspace,这些就是符号Symbol.在今天,我 ...
ES5、ES6、ES7、ES8
ES5.ES6.ES7.ES8 ES5 Strict Mode 在JS文件或是函数的顶部添加"use strict"即可启用严格模式. "use strict" ...
javascript number转string不用科学计数法_[JavaScript]之数据类型篇
JavaScript共有7种数据类型:number,string,boolean,symbol,undefined,null,object 1. number 整数和浮点数 JavaScript 内部 ...
浅谈JavaScript、ES5、ES6
什么是JavaScript JavaScript一种动态类型.弱类型.基于原型的客户端脚本语言,用来给HTML网页增加动态功能.(好吧,概念什么最讨厌了) 动态: 在运行时确定数据类型.变量使用之前不 ...
【168天】黑马程序员27天视频学习笔记【Day07】
[168天]黑马程序员27天视频学习笔记[Day07] 叨逼叨两句决定了,我会记住这一天! 07-01:构造方法Constructor概述和格式构造方法概述和作用给对象的数据(属性)进行初始化. ...